Getting keyboard navigation to work properly.

.hgignore

@@ -2,3 +2,4 @@
 media/cache
 media/css/style.css
 media/js/script.js
+tags

snipt/media/css/style.less

@@ -658,6 +658,15 @@ article.snipt {
             }
         }
     }
+    &.selected {
+        div.container {
+            -webkit-box-shadow: 0 0 20px #85D2DD;
+
+            &:after {
+                display: none;
+            }
+        }
+    }
 }
 article.private-snipt {
     div.container {

snipt/media/js/src/modules/site.js

@@ -7,23 +7,23 @@
 
         initialize: function(opts) {
 
-            // Site variables
-            $search_query = $('input#search-query', this.el);
-            $snipts = $('section#snipts article.snipt', this.el);
+            this.$search_query = $('input#search-query', this.el);
+            this.$snipts = $('section#snipts article.snipt', this.el);
 
-            // Init functions
             this.keyboardShortcuts();
             this.inFieldLabels();
 
             // Init snipts
-            if ($snipts.length) {
+            if (this.$snipts.length) {
                 SniptListView = Snipt.Views.SniptListView;
-                Snipts = new SniptListView({ 'snipts': $snipts });
+                SniptList = new SniptListView({ 'snipts': this.$snipts });
             }
 
         },
         keyboardShortcuts: function() {
 
+            $search_query = this.$search_query;
+
             // Search
             $(document).bind('keydown', '/', function(e) {
                 e.preventDefault();

snipt/media/js/src/modules/snipt.js

@@ -2,7 +2,6 @@
 
     Snipt.SniptModel = Backbone.Model.extend({
     });
-
     SniptView = Backbone.View.extend({
         initialize: function() {
             this.model = new Snipt.SniptModel();
@@ -15,8 +14,12 @@
             this.$tags = $('section.tags ul', this.$aside);
         },
         events: {
+            'click a.copy':   'copy',
             'click a.expand': 'expand',
-            'click a.copy': 'copy'
+            'detail':         'detail',
+            'next':           'next',
+            'prev':           'prev',
+            'select':         'select'
         },
         expand: function() {
             this.$container.toggleClass('expanded', 100);
@@ -34,20 +37,89 @@
             }
             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());
+        },
+        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({
         el: 'section#snipts',
 
         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() {
             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 = {
         'SniptListView': SniptListView
     };

snipt/templates/base.html

@@ -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.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.zclip.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/snipt.js"></script>