More keyboard shortcuts
Nick Sergeant
parent
673e84fa71
commit
3f76b3d193
|
|
@ -134,6 +134,10 @@ header.main {
|
|||
width: 175px;
|
||||
.border-radius(3px);
|
||||
.inset-box-shadow(0, 1px, 0px, #1D4249);
|
||||
|
||||
&:focus {
|
||||
border-color: #62D5E1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -384,7 +388,10 @@ article.snipt {
|
|||
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;
|
||||
|
|
@ -415,7 +422,7 @@ article.snipt {
|
|||
pre {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: normal 12px @Consolas;
|
||||
font: normal 12px/16px @Consolas;
|
||||
font-weight: normal !important;
|
||||
overflow-x: auto;
|
||||
margin: 0 15px;
|
||||
|
|
@ -661,6 +668,8 @@ 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;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,30 +1,40 @@
|
|||
(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;
|
||||
|
|
@ -38,25 +48,13 @@
|
|||
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');
|
||||
|
|
@ -69,6 +67,25 @@
|
|||
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({
|
||||
|
|
@ -91,31 +108,46 @@
|
|||
$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');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% load humanize %}
|
||||
|
||||
<article class="snipt {% if not snipt.public %}private-snipt{% endif %}">
|
||||
<article class="snipt {% if not snipt.public %}private-snipt{% endif %}{% if snipt.get_line_count > 8 %}expandable{% endif %}">
|
||||
<div class="number">#{{ snipt.id }}</div>
|
||||
<div class="group">
|
||||
<div class="container">
|
||||
|
|
|
|||
Loading…
Reference in New Issue