X-Git-Url: https://yaffs.net/gitweb/?a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Ftoolbar%2Fjs%2Ftoolbar.es6.js;h=4e646a3dd75a882efc6f11a89d603f4582e3ef2b;hb=f3baf763d342a5f82576890e2a8111a5aaf139dc;hp=4fdf090fbedb47ef234b6e6f600da09bcc04d99b;hpb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;p=yaffs-website

diff --git a/web/core/modules/toolbar/js/toolbar.es6.js b/web/core/modules/toolbar/js/toolbar.es6.js
index 4fdf090fb..4e646a3dd 100644
--- a/web/core/modules/toolbar/js/toolbar.es6.js
+++ b/web/core/modules/toolbar/js/toolbar.es6.js
@@ -3,7 +3,7 @@
  * Defines the behavior of the Drupal administration toolbar.
  */
 
-(function ($, Drupal, drupalSettings) {
+(function($, Drupal, drupalSettings) {
   // Merge run-time settings with the defaults.
   const options = $.extend(
     {
@@ -44,104 +44,167 @@
         return;
       }
       // Process the administrative toolbar.
-      $(context).find('#toolbar-administration').once('toolbar').each(function () {
-        // Establish the toolbar models and views.
-        const model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
-          locked: JSON.parse(localStorage.getItem('Drupal.toolbar.trayVerticalLocked')),
-          activeTab: document.getElementById(JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID'))),
-          height: $('#toolbar-administration').outerHeight(),
-        });
+      $(context)
+        .find('#toolbar-administration')
+        .once('toolbar')
+        .each(function() {
+          // Establish the toolbar models and views.
+          const model = new Drupal.toolbar.ToolbarModel({
+            locked: JSON.parse(
+              localStorage.getItem('Drupal.toolbar.trayVerticalLocked'),
+            ),
+            activeTab: document.getElementById(
+              JSON.parse(localStorage.getItem('Drupal.toolbar.activeTabID')),
+            ),
+            height: $('#toolbar-administration').outerHeight(),
+          });
+
+          Drupal.toolbar.models.toolbarModel = model;
 
-        // Attach a listener to the configured media query breakpoints.
-        // Executes it before Drupal.toolbar.views to avoid extra rendering.
-        for (const label in options.breakpoints) {
-          if (options.breakpoints.hasOwnProperty(label)) {
+          // Attach a listener to the configured media query breakpoints.
+          // Executes it before Drupal.toolbar.views to avoid extra rendering.
+          Object.keys(options.breakpoints).forEach(label => {
             const mq = options.breakpoints[label];
-            const mql = Drupal.toolbar.mql[label] = window.matchMedia(mq);
+            const mql = window.matchMedia(mq);
+            Drupal.toolbar.mql[label] = mql;
             // Curry the model and the label of the media query breakpoint to
             // the mediaQueryChangeHandler function.
-            mql.addListener(Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label));
+            mql.addListener(
+              Drupal.toolbar.mediaQueryChangeHandler.bind(null, model, label),
+            );
             // Fire the mediaQueryChangeHandler for each configured breakpoint
             // so that they process once.
-            Drupal.toolbar.mediaQueryChangeHandler.call(null, model, label, mql);
-          }
-        }
+            Drupal.toolbar.mediaQueryChangeHandler.call(
+              null,
+              model,
+              label,
+              mql,
+            );
+          });
 
-        Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView({
-          el: this,
-          model,
-          strings: options.strings,
-        });
-        Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView({
-          el: this,
-          model,
-          strings: options.strings,
-        });
-        Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView({
-          el: this,
-          model,
-        });
+          Drupal.toolbar.views.toolbarVisualView = new Drupal.toolbar.ToolbarVisualView(
+            {
+              el: this,
+              model,
+              strings: options.strings,
+            },
+          );
+          Drupal.toolbar.views.toolbarAuralView = new Drupal.toolbar.ToolbarAuralView(
+            {
+              el: this,
+              model,
+              strings: options.strings,
+            },
+          );
+          Drupal.toolbar.views.bodyVisualView = new Drupal.toolbar.BodyVisualView(
+            {
+              el: this,
+              model,
+            },
+          );
 
-        // Force layout render to fix mobile view. Only needed on load, not
-        // for every media query match.
-        model.trigger('change:isFixed', model, model.get('isFixed'));
-        model.trigger('change:activeTray', model, model.get('activeTray'));
+          // Force layout render to fix mobile view. Only needed on load, not
+          // for every media query match.
+          model.trigger('change:isFixed', model, model.get('isFixed'));
+          model.trigger('change:activeTray', model, model.get('activeTray'));
 
-        // Render collapsible menus.
-        const menuModel = Drupal.toolbar.models.menuModel = new Drupal.toolbar.MenuModel();
-        Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView({
-          el: $(this).find('.toolbar-menu-administration').get(0),
-          model: menuModel,
-          strings: options.strings,
-        });
+          // Render collapsible menus.
+          const menuModel = new Drupal.toolbar.MenuModel();
+          Drupal.toolbar.models.menuModel = menuModel;
+          Drupal.toolbar.views.menuVisualView = new Drupal.toolbar.MenuVisualView(
+            {
+              el: $(this)
+                .find('.toolbar-menu-administration')
+                .get(0),
+              model: menuModel,
+              strings: options.strings,
+            },
+          );
 
-        // Handle the resolution of Drupal.toolbar.setSubtrees.
-        // This is handled with a deferred so that the function may be invoked
-        // asynchronously.
-        Drupal.toolbar.setSubtrees.done((subtrees) => {
-          menuModel.set('subtrees', subtrees);
-          const theme = drupalSettings.ajaxPageState.theme;
-          localStorage.setItem(`Drupal.toolbar.subtrees.${theme}`, JSON.stringify(subtrees));
-          // Indicate on the toolbarModel that subtrees are now loaded.
-          model.set('areSubtreesLoaded', true);
-        });
+          // Handle the resolution of Drupal.toolbar.setSubtrees.
+          // This is handled with a deferred so that the function may be invoked
+          // asynchronously.
+          Drupal.toolbar.setSubtrees.done(subtrees => {
+            menuModel.set('subtrees', subtrees);
+            const theme = drupalSettings.ajaxPageState.theme;
+            localStorage.setItem(
+              `Drupal.toolbar.subtrees.${theme}`,
+              JSON.stringify(subtrees),
+            );
+            // Indicate on the toolbarModel that subtrees are now loaded.
+            model.set('areSubtreesLoaded', true);
+          });
 
-        // Trigger an initial attempt to load menu subitems. This first attempt
-        // is made after the media query handlers have had an opportunity to
-        // process. The toolbar starts in the vertical orientation by default,
-        // unless the viewport is wide enough to accommodate a horizontal
-        // orientation. Thus we give the Toolbar a chance to determine if it
-        // should be set to horizontal orientation before attempting to load
-        // menu subtrees.
-        Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
+          // Trigger an initial attempt to load menu subitems. This first attempt
+          // is made after the media query handlers have had an opportunity to
+          // process. The toolbar starts in the vertical orientation by default,
+          // unless the viewport is wide enough to accommodate a horizontal
+          // orientation. Thus we give the Toolbar a chance to determine if it
+          // should be set to horizontal orientation before attempting to load
+          // menu subtrees.
+          Drupal.toolbar.views.toolbarVisualView.loadSubtrees();
 
-        $(document)
-          // Update the model when the viewport offset changes.
-          .on('drupalViewportOffsetChange.toolbar', (event, offsets) => {
-            model.set('offsets', offsets);
-          });
+          $(document)
+            // Update the model when the viewport offset changes.
+            .on('drupalViewportOffsetChange.toolbar', (event, offsets) => {
+              model.set('offsets', offsets);
+            });
 
-        // Broadcast model changes to other modules.
-        model
-          .on('change:orientation', (model, orientation) => {
-            $(document).trigger('drupalToolbarOrientationChange', orientation);
-          })
-          .on('change:activeTab', (model, tab) => {
-            $(document).trigger('drupalToolbarTabChange', tab);
-          })
-          .on('change:activeTray', (model, tray) => {
-            $(document).trigger('drupalToolbarTrayChange', tray);
-          });
+          // Broadcast model changes to other modules.
+          model
+            .on('change:orientation', (model, orientation) => {
+              $(document).trigger(
+                'drupalToolbarOrientationChange',
+                orientation,
+              );
+            })
+            .on('change:activeTab', (model, tab) => {
+              $(document).trigger('drupalToolbarTabChange', tab);
+            })
+            .on('change:activeTray', (model, tray) => {
+              $(document).trigger('drupalToolbarTrayChange', tray);
+            });
+
+          // If the toolbar's orientation is horizontal and no active tab is
+          // defined then show the tray of the first toolbar tab by default (but
+          // not the first 'Home' toolbar tab).
+          if (
+            Drupal.toolbar.models.toolbarModel.get('orientation') ===
+              'horizontal' &&
+            Drupal.toolbar.models.toolbarModel.get('activeTab') === null
+          ) {
+            Drupal.toolbar.models.toolbarModel.set({
+              activeTab: $(
+                '.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a',
+              ).get(0),
+            });
+          }
 
-        // If the toolbar's orientation is horizontal and no active tab is
-        // defined then show the tray of the first toolbar tab by default (but
-        // not the first 'Home' toolbar tab).
-        if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
-          Drupal.toolbar.models.toolbarModel.set({
-            activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0),
+          $(window).on({
+            'dialog:aftercreate': (event, dialog, $element, settings) => {
+              const $toolbar = $('#toolbar-bar');
+              $toolbar.css('margin-top', '0');
+
+              // When off-canvas is positioned in top, toolbar has to be moved down.
+              if (settings.drupalOffCanvasPosition === 'top') {
+                const height = Drupal.offCanvas
+                  .getContainer($element)
+                  .outerHeight();
+                $toolbar.css('margin-top', `${height}px`);
+
+                $element.on('dialogContentResize.off-canvas', () => {
+                  const newHeight = Drupal.offCanvas
+                    .getContainer($element)
+                    .outerHeight();
+                  $toolbar.css('margin-top', `${newHeight}px`);
+                });
+              }
+            },
+            'dialog:beforeclose': () => {
+              $('#toolbar-bar').css('margin-top', '0');
+            },
           });
-        }
-      });
+        });
     },
   };
 
@@ -151,7 +214,6 @@
    * @namespace
    */
   Drupal.toolbar = {
-
     /**
      * A hash of View instances.
      *
@@ -216,9 +278,13 @@
           break;
 
         case 'toolbar.wide':
-          model.set({
-            orientation: ((mql.matches && !model.get('locked')) ? 'horizontal' : 'vertical'),
-          }, { validate: true });
+          model.set(
+            {
+              orientation:
+                mql.matches && !model.get('locked') ? 'horizontal' : 'vertical',
+            },
+            { validate: true },
+          );
           // The tray orientation toggle visibility does not need to be
           // validated.
           model.set({
@@ -238,10 +304,12 @@
    * @return {string}
    *   A string representing a DOM fragment.
    */
-  Drupal.theme.toolbarOrientationToggle = function () {
-    return '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
+  Drupal.theme.toolbarOrientationToggle = function() {
+    return (
+      '<div class="toolbar-toggle-orientation"><div class="toolbar-lining">' +
       '<button class="toolbar-icon" type="button"></button>' +
-      '</div></div>';
+      '</div></div>'
+    );
   };
 
   /**
@@ -254,7 +322,11 @@
    * @param {number} [status]
    *   XMLHttpRequest status.
    */
-  Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
+  Drupal.AjaxCommands.prototype.setToolbarSubtrees = function(
+    ajax,
+    response,
+    status,
+  ) {
     Drupal.toolbar.setSubtrees.resolve(response.subtrees);
   };
-}(jQuery, Drupal, drupalSettings));
+})(jQuery, Drupal, drupalSettings);