moar
Nick Sergeant
parent
3f76b3d193
commit
1db314ebb5
|
|
@ -487,6 +487,9 @@ header.main div.inner form.search div.infield input {
|
|||
-moz-box-shadow: inset 0 1px 0px #1d4249;
|
||||
box-shadow: inset 0 1px 0px #1d4249;
|
||||
}
|
||||
header.main div.inner form.search div.infield input:focus {
|
||||
border-color: #62D5E1;
|
||||
}
|
||||
header.main div.inner nav.public {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -726,7 +729,10 @@ article.snipt div.container header h1 {
|
|||
article.snipt div.container header h1 a {
|
||||
color: #666;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: color .08s linear;
|
||||
-moz-transition: color .08s linear;
|
||||
-o-transition: color .08s linear;
|
||||
|
|
@ -753,7 +759,7 @@ article.snipt div.container section.code {
|
|||
article.snipt div.container section.code div.highlight pre {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: normal 12px Consolas, Menlo, "Courier New", monospace;
|
||||
font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
|
||||
font-weight: normal !important;
|
||||
overflow-x: auto;
|
||||
margin: 0 15px;
|
||||
|
|
@ -973,6 +979,8 @@ article.snipt div.expanded section.code a.expand span.lines {
|
|||
}
|
||||
article.snipt.selected div.container {
|
||||
-webkit-box-shadow: 0 0 20px #85D2DD;
|
||||
-moz-box-shadow: 0 0 20px #85D2DD;
|
||||
box-shadow: 0 0 20px #85D2DD;
|
||||
}
|
||||
article.snipt.selected div.container:after {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -963,30 +963,40 @@ jQuery(function($) {
|
|||
(function(Snipt) {
|
||||
|
||||
Snipt.SniptModel = Backbone.Model.extend({
|
||||
url: '',
|
||||
title: ''
|
||||
});
|
||||
SniptView = Backbone.View.extend({
|
||||
|
||||
initialize: function() {
|
||||
this.model = new Snipt.SniptModel();
|
||||
this.$el = $(this.el);
|
||||
this.$h1 = $('header h1 a', this.$el);
|
||||
|
||||
this.model = new Snipt.SniptModel({
|
||||
title: this.$h1.text(),
|
||||
url: this.$h1.attr('href')
|
||||
});
|
||||
this.model.view = this;
|
||||
|
||||
this.$el = $(this.el);
|
||||
this.$aside = $('aside', this.$el);
|
||||
this.$container = $('div.container', this.$el);
|
||||
this.$raw = $('div.raw', this.$container);
|
||||
this.$tags = $('section.tags ul', this.$aside);
|
||||
},
|
||||
events: {
|
||||
'click a.copy': 'copy',
|
||||
'click a.expand': 'expand',
|
||||
'detail': 'detail',
|
||||
'next': 'next',
|
||||
'prev': 'prev',
|
||||
'select': 'select'
|
||||
'click a.copy': 'copy',
|
||||
'click a.expand': 'expand',
|
||||
'click .container': 'clickSelect',
|
||||
'copy': 'copy',
|
||||
'detail': 'detail',
|
||||
'expand': 'expand',
|
||||
'next': 'next',
|
||||
'prev': 'prev',
|
||||
'select': 'select'
|
||||
},
|
||||
expand: function() {
|
||||
this.$container.toggleClass('expanded', 100);
|
||||
this.$tags.toggleClass('expanded');
|
||||
return false;
|
||||
|
||||
clickSelect: function() {
|
||||
this.select(true);
|
||||
},
|
||||
copy: function() {
|
||||
var cmd;
|
||||
|
|
@ -1000,25 +1010,13 @@ jQuery(function($) {
|
|||
window.prompt('Text is selected. To copy: press ' + cmd + '+C then <Enter>', this.$raw.text());
|
||||
return false;
|
||||
},
|
||||
select: function() {
|
||||
|
||||
$('article.selected', SniptList.$el).removeClass('selected');
|
||||
this.$el.addClass('selected');
|
||||
|
||||
if (SniptList.$snipts.index(this.$el) === 0) {
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, 0);
|
||||
} else {
|
||||
$('html, body').animate({
|
||||
scrollTop: this.$el.offset().top - 50
|
||||
}, 0);
|
||||
}
|
||||
|
||||
window.$selected = this.$el;
|
||||
},
|
||||
detail: function() {
|
||||
console.log('Going to detail view for ' + this.$el.find('h1').text());
|
||||
window.location = this.model.get('url');
|
||||
},
|
||||
expand: function() {
|
||||
this.$container.toggleClass('expanded', 100);
|
||||
this.$tags.toggleClass('expanded');
|
||||
return false;
|
||||
},
|
||||
next: function() {
|
||||
nextSnipt = this.$el.next('article.snipt');
|
||||
|
|
@ -1031,6 +1029,25 @@ jQuery(function($) {
|
|||
if (prevSnipt.length) {
|
||||
return prevSnipt.trigger('select');
|
||||
}
|
||||
},
|
||||
select: function(fromClick) {
|
||||
|
||||
$('article.selected', SniptList.$el).removeClass('selected');
|
||||
this.$el.addClass('selected');
|
||||
|
||||
if (fromClick !== true) {
|
||||
if (SniptList.$snipts.index(this.$el) === 0) {
|
||||
$('html, body').animate({
|
||||
scrollTop: 0
|
||||
}, 0);
|
||||
} else {
|
||||
$('html, body').animate({
|
||||
scrollTop: this.$el.offset().top - 50
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
window.$selected = this.$el;
|
||||
}
|
||||
});
|
||||
SniptListView = Backbone.View.extend({
|
||||
|
|
@ -1053,31 +1070,46 @@ jQuery(function($) {
|
|||
$snipts = this.$snipts;
|
||||
$el = this.$el;
|
||||
|
||||
$(document).bind('keydown', 'j', function(e) {
|
||||
$(document).bind('keydown', 'c', function() {
|
||||
if ($selected) {
|
||||
$selected.trigger('copy');
|
||||
}
|
||||
});
|
||||
$(document).bind('keydown', 'e', function() {
|
||||
if ($selected) {
|
||||
if ($selected.hasClass('expandable')) {
|
||||
$selected.trigger('expand');
|
||||
}
|
||||
}
|
||||
});
|
||||
$(document).bind('keydown', 'esc', function() {
|
||||
if ($selected) {
|
||||
$selected.removeClass('selected');
|
||||
$selected = false;
|
||||
}
|
||||
});
|
||||
$(document).bind('keydown', 'j', function() {
|
||||
if (!$selected) {
|
||||
$snipts.eq(0).trigger('select');
|
||||
} else {
|
||||
$selected.trigger('next');
|
||||
}
|
||||
});
|
||||
$(document).bind('keydown', 'k', function(e) {
|
||||
$(document).bind('keydown', 'k', function() {
|
||||
if (!$selected) {
|
||||
$snipts.eq(0).trigger('select');
|
||||
} else {
|
||||
$selected.trigger('prev');
|
||||
}
|
||||
});
|
||||
$(document).bind('keydown', 'return', function(e) {
|
||||
if (!$selected) {
|
||||
return false;
|
||||
}
|
||||
$selected.trigger('detail');
|
||||
return false;
|
||||
});
|
||||
$(document).bind('keydown', 'esc', function(e) {
|
||||
$(document).bind('keydown', 'o', function(e) {
|
||||
if ($selected) {
|
||||
$selected.removeClass('selected');
|
||||
$selected = false;
|
||||
$selected.trigger('detail');
|
||||
}
|
||||
});
|
||||
$(document).bind('keydown', 'return', function(e) {
|
||||
if ($selected) {
|
||||
$selected.trigger('detail');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,6 +83,9 @@ header.main div.inner form.search div.infield input {
|
|||
-moz-box-shadow: inset 0 1px 0px #1d4249;
|
||||
box-shadow: inset 0 1px 0px #1d4249;
|
||||
}
|
||||
header.main div.inner form.search div.infield input:focus {
|
||||
border-color: #62D5E1;
|
||||
}
|
||||
header.main div.inner nav.public {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -322,7 +325,10 @@ article.snipt div.container header h1 {
|
|||
article.snipt div.container header h1 a {
|
||||
color: #666;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
-webkit-transition: color .08s linear;
|
||||
-moz-transition: color .08s linear;
|
||||
-o-transition: color .08s linear;
|
||||
|
|
@ -349,7 +355,7 @@ article.snipt div.container section.code {
|
|||
article.snipt div.container section.code div.highlight pre {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: normal 12px Consolas, Menlo, "Courier New", monospace;
|
||||
font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
|
||||
font-weight: normal !important;
|
||||
overflow-x: auto;
|
||||
margin: 0 15px;
|
||||
|
|
@ -569,6 +575,8 @@ article.snipt div.expanded section.code a.expand span.lines {
|
|||
}
|
||||
article.snipt.selected div.container {
|
||||
-webkit-box-shadow: 0 0 20px #85D2DD;
|
||||
-moz-box-shadow: 0 0 20px #85D2DD;
|
||||
box-shadow: 0 0 20px #85D2DD;
|
||||
}
|
||||
article.snipt.selected div.container:after {
|
||||
display: none;
|
||||
|
|
|
|||
Loading…
Reference in New Issue