3 * Drupal's off-canvas library.
6 (($, Drupal, debounce, displace) => {
8 * Off-canvas dialog implementation using jQuery Dialog.
10 * Transforms the regular dialogs created using Drupal.dialog when the dialog
11 * element equals '#drupal-off-canvas' into an side-loading dialog.
18 * The minimum width to use body displace needs to match the width at which
19 * the tray will be 100% width. @see core/misc/dialog/off-canvas.css
23 minDisplaceWidth: 768,
26 * Wrapper used to position off-canvas dialog.
30 $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
33 * Determines if an element is an off-canvas dialog.
35 * @param {jQuery} $element
39 * True this is currently an off-canvas dialog.
41 isOffCanvas($element) {
42 return $element.is('#drupal-off-canvas');
46 * Remove off-canvas dialog events.
48 * @param {jQuery} $element
51 removeOffCanvasEvents($element) {
52 $element.off('.off-canvas');
53 $(document).off('.off-canvas');
54 $(window).off('.off-canvas');
58 * Handler fired before an off-canvas dialog has been opened.
60 * @param {Object} settings
61 * Settings related to the composition of the dialog.
65 beforeCreate({ settings, $element }) {
66 // Clean up previous dialog event handlers.
67 Drupal.offCanvas.removeOffCanvasEvents($element);
69 $('body').addClass('js-off-canvas-dialog-open');
70 // @see http://api.jqueryui.com/position/
73 at: `${Drupal.offCanvas.getEdge()} top`,
78 * Applies initial height to dialog based on window height.
79 * @see http://api.jqueryui.com/dialog for all dialog options.
81 settings.height = $(window).height();
85 * Handler fired after an off-canvas dialog has been closed.
89 beforeClose({ $element }) {
90 $('body').removeClass('js-off-canvas-dialog-open');
91 // Remove all *.off-canvas events
92 Drupal.offCanvas.removeOffCanvasEvents($element);
94 Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
98 * Handler fired when an off-canvas dialog has been opened.
100 * @param {jQuery} $element
101 * The off-canvas dialog element.
102 * @param {Object} settings
103 * Settings related to the composition of the dialog.
105 * @return {undefined}
107 afterCreate({ $element, settings }) {
108 const eventData = { settings, $element, offCanvasDialog: this };
111 .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize)
112 .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
114 Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
117 .on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100))
118 .trigger('resize.off-canvas');
122 * Toggle classes based on title existence.
123 * Called with Drupal.offCanvas.afterCreate.
125 * @param {Object} settings
126 * Settings related to the composition of the dialog.
128 * @return {undefined}
130 render({ settings }) {
131 $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
135 * Adjusts the dialog on resize.
137 * @param {jQuery.Event} event
138 * The event triggered.
139 * @param {object} event.data
140 * Data attached to the event.
142 handleDialogResize(event) {
143 const $element = event.data.$element;
144 const $container = Drupal.offCanvas.getContainer($element);
146 const $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
149 // Let scroll element take all the height available.
150 $element.css({ height: 'auto' });
151 const modalHeight = $container.height();
153 $offsets.each((i, e) => {
154 offset += $(e).outerHeight();
157 // Take internal padding into account.
158 const scrollOffset = $element.outerHeight() - $element.height();
159 $element.height(modalHeight - offset - scrollOffset);
163 * Resets the size of the dialog.
165 * @param {jQuery.Event} event
166 * The event triggered.
167 * @param {object} event.data
168 * Data attached to the event.
171 const offsets = displace.offsets;
172 const $element = event.data.$element;
173 const container = Drupal.offCanvas.getContainer($element);
175 const topPosition = (offsets.top !== 0 ? `+${offsets.top}` : '');
176 const adjustedOptions = {
177 // @see http://api.jqueryui.com/position/
179 my: `${Drupal.offCanvas.getEdge()} top`,
180 at: `${Drupal.offCanvas.getEdge()} top${topPosition}`,
187 height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
191 .dialog('option', adjustedOptions)
192 .trigger('dialogContentResize.off-canvas');
196 * Adjusts the body padding when the dialog is resized.
198 * @param {jQuery.Event} event
199 * The event triggered.
200 * @param {object} event.data
201 * Data attached to the event.
204 if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
207 const $element = event.data.$element;
208 const $container = Drupal.offCanvas.getContainer($element);
209 const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
211 const width = $container.outerWidth();
212 const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`);
213 if (width !== mainCanvasPadding) {
214 $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, `${width}px`);
215 $container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
221 * The HTML element that surrounds the dialog.
222 * @param {HTMLElement} $element
223 * The dialog element.
225 * @return {HTMLElement}
226 * The containing element.
228 getContainer($element) {
229 return $element.dialog('widget');
233 * The edge of the screen that the dialog should appear on.
236 * The edge the tray will be shown on, left or right.
239 return document.documentElement.dir === 'rtl' ? 'left' : 'right';
244 * Attaches off-canvas dialog behaviors.
246 * @type {Drupal~behavior}
248 * @prop {Drupal~behaviorAttach} attach
249 * Attaches event listeners for off-canvas dialogs.
251 Drupal.behaviors.offCanvasEvents = {
253 $(window).once('off-canvas').on({
254 'dialog:beforecreate': (event, dialog, $element, settings) => {
255 if (Drupal.offCanvas.isOffCanvas($element)) {
256 Drupal.offCanvas.beforeCreate({ dialog, $element, settings });
259 'dialog:aftercreate': (event, dialog, $element, settings) => {
260 if (Drupal.offCanvas.isOffCanvas($element)) {
261 Drupal.offCanvas.render({ dialog, $element, settings });
262 Drupal.offCanvas.afterCreate({ $element, settings });
265 'dialog:beforeclose': (event, dialog, $element) => {
266 if (Drupal.offCanvas.isOffCanvas($element)) {
267 Drupal.offCanvas.beforeClose({ dialog, $element });
273 })(jQuery, Drupal, Drupal.debounce, Drupal.displace);