master
Nick Sergeant 2012-01-15 19:50:14 -05:00
parent 3f76b3d193
commit 1db314ebb5
3 changed files with 92 additions and 44 deletions

View File

@ -487,6 +487,9 @@ header.main div.inner form.search div.infield input {
-moz-box-shadow: inset 0 1px 0px #1d4249; -moz-box-shadow: inset 0 1px 0px #1d4249;
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 { header.main div.inner nav.public {
float: left; float: left;
} }
@ -726,7 +729,10 @@ article.snipt div.container header h1 {
article.snipt div.container header h1 a { article.snipt div.container header h1 a {
color: #666; color: #666;
display: block; display: block;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none; text-decoration: none;
white-space: nowrap;
-webkit-transition: color .08s linear; -webkit-transition: color .08s linear;
-moz-transition: color .08s linear; -moz-transition: color .08s linear;
-o-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 { article.snipt div.container section.code div.highlight pre {
background: transparent; background: transparent;
border: none; border: none;
font: normal 12px Consolas, Menlo, "Courier New", monospace; font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
font-weight: normal !important; font-weight: normal !important;
overflow-x: auto; overflow-x: auto;
margin: 0 15px; margin: 0 15px;
@ -973,6 +979,8 @@ article.snipt div.expanded section.code a.expand span.lines {
} }
article.snipt.selected div.container { article.snipt.selected div.container {
-webkit-box-shadow: 0 0 20px #85D2DD; -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 { article.snipt.selected div.container:after {
display: none; display: none;

View File

@ -963,13 +963,21 @@ jQuery(function($) {
(function(Snipt) { (function(Snipt) {
Snipt.SniptModel = Backbone.Model.extend({ Snipt.SniptModel = Backbone.Model.extend({
url: '',
title: ''
}); });
SniptView = Backbone.View.extend({ SniptView = Backbone.View.extend({
initialize: function() { 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.model.view = this;
this.$el = $(this.el);
this.$aside = $('aside', this.$el); this.$aside = $('aside', this.$el);
this.$container = $('div.container', this.$el); this.$container = $('div.container', this.$el);
this.$raw = $('div.raw', this.$container); this.$raw = $('div.raw', this.$container);
@ -978,15 +986,17 @@ jQuery(function($) {
events: { events: {
'click a.copy': 'copy', 'click a.copy': 'copy',
'click a.expand': 'expand', 'click a.expand': 'expand',
'click .container': 'clickSelect',
'copy': 'copy',
'detail': 'detail', 'detail': 'detail',
'expand': 'expand',
'next': 'next', 'next': 'next',
'prev': 'prev', 'prev': 'prev',
'select': 'select' 'select': 'select'
}, },
expand: function() {
this.$container.toggleClass('expanded', 100); clickSelect: function() {
this.$tags.toggleClass('expanded'); this.select(true);
return false;
}, },
copy: function() { copy: function() {
var cmd; var cmd;
@ -1000,25 +1010,13 @@ jQuery(function($) {
window.prompt('Text is selected. To copy: press ' + cmd + '+C then <Enter>', this.$raw.text()); window.prompt('Text is selected. To copy: press ' + cmd + '+C then <Enter>', this.$raw.text());
return false; 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() { 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() { next: function() {
nextSnipt = this.$el.next('article.snipt'); nextSnipt = this.$el.next('article.snipt');
@ -1031,6 +1029,25 @@ jQuery(function($) {
if (prevSnipt.length) { if (prevSnipt.length) {
return prevSnipt.trigger('select'); 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({ SniptListView = Backbone.View.extend({
@ -1053,31 +1070,46 @@ jQuery(function($) {
$snipts = this.$snipts; $snipts = this.$snipts;
$el = this.$el; $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) { if (!$selected) {
$snipts.eq(0).trigger('select'); $snipts.eq(0).trigger('select');
} else { } else {
$selected.trigger('next'); $selected.trigger('next');
} }
}); });
$(document).bind('keydown', 'k', function(e) { $(document).bind('keydown', 'k', function() {
if (!$selected) { if (!$selected) {
$snipts.eq(0).trigger('select'); $snipts.eq(0).trigger('select');
} else { } else {
$selected.trigger('prev'); $selected.trigger('prev');
} }
}); });
$(document).bind('keydown', 'return', function(e) { $(document).bind('keydown', 'o', function(e) {
if (!$selected) {
return false;
}
$selected.trigger('detail');
return false;
});
$(document).bind('keydown', 'esc', function(e) {
if ($selected) { if ($selected) {
$selected.removeClass('selected'); $selected.trigger('detail');
$selected = false; }
});
$(document).bind('keydown', 'return', function(e) {
if ($selected) {
$selected.trigger('detail');
} }
}); });
} }

View File

@ -83,6 +83,9 @@ header.main div.inner form.search div.infield input {
-moz-box-shadow: inset 0 1px 0px #1d4249; -moz-box-shadow: inset 0 1px 0px #1d4249;
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 { header.main div.inner nav.public {
float: left; float: left;
} }
@ -322,7 +325,10 @@ article.snipt div.container header h1 {
article.snipt div.container header h1 a { article.snipt div.container header h1 a {
color: #666; color: #666;
display: block; display: block;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none; text-decoration: none;
white-space: nowrap;
-webkit-transition: color .08s linear; -webkit-transition: color .08s linear;
-moz-transition: color .08s linear; -moz-transition: color .08s linear;
-o-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 { article.snipt div.container section.code div.highlight pre {
background: transparent; background: transparent;
border: none; border: none;
font: normal 12px Consolas, Menlo, "Courier New", monospace; font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
font-weight: normal !important; font-weight: normal !important;
overflow-x: auto; overflow-x: auto;
margin: 0 15px; margin: 0 15px;
@ -569,6 +575,8 @@ article.snipt div.expanded section.code a.expand span.lines {
} }
article.snipt.selected div.container { article.snipt.selected div.container {
-webkit-box-shadow: 0 0 20px #85D2DD; -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 { article.snipt.selected div.container:after {
display: none; display: none;