Revert "Issue #2830882 by tedbow, droplet, Adita, drpal, markcarver, Wim Leers, nod_: Introduce Drupal.offCanvas, mirrored after Drupal.dialog, to avoid Settings Tray using Drupal.Dialog in unintended ways"
This reverts commit 48339450ee.
8.5.x
Nathaniel Catchpole
parent
88d1f67ece
commit
3f4174f99f
|
|
@ -9,220 +9,101 @@
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(($, Drupal, debounce, displace) => {
|
(function ($, Drupal, debounce, displace) {
|
||||||
|
// The minimum width to use body displace needs to match the width at which
|
||||||
|
// the tray will be %100 width. @see outside_in.module.css
|
||||||
|
const minDisplaceWidth = 768;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Off-canvas dialog implementation using jQuery Dialog.
|
* The edge of the screen that the dialog should appear on.
|
||||||
*
|
*
|
||||||
* Transforms the regular dialogs created using Drupal.dialog when the dialog
|
* @type {string}
|
||||||
* element equals '#drupal-off-canvas' into an side-loading dialog.
|
|
||||||
*
|
|
||||||
* @namespace
|
|
||||||
*/
|
*/
|
||||||
Drupal.offCanvas = {
|
const edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
||||||
|
|
||||||
/**
|
const $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
|
||||||
* The minimum width to use body displace needs to match the width at which
|
|
||||||
* the tray will be %100 width. @see outside_in.module.css
|
|
||||||
* @type {Number}
|
|
||||||
*/
|
|
||||||
minDisplaceWidth: 768,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Wrapper used to position off-canvas dialog.
|
* Resets the size of the dialog.
|
||||||
* @type {jQuery}
|
*
|
||||||
*/
|
* @param {jQuery.Event} event
|
||||||
$mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
|
* The event triggered.
|
||||||
|
*/
|
||||||
|
function resetSize(event) {
|
||||||
|
const offsets = displace.offsets;
|
||||||
|
const $element = event.data.$element;
|
||||||
|
const $widget = $element.dialog('widget');
|
||||||
|
const $elementScroll = $element.scrollTop();
|
||||||
|
|
||||||
/**
|
const adjustedOptions = {
|
||||||
* Determines if an element is an off-canvas dialog.
|
|
||||||
*
|
|
||||||
* @param {jQuery} $element
|
|
||||||
* The dialog element.
|
|
||||||
* @return {bool}
|
|
||||||
* True this is currently an off-canvas dialog.
|
|
||||||
*/
|
|
||||||
isOffCanvas($element) {
|
|
||||||
return $element.is('#drupal-off-canvas');
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handler fired before an off-canvas dialog has been opened.
|
|
||||||
* @param {Object} settings
|
|
||||||
* Settings related to the composition of the dialog.
|
|
||||||
* @return {undefined}
|
|
||||||
*/
|
|
||||||
beforeCreate(settings) {
|
|
||||||
$('body').addClass('js-tray-open');
|
|
||||||
settings.dialogClass += ' ui-dialog-off-canvas';
|
|
||||||
// @see http://api.jqueryui.com/position/
|
// @see http://api.jqueryui.com/position/
|
||||||
settings.position = {
|
position: {
|
||||||
my: 'left top',
|
my: `${edge} top`,
|
||||||
at: `${Drupal.offCanvas.getEdge()} top`,
|
at: `${edge} top${offsets.top !== 0 ? `+${offsets.top}` : ''}`,
|
||||||
of: window,
|
of: window,
|
||||||
};
|
},
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
$widget.css({
|
||||||
* Applies initial height to dialog based on window height.
|
position: 'fixed',
|
||||||
* @see http://api.jqueryui.com/dialog for all dialog options.
|
height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
|
||||||
*/
|
});
|
||||||
settings.height = $(window).height();
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
$element
|
||||||
* Handler fired after an off-canvas dialog has been closed.
|
.dialog('option', adjustedOptions)
|
||||||
* @return {undefined}
|
.trigger('dialogContentResize.off-canvas');
|
||||||
*/
|
|
||||||
beforeClose() {
|
|
||||||
$('body').removeClass('js-tray-open');
|
|
||||||
// Remove all *.off-canvas events
|
|
||||||
$(document).off('.off-canvas');
|
|
||||||
$(window).off('.off-canvas');
|
|
||||||
Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
// Reset the elements scroll position after being repositioned.
|
||||||
* Handler fired when an off-canvas dialog has been opened.
|
$element.scrollTop($elementScroll);
|
||||||
* @param {jQuery} $element
|
}
|
||||||
* The off-canvas dialog element.
|
|
||||||
* @param {Object} settings
|
|
||||||
* Settings related to the composition of the dialog.
|
|
||||||
* @return {undefined}
|
|
||||||
*/
|
|
||||||
afterCreate($element, settings) {
|
|
||||||
const eventData = { settings, $element, offCanvasDialog: this };
|
|
||||||
|
|
||||||
$element
|
/**
|
||||||
.on('dialogresize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100))
|
* Adjusts the dialog on resize.
|
||||||
.on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize)
|
*
|
||||||
.on('dialogContentResize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100))
|
* @param {jQuery.Event} event
|
||||||
.trigger('dialogresize.off-canvas');
|
* The event triggered.
|
||||||
|
*/
|
||||||
|
function handleDialogResize(event) {
|
||||||
|
const $element = event.data.$element;
|
||||||
|
const $widget = $element.dialog('widget');
|
||||||
|
|
||||||
Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
|
const $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
|
||||||
|
let offset = 0;
|
||||||
|
let modalHeight;
|
||||||
|
|
||||||
$(window)
|
// Let scroll element take all the height available.
|
||||||
.on('resize.off-canvas scroll.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100))
|
$element.css({ height: 'auto' });
|
||||||
.trigger('resize.off-canvas');
|
modalHeight = $widget.height();
|
||||||
},
|
$offsets.each(function () {
|
||||||
|
offset += $(this).outerHeight();
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
// Take internal padding into account.
|
||||||
* Toggle classes based on title existence.
|
const scrollOffset = $element.outerHeight() - $element.height();
|
||||||
* Called with Drupal.offCanvas.afterCreate.
|
$element.height(modalHeight - offset - scrollOffset);
|
||||||
* @param {Object} settings
|
}
|
||||||
* Settings related to the composition of the dialog.
|
|
||||||
* @return {undefined}
|
|
||||||
*/
|
|
||||||
render(settings) {
|
|
||||||
$('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adjusts the dialog on resize.
|
* Adjusts the body padding when the dialog is resized.
|
||||||
*
|
*
|
||||||
* @param {jQuery.Event} event
|
* @param {jQuery.Event} event
|
||||||
* The event triggered.
|
* The event triggered.
|
||||||
* @param {object} event.data
|
*/
|
||||||
* Data attached to the event.
|
function bodyPadding(event) {
|
||||||
*/
|
if ($('body').outerWidth() < minDisplaceWidth) {
|
||||||
handleDialogResize(event) {
|
return;
|
||||||
const $element = event.data.$element;
|
}
|
||||||
const $container = Drupal.offCanvas.getContainer($element);
|
const $element = event.data.$element;
|
||||||
|
const $widget = $element.dialog('widget');
|
||||||
|
|
||||||
const $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
|
const width = $widget.outerWidth();
|
||||||
let offset = 0;
|
const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${edge}`);
|
||||||
|
if (width !== mainCanvasPadding) {
|
||||||
// Let scroll element take all the height available.
|
$mainCanvasWrapper.css(`padding-${edge}`, `${width}px`);
|
||||||
$element.css({ height: 'auto' });
|
$widget.attr(`data-offset-${edge}`, width);
|
||||||
const modalHeight = $container.height();
|
displace();
|
||||||
|
}
|
||||||
$offsets.each(($offset) => {
|
}
|
||||||
offset += $($offset).outerHeight();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Take internal padding into account.
|
|
||||||
const scrollOffset = $element.outerHeight() - $element.height();
|
|
||||||
$element.height(modalHeight - offset - scrollOffset);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Resets the size of the dialog.
|
|
||||||
*
|
|
||||||
* @param {jQuery.Event} event
|
|
||||||
* The event triggered.
|
|
||||||
* @param {object} event.data
|
|
||||||
* Data attached to the event.
|
|
||||||
*/
|
|
||||||
resetSize(event) {
|
|
||||||
const offsets = displace.offsets;
|
|
||||||
const $element = event.data.$element;
|
|
||||||
const container = Drupal.offCanvas.getContainer($element);
|
|
||||||
|
|
||||||
const topPosition = (offsets.top !== 0 ? `+${offsets.top}` : '');
|
|
||||||
const adjustedOptions = {
|
|
||||||
// @see http://api.jqueryui.com/position/
|
|
||||||
position: {
|
|
||||||
my: `${Drupal.offCanvas.getEdge()} top`,
|
|
||||||
at: `${Drupal.offCanvas.getEdge()} top${topPosition}`,
|
|
||||||
of: window,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
container.css({
|
|
||||||
position: 'fixed',
|
|
||||||
height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
|
|
||||||
});
|
|
||||||
|
|
||||||
$element
|
|
||||||
.dialog('option', adjustedOptions)
|
|
||||||
.trigger('dialogContentResize.off-canvas');
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adjusts the body padding when the dialog is resized.
|
|
||||||
*
|
|
||||||
* @param {jQuery.Event} event
|
|
||||||
* The event triggered.
|
|
||||||
* @param {object} event.data
|
|
||||||
* Data attached to the event.
|
|
||||||
*/
|
|
||||||
bodyPadding(event) {
|
|
||||||
if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
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`);
|
|
||||||
$container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
|
|
||||||
displace();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The HTML element that surrounds the dialog.
|
|
||||||
* @param {HTMLElement} $element
|
|
||||||
* The dialog element.
|
|
||||||
*
|
|
||||||
* @return {HTMLElement}
|
|
||||||
* The containing element.
|
|
||||||
*/
|
|
||||||
getContainer($element) {
|
|
||||||
return $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() {
|
|
||||||
return document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Attaches off-canvas dialog behaviors.
|
* Attaches off-canvas dialog behaviors.
|
||||||
|
|
@ -233,25 +114,51 @@
|
||||||
* Attaches event listeners for off-canvas dialogs.
|
* Attaches event listeners for off-canvas dialogs.
|
||||||
*/
|
*/
|
||||||
Drupal.behaviors.offCanvasEvents = {
|
Drupal.behaviors.offCanvasEvents = {
|
||||||
attach: () => {
|
attach() {
|
||||||
$(window).once('off-canvas').on({
|
$(window).once('off-canvas').on({
|
||||||
'dialog:beforecreate': (event, dialog, $element, settings) => {
|
'dialog:aftercreate': function (event, dialog, $element, settings) {
|
||||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
if ($element.is('#drupal-off-canvas')) {
|
||||||
Drupal.offCanvas.beforeCreate(settings);
|
const eventData = { settings, $element };
|
||||||
|
$('.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(bodyPadding, 100))
|
||||||
|
.on('dialogContentResize.off-canvas', eventData, handleDialogResize)
|
||||||
|
.on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100))
|
||||||
|
.trigger('dialogresize.off-canvas');
|
||||||
|
|
||||||
|
$element.dialog('widget').attr(`data-offset-${edge}`, '');
|
||||||
|
|
||||||
|
$(window)
|
||||||
|
.on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100))
|
||||||
|
.trigger('resize.off-canvas');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'dialog:aftercreate': (event, dialog, $element, settings) => {
|
'dialog:beforecreate': function (event, dialog, $element, settings) {
|
||||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
if ($element.is('#drupal-off-canvas')) {
|
||||||
Drupal.offCanvas.render(settings);
|
$('body').addClass('js-tray-open');
|
||||||
Drupal.offCanvas.afterCreate($element, settings);
|
// @see http://api.jqueryui.com/position/
|
||||||
|
settings.position = {
|
||||||
|
my: 'left top',
|
||||||
|
at: `${edge} top`,
|
||||||
|
of: window,
|
||||||
|
};
|
||||||
|
settings.dialogClass += ' ui-dialog-off-canvas';
|
||||||
|
// Applies initial height to dialog based on window height.
|
||||||
|
// See http://api.jqueryui.com/dialog for all dialog options.
|
||||||
|
settings.height = $(window).height();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'dialog:beforeclose': (event, dialog, $element) => {
|
'dialog:beforeclose': function (event, dialog, $element) {
|
||||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
if ($element.is('#drupal-off-canvas')) {
|
||||||
Drupal.offCanvas.beforeClose(event, dialog, $element);
|
$('body').removeClass('js-tray-open');
|
||||||
|
// Remove all *.off-canvas events
|
||||||
|
$(document).off('.off-canvas');
|
||||||
|
$(window).off('.off-canvas');
|
||||||
|
$mainCanvasWrapper.css(`padding-${edge}`, 0);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
|
}(jQuery, Drupal, Drupal.debounce, Drupal.displace));
|
||||||
|
|
|
||||||
|
|
@ -6,124 +6,106 @@
|
||||||
**/
|
**/
|
||||||
|
|
||||||
(function ($, Drupal, debounce, displace) {
|
(function ($, Drupal, debounce, displace) {
|
||||||
Drupal.offCanvas = {
|
var minDisplaceWidth = 768;
|
||||||
minDisplaceWidth: 768,
|
|
||||||
|
|
||||||
$mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
|
var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
||||||
|
|
||||||
isOffCanvas: function isOffCanvas($element) {
|
var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]');
|
||||||
return $element.is('#drupal-off-canvas');
|
|
||||||
},
|
|
||||||
beforeCreate: function beforeCreate(settings) {
|
|
||||||
$('body').addClass('js-tray-open');
|
|
||||||
settings.dialogClass += ' ui-dialog-off-canvas';
|
|
||||||
|
|
||||||
settings.position = {
|
function resetSize(event) {
|
||||||
my: 'left top',
|
var offsets = displace.offsets;
|
||||||
at: Drupal.offCanvas.getEdge() + ' top',
|
var $element = event.data.$element;
|
||||||
|
var $widget = $element.dialog('widget');
|
||||||
|
var $elementScroll = $element.scrollTop();
|
||||||
|
|
||||||
|
var adjustedOptions = {
|
||||||
|
position: {
|
||||||
|
my: edge + ' top',
|
||||||
|
at: edge + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
|
||||||
of: window
|
of: window
|
||||||
};
|
|
||||||
|
|
||||||
settings.height = $(window).height();
|
|
||||||
},
|
|
||||||
beforeClose: function beforeClose() {
|
|
||||||
$('body').removeClass('js-tray-open');
|
|
||||||
|
|
||||||
$(document).off('.off-canvas');
|
|
||||||
$(window).off('.off-canvas');
|
|
||||||
Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
|
|
||||||
},
|
|
||||||
afterCreate: function afterCreate($element, settings) {
|
|
||||||
var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
|
|
||||||
|
|
||||||
$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');
|
|
||||||
|
|
||||||
Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
|
|
||||||
|
|
||||||
$(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
|
|
||||||
},
|
|
||||||
render: function render(settings) {
|
|
||||||
$('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
|
|
||||||
},
|
|
||||||
handleDialogResize: function handleDialogResize(event) {
|
|
||||||
var $element = event.data.$element;
|
|
||||||
var $container = Drupal.offCanvas.getContainer($element);
|
|
||||||
|
|
||||||
var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
|
|
||||||
var offset = 0;
|
|
||||||
|
|
||||||
$element.css({ height: 'auto' });
|
|
||||||
var modalHeight = $container.height();
|
|
||||||
|
|
||||||
$offsets.each(function ($offset) {
|
|
||||||
offset += $($offset).outerHeight();
|
|
||||||
});
|
|
||||||
|
|
||||||
var scrollOffset = $element.outerHeight() - $element.height();
|
|
||||||
$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 topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
|
|
||||||
var adjustedOptions = {
|
|
||||||
position: {
|
|
||||||
my: Drupal.offCanvas.getEdge() + ' top',
|
|
||||||
at: Drupal.offCanvas.getEdge() + ' top' + topPosition,
|
|
||||||
of: window
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
container.css({
|
|
||||||
position: 'fixed',
|
|
||||||
height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
|
|
||||||
});
|
|
||||||
|
|
||||||
$element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
|
|
||||||
},
|
|
||||||
bodyPadding: function bodyPadding(event) {
|
|
||||||
if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
var $element = event.data.$element;
|
};
|
||||||
var $container = Drupal.offCanvas.getContainer($element);
|
|
||||||
var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
|
|
||||||
|
|
||||||
var width = $container.outerWidth();
|
$widget.css({
|
||||||
var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
|
position: 'fixed',
|
||||||
if (width !== mainCanvasPadding) {
|
height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
|
||||||
$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
|
});
|
||||||
$container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
|
|
||||||
displace();
|
$element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
|
||||||
}
|
|
||||||
},
|
$element.scrollTop($elementScroll);
|
||||||
getContainer: function getContainer($element) {
|
}
|
||||||
return $element.dialog('widget');
|
|
||||||
},
|
function handleDialogResize(event) {
|
||||||
getEdge: function getEdge() {
|
var $element = event.data.$element;
|
||||||
return document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
var $widget = $element.dialog('widget');
|
||||||
|
|
||||||
|
var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
|
||||||
|
var offset = 0;
|
||||||
|
var modalHeight = void 0;
|
||||||
|
|
||||||
|
$element.css({ height: 'auto' });
|
||||||
|
modalHeight = $widget.height();
|
||||||
|
$offsets.each(function () {
|
||||||
|
offset += $(this).outerHeight();
|
||||||
|
});
|
||||||
|
|
||||||
|
var scrollOffset = $element.outerHeight() - $element.height();
|
||||||
|
$element.height(modalHeight - offset - scrollOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
function bodyPadding(event) {
|
||||||
|
if ($('body').outerWidth() < minDisplaceWidth) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
};
|
var $element = event.data.$element;
|
||||||
|
var $widget = $element.dialog('widget');
|
||||||
|
|
||||||
|
var width = $widget.outerWidth();
|
||||||
|
var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge);
|
||||||
|
if (width !== mainCanvasPadding) {
|
||||||
|
$mainCanvasWrapper.css('padding-' + edge, width + 'px');
|
||||||
|
$widget.attr('data-offset-' + edge, width);
|
||||||
|
displace();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Drupal.behaviors.offCanvasEvents = {
|
Drupal.behaviors.offCanvasEvents = {
|
||||||
attach: function attach() {
|
attach: function attach() {
|
||||||
$(window).once('off-canvas').on({
|
$(window).once('off-canvas').on({
|
||||||
'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
|
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
||||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
if ($element.is('#drupal-off-canvas')) {
|
||||||
Drupal.offCanvas.beforeCreate(settings);
|
var eventData = { settings: settings, $element: $element };
|
||||||
|
$('.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(bodyPadding, 100)).on('dialogContentResize.off-canvas', eventData, handleDialogResize).on('dialogContentResize.off-canvas', eventData, debounce(bodyPadding, 100)).trigger('dialogresize.off-canvas');
|
||||||
|
|
||||||
|
$element.dialog('widget').attr('data-offset-' + edge, '');
|
||||||
|
|
||||||
|
$(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(resetSize, 100)).trigger('resize.off-canvas');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
|
||||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
if ($element.is('#drupal-off-canvas')) {
|
||||||
Drupal.offCanvas.render(settings);
|
$('body').addClass('js-tray-open');
|
||||||
Drupal.offCanvas.afterCreate($element, settings);
|
|
||||||
|
settings.position = {
|
||||||
|
my: 'left top',
|
||||||
|
at: edge + ' top',
|
||||||
|
of: window
|
||||||
|
};
|
||||||
|
settings.dialogClass += ' ui-dialog-off-canvas';
|
||||||
|
|
||||||
|
settings.height = $(window).height();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
|
'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
|
||||||
if (Drupal.offCanvas.isOffCanvas($element)) {
|
if ($element.is('#drupal-off-canvas')) {
|
||||||
Drupal.offCanvas.beforeClose(event, dialog, $element);
|
$('body').removeClass('js-tray-open');
|
||||||
|
|
||||||
|
$(document).off('.off-canvas');
|
||||||
|
$(window).off('.off-canvas');
|
||||||
|
$mainCanvasWrapper.css('padding-' + edge, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue