2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function ($, Drupal, debounce, displace) {
10 minDisplaceWidth: 768,
12 $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
14 isOffCanvas: function isOffCanvas($element) {
15 return $element.is('#drupal-off-canvas');
17 removeOffCanvasEvents: function removeOffCanvasEvents($element) {
18 $element.off('.off-canvas');
19 $(document).off('.off-canvas');
20 $(window).off('.off-canvas');
22 beforeCreate: function beforeCreate(_ref) {
23 var settings = _ref.settings,
24 $element = _ref.$element;
26 Drupal.offCanvas.removeOffCanvasEvents($element);
28 $('body').addClass('js-off-canvas-dialog-open');
32 at: Drupal.offCanvas.getEdge() + ' top',
36 settings.height = $(window).height();
38 beforeClose: function beforeClose(_ref2) {
39 var $element = _ref2.$element;
41 $('body').removeClass('js-off-canvas-dialog-open');
43 Drupal.offCanvas.removeOffCanvasEvents($element);
45 Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
47 afterCreate: function afterCreate(_ref3) {
48 var $element = _ref3.$element,
49 settings = _ref3.settings;
51 var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
53 $element.on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize).on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
55 Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
57 $(window).on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
59 render: function render(_ref4) {
60 var settings = _ref4.settings;
62 $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
64 handleDialogResize: function handleDialogResize(event) {
65 var $element = event.data.$element;
66 var $container = Drupal.offCanvas.getContainer($element);
68 var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
71 $element.css({ height: 'auto' });
72 var modalHeight = $container.height();
74 $offsets.each(function (i, e) {
75 offset += $(e).outerHeight();
78 var scrollOffset = $element.outerHeight() - $element.height();
79 $element.height(modalHeight - offset - scrollOffset);
81 resetSize: function resetSize(event) {
82 var offsets = displace.offsets;
83 var $element = event.data.$element;
84 var container = Drupal.offCanvas.getContainer($element);
86 var topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
87 var adjustedOptions = {
89 my: Drupal.offCanvas.getEdge() + ' top',
90 at: Drupal.offCanvas.getEdge() + ' top' + topPosition,
97 height: $(window).height() - (offsets.top + offsets.bottom) + 'px'
100 $element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
102 bodyPadding: function bodyPadding(event) {
103 if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
106 var $element = event.data.$element;
107 var $container = Drupal.offCanvas.getContainer($element);
108 var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
110 var width = $container.outerWidth();
111 var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
112 if (width !== mainCanvasPadding) {
113 $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
114 $container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
118 getContainer: function getContainer($element) {
119 return $element.dialog('widget');
121 getEdge: function getEdge() {
122 return document.documentElement.dir === 'rtl' ? 'left' : 'right';
126 Drupal.behaviors.offCanvasEvents = {
127 attach: function attach() {
128 $(window).once('off-canvas').on({
129 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
130 if (Drupal.offCanvas.isOffCanvas($element)) {
131 Drupal.offCanvas.beforeCreate({ dialog: dialog, $element: $element, settings: settings });
134 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
135 if (Drupal.offCanvas.isOffCanvas($element)) {
136 Drupal.offCanvas.render({ dialog: dialog, $element: $element, settings: settings });
137 Drupal.offCanvas.afterCreate({ $element: $element, settings: settings });
140 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
141 if (Drupal.offCanvas.isOffCanvas($element)) {
142 Drupal.offCanvas.beforeClose({ dialog: dialog, $element: $element });
148 })(jQuery, Drupal, Drupal.debounce, Drupal.displace);