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 (function ($, 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         $editables
  88           .not(contextualItemsSelector)
  89           .on('click.settingstray', (e) => {
  90             // Contextual links are allowed to function in Edit mode.
  91             if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
  92               return;
  93             }
  94             $(e.currentTarget).find(blockConfigureSelector).trigger('click');
  95             disableQuickEdit();
  96           });
  97         $(quickEditItemSelector)
  98           .not(contextualItemsSelector)
  99           .on('click.settingstray', (e) => {
 100             /**
 101              * For all non-contextual links or the contextual QuickEdit link
 102              * close the off-canvas dialog.
 103              */
 104             if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
 105               closeOffCanvas();
 106             }
 107             // Do not trigger if target is quick edit link to avoid loop.
 108             if ($(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
 109               return;
 110             }
 111             $(e.currentTarget).find('li.quickedit a').trigger('click');
 112           });
 113       }
 114     }
 115     // Disable edit mode.
 116     else {
 117       $editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
 118       if ($editables.length) {
 119         document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
 120         $editables.off('.settingstray');
 121         $(quickEditItemSelector).off('.settingstray');
 122       }
 123
 124       $editButton.text(Drupal.t('Edit'));
 125       closeOffCanvas();
 126       disableQuickEdit();
 127     }
 128     getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
 129     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
 130   }
 131
 132   /**
 133    * Helper to check the state of the settings-tray mode.
 134    *
 135    * @todo don't use a class for this.
 136    *
 137    * @return {boolean}
 138    *   State of the settings-tray edit mode.
 139    */
 140   function isInEditMode() {
 141     return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
 142   }
 143
 144   /**
 145    * Helper to toggle Edit mode.
 146    */
 147   function toggleEditMode() {
 148     setEditModeState(!isInEditMode());
 149   }
 150
 151   /**
 152    * Reacts to contextual links being added.
 153    *
 154    * @param {jQuery.Event} event
 155    *   The `drupalContextualLinkAdded` event.
 156    * @param {object} data
 157    *   An object containing the data relevant to the event.
 158    *
 159    * @listens event:drupalContextualLinkAdded
 160    */
 161   $(document).on('drupalContextualLinkAdded', (event, data) => {
 162
 163     // When the first contextual link is added to the page set Edit Mode.
 164     $('body').once('settings_tray.edit_mode_init').each(() => {
 165       const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
 166       if (editMode) {
 167         setEditModeState(true);
 168       }
 169     });
 170
 171     /**
 172      * Bind Ajax behaviors to all items showing the class.
 173      * @todo Fix contextual links to work with use-ajax links in
 174      * https://www.drupal.org/node/2764931.
 175      */
 176     Drupal.attachBehaviors(data.$el[0]);
 177     /**
 178      * Bind a listener to all 'Quick edit' links for blocks. Click "Edit"
 179      * button in toolbar to force Contextual Edit which starts Settings Tray
 180      * edit mode also.
 181      */
 182     data.$el.find(blockConfigureSelector)
 183       .on('click.settingstray', () => {
 184         if (!isInEditMode()) {
 185           $(toggleEditSelector).trigger('click').trigger('click.settings_tray');
 186         }
 187         /**
 188          * Always disable QuickEdit regardless of whether "EditMode" was just
 189          * enabled.
 190          */
 191         disableQuickEdit();
 192       });
 193   });
 194
 195   $(document).on('keyup.settingstray', (e) => {
 196     if (isInEditMode() && e.keyCode === 27) {
 197       Drupal.announce(
 198         Drupal.t('Exited edit mode.'),
 199       );
 200       toggleEditMode();
 201     }
 202   });
 203
 204   /**
 205    * Toggle the js-settings-tray-edit-mode class on items that we want to
 206    * disable while in edit mode.
 207    *
 208    * @type {Drupal~behavior}
 209    *
 210    * @prop {Drupal~behaviorAttach} attach
 211    *   Toggle the js-settings-tray-edit-mode class.
 212    */
 213   Drupal.behaviors.toggleEditMode = {
 214     attach() {
 215       $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
 216       // Find all Ajax instances that use the 'off_canvas' renderer.
 217       Drupal.ajax.instances
 218         // If there is an element and the renderer is 'off_canvas' then we want
 219         // to add our changes.
 220         .filter(instance => instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas')
 221         // Loop through all Ajax instances that use the 'off_canvas' renderer to
 222         // set active editable ID.
 223         .forEach((instance) => {
 224           // Check to make sure existing dialogOptions aren't overridden.
 225           if (!('dialogOptions' in instance.options.data)) {
 226             instance.options.data.dialogOptions = {};
 227           }
 228           instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
 229           instance.progress = { type: 'fullscreen' };
 230         });
 231     },
 232   };
 233
 234   // Manage Active editable class on opening and closing of the dialog.
 235   $(window).on({
 236     'dialog:beforecreate': (event, dialog, $element, settings) => {
 237       if ($element.is('#drupal-off-canvas')) {
 238         $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
 239         const $activeElement = $(`#${settings.settingsTrayActiveEditableId}`);
 240         if ($activeElement.length) {
 241           $activeElement.addClass('settings-tray-active-editable');
 242         }
 243       }
 244     },
 245     'dialog:beforeclose': (event, dialog, $element) => {
 246       if ($element.is('#drupal-off-canvas')) {
 247         $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
 248       }
 249     },
 250   });
 251 }(jQuery, Drupal));