Getting keyboard navigation to work properly.
parent
2be9a5d99c
commit
571056a8c4
|
@ -2,3 +2,4 @@
|
||||||
media/cache
|
media/cache
|
||||||
media/css/style.css
|
media/css/style.css
|
||||||
media/js/script.js
|
media/js/script.js
|
||||||
|
tags
|
||||||
|
|
|
@ -658,6 +658,15 @@ article.snipt {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.selected {
|
||||||
|
div.container {
|
||||||
|
-webkit-box-shadow: 0 0 20px #85D2DD;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
article.private-snipt {
|
article.private-snipt {
|
||||||
div.container {
|
div.container {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,23 +7,23 @@
|
||||||
|
|
||||||
initialize: function(opts) {
|
initialize: function(opts) {
|
||||||
|
|
||||||
// Site variables
|
this.$search_query = $('input#search-query', this.el);
|
||||||
$search_query = $('input#search-query', this.el);
|
this.$snipts = $('section#snipts article.snipt', this.el);
|
||||||
$snipts = $('section#snipts article.snipt', this.el);
|
|
||||||
|
|
||||||
// Init functions
|
|
||||||
this.keyboardShortcuts();
|
this.keyboardShortcuts();
|
||||||
this.inFieldLabels();
|
this.inFieldLabels();
|
||||||
|
|
||||||
// Init snipts
|
// Init snipts
|
||||||
if ($snipts.length) {
|
if (this.$snipts.length) {
|
||||||
SniptListView = Snipt.Views.SniptListView;
|
SniptListView = Snipt.Views.SniptListView;
|
||||||
Snipts = new SniptListView({ 'snipts': $snipts });
|
SniptList = new SniptListView({ 'snipts': this.$snipts });
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
keyboardShortcuts: function() {
|
keyboardShortcuts: function() {
|
||||||
|
|
||||||
|
$search_query = this.$search_query;
|
||||||
|
|
||||||
// Search
|
// Search
|
||||||
$(document).bind('keydown', '/', function(e) {
|
$(document).bind('keydown', '/', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
Snipt.SniptModel = Backbone.Model.extend({
|
Snipt.SniptModel = Backbone.Model.extend({
|
||||||
});
|
});
|
||||||
|
|
||||||
SniptView = Backbone.View.extend({
|
SniptView = Backbone.View.extend({
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.model = new Snipt.SniptModel();
|
this.model = new Snipt.SniptModel();
|
||||||
|
@ -15,8 +14,12 @@
|
||||||
this.$tags = $('section.tags ul', this.$aside);
|
this.$tags = $('section.tags ul', this.$aside);
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
|
'click a.copy': 'copy',
|
||||||
'click a.expand': 'expand',
|
'click a.expand': 'expand',
|
||||||
'click a.copy': 'copy'
|
'detail': 'detail',
|
||||||
|
'next': 'next',
|
||||||
|
'prev': 'prev',
|
||||||
|
'select': 'select'
|
||||||
},
|
},
|
||||||
expand: function() {
|
expand: function() {
|
||||||
this.$container.toggleClass('expanded', 100);
|
this.$container.toggleClass('expanded', 100);
|
||||||
|
@ -34,20 +37,89 @@
|
||||||
}
|
}
|
||||||
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() {
|
||||||
|
console.log('Going to detail view for ' + this.$el.find('h1').text());
|
||||||
|
},
|
||||||
|
next: function() {
|
||||||
|
nextSnipt = this.$el.next('article.snipt');
|
||||||
|
if (nextSnipt.length) {
|
||||||
|
return nextSnipt.trigger('select');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
prev: function() {
|
||||||
|
prevSnipt = this.$el.prev('article.snipt');
|
||||||
|
if (prevSnipt.length) {
|
||||||
|
return prevSnipt.trigger('select');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
SniptListView = Backbone.View.extend({
|
SniptListView = Backbone.View.extend({
|
||||||
el: 'section#snipts',
|
el: 'section#snipts',
|
||||||
|
|
||||||
initialize: function(opts) {
|
initialize: function(opts) {
|
||||||
opts.snipts.each(this.addSnipt);
|
|
||||||
|
this.$snipts = opts.snipts;
|
||||||
|
this.$snipts.each(this.addSnipt);
|
||||||
|
this.$el = $(this.el);
|
||||||
|
|
||||||
|
this.keyboardShortcuts();
|
||||||
},
|
},
|
||||||
addSnipt: function() {
|
addSnipt: function() {
|
||||||
model = new SniptView({ el: this });
|
model = new SniptView({ el: this });
|
||||||
|
},
|
||||||
|
keyboardShortcuts: function() {
|
||||||
|
|
||||||
|
$selected = window.selected;
|
||||||
|
$snipts = this.$snipts;
|
||||||
|
$el = this.$el;
|
||||||
|
|
||||||
|
$(document).bind('keydown', 'j', function(e) {
|
||||||
|
if (!$selected) {
|
||||||
|
$snipts.eq(0).trigger('select');
|
||||||
|
} else {
|
||||||
|
$selected.trigger('next');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$(document).bind('keydown', 'k', function(e) {
|
||||||
|
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) {
|
||||||
|
if ($selected) {
|
||||||
|
$selected.removeClass('selected');
|
||||||
|
$selected = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Snipt.Views = {
|
Snipt.Views = {
|
||||||
'SniptListView': SniptListView
|
'SniptListView': SniptListView
|
||||||
};
|
};
|
||||||
|
|
Binary file not shown.
|
@ -18,7 +18,6 @@
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.infieldlabel.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.infieldlabel.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.hotkeys.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.hotkeys.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.ui.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.ui.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.zclip.js"></script>
|
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/application.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/src/application.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/site.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/site.js"></script>
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/snipt.js"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/snipt.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue