www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/settings_tray/js/settings_tray.es6.js

   1 /**
   2  * @file
   3  * Drupal's Settings Tray library.
   4  *
   5  * @private
   6  */
   7
   8 (($, Drupal) => {
   9   const blockConfigureSelector = '[data-settings-tray-edit]';
  10   const toggleEditSelector = '[data-drupal-settingstray="toggle"]';
  11   const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
  12   const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
  13   const quickEditItemSelector = '[data-quickedit-entity-id]';
  14
  15   /**
  16    * Prevent default click events except contextual links.
  17    *
  18    * In edit mode the default action of click events is suppressed.
  19    *
  20    * @param {jQuery.Event} event
  21    *   The click event.
  22    */
  23   function preventClick(event) {
  24     // Do not prevent contextual links.
  25     if ($(event.target).closest('.contextual-links').length) {
  26       return;
  27     }
  28     event.preventDefault();
  29   }
  30
  31   /**
  32    * Close any active toolbar tray before entering edit mode.
  33    */
  34   function closeToolbarTrays() {
  35     $(Drupal.toolbar.models.toolbarModel.get('activeTab')).trigger('click');
  36   }
  37
  38   /**
  39    * Disables the QuickEdit module editor if open.
  40    */
  41   function disableQuickEdit() {
  42     $('.quickedit-toolbar button.action-cancel').trigger('click');
  43   }
  44
  45   /**
  46    * Closes/removes off-canvas.
  47    */
  48   function closeOffCanvas() {
  49     $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
  50   }
  51
  52   /**
  53    * Gets all items that should be toggled with class during edit mode.
  54    *
  55    * @return {jQuery}
  56    *   Items that should be toggled.
  57    */
  58   function getItemsToToggle() {
  59     return $(itemsToToggleSelector).not(contextualItemsSelector);
  60   }
  61
  62   /**
  63    * Helper to switch edit mode state.
  64    *
  65    * @param {boolean} editMode
  66    *   True enable edit mode, false disable edit mode.
  67    */
  68   function setEditModeState(editMode) {
  69     if (!document.querySelector('[data-off-canvas-main-canvas]')) {
  70       throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
  71     }
  72     editMode = !!editMode;
  73     const $editButton = $(toggleEditSelector);
  74     let $editables;
  75     // Turn on edit mode.
  76     if (editMode) {
  77       $editButton.text(Drupal.t('Editing'));
  78       closeToolbarTrays();
  79
  80       $editables = $('[data-drupal-settingstray="editable"]').once('settingstray');
  81       if ($editables.length) {
  82         // Use event capture to prevent clicks on links.
  83         document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
  84         /**
  85          * When a click occurs try and find the settings-tray edit link
  86          * and click it.
  87          */
  88         $editables
  89           .not(contextualItemsSelector)
  90           .on('click.settingstray', (e) => {
  91             // Contextual links are allowed to function in Edit mode.
  92             if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
  93               return;
  94             }
  95             $(e.currentTarget).find(blockConfigureSelector).trigger('click');
  96             disableQuickEdit();
  97           });
  98         $(quickEditItemSelector)
  99           .not(contextualItemsSelector)
 100           .on('click.settingstray', (e) => {
 101             /**
 102              * For all non-contextual links or the contextual QuickEdit link
 103              * close the off-canvas dialog.
 104              */
 105             if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
 106               closeOffCanvas();
 107             }
 108             // Do not trigger if target is quick edit link to avoid loop.
 109             if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
 110               return;
 111             }
 112             $(e.currentTarget).find('li.quickedit a').trigger('click');
 113           });
 114       }
 115     }
 116     // Disable edit mode.
 117     else {
 118       $editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
 119       if ($editables.length) {
 120         document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
 121         $editables.off('.settingstray');
 122         $(quickEditItemSelector).off('.settingstray');
 123       }
 124
 125       $editButton.text(Drupal.t('Edit'));
 126       closeOffCanvas();
 127       disableQuickEdit();
 128     }
 129     getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
 130     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
 131   }
 132
 133   /**
 134    * Helper to check the state of the settings-tray mode.
 135    *
 136    * @todo don't use a class for this.
 137    *
 138    * @return {boolean}
 139    *   State of the settings-tray edit mode.
 140    */
 141   function isInEditMode() {
 142     return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
 143   }
 144
 145   /**
 146    * Helper to toggle Edit mode.
 147    */
 148   function toggleEditMode() {
 149     setEditModeState(!isInEditMode());
 150   }
 151
 152   /**
 153    * Prepares Ajax links to work with off-canvas and Settings Tray module.
 154    */
 155   function prepareAjaxLinks() {
 156     // Find all Ajax instances that use the 'off_canvas' renderer.
 157     Drupal.ajax.instances
 158       /**
 159        * If there is an element and the renderer is 'off_canvas' then we want
 160        * to add our changes.
 161        */
 162       .filter(instance => instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas')
 163       /**
 164        * Loop through all Ajax instances that use the 'off_canvas' renderer to
 165        * set active editable ID.
 166        */
 167       .forEach((instance) => {
 168         // Check to make sure existing dialogOptions aren't overridden.
 169         if (!instance.options.data.hasOwnProperty('dialogOptions')) {
 170           instance.options.data.dialogOptions = {};
 171         }
 172         instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
 173         instance.progress = { type: 'fullscreen' };
 174       });
 175   }
 176
 177   /**
 178    * Reacts to contextual links being added.
 179    *
 180    * @param {jQuery.Event} event
 181    *   The `drupalContextualLinkAdded` event.
 182    * @param {object} data
 183    *   An object containing the data relevant to the event.
 184    *
 185    * @listens event:drupalContextualLinkAdded
 186    */
 187   $(document).on('drupalContextualLinkAdded', (event, data) => {
 188     /**
 189      * When contextual links are add we need to set extra properties on the
 190      * instances in Drupal.ajax.instances for them to work with Edit Mode.
 191      */
 192     prepareAjaxLinks();
 193
 194     // When the first contextual link is added to the page set Edit Mode.
 195     $('body').once('settings_tray.edit_mode_init').each(() => {
 196       const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
 197       if (editMode) {
 198         setEditModeState(true);
 199       }
 200     });
 201
 202     /**
 203      * Bind a listener to all 'Quick edit' links for blocks. Click "Edit"
 204      * button in toolbar to force Contextual Edit which starts Settings Tray
 205      * edit mode also.
 206      */
 207     data.$el.find(blockConfigureSelector)
 208       .on('click.settingstray', () => {
 209         if (!isInEditMode()) {
 210           $(toggleEditSelector).trigger('click').trigger('click.settings_tray');
 211         }
 212         /**
 213          * Always disable QuickEdit regardless of whether "EditMode" was just
 214          * enabled.
 215          */
 216         disableQuickEdit();
 217       });
 218   });
 219
 220   $(document).on('keyup.settingstray', (e) => {
 221     if (isInEditMode() && e.keyCode === 27) {
 222       Drupal.announce(
 223         Drupal.t('Exited edit mode.'),
 224       );
 225       toggleEditMode();
 226     }
 227   });
 228
 229   /**
 230    * Toggle the js-settings-tray-edit-mode class on items that we want to
 231    * disable while in edit mode.
 232    *
 233    * @type {Drupal~behavior}
 234    *
 235    * @prop {Drupal~behaviorAttach} attach
 236    *   Toggle the js-settings-tray-edit-mode class.
 237    */
 238   Drupal.behaviors.toggleEditMode = {
 239     attach() {
 240       $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
 241     },
 242   };
 243
 244   // Manage Active editable class on opening and closing of the dialog.
 245   $(window).on({
 246     'dialog:beforecreate': (event, dialog, $element, settings) => {
 247       if ($element.is('#drupal-off-canvas')) {
 248         $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
 249         const $activeElement = $(`#${settings.settingsTrayActiveEditableId}`);
 250         if ($activeElement.length) {
 251           $activeElement.addClass('settings-tray-active-editable');
 252         }
 253       }
 254     },
 255     'dialog:beforeclose': (event, dialog, $element) => {
 256       if ($element.is('#drupal-off-canvas')) {
 257         $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
 258       }
 259     },
 260   });
 261 })(jQuery, Drupal);