Main PR

administrator/language/en-GB/plg_system_shortcut.ini

@@ -0,0 +1,13 @@
+; Joomla! Project
+; (C) 2022 Open Source Matters, Inc. <https://www.joomla.org>
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_SYSTEM_SHORTCUT="System - Keyboard Shortcut"
+PLG_SYSTEM_SHORTCUT_ACTIONS_FORM_LABEL="Form View Actions"
+PLG_SYSTEM_SHORTCUT_ACTIONS_GENERAL_LABEL="General Actions"
+PLG_SYSTEM_SHORTCUT_ACTIONS_LIST_LABEL="List View Actions"
+PLG_SYSTEM_SHORTCUT_CORE_SHORTCUTS_TAB="Core Shortcuts"
+PLG_SYSTEM_SHORTCUT_OVERVIEW_HINT="Press J + X for our keyboard shortcut overview"
+PLG_SYSTEM_SHORTCUT_OVERVIEW_TITLE="Available Joomla Shortcuts"
+PLG_SYSTEM_SHORTCUT_XML_DESCRIPTION="<p>Enables keyboard shortcuts on the administrator site, which can be provided by other plugins and includes directly the following list of shortcuts:<p><ul><li>Save: J + S</li><li>Cancel: J + Q</li><li>New: J + N</li><li>Save & New: J + N</li><li>Save & Close: J + W</li><li>Search: J + S</li><li>Option: J + O</li><li>Help: J + H</li><li>Overview: J + X</li></ul>"

administrator/language/en-GB/plg_system_shortcut.sys.ini

@@ -0,0 +1,7 @@
+; Joomla! Project
+; (C) 2022 Open Source Matters, Inc. <https://www.joomla.org>
+; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
+; Note : All ini files need to be saved as UTF-8
+
+PLG_SYSTEM_SHORTCUT="System - Keyboard Shortcut"
+PLG_SYSTEM_SHORTCUT_XML_DESCRIPTION="System - Keyboard Shortcut Plugin"

build/build-modules-js/settings.json

@@ -386,6 +386,24 @@
         "dependencies": [],
         "licenseFilename": "LICENSE.txt"
       },
