Extract Shortcuts controller

assets/controllers/shortcuts_controller.js

@@ -0,0 +1,104 @@
+import { Controller } from '@hotwired/stimulus';
+import Mousetrap from 'mousetrap';
+
+export default class extends Controller {
+  static targets = ['openOriginal', 'markAsFavorite', 'markAsRead', 'deleteEntry', 'showAddUrl', 'showSearch', 'showActions'];
+
+  connect() {
+    /* 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('fos_user_security_logout');
+    });
+
+    /* open original article */
+    Mousetrap.bind('o', () => {
+      if (!this.hasOpenOriginalTarget) {
+        return;
+      }
+
+      this.openOriginalTarget.click();
+    });
+
+    /* mark as favorite */
+    Mousetrap.bind('f', () => {
+      if (!this.hasMarkAsFavoriteTarget) {
+        return;
+      }
+
+      this.markAsFavoriteTarget.click();
+    });
+
+    /* mark as read */
+    Mousetrap.bind('a', () => {
+      if (!this.hasMarkAsReadTarget) {
+        return;
+      }
+
+      this.markAsReadTarget.click();
+    });
+
+    /* delete */
+    Mousetrap.bind('del', () => {
+      if (!this.hasDeleteEntryTarget) {
+        return;
+      }
+
+      this.deleteEntryTarget.click();
+    });
+
+    /* Actions */
+    Mousetrap.bind('g n', (e) => {
+      if (!this.hasShowAddUrlTarget) {
+        return;
+      }
+
+      e.preventDefault();
+      this.showAddUrlTarget.click();
+    });
+
+    Mousetrap.bind('s', (e) => {
+      if (!this.hasShowSearchTarget) {
+        return;
+      }
+
+      e.preventDefault();
+      this.showSearchTarget.click();
+    });
+
+    Mousetrap.bind('esc', (e) => {
+      if (!this.hasShowActionsTarget) {
+        return;
+      }
+
+      e.preventDefault();
+      this.showActionsTarget.click();
+    });
+  }
+}

assets/index.js

@@ -17,7 +17,6 @@ import '@fontsource/oswald';
 
 /* Import shortcuts */
 import './js/shortcuts/main';
-import './js/shortcuts/entry';
 
 /* Theme style */
 import './scss/index.scss';

assets/js/shortcuts/entry.js

@@ -1,26 +0,0 @@
-import Mousetrap from 'mousetrap';
-import $ from 'jquery';
-
-$(document).ready(() => {
-  if ($('#article').length > 0) {
-    /* open original article */
-    Mousetrap.bind('o', () => {
-      $('ul.sidenav a.original i')[0].click();
-    });
-
-    /* mark as favorite */
-    Mousetrap.bind('f', () => {
-      $('ul.sidenav a.favorite i')[0].click();
-    });
-
-    /* mark as read */
-    Mousetrap.bind('a', () => {
-      $('ul.sidenav a.markasread i')[0].click();
-    });
-
-    /* delete */
-    Mousetrap.bind('del', () => {
-      $('ul.sidenav a.delete i')[0].click();
-    });
-  }
-});

assets/js/shortcuts/main.js

@@ -1,18 +1,6 @@
 import Mousetrap from 'mousetrap';
 import $ from 'jquery';
 
-/* 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('fos_user_security_logout'); });
-
 function toggleFocus(cardToToogleFocus) {
   if (cardToToogleFocus) {
     $(cardToToogleFocus).toggleClass('z-depth-4');
@@ -48,21 +36,6 @@ $(document).ready(() => {
   /* Focus current card */
   toggleFocus(card);
 
