[Summary view] [Print] [Text view]

   1  ((document, Joomla) => {
   2  
   3    if (!Joomla) {
   4      throw new Error('Joomla API is not properly initialised');
   5    }
   6    /* global hotkeys */
   7  
   8  
   9    Joomla.addShortcut = (hotkey, callback) => {
  10      hotkeys(hotkey, 'joomla', event => {
  11        event.preventDefault();
  12        event.stopPropagation();
  13        event.stopImmediatePropagation();
  14        callback.call();
  15      });
  16    };
  17  
  18    Joomla.addClickShortcut = (hotkey, selector) => {
  19      Joomla.addShortcut(hotkey, () => {
  20        const element = document.querySelector(selector);
  21  
  22        if (element) {
  23          element.click();
  24        }
  25      });
  26    };
  27  
  28    Joomla.addFocusShortcut = (hotkey, selector) => {
  29      Joomla.addShortcut(hotkey, () => {
  30        const element = document.querySelector(selector);
  31  
  32        if (element) {
  33          element.focus();
  34        }
  35      });
  36    };
  37  
  38    Joomla.addLinkShortcut = (hotkey, selector) => {
  39      Joomla.addShortcut(hotkey, () => {
  40        window.location.href = selector;
  41      });
  42    };
  43  
  44    const setShortcutFilter = () => {
  45      hotkeys.filter = event => {
  46        const target = event.target || event.srcElement;
  47        const {
  48          tagName
  49        } = target; // Checkboxes should not block a shortcut event
  50  
  51        if (target.type === 'checkbox') {
  52          return true;
  53        } // Default hotkeys filter behavior
  54  
  55  
  56        return !(target.isContentEditable || tagName === 'INPUT' || tagName === 'SELECT' || tagName === 'TEXTAREA');
  57      };
  58    };
  59  
  60    const startupShortcuts = () => {
  61      hotkeys('J', event => {
  62        // If we're already in the scope, it's a normal shortkey
  63        if (hotkeys.getScope() === 'joomla') {
  64          return;
  65        }
  66  
  67        event.preventDefault();
  68        event.stopPropagation();
  69        event.stopImmediatePropagation();
  70        hotkeys.setScope('joomla'); // Leave the scope after x milliseconds
  71  
  72        setTimeout(() => {
  73          hotkeys.setScope(false);
  74        }, Joomla.getOptions('plg_system_shortcut.timeout', 2000));
  75      });
  76    };
  77  
  78    const addOverviewHint = () => {
  79      const mainContainer = document.querySelector('.com_cpanel .container-main');
  80  
  81      if (mainContainer) {
  82        const containerElement = document.createElement('section');
  83        containerElement.className = 'content pt-4';
  84        containerElement.insertAdjacentHTML('beforeend', Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_HINT'));
  85        mainContainer.appendChild(containerElement);
  86      }
  87    };
  88  
  89    const initOverviewModal = options => {
  90      const dlItems = new Map();
  91      Object.values(options).forEach(value => {
  92        if (!value.shortcut || !value.title) {
  93          return;
  94        }
  95  
  96        let titles = [];
  97  
  98        if (dlItems.has(value.shortcut)) {
  99          titles = dlItems.get(value.shortcut);
 100          titles.push(value.title);
 101        } else {
 102          titles = [value.title];
 103        }
 104  
 105        dlItems.set(value.shortcut, titles);
 106      });
 107      let dl = '<dl>';
 108      dlItems.forEach((titles, shortcut) => {
 109        dl += '<dt><kbd>J</kbd>';
 110        shortcut.split('+').forEach(key => {
 111          dl += ` <kbd>$key.trim()}</kbd>`;
 112        });
 113        dl += '</dt>';
 114        titles.forEach(title => {
 115          dl += `<dd>$title}</dd>`;
 116        });
 117      });
 118      dl += '</dl>';
 119      const modal = `
 120        <div class="modal fade" id="shortcutOverviewModal" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-labelledby="shortcutOverviewModalLabel" aria-hidden="true">
 121          <div class="modal-dialog" role="document">
 122            <div class="modal-content">
 123              <div class="modal-header">
 124                <h3 id="shortcutOverviewModalLabel" class="modal-title">
 125                  $Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_TITLE')}
 126                </h3>
 127                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="$Joomla.Text._('JCLOSE')}"></button>
 128              </div>
 129              <div class="modal-body p-3">
 130                <p>$Joomla.Text._('PLG_SYSTEM_SHORTCUT_OVERVIEW_DESC')}</p>
 131                <div class="mb-3">
 132                  $dl}
 133                </div>
 134              </div>
 135            </div>
 136          </div>
 137        </div>
 138      `;
 139      document.body.insertAdjacentHTML('beforeend', modal);
 140      const bootstrapModal = new bootstrap.Modal(document.getElementById('shortcutOverviewModal'), {
 141        keyboard: true,
 142        backdrop: true
 143      });
 144      hotkeys('X', 'joomla', () => bootstrapModal.show());
 145    };
 146  
 147    document.addEventListener('DOMContentLoaded', () => {
 148      const options = Joomla.getOptions('plg_system_shortcut.shortcuts');
 149      Object.values(options).forEach(value => {
 150        if (!value.shortcut || !value.selector) {
 151          return;
 152        }
 153  
 154        if (value.selector.startsWith('/') || value.selector.startsWith('http://') || value.selector.startsWith('www.')) {
 155          Joomla.addLinkShortcut(value.shortcut, value.selector);
 156        } else if (value.selector.includes('input')) {
 157          Joomla.addFocusShortcut(value.shortcut, value.selector);
 158        } else {
 159          Joomla.addClickShortcut(value.shortcut, value.selector);
 160        }
 161      }); // Show hint and overview on logged in backend only (not login page)
 162  
 163      if (document.querySelector('nav')) {
 164        initOverviewModal(options);
 165        addOverviewHint();
 166      }
 167  
 168      setShortcutFilter();
 169      startupShortcuts();
 170    });
 171  })(document, Joomla);