diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/modules/outside_in/js/off-canvas.es6.js index 5b734a6ec7..ac5f3cb7e9 100644 --- a/core/modules/outside_in/js/off-canvas.es6.js +++ b/core/modules/outside_in/js/off-canvas.es6.js @@ -13,6 +13,8 @@ * * @param {jQuery.Event} event * The event triggered. + * @param {object} event.data + * Data attached to the event. */ function resetSize(event) { const offsets = displace.offsets; @@ -44,6 +46,8 @@ * * @param {jQuery.Event} event * The event triggered. + * @param {object} event.data + * Data attached to the event. */ function handleDialogResize(event) { const $element = event.data.$element; @@ -53,7 +57,7 @@ let offset = 0; // Let scroll element take all the height available. - $element.css({ height: 'auto' }); + $element.css({height: 'auto'}); const modalHeight = $container.height(); $offsets.each(($offset) => { @@ -70,6 +74,8 @@ * * @param {jQuery.Event} event * The event triggered. + * @param {object} event.data + * Data attached to the event. */ function bodyPadding(event) { if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) { @@ -105,9 +111,13 @@ $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'), /** * Determines if a + * + * @param {jQuery} $element + * The dialog element. * @return {bool} + * True this is currently an off-canvas dialog. */ - isOffCanvas(dialog, $element, settings) { + isOffCanvas($element) { return $element.is('#drupal-off-canvas'); }, open(event, dialog, $element, settings) { @@ -123,7 +133,7 @@ // See http://api.jqueryui.com/dialog for all dialog options. settings.height = $(window).height(); }, - close: (event, dialog, $element) => { + close: () => { $('body').removeClass('js-tray-open'); // Remove all *.off-canvas events $(document).off('.off-canvas'); @@ -131,14 +141,14 @@ Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0); }, render: (event, dialog, $element, settings) => { - const eventData = { settings, $element, offCanvasDialog: this }; + const eventData = {settings, $element, offCanvasDialog: this}; $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title); $element - .on('dialogresize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100)) - .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize) - .on('dialogContentResize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100)) - .trigger('dialogresize.off-canvas'); + .on('dialogresize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100)) + .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize) + .on('dialogContentResize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100)) + .trigger('dialogresize.off-canvas'); Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, ''); @@ -149,11 +159,20 @@ handleDialogResize, resetSize, bodyPadding, + /** + * The HTML element that surrounds the dialog. + * @param {HTMLElement} $element + * The dialog element. + * + * @return {HTMLElement} + * The containing element. + */ getContainer: $element => ($element.dialog('widget')), /** * The edge of the screen that the dialog should appear on. * * @return {string} + * The edge the tray will be shown on, left or right. */ getEdge: () => (document.documentElement.dir === 'rtl' ? 'left' : 'right'), }; @@ -162,17 +181,17 @@ attach: () => { $(window).once('off-canvas').on({ 'dialog:beforecreate': (event, dialog, $element, settings) => { - if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) { + if (Drupal.offCanvas.isOffCanvas($element, dialog, settings)) { Drupal.offCanvas.open(event, dialog, $element, settings); } }, 'dialog:aftercreate': (event, dialog, $element, settings) => { - if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) { + if (Drupal.offCanvas.isOffCanvas($element, dialog, settings)) { Drupal.offCanvas.render(event, dialog, $element, settings); } }, 'dialog:beforeclose': (event, dialog, $element) => { - if (Drupal.offCanvas.isOffCanvas(dialog, $element)) { + if (Drupal.offCanvas.isOffCanvas($element, dialog)) { Drupal.offCanvas.close(event, dialog, $element); } }, diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/outside_in/js/off-canvas.js index cedf2654df..7661647050 100644 --- a/core/modules/outside_in/js/off-canvas.js +++ b/core/modules/outside_in/js/off-canvas.js @@ -68,7 +68,7 @@ var _this = this; minDisplaceWidth: 768, $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'), - isOffCanvas: function isOffCanvas(dialog, $element, settings) { + isOffCanvas: function isOffCanvas($element) { return $element.is('#drupal-off-canvas'); }, open: function open(event, dialog, $element, settings) { @@ -84,7 +84,7 @@ var _this = this; settings.height = $(window).height(); }, - close: function close(event, dialog, $element) { + close: function close() { $('body').removeClass('js-tray-open'); $(document).off('.off-canvas'); @@ -104,6 +104,7 @@ var _this = this; handleDialogResize: handleDialogResize, resetSize: resetSize, bodyPadding: bodyPadding, + getContainer: function getContainer($element) { return $element.dialog('widget'); }, @@ -117,17 +118,17 @@ var _this = this; attach: function attach() { $(window).once('off-canvas').on({ 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) { - if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) { + if (Drupal.offCanvas.isOffCanvas($element, dialog, settings)) { Drupal.offCanvas.open(event, dialog, $element, settings); } }, 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) { - if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) { + if (Drupal.offCanvas.isOffCanvas($element, dialog, settings)) { Drupal.offCanvas.render(event, dialog, $element, settings); } }, 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) { - if (Drupal.offCanvas.isOffCanvas(dialog, $element)) { + if (Drupal.offCanvas.isOffCanvas($element, dialog)) { Drupal.offCanvas.close(event, dialog, $element); } }