-  /* Actions */
-  Mousetrap.bind('g n', () => {
-    $('#nav-btn-add').trigger('click');
-    return false;
-  });
-
-  Mousetrap.bind('s', () => {
-    $('#nav-btn-search').trigger('click');
-    return false;
-  });
-
-  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) {

templates/Entry/entry.html.twig

@@ -52,7 +52,7 @@
         </li>
 
         <li class="bold border-bottom hide-on-med-and-down">
-            <a class="waves-effect collapsible-header original" href="{{ entry.url|e }}" target="_blank" rel="noopener">
+            <a class="waves-effect collapsible-header original" href="{{ entry.url|e }}" target="_blank" rel="noopener" data-shortcuts-target="openOriginal">
                 <i class="material-icons small">link</i>
                 <span>{{ 'entry.view.left_menu.view_original_article'|trans }}</span>
             </a>
@@ -76,7 +76,7 @@
 
         {% if is_granted('ARCHIVE', entry) %}
             <li class="bold hide-on-med-and-down">
-                <a class="waves-effect collapsible-header markasread" title="{{ mark_as_read_label|trans }}" href="{{ path('archive_entry', {'id': entry.id, redirect: current_path}) }}" id="markAsRead">
+                <a class="waves-effect collapsible-header markasread" title="{{ mark_as_read_label|trans }}" href="{{ path('archive_entry', {'id': entry.id, redirect: current_path}) }}" id="markAsRead" data-shortcuts-target="markAsRead">
                     <i class="material-icons small">{% if entry.isArchived == 0 %}done{% else %}unarchive{% endif %}</i>
                     <span>{{ mark_as_read_label|trans }}</span>
                 </a>
@@ -86,7 +86,7 @@
 
         {% if is_granted('STAR', entry) %}
             <li class="bold hide-on-med-and-down">
-                <a class="waves-effect collapsible-header favorite" title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" href="{{ path('star_entry', {'id': entry.id, redirect: current_path}) }}" 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, redirect: current_path}) }}" id="setFav" data-shortcuts-target="markAsFavorite">
                     <i class="material-icons small">{% if entry.isStarred == 0 %}star_outline{% else %}star{% endif %}</i>
                     <span>{{ 'entry.view.left_menu.set_as_starred'|trans }}</span>
                 </a>
@@ -96,7 +96,7 @@
 
         {% if is_granted('DELETE', entry) %}
             <li class="bold border-bottom">
-                <a class="waves-effect collapsible-header delete" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" title="{{ 'entry.view.left_menu.delete'|trans }}" href="{{ path('delete_entry', {'id': entry.id, redirect: current_path}) }}">
+                <a class="waves-effect collapsible-header delete" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" title="{{ 'entry.view.left_menu.delete'|trans }}" href="{{ path('delete_entry', {'id': entry.id, redirect: current_path}) }}" data-shortcuts-target="deleteEntry">
                     <i class="material-icons small">delete</i>
                     <span>{{ 'entry.view.left_menu.delete'|trans }}</span>
                 </a>

templates/Entry/new_form.html.twig

@@ -9,7 +9,7 @@
     {% endif %}
 
     {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder', 'data-topbar-target': 'addUrlInput'}}) }}
-    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions"></i>
+    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions" data-shortcuts-target="showActions"></i>
 
     {{ form_rest(form) }}
 </form>

templates/Entry/search_form.html.twig

@@ -11,7 +11,7 @@
     <input type="hidden" name="currentRoute" value="{{ currentRoute }}" />
 
     {{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder', 'data-topbar-target': 'searchInput'}}) }}
-    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions"></i>
+    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions" data-shortcuts-target="showActions"></i>
 
     {{ form_rest(form) }}
 </form>

templates/base.html.twig

@@ -4,7 +4,7 @@
 <!--[if lte IE 7]><html class="no-js ie7 ie67 ie678"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
 <!--[if IE 8]><html class="no-js ie8 ie678"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
 <!--[if gt IE 8]><html class="no-js"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
-<html{% if lang is not empty %} lang="{{ lang }}"{% endif %} class="{{ theme_class() }}" data-controller="dark-theme">
+<html{% if lang is not empty %} lang="{{ lang }}"{% endif %} class="{{ theme_class() }}" data-controller="dark-theme shortcuts">
     <head>
         {% block head %}
             <meta name="viewport" content="initial-scale=1.0">

templates/layout.html.twig

@@ -90,12 +90,12 @@
                 </div>
                 <ul class="input-field nav-panel-buttom">
                     <li class="bold toggle-add-url-container">
-                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add" data-action="topbar#showAddUrl:prevent:stop">
+                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" data-action="topbar#showAddUrl:prevent:stop" data-shortcuts-target="showAddUrl">
                             <i class="material-icons">add</i>
                         </a>
                     </li>
                     <li>
-                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search" data-action="topbar#showSearch:prevent:stop">
+                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" data-action="topbar#showSearch:prevent:stop" data-shortcuts-target="showSearch">
                             <i class="material-icons">search</i>
                         </a>
                     </li>