Chris@14
|
1 /**
|
Chris@14
|
2 * DO NOT EDIT THIS FILE.
|
Chris@14
|
3 * See the following change record for more information,
|
Chris@14
|
4 * https://www.drupal.org/node/2815083
|
Chris@14
|
5 * @preserve
|
Chris@14
|
6 **/
|
Chris@14
|
7
|
Chris@14
|
8 (function ($, Drupal, debounce, displace) {
|
Chris@14
|
9 Drupal.offCanvas = {
|
Chris@17
|
10 position: null,
|
Chris@17
|
11
|
Chris@17
|
12 minimumHeight: 30,
|
Chris@17
|
13
|
Chris@14
|
14 minDisplaceWidth: 768,
|
Chris@14
|
15
|
Chris@14
|
16 $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
|
Chris@14
|
17
|
Chris@14
|
18 isOffCanvas: function isOffCanvas($element) {
|
Chris@14
|
19 return $element.is('#drupal-off-canvas');
|
Chris@14
|
20 },
|
Chris@14
|
21 removeOffCanvasEvents: function removeOffCanvasEvents($element) {
|
Chris@14
|
22 $element.off('.off-canvas');
|
Chris@14
|
23 $(document).off('.off-canvas');
|
Chris@14
|
24 $(window).off('.off-canvas');
|
Chris@14
|
25 },
|
Chris@14
|
26 beforeCreate: function beforeCreate(_ref) {
|
Chris@14
|
27 var settings = _ref.settings,
|
Chris@14
|
28 $element = _ref.$element;
|
Chris@14
|
29
|
Chris@14
|
30 Drupal.offCanvas.removeOffCanvasEvents($element);
|
Chris@14
|
31
|
Chris@14
|
32 $('body').addClass('js-off-canvas-dialog-open');
|
Chris@14
|
33
|
Chris@14
|
34 settings.position = {
|
Chris@14
|
35 my: 'left top',
|
Chris@14
|
36 at: Drupal.offCanvas.getEdge() + ' top',
|
Chris@14
|
37 of: window
|
Chris@14
|
38 };
|
Chris@14
|
39
|
Chris@17
|
40 var position = settings.drupalOffCanvasPosition;
|
Chris@17
|
41 var height = position === 'side' ? $(window).height() : settings.height;
|
Chris@17
|
42 var width = position === 'side' ? settings.width : '100%';
|
Chris@17
|
43 settings.height = height;
|
Chris@17
|
44 settings.width = width;
|
Chris@14
|
45 },
|
Chris@14
|
46 beforeClose: function beforeClose(_ref2) {
|
Chris@14
|
47 var $element = _ref2.$element;
|
Chris@14
|
48
|
Chris@14
|
49 $('body').removeClass('js-off-canvas-dialog-open');
|
Chris@14
|
50
|
Chris@14
|
51 Drupal.offCanvas.removeOffCanvasEvents($element);
|
Chris@17
|
52 Drupal.offCanvas.resetPadding();
|
Chris@14
|
53 },
|
Chris@14
|
54 afterCreate: function afterCreate(_ref3) {
|
Chris@14
|
55 var $element = _ref3.$element,
|
Chris@14
|
56 settings = _ref3.settings;
|
Chris@14
|
57
|
Chris@14
|
58 var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
|
Chris@14
|
59
|
Chris@14
|
60 $element.on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize).on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.bodyPadding);
|
Chris@14
|
61
|
Chris@14
|
62 Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
|
Chris@14
|
63
|
Chris@14
|
64 $(window).on('resize.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
|
Chris@14
|
65 },
|
Chris@14
|
66 render: function render(_ref4) {
|
Chris@14
|
67 var settings = _ref4.settings;
|
Chris@14
|
68
|
Chris@14
|
69 $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
|
Chris@14
|
70 },
|
Chris@14
|
71 handleDialogResize: function handleDialogResize(event) {
|
Chris@14
|
72 var $element = event.data.$element;
|
Chris@14
|
73 var $container = Drupal.offCanvas.getContainer($element);
|
Chris@14
|
74
|
Chris@14
|
75 var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
|
Chris@14
|
76 var offset = 0;
|
Chris@14
|
77
|
Chris@14
|
78 $element.css({ height: 'auto' });
|
Chris@14
|
79 var modalHeight = $container.height();
|
Chris@14
|
80
|
Chris@14
|
81 $offsets.each(function (i, e) {
|
Chris@14
|
82 offset += $(e).outerHeight();
|
Chris@14
|
83 });
|
Chris@14
|
84
|
Chris@14
|
85 var scrollOffset = $element.outerHeight() - $element.height();
|
Chris@14
|
86 $element.height(modalHeight - offset - scrollOffset);
|
Chris@14
|
87 },
|
Chris@14
|
88 resetSize: function resetSize(event) {
|
Chris@14
|
89 var $element = event.data.$element;
|
Chris@14
|
90 var container = Drupal.offCanvas.getContainer($element);
|
Chris@17
|
91 var position = event.data.settings.drupalOffCanvasPosition;
|
Chris@14
|
92
|
Chris@17
|
93 if (Drupal.offCanvas.position && Drupal.offCanvas.position !== position) {
|
Chris@17
|
94 container.removeAttr('data-offset-' + Drupal.offCanvas.position);
|
Chris@17
|
95 }
|
Chris@17
|
96
|
Chris@17
|
97 if (position === 'top') {
|
Chris@17
|
98 $element.css('min-height', Drupal.offCanvas.minimumHeight + 'px');
|
Chris@17
|
99 }
|
Chris@17
|
100
|
Chris@17
|
101 displace();
|
Chris@17
|
102
|
Chris@17
|
103 var offsets = displace.offsets;
|
Chris@17
|
104
|
Chris@17
|
105 var topPosition = position === 'side' && offsets.top !== 0 ? '+' + offsets.top : '';
|
Chris@14
|
106 var adjustedOptions = {
|
Chris@14
|
107 position: {
|
Chris@14
|
108 my: Drupal.offCanvas.getEdge() + ' top',
|
Chris@14
|
109 at: Drupal.offCanvas.getEdge() + ' top' + topPosition,
|
Chris@14
|
110 of: window
|
Chris@14
|
111 }
|
Chris@14
|
112 };
|
Chris@14
|
113
|
Chris@17
|
114 var height = position === 'side' ? $(window).height() - (offsets.top + offsets.bottom) + 'px' : event.data.settings.height;
|
Chris@14
|
115 container.css({
|
Chris@14
|
116 position: 'fixed',
|
Chris@17
|
117 height: height
|
Chris@14
|
118 });
|
Chris@14
|
119
|
Chris@14
|
120 $element.dialog('option', adjustedOptions).trigger('dialogContentResize.off-canvas');
|
Chris@17
|
121
|
Chris@17
|
122 Drupal.offCanvas.position = position;
|
Chris@14
|
123 },
|
Chris@14
|
124 bodyPadding: function bodyPadding(event) {
|
Chris@17
|
125 var position = event.data.settings.drupalOffCanvasPosition;
|
Chris@17
|
126 if (position === 'side' && $('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
|
Chris@14
|
127 return;
|
Chris@14
|
128 }
|
Chris@17
|
129 Drupal.offCanvas.resetPadding();
|
Chris@14
|
130 var $element = event.data.$element;
|
Chris@14
|
131 var $container = Drupal.offCanvas.getContainer($element);
|
Chris@14
|
132 var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
|
Chris@14
|
133
|
Chris@14
|
134 var width = $container.outerWidth();
|
Chris@14
|
135 var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
|
Chris@17
|
136 if (position === 'side' && width !== mainCanvasPadding) {
|
Chris@14
|
137 $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
|
Chris@14
|
138 $container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
|
Chris@14
|
139 displace();
|
Chris@14
|
140 }
|
Chris@17
|
141
|
Chris@17
|
142 var height = $container.outerHeight();
|
Chris@17
|
143 if (position === 'top') {
|
Chris@17
|
144 $mainCanvasWrapper.css('padding-top', height + 'px');
|
Chris@17
|
145 $container.attr('data-offset-top', height);
|
Chris@17
|
146 displace();
|
Chris@17
|
147 }
|
Chris@14
|
148 },
|
Chris@14
|
149 getContainer: function getContainer($element) {
|
Chris@14
|
150 return $element.dialog('widget');
|
Chris@14
|
151 },
|
Chris@14
|
152 getEdge: function getEdge() {
|
Chris@14
|
153 return document.documentElement.dir === 'rtl' ? 'left' : 'right';
|
Chris@17
|
154 },
|
Chris@17
|
155 resetPadding: function resetPadding() {
|
Chris@17
|
156 Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
|
Chris@17
|
157 Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
|
Chris@17
|
158 displace();
|
Chris@14
|
159 }
|
Chris@14
|
160 };
|
Chris@14
|
161
|
Chris@14
|
162 Drupal.behaviors.offCanvasEvents = {
|
Chris@14
|
163 attach: function attach() {
|
Chris@14
|
164 $(window).once('off-canvas').on({
|
Chris@14
|
165 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
|
Chris@14
|
166 if (Drupal.offCanvas.isOffCanvas($element)) {
|
Chris@14
|
167 Drupal.offCanvas.beforeCreate({ dialog: dialog, $element: $element, settings: settings });
|
Chris@14
|
168 }
|
Chris@14
|
169 },
|
Chris@14
|
170 'dialog:aftercreate': function dialogAftercreate(event, dialog, $element, settings) {
|
Chris@14
|
171 if (Drupal.offCanvas.isOffCanvas($element)) {
|
Chris@14
|
172 Drupal.offCanvas.render({ dialog: dialog, $element: $element, settings: settings });
|
Chris@14
|
173 Drupal.offCanvas.afterCreate({ $element: $element, settings: settings });
|
Chris@14
|
174 }
|
Chris@14
|
175 },
|
Chris@14
|
176 'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
|
Chris@14
|
177 if (Drupal.offCanvas.isOffCanvas($element)) {
|
Chris@14
|
178 Drupal.offCanvas.beforeClose({ dialog: dialog, $element: $element });
|
Chris@14
|
179 }
|
Chris@14
|
180 }
|
Chris@14
|
181 });
|
Chris@14
|
182 }
|
Chris@14
|
183 };
|
Chris@14
|
184 })(jQuery, Drupal, Drupal.debounce, Drupal.displace); |