Commit 48339450 authored by Cottser's avatar Cottser

Issue #2830882 by tedbow, droplet, Adita, drpal, markcarver, Wim Leers, nod_:...

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
parent 8c9c8d3b
...@@ -6,106 +6,124 @@ ...@@ -6,106 +6,124 @@
**/ **/
(function ($, Drupal, debounce, displace) { (function ($, Drupal, debounce, displace) {
var minDisplaceWidth = 768; Drupal.offCanvas = {
minDisplaceWidth: 768,
var edge = document.documentElement.dir === 'rtl' ? 'left' : 'right'; $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
var $mainCanvasWrapper = $('[data-off-canvas-main-canvas]'); isOffCanvas: function isOffCanvas($element) {
return $element.is('#drupal-off-canvas');
},
beforeCreate: function beforeCreate(settings) {
$('body').addClass('js-tray-open');
settings.dialogClass += ' ui-dialog-off-canvas';
function resetSize(event) { settings.position = {
var offsets = displace.offsets; my: 'left top',
var $element = event.data.$element; at: Drupal.offCanvas.getEdge() + ' top',
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
} };
};
$widget.css({ settings.height = $(window).height();
position: 'fixed', },
height: $(window).height() - (offsets.top + offsets.bottom) + 'px' beforeClose: function beforeClose() {
}); $('body').removeClass('js-tray-open');
$element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas'); $(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.scrollTop($elementScroll); $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');
}
function handleDialogResize(event) { Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
var $element = event.data.$element;
var $widget = $element.dialog('widget');
var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)'); $(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
var offset = 0; },
var modalHeight = void 0; 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);
$element.css({ height: 'auto' }); var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
modalHeight = $widget.height(); var offset = 0;
$offsets.each(function () {
offset += $(this).outerHeight();
});
var scrollOffset = $element.outerHeight() - $element.height(); $element.css({ height: 'auto' });
$element.height(modalHeight - offset - scrollOffset); var modalHeight = $container.height();
}
function bodyPadding(event) { $offsets.each(function ($offset) {
if ($('body').outerWidth() < minDisplaceWidth) { offset += $($offset).outerHeight();
return; });
}
var $element = event.data.$element; var scrollOffset = $element.outerHeight() - $element.height();
var $widget = $element.dialog('widget'); $element.height(modalHeight - offset - scrollOffset);
},
var width = $widget.outerWidth(); resetSize: function resetSize(event) {
var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + edge); var offsets = displace.offsets;
if (width !== mainCanvasPadding) { var $element = event.data.$element;
$mainCanvasWrapper.css('padding-' + edge, width + 'px'); var container = Drupal.offCanvas.getContainer($element);
$widget.attr('data-offset-' + edge, width);
displace(); 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();
var 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();
}
},
getContainer: function getContainer($element) {
return $element.dialog('widget');
},
getEdge: function getEdge() {
return document.documentElement.dir === 'rtl' ? 'left' : 'right';
} }
} };
Drupal.behaviors.offCanvasEvents = { Drupal.behaviors.offCanvasEvents = {
attach: function attach() { attach: function attach() {
$(window).once('off-canvas').on({ $(window).once('off-canvas').on({
'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) { 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
if ($element.is('#drupal-off-canvas')) { if (Drupal.offCanvas.isOffCanvas($element)) {
var eventData = { settings: settings, $element: $element }; Drupal.offCanvas.beforeCreate(settings);
$('.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:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) { 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
if ($element.is('#drupal-off-canvas')) { if (Drupal.offCanvas.isOffCanvas($element)) {
$('body').addClass('js-tray-open'); Drupal.offCanvas.render(settings);
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 ($element.is('#drupal-off-canvas')) { if (Drupal.offCanvas.isOffCanvas($element)) {
$('body').removeClass('js-tray-open'); Drupal.offCanvas.beforeClose(event, dialog, $element);
$(document).off('.off-canvas');
$(window).off('.off-canvas');
$mainCanvasWrapper.css('padding-' + edge, 0);
} }
} }
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment