X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmisc%2Fdialog%2Foff-canvas.es6.js;fp=web%2Fcore%2Fmisc%2Fdialog%2Foff-canvas.es6.js;h=f8e3fab491bb355950bdfc68408793a266ee7e55;hp=0068e44e1b1fac98b2f7fbb69936abbbe4a4b314;hb=0bf8d09d2542548982e81a441b1f16e75873a04f;hpb=74df008bdbb3a11eeea356744f39b802369bda3c diff --git a/web/core/misc/dialog/off-canvas.es6.js b/web/core/misc/dialog/off-canvas.es6.js index 0068e44e1..f8e3fab49 100644 --- a/web/core/misc/dialog/off-canvas.es6.js +++ b/web/core/misc/dialog/off-canvas.es6.js @@ -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);