Chris@14: /**
Chris@14:  * @file
Chris@14:  * Drupal's off-canvas library.
Chris@14:  */
Chris@14: 
Chris@14: (($, Drupal, debounce, displace) => {
Chris@14:   /**
Chris@14:    * Off-canvas dialog implementation using jQuery Dialog.
Chris@14:    *
Chris@14:    * Transforms the regular dialogs created using Drupal.dialog when the dialog
Chris@14:    * element equals '#drupal-off-canvas' into an side-loading dialog.
Chris@14:    *
Chris@14:    * @namespace
Chris@14:    */
Chris@14:   Drupal.offCanvas = {
Chris@14: 
Chris@14:     /**
Chris@14:      * The minimum width to use body displace needs to match the width at which
Chris@14:      * the tray will be 100% width. @see core/misc/dialog/off-canvas.css
Chris@14:      *
Chris@14:      * @type {Number}
Chris@14:      */
Chris@14:     minDisplaceWidth: 768,
Chris@14: 
Chris@14:     /**
Chris@14:      * Wrapper used to position off-canvas dialog.
Chris@14:      *
Chris@14:      * @type {jQuery}
Chris@14:      */
Chris@14:     $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
Chris@14: 
Chris@14:     /**
Chris@14:      * Determines if an element is an off-canvas dialog.
Chris@14:      *
Chris@14:      * @param {jQuery} $element
Chris@14:      *   The dialog element.
Chris@14:      *
Chris@14:      * @return {bool}
Chris@14:      *   True this is currently an off-canvas dialog.
Chris@14:      */
Chris@14:     isOffCanvas($element) {
Chris@14:       return $element.is('#drupal-off-canvas');
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Remove off-canvas dialog events.
Chris@14:      *
Chris@14:      * @param {jQuery} $element
Chris@14:      *   The target element.
Chris@14:      */
Chris@14:     removeOffCanvasEvents($element) {
Chris@14:       $element.off('.off-canvas');
Chris@14:       $(document).off('.off-canvas');
Chris@14:       $(window).off('.off-canvas');
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Handler fired before an off-canvas dialog has been opened.
Chris@14:      *
Chris@14:      * @param {Object} settings
Chris@14:      *   Settings related to the composition of the dialog.
Chris@14:      *
Chris@14:      * @return {undefined}
Chris@14:      */
Chris@14:     beforeCreate({ settings, $element }) {
Chris@14:       // Clean up previous dialog event handlers.
Chris@14:       Drupal.offCanvas.removeOffCanvasEvents($element);
Chris@14: 
Chris@14:       $('body').addClass('js-off-canvas-dialog-open');
Chris@14:       // @see http://api.jqueryui.com/position/
Chris@14:       settings.position = {
Chris@14:         my: 'left top',
Chris@14:         at: `${Drupal.offCanvas.getEdge()} top`,
Chris@14:         of: window,
Chris@14:       };
Chris@14: 
Chris@14:       /**
Chris@14:        * Applies initial height to dialog based on window height.
Chris@14:        * @see http://api.jqueryui.com/dialog for all dialog options.
Chris@14:        */
Chris@14:       settings.height = $(window).height();
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Handler fired after an off-canvas dialog has been closed.
Chris@14:      *
Chris@14:      * @return {undefined}
Chris@14:      */
Chris@14:     beforeClose({ $element }) {
Chris@14:       $('body').removeClass('js-off-canvas-dialog-open');
Chris@14:       // Remove all *.off-canvas events
Chris@14:       Drupal.offCanvas.removeOffCanvasEvents($element);
Chris@14: 
Chris@14:       Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Handler fired when an off-canvas dialog has been opened.
Chris@14:      *
Chris@14:      * @param {jQuery} $element
Chris@14:      *   The off-canvas dialog element.
Chris@14:      * @param {Object} settings
Chris@14:      *   Settings related to the composition of the dialog.
Chris@14:      *
Chris@14:      * @return {undefined}
Chris@14:      */
Chris@14:     afterCreate({ $element, settings }) {
Chris@14:       const eventData = { settings, $element, offCanvasDialog: this };
Chris@14: 
Chris@14:       $element
Chris@14:         .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize)
Chris@14:         .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
Chris@14: 
Chris@14:       Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
Chris@14: 
Chris@14:       $(window)
Chris@14:         .on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100))
Chris@14:         .trigger('resize.off-canvas');
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Toggle classes based on title existence.
Chris@14:      * Called with Drupal.offCanvas.afterCreate.
Chris@14:      *
Chris@14:      * @param {Object} settings
Chris@14:      *   Settings related to the composition of the dialog.
Chris@14:      *
Chris@14:      * @return {undefined}
Chris@14:      */
Chris@14:     render({ settings }) {
Chris@14:       $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Adjusts the dialog on resize.
Chris@14:      *
Chris@14:      * @param {jQuery.Event} event
Chris@14:      *   The event triggered.
Chris@14:      * @param {object} event.data
Chris@14:      *   Data attached to the event.
Chris@14:      */
Chris@14:     handleDialogResize(event) {
Chris@14:       const $element = event.data.$element;
Chris@14:       const $container = Drupal.offCanvas.getContainer($element);
Chris@14: 
Chris@14:       const $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
Chris@14:       let offset = 0;
Chris@14: 
Chris@14:       // Let scroll element take all the height available.
Chris@14:       $element.css({ height: 'auto' });
Chris@14:       const modalHeight = $container.height();
Chris@14: 
Chris@14:       $offsets.each((i, e) => {
Chris@14:         offset += $(e).outerHeight();
Chris@14:       });
Chris@14: 
Chris@14:       // Take internal padding into account.
Chris@14:       const scrollOffset = $element.outerHeight() - $element.height();
Chris@14:       $element.height(modalHeight - offset - scrollOffset);
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Resets the size of the dialog.
Chris@14:      *
Chris@14:      * @param {jQuery.Event} event
Chris@14:      *   The event triggered.
Chris@14:      * @param {object} event.data
Chris@14:      *   Data attached to the event.
Chris@14:      */
Chris@14:     resetSize(event) {
Chris@14:       const offsets = displace.offsets;
Chris@14:       const $element = event.data.$element;
Chris@14:       const container = Drupal.offCanvas.getContainer($element);
Chris@14: 
Chris@14:       const topPosition = (offsets.top !== 0 ? `+${offsets.top}` : '');
Chris@14:       const adjustedOptions = {
Chris@14:         // @see http://api.jqueryui.com/position/
Chris@14:         position: {
Chris@14:           my: `${Drupal.offCanvas.getEdge()} top`,
Chris@14:           at: `${Drupal.offCanvas.getEdge()} top${topPosition}`,
Chris@14:           of: window,
Chris@14:         },
Chris@14:       };
Chris@14: 
Chris@14:       container.css({
Chris@14:         position: 'fixed',
Chris@14:         height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
Chris@14:       });
Chris@14: 
Chris@14:       $element
Chris@14:         .dialog('option', adjustedOptions)
Chris@14:         .trigger('dialogContentResize.off-canvas');
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * Adjusts the body padding when the dialog is resized.
Chris@14:      *
Chris@14:      * @param {jQuery.Event} event
Chris@14:      *   The event triggered.
Chris@14:      * @param {object} event.data
Chris@14:      *   Data attached to the event.
Chris@14:      */
Chris@14:     bodyPadding(event) {
Chris@14:       if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
Chris@14:         return;
Chris@14:       }
Chris@14:       const $element = event.data.$element;
Chris@14:       const $container = Drupal.offCanvas.getContainer($element);
Chris@14:       const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
Chris@14: 
Chris@14:       const width = $container.outerWidth();
Chris@14:       const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`);
Chris@14:       if (width !== mainCanvasPadding) {
Chris@14:         $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, `${width}px`);
Chris@14:         $container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
Chris@14:         displace();
Chris@14:       }
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * The HTML element that surrounds the dialog.
Chris@14:      * @param {HTMLElement} $element
Chris@14:      *   The dialog element.
Chris@14:      *
Chris@14:      * @return {HTMLElement}
Chris@14:      *   The containing element.
Chris@14:      */
Chris@14:     getContainer($element) {
Chris@14:       return $element.dialog('widget');
Chris@14:     },
Chris@14: 
Chris@14:     /**
Chris@14:      * The edge of the screen that the dialog should appear on.
Chris@14:      *
Chris@14:      * @return {string}
Chris@14:      *   The edge the tray will be shown on, left or right.
Chris@14:      */
Chris@14:     getEdge() {
Chris@14:       return document.documentElement.dir === 'rtl' ? 'left' : 'right';
Chris@14:     },
Chris@14:   };
Chris@14: 
Chris@14:   /**
Chris@14:    * Attaches off-canvas dialog behaviors.
Chris@14:    *
Chris@14:    * @type {Drupal~behavior}
Chris@14:    *
Chris@14:    * @prop {Drupal~behaviorAttach} attach
Chris@14:    *   Attaches event listeners for off-canvas dialogs.
Chris@14:    */
Chris@14:   Drupal.behaviors.offCanvasEvents = {
Chris@14:     attach: () => {
Chris@14:       $(window).once('off-canvas').on({
Chris@14:         'dialog:beforecreate': (event, dialog, $element, settings) => {
Chris@14:           if (Drupal.offCanvas.isOffCanvas($element)) {
Chris@14:             Drupal.offCanvas.beforeCreate({ dialog, $element, settings });
Chris@14:           }
Chris@14:         },
Chris@14:         'dialog:aftercreate': (event, dialog, $element, settings) => {
Chris@14:           if (Drupal.offCanvas.isOffCanvas($element)) {
Chris@14:             Drupal.offCanvas.render({ dialog, $element, settings });
Chris@14:             Drupal.offCanvas.afterCreate({ $element, settings });
Chris@14:           }
Chris@14:         },
Chris@14:         'dialog:beforeclose': (event, dialog, $element) => {
Chris@14:           if (Drupal.offCanvas.isOffCanvas($element)) {
Chris@14:             Drupal.offCanvas.beforeClose({ dialog, $element });
Chris@14:           }
Chris@14:         },
Chris@14:       });
Chris@14:     },
Chris@14:   };
Chris@14: })(jQuery, Drupal, Drupal.debounce, Drupal.displace);