Merge pull request #2495 from wallabag/add-shortcuts

Added shortcuts
2025-01-10 17:05:26 +00:00 · 2016-11-16 09:35:59 +01:00 · 2016-11-16 09:35:59 +01:00 · e042a5d78f
commit e042a5d78f
parent 644b340178 94f2057ffe
25 changed files with 230 additions and 44 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -8,3 +8,7 @@ indent_style = space
 indent_size = 4
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.js]
+indent_style = space
+indent_size = 2
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -2,7 +2,11 @@
    "extends": "airbnb-base",
    "parser": "babel-eslint",
    "env": {
-        "browser": true
+        "browser": true,
+        "es6": true
+    },
+    "globals": {
+        "Routing": true
    },
    "rules": {
        "import/no-extraneous-dependencies": ["error", {"devDependencies": true, "optionalDependencies": true, "peerDependencies": true}]
--- a/app/AppKernel.php
+++ b/app/AppKernel.php
@ -30,6 +30,7 @@ class AppKernel extends Kernel
            new Doctrine\Bundle\MigrationsBundle\DoctrineMigrationsBundle(),
            new Craue\ConfigBundle\CraueConfigBundle(),
            new WhiteOctober\PagerfantaBundle\WhiteOctoberPagerfantaBundle(),
+            new FOS\JsRoutingBundle\FOSJsRoutingBundle(),

            // wallabag bundles
            new Wallabag\CoreBundle\WallabagCoreBundle(),
--- a/app/Resources/static/themes/_global/js/bookmarklet.js
+++ b/app/Resources/static/themes/_global/js/bookmarklet.js
@ -1,4 +1,3 @@
-
 top['bookmarklet-url@wallabag.org'] =
    '<!DOCTYPE html><html><head><title>bag it!</title>' +
    '<link rel="icon" href="tpl/img/favicon.ico" />' +
--- a/app/Resources/static/themes/_global/js/shortcuts/entry.js
+++ b/app/Resources/static/themes/_global/js/shortcuts/entry.js
--- a/app/Resources/static/themes/_global/js/shortcuts/main.js
+++ b/app/Resources/static/themes/_global/js/shortcuts/main.js
@ -0,0 +1,15 @@
+import Mousetrap from 'mousetrap';
+
+/** Shortcuts **/
+
+/* Go to */
+Mousetrap.bind('g u', () => { window.location.href = Routing.generate('homepage'); });
+Mousetrap.bind('g s', () => { window.location.href = Routing.generate('starred'); });
+Mousetrap.bind('g r', () => { window.location.href = Routing.generate('archive'); });
+Mousetrap.bind('g a', () => { window.location.href = Routing.generate('all'); });
+Mousetrap.bind('g t', () => { window.location.href = Routing.generate('tag'); });
+Mousetrap.bind('g c', () => { window.location.href = Routing.generate('config'); });
+Mousetrap.bind('g i', () => { window.location.href = Routing.generate('import'); });
+Mousetrap.bind('g d', () => { window.location.href = Routing.generate('developer'); });
+Mousetrap.bind('?', () => { window.location.href = Routing.generate('howto'); });
+Mousetrap.bind('g l', () => { window.location.href = Routing.generate('logout'); });
--- a/app/Resources/static/themes/_global/js/tools.js
+++ b/app/Resources/static/themes/_global/js/tools.js
@ -1,4 +1,6 @@
-const $ = require('jquery');
+import $ from 'jquery';
+import './shortcuts/main';
+import './shortcuts/entry';

 /* Allows inline call qr-code call */
 import jrQrcode from 'jr-qrcode'; // eslint-disable-line
--- a/app/Resources/static/themes/baggy/js/autoCompleteTags.js
+++ b/app/Resources/static/themes/baggy/js/autoCompleteTags.js
@ -5,4 +5,4 @@ function extractLast(term) {
  return split(term).pop();
 }

-export { split, extractLast };
+export default { split, extractLast };
--- a/app/Resources/static/themes/baggy/js/init.js
+++ b/app/Resources/static/themes/baggy/js/init.js
@ -1,11 +1,26 @@
+/* jQuery */
+import $ from 'jquery';
+
+/* eslint-disable no-unused-vars */
+/* jquery has default scope */
+import cookie from 'jquery.cookie';
+import ui from 'jquery-ui-browserify';
+/* eslint-enable no-unused-vars */
+
+/* Annotations */
+import annotator from 'annotator';
+
+/* Shortcuts */
+import './shortcuts/main';
+import './shortcuts/entry';
+import '../../_global/js/shortcuts/main';
+import '../../_global/js/shortcuts/entry';
+
+/* Tools */
 import { savePercent, retrievePercent } from '../../_global/js/tools';
-import { toggleSaveLinkForm } from './uiTools';
-
-const $ = global.jquery = require('jquery');
-require('jquery.cookie');
-require('jquery-ui-browserify');
-const annotator = require('annotator');
+import toggleSaveLinkForm from './uiTools';

+global.jquery = $;

 $.fn.ready(() => {
  const $listmode = $('#listmode');
--- a/app/Resources/static/themes/baggy/js/shortcuts/entry.js
+++ b/app/Resources/static/themes/baggy/js/shortcuts/entry.js
@ -0,0 +1,22 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
+/* Article view */
+Mousetrap.bind('o', () => {
+  $('div#article_toolbar ul.links a.original')[0].click();
+});
+
+/* mark as favorite */
+Mousetrap.bind('s', () => {
+  $('div#article_toolbar ul.links a.favorite')[0].click();
+});
+
+/* mark as read */
+Mousetrap.bind('a', () => {
+  $('div#article_toolbar ul.links a.markasread')[0].click();
+});
+
+/* delete */
+Mousetrap.bind('del', () => {
+  $('div#article_toolbar ul.links a.delete')[0].click();
+});
--- a/app/Resources/static/themes/baggy/js/shortcuts/main.js
+++ b/app/Resources/static/themes/baggy/js/shortcuts/main.js
--- a/app/Resources/static/themes/baggy/js/uiTools.js
+++ b/app/Resources/static/themes/baggy/js/uiTools.js
@ -1,4 +1,4 @@
-const $ = require('jquery');
+import $ from 'jquery';

 function toggleSaveLinkForm(url, event) {
  $('#add-link-result').empty();
@ -32,4 +32,4 @@ function toggleSaveLinkForm(url, event) {
  plainUrl.focus();
 }

-export { toggleSaveLinkForm };
+export default toggleSaveLinkForm;
--- a/app/Resources/static/themes/material/js/init.js
+++ b/app/Resources/static/themes/material/js/init.js
@ -1,10 +1,21 @@
+/* jQuery */
+import $ from 'jquery';
+
+/* Annotations */
+import annotator from 'annotator';
+
+/* Tools */
 import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';

-const $ = require('jquery');
+/* Import shortcuts */
+import './shortcuts/main';
+import './shortcuts/entry';
+import '../../_global/js/shortcuts/main';
+import '../../_global/js/shortcuts/entry';
+
+require('materialize'); // eslint-disable-line

 global.jQuery = $;
-require('materialize'); // eslint-disable-line
-const annotator = require('annotator');

 $(document).ready(() => {
  // sideNav
--- a/app/Resources/static/themes/material/js/shortcuts/entry.js
+++ b/app/Resources/static/themes/material/js/shortcuts/entry.js
@ -0,0 +1,22 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
+/* open original article */
+Mousetrap.bind('o', () => {
+  $('ul.side-nav a.original i')[0].click();
+});
+
+/* mark as favorite */
+Mousetrap.bind('s', () => {
+  $('ul.side-nav a.favorite i')[0].click();
+});
+
+/* mark as read */
+Mousetrap.bind('a', () => {
+  $('ul.side-nav a.markasread i')[0].click();
+});
+
+/* delete */
+Mousetrap.bind('del', () => {
+  $('ul.side-nav a.delete i')[0].click();
+});
--- a/app/Resources/static/themes/material/js/shortcuts/main.js
+++ b/app/Resources/static/themes/material/js/shortcuts/main.js
@ -0,0 +1,70 @@
+import Mousetrap from 'mousetrap';
+import $ from 'jquery';
+
+function toggleFocus(cardToToogleFocus) {
+  if (cardToToogleFocus) {
+    $(cardToToogleFocus).toggleClass('z-depth-4');
+  }
+}
+
+$(document).ready(() => {
+  let cardIndex = 0;
+  const cardNumber = $('#content ul.data > li').length;
+  let card = $('#content ul.data > li')[cardIndex];
+  const pagination = $('.pagination');
+
+  /* Show nothing on quickstart */
+  if ($('#content > div.quickstart').length > 0) {
+    return;
+  }
+
+  /* If we come from next page */
+  if (window.location.hash === '#prev') {
+    cardIndex = cardNumber - 1;
+    card = $('ul.data > li')[cardIndex];
+  }
+
+  /* Focus current card */
+  toggleFocus(card);
+
+  /* Actions */
+  Mousetrap.bind('g n', () => {
+    $('#nav-btn-add').trigger('click');
+  });
+
+  Mousetrap.bind('esc', () => {
+    $('.close').trigger('click');
+  });
+
+  /* Select right card. If there's a next page, go to next page */
+  Mousetrap.bind('right', () => {
+    if (cardIndex >= 0 && cardIndex < cardNumber - 1) {
+      toggleFocus(card);
+      cardIndex += 1;
+      card = $('ul.data > li')[cardIndex];
+      toggleFocus(card);
+      return;
+    }
+    if (pagination.length > 0 && pagination.find('li.next:not(.disabled)').length > 0 && cardIndex === cardNumber - 1) {
+      window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href');
+    }
+  });
+
+  /* Select previous card. If there's a previous page, go to next page */
+  Mousetrap.bind('left', () => {
+    if (cardIndex > 0 && cardIndex < cardNumber) {
+      toggleFocus(card);
+      cardIndex -= 1;
+      card = $('ul.data > li')[cardIndex];
+      toggleFocus(card);
+      return;
+    }
+    if (pagination.length > 0 && $(pagination).find('li.prev:not(.disabled)').length > 0 && cardIndex === 0) {
+      window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`;
+    }
+  });
+
+  Mousetrap.bind('enter', () => {
+    window.location.href = window.location.origin + $(card).find('span.card-title a').attr('href');
+  });
+});
--- a/app/config/config.yml
+++ b/app/config/config.yml
@ -351,3 +351,16 @@ old_sound_rabbit_mq:
            queue_options:
                name: 'wallabag.import.chrome'
            callback: wallabag_import.consumer.amqp.chrome
+
+fos_js_routing:
+    routes_to_expose:
+        - homepage
+        - starred
+        - archive
+        - all
+        - tag
+        - config
+        - import
+        - developer
+        - howto
+        - logout
--- a/app/config/routing.yml
+++ b/app/config/routing.yml
@ -52,3 +52,6 @@ craue_config_settings_modify:
    path: /settings
    defaults:
        _controller: CraueConfigBundle:Settings:modify
+
+fos_js_routing:
+    resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"
--- a/composer.json
+++ b/composer.json
@ -82,7 +82,8 @@
        "php-amqplib/rabbitmq-bundle": "^1.8",
        "predis/predis": "^1.0",
        "javibravo/simpleue": "^1.0",
-        "symfony/dom-crawler": "^3.1"
+        "symfony/dom-crawler": "^3.1",
+        "friendsofsymfony/jsrouting-bundle": "^1.6"
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "~2.2",
--- a/package.json
+++ b/package.json
@ -101,6 +101,7 @@
    "through": "^2.3.8"
  },
  "dependencies": {
-    "jr-qrcode": "^1.0.5"
+    "jr-qrcode": "^1.0.5",
+    "mousetrap": "^1.6.0"
  }
 }
--- a/src/Wallabag/CoreBundle/Resources/views/base.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/base.html.twig
@ -41,6 +41,8 @@
            {% block css %}
            {% endblock %}
            {% block scripts %}
+            <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
+            <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
            {% endblock %}

            <title>{% block title %}{% endblock %} – wallabag</title>
--- a/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig
@ -11,7 +11,7 @@
        <div id="article_toolbar">
            <ul class="links">
                <li class="topPosF"><a href="#top" title="{{ 'entry.view.left_menu.back_to_top'|trans }}" class="tool top icon icon-arrow-up-thick"><span>{{ 'entry.view.left_menu.set_as_read'|trans }}</span></a></li>
-                <li><a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.view.original_article'|trans }} : {{ entry.title|e }}" class="tool link icon icon-link"><span>{{ entry.domainName|removeWww }}</span></a></li>
+                <li><a href="{{ entry.url|e }}" target="_blank" title="{{ 'entry.view.original_article'|trans }} : {{ entry.title|e }}" class="tool link icon icon-link original"><span>{{ entry.domainName|removeWww }}</span></a></li>
                <li><a title="{{ 'entry.view.left_menu.re_fetch_content'|trans }}" class="tool icon icon-reload" href="{{ path('reload_entry', { 'id': entry.id }) }}"><span>{{ 'entry.view.left_menu.re_fetch_content'|trans }}</span></a></li>

                {% set markAsReadLabel = 'entry.view.left_menu.set_as_unread' %}
@ -19,8 +19,8 @@
                    {% set markAsReadLabel = 'entry.view.left_menu.set_as_read' %}
                {% endif %}

-                <li><a title="{{ markAsReadLabel|trans }}" class="tool icon icon-check {% if entry.isArchived == 0 %}archive-off{% else %}archive{% endif %}" href="{{ path('archive_entry', { 'id': entry.id }) }}"><span>{{ markAsReadLabel|trans }}</span></a></li>
-                <li><a title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" class="tool icon icon-star {% if entry.isStarred == 0 %}fav-off{% else %}fav{% endif %}" href="{{ path('star_entry', { 'id': entry.id }) }}"><span>{{ 'entry.view.left_menu.set_as_starred'|trans }}</span></a></li>
+                <li><a title="{{ markAsReadLabel|trans }}" class="tool icon icon-check {% if entry.isArchived == 0 %}archive-off{% else %}archive{% endif %} markasread" href="{{ path('archive_entry', { 'id': entry.id }) }}"><span>{{ markAsReadLabel|trans }}</span></a></li>
+                <li><a title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" class="tool icon icon-star {% if entry.isStarred == 0 %}fav-off{% else %}fav{% endif %} favorite" href="{{ path('star_entry', { 'id': entry.id }) }}"><span>{{ 'entry.view.left_menu.set_as_starred'|trans }}</span></a></li>
                <li><a id="nav-btn-add-tag" class="tool icon icon-price-tags" title="{{ 'entry.view.left_menu.add_a_tag'|trans }}"><span>{{ 'entry.view.left_menu.add_a_tag'|trans }}</span></a></li>
                <li><a title="{{ 'entry.view.left_menu.delete'|trans }}" class="tool delete icon icon-trash" href="{{ path('delete_entry', { 'id': entry.id }) }}"><span>{{ 'entry.view.left_menu.delete'|trans }}</span></a></li>
                {% if craue_setting('share_public') %}
--- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
+++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entry.html.twig
@ -46,7 +46,7 @@
        </li>

        <li class="bold border-bottom hide-on-med-and-down">
-            <a class="waves-effect collapsible-header" href="{{ entry.url|e }}">
+            <a class="waves-effect collapsible-header original" href="{{ entry.url|e }}" target="_blank">
                <i class="material-icons small">link</i>
                <span>{{ 'entry.view.left_menu.view_original_article'|trans }}</span>
            </a>
@ -67,7 +67,7 @@
        {% endif %}

        <li class="bold hide-on-med-and-down">
-            <a class="waves-effect collapsible-header" title="{{ markAsReadLabel|trans }}" href="{{ path('archive_entry', { 'id': entry.id }) }}" id="markAsRead">
+            <a class="waves-effect collapsible-header markasread" title="{{ markAsReadLabel|trans }}" href="{{ path('archive_entry', { 'id': entry.id }) }}" id="markAsRead">
                <i class="material-icons small">{% if entry.isArchived == 0 %}done{% else %}redo{% endif %}</i>
                <span>{{ markAsReadLabel|trans }}</span>
            </a>
@ -75,14 +75,14 @@
        </li>

        <li class="bold hide-on-med-and-down">
-            <a class="waves-effect collapsible-header" title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" href="{{ path('star_entry', { 'id': entry.id }) }}" id="setFav">
+            <a class="waves-effect collapsible-header favorite" title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" href="{{ path('star_entry', { 'id': entry.id }) }}" id="setFav">
                <i class="material-icons spall">{% if entry.isStarred == 0 %}star_outline{% else %}star{% endif %}</i>
                <span>{{ 'entry.view.left_menu.set_as_starred'|trans }}</span>
            </a>
            <div class="collapsible-body"></div>
        </li>
        <li class="bold border-bottom">
-            <a class="waves-effect collapsible-header" title="{{ 'entry.view.left_menu.delete'|trans }}" href="{{ path('delete_entry', { 'id': entry.id }) }}">
+            <a class="waves-effect collapsible-header delete" title="{{ 'entry.view.left_menu.delete'|trans }}" href="{{ path('delete_entry', { 'id': entry.id }) }}">
                <i class="material-icons small">delete</i>
                <span>{{ 'entry.view.left_menu.delete'|trans }}</span>
            </a>
--- a/web/bundles/wallabagcore/themes/baggy/js/baggy.min.js
+++ b/web/bundles/wallabagcore/themes/baggy/js/baggy.min.js
--- a/web/bundles/wallabagcore/themes/material/js/material.min.js
+++ b/web/bundles/wallabagcore/themes/material/js/material.min.js
--- a/web/js/fos_js_routes.js
+++ b/web/js/fos_js_routes.js