+      "hotkeys-js": {
+        "name": "hotkeys.js",
+        "licenseFilename": "LICENSE",
+        "js" : {
+          "dist/hotkeys.js": "js/hotkeys.js",
+          "dist/hotkeys.min.js": "js/hotkeys.min.js"
+        },
+        "provideAssets": [
+          {
+            "name": "hotkeys.js",
+            "type": "script",
+            "uri": "hotkeys.min.js",
+            "attributes": {
+              "defer": true
+            }
+          }
+        ]
+      },
       "jquery": {
         "name": "jquery",
         "js": {

build/media_source/plg_system_shortcut/js/shortcut.es6.js

@@ -0,0 +1,122 @@
+((document, Joomla) => {
+  'use strict';
+
+  if (!Joomla) {
+    throw new Error('Joomla API is not properly initialised');
+  }
+
+  /* global hotkeys */
+  Joomla.addShortcut = (hotkey, callback) => {
+    hotkeys(hotkey, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
+      callback.call();
+    });
+  };
+
+  Joomla.addClickShortcut = (hotkey, selector) => {
+    Joomla.addShortcut(hotkey, () => {
+      const element = document.querySelector(selector);
+      if (element) {
+        element.click();
+      }
+    });
+  };
+
+  Joomla.addFocusShortcut = (hotkey, selector) => {
+    Joomla.addShortcut(hotkey, () => {
+      const element = document.querySelector(selector);
+      if (element) {
+        element.focus();
+      }
+    });
+  };
+
+  const addOverviewHint = () => {
+    const iconElement = document.createElement('span');
+    iconElement.className = 'icon-keyboard fa-keyboard me-2';
+    iconElement.setAttribute('aria-hidden', true);
+    const textElement = document.createElement('span');
+    textElement.innerText = Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_HINT');
+    const hintElement = document.createElement('p');
+    hintElement.appendChild(iconElement);
+    hintElement.appendChild(textElement);
+    const containerElement = document.createElement('section');
+    containerElement.className = 'content pt-4';
+    containerElement.appendChild(hintElement);
+    document.querySelector('.container-main').appendChild(containerElement);
+  };
+
+  const initOverviewModal = () => {
+    const modal = `
+      <div class="modal fade" id="shortcutOverviewModal" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-labelledby="shortcutOverviewModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h3 id="shortcutOverviewModalLabel" class="modal-title">
+                ${Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_TITLE')}
+              </h3>
+              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-3">
+              <div class="mb-3">
+                <h4>${Joomla.Text._('PLG_SYSTEM_SHORTCUT_ACTIONS_GENERAL_LABEL')}</h4>
+                <dl>
+                  <dt>${Joomla.Text._('JHELP')}</dt>
+                  <dd>J + H</dd>
+                  <dt>${Joomla.Text._('JOPTIONS')}</dt>
+                  <dd>J + O</dd>
+                  <dt>${Joomla.Text._('JSEARCH_FILTER')}</dt>
+                  <dd>J + S</dd>
+                </dl>
+
+                <h4>${Joomla.Text._('PLG_SYSTEM_SHORTCUT_ACTIONS_LIST_LABEL')}</h4>
+                <dl>
+                  <dt>${Joomla.Text._('JTOOLBAR_NEW')}</dt>
+                  <dd>J + N</dd>
+                  <dt>${Joomla.Text._('JCANCEL')}</dt>
+                  <dd>J + Q</dd>
+                </dl>
+
+                <h4>${Joomla.Text._('PLG_SYSTEM_SHORTCUT_ACTIONS_FORM_LABEL')}</h4>
+                <dl>
+                  <dt>${Joomla.Text._('JAPPLY')}</dt>
+                  <dd>J + A</dd>
+                  <dt>${Joomla.Text._('JTOOLBAR_SAVE')}</dt>
+                  <dd>J + S</dd>
+                  <dt>${Joomla.Text._('JTOOLBAR_SAVE_AND_NEW')}</dt>
+                  <dd>J + N</dd>
+                  <dt>${Joomla.Text._('JTOOLBAR_CLOSE')}</dt>
+                  <dd>J + Q</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    document.body.insertAdjacentHTML('beforeend', modal);
+
+    const bootstrapModal = new bootstrap.Modal(document.getElementById('shortcutOverviewModal'), {
+      keyboard: true,
+      backdrop: true,
+    });
+    hotkeys('J + X', () => bootstrapModal.show());
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const options = Joomla.getOptions('plg_system_shortcut.shortcuts');
+    Object.values(options).forEach((value) => {
+      if (value.selector.includes('input')) {
+        Joomla.addFocusShortcut(value.shortcut, value.selector);
+      } else {
+        Joomla.addClickShortcut(value.shortcut, value.selector);
+      }
+    });
+    addOverviewHint();
+    initOverviewModal();
+  });
+})(document, Joomla);

installation/sql/mysql/base.sql

@@ -342,6 +342,7 @@ INSERT INTO `#__extensions` (`package_id`, `name`, `type`, `element`, `folder`,
 (0, 'plg_system_sef', 'plugin', 'sef', 'system', 0, 1, 1, 0, 1, '', '', '', 18, 0),
 (0, 'plg_system_sessiongc', 'plugin', 'sessiongc', 'system', 0, 1, 1, 0, 1, '', '', '', 19, 0),
 (0, 'plg_system_skipto', 'plugin', 'skipto', 'system', 0, 1, 1, 0, 1, '', '{}', '', 20, 0),
+(0, 'plg_system_shortcut', 'plugin', 'shortcut', 'system', 0, 1, 1, 0, 0, '', '{}', '', 0, 0),
 (0, 'plg_system_stats', 'plugin', 'stats', 'system', 0, 1, 1, 0, 1, '', '', '', 21, 0),
 (0, 'plg_system_tasknotification', 'plugin', 'tasknotification', 'system', 0, 1, 1, 0, 1, '', '', '', 22, 0),
 (0, 'plg_system_updatenotification', 'plugin', 'updatenotification', 'system', 0, 1, 1, 0, 1, '', '', '', 23, 0),

installation/sql/postgresql/base.sql

@@ -348,6 +348,7 @@ INSERT INTO "#__extensions" ("package_id", "name", "type", "element", "folder",
 (0, 'plg_system_sef', 'plugin', 'sef', 'system', 0, 1, 1, 0, 1, '', '', '', 18, 0),
 (0, 'plg_system_sessiongc', 'plugin', 'sessiongc', 'system', 0, 1, 1, 0, 1, '', '', '', 19, 0),
 (0, 'plg_system_skipto', 'plugin', 'skipto', 'system', 0, 1, 1, 0, 1, '', '{}', '', 20, 0),
+(0, 'plg_system_shortcut', 'plugin', 'shortcut', 'system', 0, 1, 1, 0, 0, '', '{}', '', 0, 0),
 (0, 'plg_system_stats', 'plugin', 'stats', 'system', 0, 1, 1, 0, 1, '', '', '', 21, 0),
 (0, 'plg_system_tasknotification', 'plugin', 'tasknotification', 'system', 0, 1, 1, 0, 1, '', '', '', 22, 0),
 (0, 'plg_system_updatenotification', 'plugin', 'updatenotification', 'system', 0, 1, 1, 0, 1, '', '', '', 23, 0),

package.json

@@ -46,6 +46,7 @@
     "diff": "^5.0.0",
     "dragula": "^3.7.3",
     "focus-visible": "^5.2.0",
+    "hotkeys-js": "^3.9.3",
     "joomla-ui-custom-elements": "^0.2.0",
     "jquery": "^3.6.0",
     "jquery-migrate": "^3.3.2",

plugins/system/shortcut/shortcut.php

@@ -0,0 +1,155 @@
+<?php
+/**
+ * @package     Joomla.Plugins
+ * @subpackage  System.shortcut
+ *
+ * @copyright   (C) 2022 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license     GNU General Public License version 2 or later; see LICENSE.txt
+ */
+
+defined('_JEXEC') or die;
+
+use Joomla\CMS\Application\AdministratorApplication;
+use Joomla\CMS\Event\GenericEvent;
+use Joomla\CMS\Language\Text;
+use Joomla\CMS\Plugin\CMSPlugin;
+use Joomla\CMS\Plugin\PluginHelper;
+use Joomla\Event\Event;
+use Joomla\Event\SubscriberInterface;
+
+/**
+ * Shortcut plugin to add accessible keyboard shortcuts to the administrator templates.
+ *
+ * @since  __DEPLOY_VERSION__
+ */
+class PlgSystemShortcut extends CMSPlugin implements SubscriberInterface
+{
+	/**
+	 * Application object.
+	 *
+	 * @var    AdministratorApplication
+	 *
+	 * @since  __DEPLOY_VERSION__
+	 */
+	protected $app;
+
+	/**
+	 * Load the language file on instantiation.
+	 *
+	 * @var    boolean
+	 * @since  3.1
+	 */
+	protected $autoloadLanguage = true;
+
+	/**
+	 * Returns an array of events this subscriber will listen to.
+	 *
+	 * The array keys are event names and the value can be:
+	 *
+	 *  - The method name to call (priority defaults to 0)
+	 *  - An array composed of the method name to call and the priority
+	 *
+	 * For instance:
+	 *
+	 *  * array('eventName' => 'methodName')
+	 *  * array('eventName' => array('methodName', $priority))
+	 *
+	 * @return  array
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	public static function getSubscribedEvents(): array
+	{
+		return [
+			'onBeforeCompileHead' => 'initialize',
+			'onLoadShortcuts' => 'addShortcuts'
+		];
+	}
+
+
+	/**
+	 * Add the javascript for the shortcuts
+	 *
+	 * @return  void
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	public function initialize()
+	{
+		if (!$this->app->isClient('administrator'))
+		{
+			return;
+		}
+
+		PluginHelper::importPlugin('shortcut');
+
+		$context = $this->app->input->get('option') . '.' . $this->app->input->get('view');
+
+		$shortcuts = [];
+
+		$event = new GenericEvent('onLoadShortcuts', [
+			'context' => $context,
+			'shortcuts' => $shortcuts
+		]);
+
+		$this->app->getDispatcher()->dispatch('onLoadShortcuts', $event);
+
+		$shortcuts = $event->getArgument('shortcuts');
+
+		Text::script('JAPPLY');
+		Text::script('JCANCEL');
+		Text::script('JHELP');
+		Text::script('JOPTIONS');
+		Text::script('JSEARCH_FILTER');
+		Text::script('JTOOLBAR_CLOSE');
+		Text::script('JTOOLBAR_NEW');
+		Text::script('JTOOLBAR_SAVE');
+		Text::script('JTOOLBAR_SAVE_AND_NEW');
+		Text::script('PLG_SYSTEM_SHORTCUT_ACTIONS_FORM_LABEL');
+		Text::script('PLG_SYSTEM_SHORTCUT_ACTIONS_GENERAL_LABEL');
+		Text::script('PLG_SYSTEM_SHORTCUT_ACTIONS_LIST_LABEL');
+		Text::script('PLG_SYSTEM_SHORTCUT_OVERVIEW_HINT');
+		Text::script('PLG_SYSTEM_SHORTCUT_OVERVIEW_TITLE');
+
+		$wa = $this->app->getDocument()->getWebAssetManager();
+		$wa->useScript('bootstrap.modal');
+		$wa->registerAndUseScript('script', 'plg_system_shortcut/shortcut.min.js', ['dependencies' => ['hotkeys.js']]);
+
+		$this->app->getDocument()->addScriptOptions('plg_system_shortcut.shortcuts', $shortcuts);
+	}
+
+	/**
+	 * Add default shortcuts to the document
+	 *
+	 * @param   Event $event The event
+	 *
+	 * @return  void
+	 *
+	 * @since   __DEPLOY_VERSION__
+	 */
+	public function addShortcuts(Event $event)
+	{
+		$shortcuts = $event->getArgument('shortcuts');
+
+		$keys = [
+			'helpKey'            => (object) ['selector' => 'joomla-toolbar-button .button-help', 'shortcut' => 'J + H'],
+			'newKey'             => (object) ['selector' => 'joomla-toolbar-button .button-new', 'shortcut' => 'J + N'],
+			'applyKey'           => (object) ['selector' => 'joomla-toolbar-button .button-apply', 'shortcut' => 'J + S'],
+			'saveKey'            => (object) ['selector' => 'joomla-toolbar-button .button-save', 'shortcut' => 'J + W'],
+			'saveNewKey'         => (object) ['selector' => 'joomla-toolbar-button .button-save-new', 'shortcut' => 'J + N'],
+			'cancelKey'          => (object) ['selector' => 'joomla-toolbar-button .button-cancel', 'shortcut' => 'J + Q'],
+			'optionKey'          => (object) ['selector' => 'joomla-toolbar-button .button-options', 'shortcut' => 'J + O'],
+			'searchKey'          => (object) ['selector' => 'input[placeholder=' . Text::_('JSEARCH_FILTER') . ']', 'shortcut' => 'J + S'],
+			'editorArticleKey'   => (object) ['selector' => 'joomla-editor-option ~ article_modal', 'shortcut' => 'CTRL + ALT + A'],
+			'editorContactKey'   => (object) ['selector' => 'joomla-editor-option ~ contact_modal', 'shortcut' => 'CTRL + ALT + C'],
+			'editorFieldsKey'    => (object) ['selector' => 'joomla-editor-option ~ fields_modal', 'shortcut' => 'CTRL + ALT + F'],
+			'editorImageKey'     => (object) ['selector' => 'joomla-editor-option ~ image_modal', 'shortcut' => 'CTRL + ALT + I'],
+			'editorMenuKey'      => (object) ['selector' => 'joomla-editor-option ~ menu_modal', 'shortcut' => 'CTRL + ALT + M'],
+			'editorModuleKey'    => (object) ['selector' => 'joomla-editor-option ~ module_modal', 'shortcut' => 'CTRL + SHIFT + ALT + M'],
+			'editorPagebreakKey' => (object) ['selector' => 'joomla-editor-option ~ pagebreak_modal', 'shortcut' => 'CTRL + ALT + P'],
+			'editorReadmoreKey'  => (object) ['selector' => 'joomla-editor-option ~ read_more', 'shortcut' => 'CTRL + ALT + R'],
+		];
+
+		$event->setArgument('shortcuts', $keys);
+	}
+}