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