Updated Drupal to 8.6. This goes with the following updates because it's possible...

[yaffs-website] / web / core / misc / dialog / off-canvas.es6.js

diff --git a/web/core/misc/dialog/off-canvas.es6.js b/web/core/misc/dialog/off-canvas.es6.js
index 0068e44e1b1fac98b2f7fbb69936abbbe4a4b314..f8e3fab491bb355950bdfc68408793a266ee7e55 100644 (file)
--- a/web/core/misc/dialog/off-canvas.es6.js
+++ b/web/core/misc/dialog/off-canvas.es6.js
@@ -13,6 +13,19 @@
    * @namespace
    */
   Drupal.offCanvas = {
+    /**
+     * Storage for position information about the tray.
+     *
+     * @type {?String}
+     */
+    position: null,
+
+    /**
+     * The minimum height of the tray when opened at the top of the page.
+     *
+     * @type {Number}
+     */
+    minimumHeight: 30,
 
     /**
      * The minimum width to use body displace needs to match the width at which
@@ -75,10 +88,14 @@
       };
 
       /**
-       * Applies initial height to dialog based on window height.
+       * Applies initial height and with to dialog based depending on position.
        * @see http://api.jqueryui.com/dialog for all dialog options.
        */
-      settings.height = $(window).height();
+      const position = settings.drupalOffCanvasPosition;
+      const height = position === 'side' ? $(window).height() : settings.height;
+      const width = position === 'side' ? settings.width : '100%';
+      settings.height = height;
+      settings.width = width;
     },
 
     /**
@@ -90,8 +107,7 @@
       $('body').removeClass('js-off-canvas-dialog-open');
       // Remove all *.off-canvas events
       Drupal.offCanvas.removeOffCanvasEvents($element);
-
-      Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
+      Drupal.offCanvas.resetPadding();
     },
 
     /**
@@ -108,13 +124,27 @@
       const eventData = { settings, $element, offCanvasDialog: this };
 
       $element
-        .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize)
-        .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
+        .on(
+          'dialogContentResize.off-canvas',
+          eventData,
+          Drupal.offCanvas.handleDialogResize,
+        )
+        .on(
+          'dialogContentResize.off-canvas',
+          eventData,
+          Drupal.offCanvas.bodyPadding,
+        );
 
-      Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
+      Drupal.offCanvas
+        .getContainer($element)
+        .attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
 
       $(window)
-        .on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100))
+        .on(
+          'resize.off-canvas',
+          eventData,
+          debounce(Drupal.offCanvas.resetSize, 100),
+        )
         .trigger('resize.off-canvas');
     },
 
@@ -128,7 +158,9 @@
      * @return {undefined}
      */
     render({ settings }) {
-      $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
+      $(
+        '.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar',
+      ).toggleClass('ui-dialog-empty-title', !settings.title);
     },
 
     /**
@@ -143,7 +175,9 @@
       const $element = event.data.$element;
       const $container = Drupal.offCanvas.getContainer($element);
 
-      const $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
+      const $offsets = $container.find(
+        '> :not(#drupal-off-canvas, .ui-resizable-handle)',
+      );
       let offset = 0;
 
       // Let scroll element take all the height available.
@@ -168,11 +202,26 @@
      *   Data attached to the event.
      */
     resetSize(event) {
-      const offsets = displace.offsets;
       const $element = event.data.$element;
       const container = Drupal.offCanvas.getContainer($element);
+      const position = event.data.settings.drupalOffCanvasPosition;
 
-      const topPosition = (offsets.top !== 0 ? `+${offsets.top}` : '');
+      // Only remove the `data-offset-*` attribute if the value previously
+      // exists and the orientation is changing.
+      if (Drupal.offCanvas.position && Drupal.offCanvas.position !== position) {
+        container.removeAttr(`data-offset-${Drupal.offCanvas.position}`);
+      }
+      // Set a minimum height on $element
+      if (position === 'top') {
+        $element.css('min-height', `${Drupal.offCanvas.minimumHeight}px`);
+      }
+
+      displace();
+
+      const offsets = displace.offsets;
+
+      const topPosition =
+        position === 'side' && offsets.top !== 0 ? `+${offsets.top}` : '';
       const adjustedOptions = {
         // @see http://api.jqueryui.com/position/
         position: {
@@ -182,14 +231,20 @@
         },
       };
 
+      const height =
+        position === 'side'
+          ? `${$(window).height() - (offsets.top + offsets.bottom)}px`
+          : event.data.settings.height;
       container.css({
         position: 'fixed',
-        height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
+        height,
       });
 
       $element
         .dialog('option', adjustedOptions)
         .trigger('dialogContentResize.off-canvas');
+
+      Drupal.offCanvas.position = position;
     },
 
     /**
@@ -201,20 +256,37 @@
      *   Data attached to the event.
      */
     bodyPadding(event) {
-      if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
+      const position = event.data.settings.drupalOffCanvasPosition;
+      if (
+        position === 'side' &&
+        $('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth
+      ) {
         return;
       }
+      Drupal.offCanvas.resetPadding();
       const $element = event.data.$element;
       const $container = Drupal.offCanvas.getContainer($element);
       const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
 
       const width = $container.outerWidth();
-      const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`);
-      if (width !== mainCanvasPadding) {
-        $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, `${width}px`);
+      const mainCanvasPadding = $mainCanvasWrapper.css(
+        `padding-${Drupal.offCanvas.getEdge()}`,
+      );
+      if (position === 'side' && width !== mainCanvasPadding) {
+        $mainCanvasWrapper.css(
+          `padding-${Drupal.offCanvas.getEdge()}`,
+          `${width}px`,
+        );
         $container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
         displace();
       }
+
+      const height = $container.outerHeight();
+      if (position === 'top') {
+        $mainCanvasWrapper.css('padding-top', `${height}px`);
+        $container.attr('data-offset-top', height);
+        displace();
+      }
     },
 
     /**
@@ -238,6 +310,18 @@
     getEdge() {
       return document.documentElement.dir === 'rtl' ? 'left' : 'right';
     },
+
+    /**
+     * Resets main canvas wrapper and toolbar padding / margin.
+     */
+    resetPadding() {
+      Drupal.offCanvas.$mainCanvasWrapper.css(
+        `padding-${Drupal.offCanvas.getEdge()}`,
+        0,
+      );
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
+      displace();
+    },
   };
 
   /**
@@ -250,24 +334,26 @@
    */
   Drupal.behaviors.offCanvasEvents = {
     attach: () => {
-      $(window).once('off-canvas').on({
-        'dialog:beforecreate': (event, dialog, $element, settings) => {
-          if (Drupal.offCanvas.isOffCanvas($element)) {
-            Drupal.offCanvas.beforeCreate({ dialog, $element, settings });
-          }
-        },
-        'dialog:aftercreate': (event, dialog, $element, settings) => {
-          if (Drupal.offCanvas.isOffCanvas($element)) {
-            Drupal.offCanvas.render({ dialog, $element, settings });
-            Drupal.offCanvas.afterCreate({ $element, settings });
-          }
-        },
-        'dialog:beforeclose': (event, dialog, $element) => {
-          if (Drupal.offCanvas.isOffCanvas($element)) {
-            Drupal.offCanvas.beforeClose({ dialog, $element });
-          }
-        },
-      });
+      $(window)
+        .once('off-canvas')
+        .on({
+          'dialog:beforecreate': (event, dialog, $element, settings) => {
+            if (Drupal.offCanvas.isOffCanvas($element)) {
+              Drupal.offCanvas.beforeCreate({ dialog, $element, settings });
+            }
+          },
+          'dialog:aftercreate': (event, dialog, $element, settings) => {
+            if (Drupal.offCanvas.isOffCanvas($element)) {
+              Drupal.offCanvas.render({ dialog, $element, settings });
+              Drupal.offCanvas.afterCreate({ $element, settings });
+            }
+          },
+          'dialog:beforeclose': (event, dialog, $element) => {
+            if (Drupal.offCanvas.isOffCanvas($element)) {
+              Drupal.offCanvas.beforeClose({ dialog, $element });
+            }
+          },
+        });
     },
   };
 })(jQuery, Drupal, Drupal.debounce, Drupal.displace);