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

   1 /**
   2  * @file
   3  * Defines the behavior of the Drupal administration toolbar.
   4  */
   5
   6 (function ($, Drupal, drupalSettings) {
   7   // Merge run-time settings with the defaults.
   8   const options = $.extend(
   9     {
  10       breakpoints: {
  11         'toolbar.narrow': '',
  12         'toolbar.standard': '',
  13         'toolbar.wide': '',
  14       },
  15     },
  16     drupalSettings.toolbar,
  17     // Merge strings on top of drupalSettings so that they are not mutable.
  18     {
  19       strings: {
  20         horizontal: Drupal.t('Horizontal orientation'),
  21         vertical: Drupal.t('Vertical orientation'),
  22       },
  23     },
  24   );
  25
  26   /**
  27    * Registers tabs with the toolbar.
  28    *
  29    * The Drupal toolbar allows modules to register top-level tabs. These may
  30    * point directly to a resource or toggle the visibility of a tray.
  31    *
  32    * Modules register tabs with hook_toolbar().
  33    *
  34    * @type {Drupal~behavior}
  35    *
  36    * @prop {Drupal~behaviorAttach} attach
  37    *   Attaches the toolbar rendering functionality to the toolbar element.
  38    */
  39   Drupal.behaviors.toolbar = {
  40     attach(context) {
  41       // Verify that the user agent understands media queries. Complex admin
  42       // toolbar layouts require media query support.
  43       if (!window.matchMedia('only screen').matches) {
  44         return;
  45       }
  46       // Process the administrative toolbar.
  47       $(context).find('#toolbar-administration').once('toolbar').each(function () {
  48         // Establish the toolbar models and views.
  49         const model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
  50           locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')),
  51           activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
  52           height: $('#toolbar-administration').outerHeight(),
  53         });
  54
  55         // Attach a listener to the configured media query breakpoints.
  56         // Executes it before Drupal.toolbar.views to avoid extra rendering.
  57         for (const label in options.breakpoints) {
  58           if (options.breakpoints.hasOwnProperty(label)) {
  59             const mq = options.breakpoints[label];
  60             const mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
  61             // Curry the model and the label of the media query breakpoint to
  62             // the mediaQueryChangeHandler function.
  63             mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
  64             // Fire the mediaQueryChangeHandler for each configured breakpoint
  65             // so that they process once.
  66             Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
  67           }
  68         }
  69
  70         Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
  71           el: this,
  72           model,
  73           strings: options.strings,
  74         });
  75         Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView({
  76           el: this,
  77           model,
  78           strings: options.strings,
  79         });
  80         Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
  81           el: this,
  82           model,
  83         });
  84
  85         // Force layout render to fix mobile view. Only needed on load, not
  86         // for every media query match.
  87         model.trigger('change:isFixed', model, model.get('isFixed'));
  88         model.trigger('change:activeTray', model, model.get('activeTray'));
  89
  90         // Render collapsible menus.
  91         const menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel();
  92         Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
  93           el: $(this).find('.toolbar-menu-administration').get(0),
  94           model: menuModel,
  95           strings: options.strings,
  96         });
  97
  98         // Handle the resolution of Drupal.toolbar.setSubtrees.
  99         // This is handled with a deferred so that the function may be invoked
 100         // asynchronously.
 101         Drupal.toolbar.setSubtrees.done((subtrees) => {
 102           menuModel.set('subtrees', subtrees);
 103           const theme = drupalSettings.ajaxPageState.theme;
 104           localStorage.setItem(`Drupal.toolbar.subtrees.${theme}`, JSON.stringify(subtrees));
 105           // Indicate on the toolbarModel that subtrees are now loaded.
 106           model.set('areSubtreesLoaded', true);
 107         });
 108
 109         // Trigger an initial attempt to load menu subitems. This first attempt
 110         // is made after the media query handlers have had an opportunity to
 111         // process. The toolbar starts in the vertical orientation by default,
 112         // unless the viewport is wide enough to accommodate a horizontal
 113         // orientation. Thus we give the Toolbar a chance to determine if it
 114         // should be set to horizontal orientation before attempting to load
 115         // menu subtrees.
 116         Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
 117
 118         $(document)
 119           // Update the model when the viewport offset changes.
 120           .on('drupalViewportOffsetChange.toolbar', (event, offsets) => {
 121             model.set('offsets', offsets);
 122           });
 123
 124         // Broadcast model changes to other modules.
 125         model
 126           .on('change:orientation', (model, orientation) => {
 127             $(document).trigger('drupalToolbarOrientationChange', orientation);
 128           })
 129           .on('change:activeTab', (model, tab) => {
 130             $(document).trigger('drupalToolbarTabChange', tab);
 131           })
 132           .on('change:activeTray', (model, tray) => {
 133             $(document).trigger('drupalToolbarTrayChange', tray);
 134           });
 135
 136         // If the toolbar's orientation is horizontal and no active tab is
 137         // defined then show the tray of the first toolbar tab by default (but
 138         // not the first 'Home' toolbar tab).
 139         if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
 140           Drupal.toolbar.models.toolbarModel.set({
 141             activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0),
 142           });
 143         }
 144       });
 145     },
 146   };
 147
 148   /**
 149    * Toolbar methods of Backbone objects.
 150    *
 151    * @namespace
 152    */
 153   Drupal.toolbar = {
 154
 155     /**
 156      * A hash of View instances.
 157      *
 158      * @type {object.<string, Backbone.View>}
 159      */
 160     views: {},
 161
 162     /**
 163      * A hash of Model instances.
 164      *
 165      * @type {object.<string, Backbone.Model>}
 166      */
 167     models: {},
 168
 169     /**
 170      * A hash of MediaQueryList objects tracked by the toolbar.
 171      *
 172      * @type {object.<string, object>}
 173      */
 174     mql: {},
 175
 176     /**
 177      * Accepts a list of subtree menu elements.
 178      *
 179      * A deferred object that is resolved by an inlined JavaScript callback.
 180      *
 181      * @type {jQuery.Deferred}
 182      *
 183      * @see toolbar_subtrees_jsonp().
 184      */
 185     setSubtrees: new $.Deferred(),
 186
 187     /**
 188      * Respond to configured narrow media query changes.
 189      *
 190      * @param {Drupal.toolbar.ToolbarModel} model
 191      *   A toolbar model
 192      * @param {string} label
 193      *   Media query label.
 194      * @param {object} mql
 195      *   A MediaQueryList object.
 196      */
 197     mediaQueryChangeHandler(model, label, mql) {
 198       switch (label) {
 199         case 'toolbar.narrow':
 200           model.set({
 201             isOriented: mql.matches,
 202             isTrayToggleVisible: false,
 203           });
 204           // If the toolbar doesn't have an explicit orientation yet, or if the
 205           // narrow media query doesn't match then set the orientation to
 206           // vertical.
 207           if (!mql.matches || !model.get('orientation')) {
 208             model.set({ orientation: 'vertical' }, { validate: true });
 209           }
 210           break;
 211
 212         case 'toolbar.standard':
 213           model.set({
 214             isFixed: mql.matches,
 215           });
 216           break;
 217
 218         case 'toolbar.wide':
 219           model.set({
 220             orientation: ((mql.matches && !model.get('locked')) ? 'horizontal' : 'vertical'),
 221           }, { validate: true });
 222           // The tray orientation toggle visibility does not need to be
 223           // validated.
 224           model.set({
 225             isTrayToggleVisible: mql.matches,
 226           });
 227           break;
 228
 229         default:
 230           break;
 231       }
 232     },
 233   };
 234
 235   /**
 236    * A toggle is an interactive element often bound to a click handler.
 237    *
 238    * @return {string}
 239    *   A string representing a DOM fragment.
 240    */
 241   Drupal.theme.toolbarOrientationToggle = function () {
 242     return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
 243       '<button class="toolbar-icon" type="button"></button>' +
 244       '</div></div>';
 245   };
 246
 247   /**
 248    * Ajax command to set the toolbar subtrees.
 249    *
 250    * @param {Drupal.Ajax} ajax
 251    *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
 252    * @param {object} response
 253    *   JSON response from the Ajax request.
 254    * @param {number} [status]
 255    *   XMLHttpRequest status.
 256    */
 257   Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
 258     Drupal.toolbar.setSubtrees.resolve(response.subtrees);
 259   };
 260 }(jQuery, Drupal, drupalSettings));