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

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

diff --git a/web/core/misc/dialog/off-canvas.js b/web/core/misc/dialog/off-canvas.js
index 1de5f675659b458f62d9900205605a4410e9b601..85498b7c5112abf48e50d4d267723700744ef8b9 100644 (file)
--- a/web/core/misc/dialog/off-canvas.js
+++ b/web/core/misc/dialog/off-canvas.js
@@ -7,6 +7,10 @@
 
 (function ($, Drupal, debounce, displace) {
   Drupal.offCanvas = {
+    position: null,
+
+    minimumHeight: 30,
+
     minDisplaceWidth: 768,
 
     $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
@@ -33,7 +37,11 @@
         of: window
       };
 
-      settings.height = $(window).height();
+      var position = settings.drupalOffCanvasPosition;
+      var height = position === 'side' ? $(window).height() : settings.height;
+      var width = position === 'side' ? settings.width : '100%';
+      settings.height = height;
+      settings.width = width;
     },
     beforeClose: function beforeClose(_ref2) {
       var $element = _ref2.$element;
@@ -41,8 +49,7 @@
       $('body').removeClass('js-off-canvas-dialog-open');
 
       Drupal.offCanvas.removeOffCanvasEvents($element);
-
-      Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
+      Drupal.offCanvas.resetPadding();
     },
     afterCreate: function afterCreate(_ref3) {
       var $element = _ref3.$element,
@@ -79,11 +86,23 @@
       $element.height(modalHeight - offset - scrollOffset);
     },
     resetSize: function resetSize(event) {
-      var offsets = displace.offsets;
       var $element = event.data.$element;
       var container = Drupal.offCanvas.getContainer($element);
+      var position = event.data.settings.drupalOffCanvasPosition;
+
+      if (Drupal.offCanvas.position && Drupal.offCanvas.position !== position) {
+        container.removeAttr('data-offset-' + Drupal.offCanvas.position);
+      }
+
+      if (position === 'top') {
+        $element.css('min-height', Drupal.offCanvas.minimumHeight + 'px');
+      }
 
-      var topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
+      displace();
+
+      var offsets = displace.offsets;
+
+      var topPosition = position === 'side' && offsets.top !== 0 ? '+' + offsets.top : '';
       var adjustedOptions = {
         position: {
           my: Drupal.offCanvas.getEdge() + ' top',
@@ -92,34 +111,51 @@
         }
       };
 
+      var 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: height
       });
 
       $element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
+
+      Drupal.offCanvas.position = position;
     },
     bodyPadding: function bodyPadding(event) {
-      if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
+      var position = event.data.settings.drupalOffCanvasPosition;
+      if (position === 'side' && $('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
         return;
       }
+      Drupal.offCanvas.resetPadding();
       var $element = event.data.$element;
       var $container = Drupal.offCanvas.getContainer($element);
       var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
 
       var width = $container.outerWidth();
       var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
-      if (width !== mainCanvasPadding) {
+      if (position === 'side' && width !== mainCanvasPadding) {
         $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
         $container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
         displace();
       }
+
+      var height = $container.outerHeight();
+      if (position === 'top') {
+        $mainCanvasWrapper.css('padding-top', height + 'px');
+        $container.attr('data-offset-top', height);
+        displace();
+      }
     },
     getContainer: function getContainer($element) {
       return $element.dialog('widget');
     },
     getEdge: function getEdge() {
       return document.documentElement.dir === 'rtl' ? 'left' : 'right';
+    },
+    resetPadding: function resetPadding() {
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
+      displace();
     }
   };