diff options
author | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-05-21 14:09:04 +0200 |
---|---|---|
committer | Bernhard Posselt <dev@bernhard-posselt.com> | 2014-05-21 14:09:04 +0200 |
commit | d3a774b2bd79654360a3ef12618102abf85a2ce3 (patch) | |
tree | d1337c189c0a6f1f918a54152c2c7de976371cd0 /js | |
parent | 0db81a2fc187a45e8c23160770a01e3050d26780 (diff) |
finish migrating keyboard shortcuts
Diffstat (limited to 'js')
-rw-r--r-- | js/build/app.js | 127 | ||||
-rw-r--r-- | js/gui/keyboardshortcuts.js | 168 |
2 files changed, 253 insertions, 42 deletions
diff --git a/js/build/app.js b/js/build/app.js index 189310712..cad42c8ae 100644 --- a/js/build/app.js +++ b/js/build/app.js @@ -395,14 +395,127 @@ app.service('Settings', function () { this.settings[key] = value; }; }); -(function (document, $) { +/** + * Code in here acts only as a click shortcut mechanism. That's why its not + * being put into a directive since it has to be tested with protractor + * anyways and theres no benefit from wiring it into the angular app + */ +(function (window, document, $) { 'use strict'; - $(document).on('keyup', function (event) { - var keyCode = event.keyCode; - console.log(undefined); - console.log(keyCode); + var noInputFocused, noModifierKey, scrollArea, scrollToItem, scrollToNextItem, scrollToPreviousItem, toggleStar, toggleUnread, expandItem, openLink, getActiveItem; + scrollArea = $('#app-content'); + noInputFocused = function (element) { + return !(element.is('input') && element.is('select') && element.is('textarea') && element.is('checkbox')); + }; + noModifierKey = function (event) { + return !(event.shiftKey || event.altKey || event.ctrlKey || event.metaKey); + }; + scrollToItem = function (item, scrollArea) { + scrollArea.scrollTop(item.offset().top - scrollArea.offset().top + scrollArea.scrollTop()); + }; + scrollToNextItem = function (scrollArea) { + var items, counter, item; + items = scrollArea.find('.feed_item'); + for (counter = 0; counter < items.length; counter += 1) { + item = $(items[counter]); + if (item.position().top > 1) { + scrollToItem(scrollArea, item); + return; + } + } + // in case this is the last item it should still scroll below the top + scrollArea.scrollTop(scrollArea.prop('scrollHeight')); + }; + scrollToPreviousItem = function (scrollArea) { + var items, item, counter, previous; + items = scrollArea.find('.feed_item'); + for (counter = 0; counter < items.length; counter += 1) { + item = $(items[counter]); + if (item.position().top >= 0) { + previous = item.prev(); + // if there are no items before the current one + if (previous.length > 0) { + scrollToItem(scrollArea, previous); + } + return; + } + } + // if there was no jump jump to the last element + if (items.length > 0) { + scrollToItem(scrollArea, items.last()); + } + }; + getActiveItem = function (scrollArea) { + var items, item, counter; + items = scrollArea.find('.feed_item'); + for (counter = 0; counter < items.length; counter += 1) { + item = $(items[counter]); + // 130px of the item should be visible + if (item.height() + item.position().top > 30) { + return item; + } + } + }; + toggleUnread = function (scrollArea) { + var item = getActiveItem(scrollArea); + item.find('.keep_unread').trigger('click'); + }; + toggleStar = function (scrollArea) { + var item = getActiveItem(scrollArea); + item.find('.item_utils .star').trigger('click'); + }; + expandItem = function (scrollArea) { + var item = getActiveItem(scrollArea); + item.find('.item_heading a').trigger('click'); + }; + openLink = function (scrollArea) { + var item = getActiveItem(scrollArea).find('.item_title a'); + item.trigger('click'); + // mark read + window.open(item.attr('href'), '_blank'); + }; + $(document).keyup(function (event) { + var keyCode; + keyCode = event.keyCode; + if (noInputFocused($(':focus')) && noModifierKey(event)) { + // j, n, right arrow + if ([ + 74, + 78, + 34 + ].indexOf(keyCode) >= 0) { + event.preventDefault(); + scrollToNextItem(scrollArea); // k, p, left arrow + } else if ([ + 75, + 80, + 37 + ].indexOf(keyCode) >= 0) { + event.preventDefault(); + scrollToPreviousItem(scrollArea); // u + } else if ([85].indexOf(keyCode) >= 0) { + event.preventDefault(); + toggleUnread(scrollArea); // e + } else if ([69].indexOf(keyCode) >= 0) { + event.preventDefault(); + expandItem(scrollArea); // s, i, l + } else if ([ + 73, + 83, + 76 + ].indexOf(keyCode) >= 0) { + event.preventDefault(); + toggleStar(scrollArea); // h + } else if ([72].indexOf(keyCode) >= 0) { + event.preventDefault(); + toggleStar(scrollArea); + scrollToNextItem(scrollArea); // o + } else if ([79].indexOf(keyCode) >= 0) { + event.preventDefault(); + openLink(scrollArea); + } + } }); - console.log('hi'); -}(document, jQuery)); +}(window, document, jQuery)); })(angular, jQuery, OC, oc_requesttoken);
\ No newline at end of file diff --git a/js/gui/keyboardshortcuts.js b/js/gui/keyboardshortcuts.js index 3062e6dac..ba777dc16 100644 --- a/js/gui/keyboardshortcuts.js +++ b/js/gui/keyboardshortcuts.js @@ -13,42 +13,140 @@ * being put into a directive since it has to be tested with protractor * anyways and theres no benefit from wiring it into the angular app */ -(function (document, $) { +(function (window, document, $) { 'use strict'; + var noInputFocused, + noModifierKey, + scrollArea, + scrollToItem, + scrollToNextItem, + scrollToPreviousItem, + toggleStar, + toggleUnread, + expandItem, + openLink, + getActiveItem; + + scrollArea = $('#app-content'); + + noInputFocused = function (element) { + return !( + element.is('input') + && element.is('select') + && element.is('textarea') + && element.is('checkbox') + ); + }; + + noModifierKey = function (event) { + return !( + event.shiftKey + || event.altKey + || event.ctrlKey + || event.metaKey + ); + }; + + scrollToItem = function (item, scrollArea) { + scrollArea.scrollTop( + item.offset().top - scrollArea.offset().top + scrollArea.scrollTop() + ); + }; + + scrollToNextItem = function (scrollArea) { + var items, + counter, + item; + + items = scrollArea.find('.feed_item'); + + for (counter = 0; counter < items.length; counter += 1) { + item = $(items[counter]); + + if (item.position().top > 1) { + scrollToItem(scrollArea, item); + return; + } + } + + // in case this is the last item it should still scroll below the top + scrollArea.scrollTop(scrollArea.prop('scrollHeight')); + + }; + + scrollToPreviousItem = function (scrollArea) { + var items, + item, + counter, + previous; + + items = scrollArea.find('.feed_item'); + + for (counter = 0; counter < items.length; counter += 1) { + item = $(items[counter]); + + if (item.position().top >= 0) { + previous = item.prev(); + + // if there are no items before the current one + if (previous.length > 0) { + scrollToItem(scrollArea, previous); + } + + return; + } + } + + // if there was no jump jump to the last element + if (items.length > 0) { + scrollToItem(scrollArea, items.last()); + } + }; + + getActiveItem = function (scrollArea) { + var items, + item, + counter; + + items = scrollArea.find('.feed_item'); + + for (counter = 0; counter < items.length; counter += 1) { + item = $(items[counter]); + + // 130px of the item should be visible + if ((item.height() + item.position().top) > 30) { + return item; + } + } + }; + + toggleUnread = function (scrollArea) { + var item = getActiveItem(scrollArea); + item.find('.keep_unread').trigger('click'); + }; + + toggleStar = function (scrollArea) { + var item = getActiveItem(scrollArea); + item.find('.item_utils .star').trigger('click'); + }; + + expandItem = function (scrollArea) { + var item = getActiveItem(scrollArea); + item.find('.item_heading a').trigger('click'); + }; + + openLink = function (scrollArea) { + var item = getActiveItem(scrollArea).find('.item_title a'); + item.trigger('click'); // mark read + window.open(item.attr('href'), '_blank'); + }; + $(document).keyup(function (event) { - var keyCode, - noInputFocused, - noModifierKey, - scrollArea, - jumpToNextItem, - jumpToPreviousItem, - toggleStar, - toggleUnread, - expandItem, - openLink, - getActiveItem; + var keyCode; keyCode = event.keyCode; - scrollArea = $('#app-content'); - - noInputFocused = function (element) { - return !( - element.is('input') - && element.is('select') - && element.is('textarea') - && element.is('checkbox') - ); - }; - - noModifierKey = function (event) { - return !( - event.shiftKey - || event.altKey - || event.ctrlKey - || event.metaKey - ); - }; + if (noInputFocused($(':focus')) && noModifierKey(event)) { @@ -56,13 +154,13 @@ if ([74, 78, 34].indexOf(keyCode) >= 0) { event.preventDefault(); - jumpToNextItem(scrollArea); + scrollToNextItem(scrollArea); // k, p, left arrow } else if ([75, 80, 37].indexOf(keyCode) >= 0) { event.preventDefault(); - jumpToPreviousItem(scrollArea); + scrollToPreviousItem(scrollArea); // u } else if ([85].indexOf(keyCode) >= 0) { @@ -87,7 +185,7 @@ event.preventDefault(); toggleStar(scrollArea); - jumpToNextItem(scrollArea); + scrollToNextItem(scrollArea); // o } else if ([79].indexOf(keyCode) >= 0) { @@ -100,4 +198,4 @@ } }); -}(document, jQuery));
\ No newline at end of file +}(window, document, jQuery));
\ No newline at end of file |