primo commit

media/plg_system_shortcut/js/shortcut.js

@@ -0,0 +1,194 @@
+import JoomlaDialog from 'joomla.dialog';
+
+/**
+ * @copyright  (C) 2022 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */
+if (!window.Joomla) {
+  throw new Error('Joomla API is not properly initialised');
+}
+
+/* global hotkeys */
+Joomla.addShortcut = (hotkey, callback) => {
+  hotkeys(hotkey, 'joomla', 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();
+    }
+  });
+};
+Joomla.addLinkShortcut = (hotkey, selector) => {
+  Joomla.addShortcut(hotkey, () => {
+    window.location.href = selector;
+  });
+};
+const setShortcutFilter = () => {
+  hotkeys.filter = event => {
+    const target = event.target || event.srcElement;
+    const {
+      tagName
+    } = target;
+
+    // Checkboxes should not block a shortcut event
+    if (target.type === 'checkbox') {
+      return true;
+    }
+
+    // Ignore TinyMCE joomlaHighlighter plugin,
+    // @TODO: remove this when the joomlaHighlighter plugin will use JoomlaDialog
+    if (target.classList.contains('tox-textarea-wrap') && target.closest('.joomla-highlighter-dialog')) {
+      return false;
+    }
+
+    // Default hotkeys filter behavior
+    return !(target.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA');
+  };
+};
+const startupShortcuts = () => {
+  hotkeys('J', event => {
+    // If we're already in the scope, it's a normal shortkey
+    if (hotkeys.getScope() === 'joomla') {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    hotkeys.setScope('joomla');
+
+    // Leave the scope after x milliseconds
+    setTimeout(() => {
+      hotkeys.setScope(false);
+    }, Joomla.getOptions('plg_system_shortcut.timeout', 2000));
+  });
+};
+const addOverviewHint = () => {
+  const mainContainer = document.querySelector('.com_cpanel .container-main');
+  if (mainContainer) {
+    const containerElement = document.createElement('section');
+    containerElement.className = 'content pt-4';
+    containerElement.insertAdjacentHTML('beforeend', Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_HINT'));
+    mainContainer.appendChild(containerElement);
+  }
+};
+
+/**
+ * Helper to create an element
+ * @param {String} nodeName
+ * @param {String} text
+ * @param {Array} classList
+ * @returns {HTMLElement}
+ */
+const createEl = (nodeName, text = '', classList = []) => {
+  const el = document.createElement(nodeName);
+  el.textContent = text;
+  if (classList && classList.length) {
+    el.classList.add(...classList);
+  }
+  return el;
+};
+let overviewDialog;
+const initOverviewModal = options => {
+  if (overviewDialog) {
+    return overviewDialog;
+  }
+  const dlItems = new Map();
+  Object.values(options).forEach(value => {
+    if (!value.shortcut || !value.title) {
+      return;
+    }
+    let titles = [];
+    if (dlItems.has(value.shortcut)) {
+      titles = dlItems.get(value.shortcut);
+      titles.push(value.title);
+    } else {
+      titles = [value.title];
+    }
+    dlItems.set(value.shortcut, titles);
+  });
+
+  // Render:
+  // <dl>
+  // <div><dt><kbd>J</kbd><span>then</span><kbd>...</kbd><dd>....</dd></div>
+  // <div><dt><kbd>J</kbd><span>then</span><kbd>...</kbd><dd>....</dd></div>
+  // ...
+  // </dl>
+  const dl = createEl('dl');
+  dlItems.forEach((titles, shortcut) => {
+    const row = createEl('div');
+    const dt = createEl('dt', '', ['d-inline-block']);
+    row.appendChild(dt);
+    dt.appendChild(createEl('kbd', 'J'));
+    shortcut.split('+').forEach(key => {
+      dt.appendChild(createEl('span', Joomla.Text._('PLG_SYSTEM_SHORTCUT_THEN'), ['px-1']));
+      dt.appendChild(createEl('kbd', key));
+    });
+    titles.forEach(title => {
+      const dd = createEl('dd', '', ['d-inline-block', 'ps-1']);
+      dd.innerHTML = Joomla.sanitizeHtml(title);
+      row.appendChild(dd);
+    });
+    dl.appendChild(row);
+  });
+
+  // Create the content for the dialog
+  const intro = createEl('p');
+  intro.innerHTML = Joomla.sanitizeHtml(Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_DESC'), {
+    kbd: '*'
+  });
+  const info = createEl('div');
+  info.appendChild(dl);
+  const content = createEl('div', '', ['p-3']);
+  content.appendChild(intro);
+  content.appendChild(info);
+  overviewDialog = new JoomlaDialog({
+    textHeader: Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_TITLE'),
+    textClose: Joomla.Text._('JCLOSE'),
+    popupContent: content,
+    width: '600px',
+    height: 'fit-content'
+  });
+  return overviewDialog;
+};
+const showOverviewModal = options => {
+  initOverviewModal(options).show();
+};
+document.addEventListener('DOMContentLoaded', () => {
+  const options = Joomla.getOptions('plg_system_shortcut.shortcuts');
+  Object.values(options).forEach(value => {
+    if (!value.shortcut || !value.selector) {
+      return;
+    }
+    if (value.selector.startsWith('/') || value.selector.startsWith('http://') || value.selector.startsWith('www.')) {
+      Joomla.addLinkShortcut(value.shortcut, value.selector);
+    } else if (value.selector.includes('input')) {
+      Joomla.addFocusShortcut(value.shortcut, value.selector);
+    } else {
+      Joomla.addClickShortcut(value.shortcut, value.selector);
+    }
+  });
+  // Show hint and overview on logged in backend only (not login page)
+  if (document.querySelector('nav')) {
+    hotkeys('X', 'joomla', () => {
+      showOverviewModal(options);
+    });
+    addOverviewHint();
+  }
+  setShortcutFilter();
+  startupShortcuts();
+});

media/plg_system_shortcut/js/shortcut.min.js

@@ -0,0 +1,4 @@
+import u from"joomla.dialog";/**
+ * @copyright  (C) 2022 Open Source Matters, Inc. <https://www.joomla.org>
+ * @license    GNU General Public License version 2 or later; see LICENSE.txt
+ */if(!window.Joomla)throw new Error("Joomla API is not properly initialised");Joomla.addShortcut=(o,t)=>{hotkeys(o,"joomla",e=>{e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),t.call()})},Joomla.addClickShortcut=(o,t)=>{Joomla.addShortcut(o,()=>{const e=document.querySelector(t);e&&e.click()})},Joomla.addFocusShortcut=(o,t)=>{Joomla.addShortcut(o,()=>{const e=document.querySelector(t);e&&e.focus()})},Joomla.addLinkShortcut=(o,t)=>{Joomla.addShortcut(o,()=>{window.location.href=t})};const S=()=>{hotkeys.filter=o=>{const t=o.target||o.srcElement,{tagName:e}=t;return t.type==="checkbox"?!0:t.classList.contains("tox-textarea-wrap")&&t.closest(".joomla-highlighter-dialog")?!1:!(t.isContentEditable||e==="INPUT"||e==="SELECT"||e==="TEXTAREA")}},f=()=>{hotkeys("J",o=>{hotkeys.getScope()!=="joomla"&&(o.preventDefault(),o.stopPropagation(),o.stopImmediatePropagation(),hotkeys.setScope("joomla"),setTimeout(()=>{hotkeys.setScope(!1)},Joomla.getOptions("plg_system_shortcut.timeout",2e3)))})},E=()=>{const o=document.querySelector(".com_cpanel .container-main");if(o){const t=document.createElement("section");t.className="content pt-4",t.insertAdjacentHTML("beforeend",Joomla.Text._("PLG_SYSTEM_SHORTCUT_OVERVIEW_HINT")),o.appendChild(t)}},n=(o,t="",e=[])=>{const s=document.createElement(o);return s.textContent=t,e&&e.length&&s.classList.add(...e),s};let a;const T=o=>{if(a)return a;const t=new Map;Object.values(o).forEach(r=>{if(!r.shortcut||!r.title)return;let c=[];t.has(r.shortcut)?(c=t.get(r.shortcut),c.push(r.title)):c=[r.title],t.set(r.shortcut,c)});const e=n("dl");t.forEach((r,c)=>{const d=n("div"),i=n("dt","",["d-inline-block"]);d.appendChild(i),i.appendChild(n("kbd","J")),c.split("+").forEach(h=>{i.appendChild(n("span",Joomla.Text._("PLG_SYSTEM_SHORTCUT_THEN"),["px-1"])),i.appendChild(n("kbd",h))}),r.forEach(h=>{const m=n("dd","",["d-inline-block","ps-1"]);m.innerHTML=Joomla.sanitizeHtml(h),d.appendChild(m)}),e.appendChild(d)});const s=n("p");s.innerHTML=Joomla.sanitizeHtml(Joomla.Text._("PLG_SYSTEM_SHORTCUT_OVERVIEW_DESC"),{kbd:"*"});const p=n("div");p.appendChild(e);const l=n("div","",["p-3"]);return l.appendChild(s),l.appendChild(p),a=new u({textHeader:Joomla.Text._("PLG_SYSTEM_SHORTCUT_OVERVIEW_TITLE"),textClose:Joomla.Text._("JCLOSE"),popupContent:l,width:"600px",height:"fit-content"}),a},C=o=>{T(o).show()};document.addEventListener("DOMContentLoaded",()=>{const o=Joomla.getOptions("plg_system_shortcut.shortcuts");Object.values(o).forEach(t=>{!t.shortcut||!t.selector||(t.selector.startsWith("/")||t.selector.startsWith("http://")||t.selector.startsWith("www.")?Joomla.addLinkShortcut(t.shortcut,t.selector):t.selector.includes("input")?Joomla.addFocusShortcut(t.shortcut,t.selector):Joomla.addClickShortcut(t.shortcut,t.selector))}),document.querySelector("nav")&&(hotkeys("X","joomla",()=>{C(o)}),E()),S(),f()});