updated core to 8.6.1 via composer
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
* Extends the Drupal AJAX functionality to integrate the dialog API.
|
||||
*/
|
||||
|
||||
(function ($, Drupal) {
|
||||
(function($, Drupal) {
|
||||
/**
|
||||
* Initialize dialogs for Ajax purposes.
|
||||
*
|
||||
@@ -23,7 +23,9 @@
|
||||
// Add 'ui-front' jQuery UI class so jQuery UI widgets like autocomplete
|
||||
// sit on top of dialogs. For more information see
|
||||
// http://api.jqueryui.com/theming/stacking-elements/.
|
||||
$('<div id="drupal-modal" class="ui-front"/>').hide().appendTo('body');
|
||||
$('<div id="drupal-modal" class="ui-front"/>')
|
||||
.hide()
|
||||
.appendTo('body');
|
||||
}
|
||||
|
||||
// Special behaviors specific when attaching content within a dialog.
|
||||
@@ -42,7 +44,7 @@
|
||||
|
||||
const originalClose = settings.dialog.close;
|
||||
// Overwrite the close method to remove the dialog on closing.
|
||||
settings.dialog.close = function (event, ...args) {
|
||||
settings.dialog.close = function(event, ...args) {
|
||||
originalClose.apply(settings.dialog, [event, ...args]);
|
||||
$(event.target).remove();
|
||||
};
|
||||
@@ -59,8 +61,10 @@
|
||||
*/
|
||||
prepareDialogButtons($dialog) {
|
||||
const buttons = [];
|
||||
const $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
|
||||
$buttons.each(function () {
|
||||
const $buttons = $dialog.find(
|
||||
'.form-actions input[type=submit], .form-actions a.button',
|
||||
);
|
||||
$buttons.each(function() {
|
||||
// Hidden form buttons need special attention. For browser consistency,
|
||||
// the button needs to be "visible" in order to have the enter key fire
|
||||
// the form submit event. So instead of a simple "hide" or
|
||||
@@ -82,9 +86,11 @@
|
||||
// event will not simulate a click. Use the click method instead.
|
||||
if ($originalButton.is('a')) {
|
||||
$originalButton[0].click();
|
||||
}
|
||||
else {
|
||||
$originalButton.trigger('mousedown').trigger('mouseup').trigger('click');
|
||||
} else {
|
||||
$originalButton
|
||||
.trigger('mousedown')
|
||||
.trigger('mouseup')
|
||||
.trigger('click');
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
@@ -107,14 +113,16 @@
|
||||
* @return {bool|undefined}
|
||||
* Returns false if there was no selector property in the response object.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.openDialog = function (ajax, response, status) {
|
||||
Drupal.AjaxCommands.prototype.openDialog = function(ajax, response, status) {
|
||||
if (!response.selector) {
|
||||
return false;
|
||||
}
|
||||
let $dialog = $(response.selector);
|
||||
if (!$dialog.length) {
|
||||
// Create the element if needed.
|
||||
$dialog = $(`<div id="${response.selector.replace(/^#/, '')}" class="ui-front"/>`).appendTo('body');
|
||||
$dialog = $(
|
||||
`<div id="${response.selector.replace(/^#/, '')}" class="ui-front"/>`,
|
||||
).appendTo('body');
|
||||
}
|
||||
// Set up the wrapper, if there isn't one.
|
||||
if (!ajax.wrapper) {
|
||||
@@ -129,7 +137,9 @@
|
||||
// Move the buttons to the jQuery UI dialog buttons area.
|
||||
if (!response.dialogOptions.buttons) {
|
||||
response.dialogOptions.drupalAutoButtons = true;
|
||||
response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons($dialog);
|
||||
response.dialogOptions.buttons = Drupal.behaviors.dialog.prepareDialogButtons(
|
||||
$dialog,
|
||||
);
|
||||
}
|
||||
|
||||
// Bind dialogButtonsChange.
|
||||
@@ -143,13 +153,15 @@
|
||||
const dialog = Drupal.dialog($dialog.get(0), response.dialogOptions);
|
||||
if (response.dialogOptions.modal) {
|
||||
dialog.showModal();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
// Add the standard Drupal class for buttons for style consistency.
|
||||
$dialog.parent().find('.ui-dialog-buttonset').addClass('form-actions');
|
||||
$dialog
|
||||
.parent()
|
||||
.find('.ui-dialog-buttonset')
|
||||
.addClass('form-actions');
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -168,7 +180,7 @@
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.closeDialog = function (ajax, response, status) {
|
||||
Drupal.AjaxCommands.prototype.closeDialog = function(ajax, response, status) {
|
||||
const $dialog = $(response.selector);
|
||||
if ($dialog.length) {
|
||||
Drupal.dialog($dialog.get(0)).close();
|
||||
@@ -199,7 +211,11 @@
|
||||
* @param {number} [status]
|
||||
* The HTTP status code.
|
||||
*/
|
||||
Drupal.AjaxCommands.prototype.setDialogOption = function (ajax, response, status) {
|
||||
Drupal.AjaxCommands.prototype.setDialogOption = function(
|
||||
ajax,
|
||||
response,
|
||||
status,
|
||||
) {
|
||||
const $dialog = $(response.selector);
|
||||
if ($dialog.length) {
|
||||
$dialog.dialog('option', response.optionName, response.optionValue);
|
||||
@@ -219,7 +235,7 @@
|
||||
* Dialog settings.
|
||||
*/
|
||||
$(window).on('dialog:aftercreate', (e, dialog, $element, settings) => {
|
||||
$element.on('click.dialog', '.dialog-cancel', (e) => {
|
||||
$element.on('click.dialog', '.dialog-cancel', e => {
|
||||
dialog.close('cancel');
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@@ -239,4 +255,4 @@
|
||||
$(window).on('dialog:beforeclose', (e, dialog, $element) => {
|
||||
$element.off('.dialog');
|
||||
});
|
||||
}(jQuery, Drupal));
|
||||
})(jQuery, Drupal);
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
* @see http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
(function($, Drupal, drupalSettings) {
|
||||
/**
|
||||
* Default dialog options.
|
||||
*
|
||||
@@ -59,19 +59,12 @@
|
||||
* @return {Drupal.dialog~dialogDefinition}
|
||||
* The dialog instance.
|
||||
*/
|
||||
Drupal.dialog = function (element, options) {
|
||||
Drupal.dialog = function(element, options) {
|
||||
let undef;
|
||||
const $element = $(element);
|
||||
const dialog = {
|
||||
open: false,
|
||||
returnValue: undef,
|
||||
show() {
|
||||
openDialog({ modal: false });
|
||||
},
|
||||
showModal() {
|
||||
openDialog({ modal: true });
|
||||
},
|
||||
close: closeDialog,
|
||||
};
|
||||
|
||||
function openDialog(settings) {
|
||||
@@ -91,6 +84,14 @@
|
||||
$(window).trigger('dialog:afterclose', [dialog, $element]);
|
||||
}
|
||||
|
||||
dialog.show = () => {
|
||||
openDialog({ modal: false });
|
||||
};
|
||||
dialog.showModal = () => {
|
||||
openDialog({ modal: true });
|
||||
};
|
||||
dialog.close = closeDialog;
|
||||
|
||||
return dialog;
|
||||
};
|
||||
}(jQuery, Drupal, drupalSettings));
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* Adds default classes to buttons for styling purposes.
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
(function($) {
|
||||
$.widget('ui.dialog', $.ui.dialog, {
|
||||
options: {
|
||||
buttonClass: 'button',
|
||||
@@ -15,7 +15,10 @@
|
||||
let index;
|
||||
const il = opts.buttons.length;
|
||||
for (index = 0; index < il; index++) {
|
||||
if (opts.buttons[index].primary && opts.buttons[index].primary === true) {
|
||||
if (
|
||||
opts.buttons[index].primary &&
|
||||
opts.buttons[index].primary === true
|
||||
) {
|
||||
primaryIndex = index;
|
||||
delete opts.buttons[index].primary;
|
||||
break;
|
||||
@@ -28,4 +31,4 @@
|
||||
}
|
||||
},
|
||||
});
|
||||
}(jQuery));
|
||||
})(jQuery);
|
||||
|
||||
@@ -23,15 +23,7 @@
|
||||
var $element = $(element);
|
||||
var dialog = {
|
||||
open: false,
|
||||
returnValue: undef,
|
||||
show: function show() {
|
||||
openDialog({ modal: false });
|
||||
},
|
||||
showModal: function showModal() {
|
||||
openDialog({ modal: true });
|
||||
},
|
||||
|
||||
close: closeDialog
|
||||
returnValue: undef
|
||||
};
|
||||
|
||||
function openDialog(settings) {
|
||||
@@ -51,6 +43,14 @@
|
||||
$(window).trigger('dialog:afterclose', [dialog, $element]);
|
||||
}
|
||||
|
||||
dialog.show = function () {
|
||||
openDialog({ modal: false });
|
||||
};
|
||||
dialog.showModal = function () {
|
||||
openDialog({ modal: true });
|
||||
};
|
||||
dialog.close = closeDialog;
|
||||
|
||||
return dialog;
|
||||
};
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
@@ -9,57 +9,12 @@
|
||||
* @event dialogContentResize
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings, debounce, displace) {
|
||||
(function($, Drupal, drupalSettings, debounce, displace) {
|
||||
// autoResize option will turn off resizable and draggable.
|
||||
drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
|
||||
|
||||
/**
|
||||
* Resets the current options for positioning.
|
||||
*
|
||||
* This is used as a window resize and scroll callback to reposition the
|
||||
* jQuery UI dialog. Although not a built-in jQuery UI option, this can
|
||||
* be disabled by setting autoResize: false in the options array when creating
|
||||
* a new {@link Drupal.dialog}.
|
||||
*
|
||||
* @function Drupal.dialog~resetSize
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*
|
||||
* @fires event:dialogContentResize
|
||||
*/
|
||||
function resetSize(event) {
|
||||
const positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
|
||||
let adjustedOptions = {};
|
||||
let windowHeight = $(window).height();
|
||||
let option;
|
||||
let optionValue;
|
||||
let adjustedValue;
|
||||
for (let n = 0; n < positionOptions.length; n++) {
|
||||
option = positionOptions[n];
|
||||
optionValue = event.data.settings[option];
|
||||
if (optionValue) {
|
||||
// jQuery UI does not support percentages on heights, convert to pixels.
|
||||
if (typeof optionValue === 'string' && /%$/.test(optionValue) && /height/i.test(option)) {
|
||||
// Take offsets in account.
|
||||
windowHeight -= displace.offsets.top + displace.offsets.bottom;
|
||||
adjustedValue = parseInt(0.01 * parseInt(optionValue, 10) * windowHeight, 10);
|
||||
// Don't force the dialog to be bigger vertically than needed.
|
||||
if (option === 'height' && event.data.$element.parent().outerHeight() < adjustedValue) {
|
||||
adjustedValue = 'auto';
|
||||
}
|
||||
adjustedOptions[option] = adjustedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Offset the dialog center to be at the center of Drupal.displace.offsets.
|
||||
if (!event.data.settings.modal) {
|
||||
adjustedOptions = resetPosition(adjustedOptions);
|
||||
}
|
||||
event.data.$element
|
||||
.dialog('option', adjustedOptions)
|
||||
.trigger('dialogContentResize');
|
||||
}
|
||||
drupalSettings.dialog = $.extend(
|
||||
{ autoResize: true, maxHeight: '95%' },
|
||||
drupalSettings.dialog,
|
||||
);
|
||||
|
||||
/**
|
||||
* Position the dialog's center at the center of displace.offsets boundaries.
|
||||
@@ -77,32 +32,107 @@
|
||||
const left = offsets.left - offsets.right;
|
||||
const top = offsets.top - offsets.bottom;
|
||||
|
||||
const leftString = `${(left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2))}px`;
|
||||
const topString = `${(top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2))}px`;
|
||||
const leftString = `${(left > 0 ? '+' : '-') +
|
||||
Math.abs(Math.round(left / 2))}px`;
|
||||
const topString = `${(top > 0 ? '+' : '-') +
|
||||
Math.abs(Math.round(top / 2))}px`;
|
||||
options.position = {
|
||||
my: `center${left !== 0 ? leftString : ''} center${top !== 0 ? topString : ''}`,
|
||||
my: `center${left !== 0 ? leftString : ''} center${
|
||||
top !== 0 ? topString : ''
|
||||
}`,
|
||||
of: window,
|
||||
};
|
||||
return options;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the current options for positioning.
|
||||
*
|
||||
* This is used as a window resize and scroll callback to reposition the
|
||||
* jQuery UI dialog. Although not a built-in jQuery UI option, this can
|
||||
* be disabled by setting autoResize: false in the options array when creating
|
||||
* a new {@link Drupal.dialog}.
|
||||
*
|
||||
* @function Drupal.dialog~resetSize
|
||||
*
|
||||
* @param {jQuery.Event} event
|
||||
* The event triggered.
|
||||
*
|
||||
* @fires event:dialogContentResize
|
||||
*/
|
||||
function resetSize(event) {
|
||||
const positionOptions = [
|
||||
'width',
|
||||
'height',
|
||||
'minWidth',
|
||||
'minHeight',
|
||||
'maxHeight',
|
||||
'maxWidth',
|
||||
'position',
|
||||
];
|
||||
let adjustedOptions = {};
|
||||
let windowHeight = $(window).height();
|
||||
let option;
|
||||
let optionValue;
|
||||
let adjustedValue;
|
||||
for (let n = 0; n < positionOptions.length; n++) {
|
||||
option = positionOptions[n];
|
||||
optionValue = event.data.settings[option];
|
||||
if (optionValue) {
|
||||
// jQuery UI does not support percentages on heights, convert to pixels.
|
||||
if (
|
||||
typeof optionValue === 'string' &&
|
||||
/%$/.test(optionValue) &&
|
||||
/height/i.test(option)
|
||||
) {
|
||||
// Take offsets in account.
|
||||
windowHeight -= displace.offsets.top + displace.offsets.bottom;
|
||||
adjustedValue = parseInt(
|
||||
0.01 * parseInt(optionValue, 10) * windowHeight,
|
||||
10,
|
||||
);
|
||||
// Don't force the dialog to be bigger vertically than needed.
|
||||
if (
|
||||
option === 'height' &&
|
||||
event.data.$element.parent().outerHeight() < adjustedValue
|
||||
) {
|
||||
adjustedValue = 'auto';
|
||||
}
|
||||
adjustedOptions[option] = adjustedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Offset the dialog center to be at the center of Drupal.displace.offsets.
|
||||
if (!event.data.settings.modal) {
|
||||
adjustedOptions = resetPosition(adjustedOptions);
|
||||
}
|
||||
event.data.$element
|
||||
.dialog('option', adjustedOptions)
|
||||
.trigger('dialogContentResize');
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': function (event, dialog, $element, settings) {
|
||||
'dialog:aftercreate': function(event, dialog, $element, settings) {
|
||||
const autoResize = debounce(resetSize, 20);
|
||||
const eventData = { settings, $element };
|
||||
if (settings.autoResize === true || settings.autoResize === 'true') {
|
||||
$element
|
||||
.dialog('option', { resizable: false, draggable: false })
|
||||
.dialog('widget').css('position', 'fixed');
|
||||
.dialog('widget')
|
||||
.css('position', 'fixed');
|
||||
$(window)
|
||||
.on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
|
||||
.trigger('resize.dialogResize');
|
||||
$(document).on('drupalViewportOffsetChange.dialogResize', eventData, autoResize);
|
||||
$(document).on(
|
||||
'drupalViewportOffsetChange.dialogResize',
|
||||
eventData,
|
||||
autoResize,
|
||||
);
|
||||
}
|
||||
},
|
||||
'dialog:beforeclose': function (event, dialog, $element) {
|
||||
'dialog:beforeclose': function(event, dialog, $element) {
|
||||
$(window).off('.dialogResize');
|
||||
$(document).off('.dialogResize');
|
||||
},
|
||||
});
|
||||
}(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace));
|
||||
})(jQuery, Drupal, drupalSettings, Drupal.debounce, Drupal.displace);
|
||||
|
||||
@@ -8,6 +8,20 @@
|
||||
(function ($, Drupal, drupalSettings, debounce, displace) {
|
||||
drupalSettings.dialog = $.extend({ autoResize: true, maxHeight: '95%' }, drupalSettings.dialog);
|
||||
|
||||
function resetPosition(options) {
|
||||
var offsets = displace.offsets;
|
||||
var left = offsets.left - offsets.right;
|
||||
var top = offsets.top - offsets.bottom;
|
||||
|
||||
var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
|
||||
var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
|
||||
options.position = {
|
||||
my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : ''),
|
||||
of: window
|
||||
};
|
||||
return options;
|
||||
}
|
||||
|
||||
function resetSize(event) {
|
||||
var positionOptions = ['width', 'height', 'minWidth', 'minHeight', 'maxHeight', 'maxWidth', 'position'];
|
||||
var adjustedOptions = {};
|
||||
@@ -37,20 +51,6 @@
|
||||
event.data.$element.dialog('option', adjustedOptions).trigger('dialogContentResize');
|
||||
}
|
||||
|
||||
function resetPosition(options) {
|
||||
var offsets = displace.offsets;
|
||||
var left = offsets.left - offsets.right;
|
||||
var top = offsets.top - offsets.bottom;
|
||||
|
||||
var leftString = (left > 0 ? '+' : '-') + Math.abs(Math.round(left / 2)) + 'px';
|
||||
var topString = (top > 0 ? '+' : '-') + Math.abs(Math.round(top / 2)) + 'px';
|
||||
options.position = {
|
||||
my: 'center' + (left !== 0 ? leftString : '') + ' center' + (top !== 0 ? topString : ''),
|
||||
of: window
|
||||
};
|
||||
return options;
|
||||
}
|
||||
|
||||
$(window).on({
|
||||
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
||||
var autoResize = debounce(resetSize, 20);
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
/* Wrap the form that's inside the off-canvas dialog. */
|
||||
.ui-dialog-off-canvas #drupal-off-canvas {
|
||||
padding: 0 20px;
|
||||
padding: 0 20px 20px;
|
||||
/* Prevent horizontal scrollbar. */
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
var topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
|
||||
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');
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -7,5 +7,5 @@
|
||||
*/
|
||||
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: all 0.7s ease;
|
||||
transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@
|
||||
/* Style the dialog-off-canvas container. */
|
||||
.ui-dialog.ui-dialog-off-canvas {
|
||||
background: #444;
|
||||
border: 0 solid transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
|
||||
padding: 0;
|
||||
@@ -14,6 +13,9 @@
|
||||
/* Layer the dialog just under the toolbar. */
|
||||
z-index: 501;
|
||||
}
|
||||
.ui-widget.ui-dialog.ui-dialog-off-canvas {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* Style the off-canvas dialog header. */
|
||||
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
|
||||
|
||||
Reference in New Issue
Block a user