1 files changed, 76 insertions, 7 deletions

diff --git a/templates/items.html b/templates/items.html
index 093b211..22adbba 100644
--- a/templates/items.html
+++ b/templates/items.html
@@ -64,10 +64,71 @@
         </script>
 
         <script type="text/javascript">
+            /*
+             * Viewport - jQuery selectors for finding elements in viewport
+             *
+             * Copyright (c) 2008-2009 Mika Tuupola
+             *
+             * Licensed under the MIT license:
+             *   http://www.opensource.org/licenses/mit-license.php
+             *
+             * Project home:
+             *  http://www.appelsiini.net/projects/viewport
+             *
+             */
+            (function($) {
+
+                $.belowthefold = function(element, settings) {
+                    var fold = $(window).height() + $(window).scrollTop();
+                    return fold <= $(element).offset().top - settings.threshold;
+                };
+
+                $.abovethetop = function(element, settings) {
+                    var top = $(window).scrollTop();
+                    return top >= $(element).offset().top + $(element).height() - settings.threshold;
+                };
+
+                $.rightofscreen = function(element, settings) {
+                    var fold = $(window).width() + $(window).scrollLeft();
+                    return fold <= $(element).offset().left - settings.threshold;
+                };
+
+                $.leftofscreen = function(element, settings) {
+                    var left = $(window).scrollLeft();
+                    return left >= $(element).offset().left + $(element).width() - settings.threshold;
+                };
+
+                $.inviewport = function(element, settings) {
+                    return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
+                };
+
+                $.extend($.expr[':'], {
+                    "below-the-fold": function(a, i, m) {
+                        return $.belowthefold(a, {threshold : 0});
+                    },
+                    "above-the-top": function(a, i, m) {
+                        return $.abovethetop(a, {threshold : 0});
+                    },
+                    "left-of-screen": function(a, i, m) {
+                        return $.leftofscreen(a, {threshold : 0});
+                    },
+                    "right-of-screen": function(a, i, m) {
+                        return $.rightofscreen(a, {threshold : 0});
+                    },
+                    "in-viewport": function(a, i, m) {
+                        return $.inviewport(a, {threshold : 0});
+                    }
+                });
+            })(jQuery);
+        </script>
+
+        <script type="text/javascript">
             $(document).ready(function() {
                 $("a.headline").on("click", function(event) {
                     event.preventDefault();
                     var target = $(event.target);
+                    $(".entries .highlighted").removeClass("highlighted");
+                    target.parents("li").addClass("highlighted");
                     target.off("click");
                     $.ajax(target.parents("li").attr("data-url")).done(function(data) {
                         if (data.no_content) {
@@ -115,9 +176,13 @@
                     var element = $(".entries .highlighted");
 
                     switch (event.keyCode) {
-                        case 74: // J
+                        case 74: // j
                             element.removeClass("highlighted");
 
+                            if (event.shiftKey) {
+                                element.find("a.headline").trigger("mark-read");
+                            }
+
                             if (element.length == 0) {
                                 $(".entries li:first-child").first().addClass("highlighted");
                             } else {
@@ -129,9 +194,11 @@
                                 }
                             }
 
-                            $.scrollTo(".highlighted", { margin: true, offset: -50 });
+                            if (!$(".entries .highlighted").is(":in-viewport")) {
+                                $.scrollTo(".entries .highlighted", { margin: true, offset: -50 });
+                            }
                         break;
-                        case 75: // K
+                        case 75: // k
                             element.removeClass("highlighted");
 
                             if (element.length == 0) {
@@ -145,9 +212,11 @@
                                 }
                             }
 
-                            $.scrollTo(".highlighted", { margin: true, offset: -50 });
+                            if (!$(".entries .highlighted").is(":in-viewport")) {
+                                $.scrollTo(".entries .highlighted", { margin: true, offset: -50 });
+                            }
                         break;
-                        case 79: // O
+                        case 79: // o
                             var target = $(element).attr("data-target-url");
                             if (target) {
                                 window.open(target, "_blank");
@@ -155,7 +224,7 @@
                                 element.find("a.headline").trigger("click");
                             }
                         break;
-                        case 82: // R
+                        case 82: // r
                             element.find("a.headline").trigger("mark-read");
                         break;
                     }
@@ -167,7 +236,7 @@
         <h1>RSS Entries</h1>
         {% for feed, records in items %}
         <div class="feed">
-            <h2>{{ feed }} <a href="#" class="mark-all-read">Mark All Read</a></h2>
+            <h2>{{ feed }} ({{ records|length }}) <a href="#" class="mark-all-read">Mark All Read</a></h2>
             <ul class="entries">
                 {% for record in records %}
                 <li data-url="{{ record.self_link }}" >