@lemonadejs/modal 2.4.4 → 2.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +118 -118
  2. package/dist/index.d.ts +108 -104
  3. package/dist/index.js +500 -500
  4. package/dist/react.d.ts +17 -17
  5. package/dist/react.js +36 -39
  6. package/dist/style.css +165 -165
  7. package/dist/vue.d.ts +15 -0
  8. package/dist/vue.js +53 -52
  9. package/package.json +21 -21
package/dist/index.js CHANGED
@@ -1,501 +1,501 @@
1
- /**
2
- * pin the modal to the left panel
3
- */
4
- if (!lemonade && typeof (require) === 'function') {
5
- var lemonade = require('lemonadejs');
6
- }
7
-
8
- ;(function (global, factory) {
9
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
10
- typeof define === 'function' && define.amd ? define(factory) :
11
- global.Modal = factory();
12
- }(this, (function () {
13
-
14
- // References
15
- const modals = [];
16
- // State of the resize and move modal
17
- let state = {};
18
- // Internal controls of the action of resize and move
19
- let controls = {};
20
- // Width of the border
21
- let cornerSize = 10;
22
- // Container with minimized modals
23
- const minimizedModals = [];
24
- // Default z-index for the modals
25
- const defaultZIndex = 20;
26
-
27
- /**
28
- * Send the modal to the front
29
- * @param container
30
- */
31
- const sendToFront = function(container) {
32
- let highestXIndex = defaultZIndex;
33
- for (let i = 0; i < modals.length; i++) {
34
- const zIndex = parseInt(modals[i].el.style.zIndex);
35
- if (zIndex > highestXIndex) {
36
- highestXIndex = zIndex;
37
- }
38
- }
39
- container.style.zIndex = highestXIndex + 1;
40
- }
41
-
42
- /**
43
- * Send modal to the back
44
- * @param container
45
- */
46
- const sendToBack = function(container) {
47
- container.style.zIndex = defaultZIndex;
48
- }
49
-
50
- // Get the coordinates of the action
51
- const getCoords = function(e) {
52
- let x;
53
- let y;
54
-
55
- if (e.changedTouches && e.changedTouches[0]) {
56
- x = e.changedTouches[0].clientX;
57
- y = e.changedTouches[0].clientY;
58
- } else {
59
- x = e.clientX;
60
- y = e.clientY;
61
- }
62
-
63
- return [x,y];
64
- }
65
-
66
- // Get the button status
67
- const getButton = function(e) {
68
- e = e || window.event;
69
- if (e.buttons) {
70
- return e.buttons;
71
- } else if (e.button) {
72
- return e.button;
73
- } else {
74
- return e.which;
75
- }
76
- }
77
-
78
- // Finalize any potential action
79
- const mouseUp = function(e) {
80
- // Finalize all actions
81
- if (typeof(controls.action) === 'function') {
82
- controls.action();
83
- }
84
- // Remove cursor
85
- if (controls.e) {
86
- controls.e.style.cursor = '';
87
- controls.e.classList.remove('moving');
88
- }
89
- // Reset controls
90
- controls = {};
91
- // Reset state controls
92
- state = {
93
- x: null,
94
- y: null,
95
- }
96
- }
97
-
98
- const mouseMove = function(e) {
99
- if (! getButton(e)) {
100
- return false;
101
- }
102
- // Get mouse coordinates
103
- let [x,y] = getCoords(e);
104
-
105
- // Move modal
106
- if (controls.type === 'move') {
107
- if (state && state.x == null && state.y == null) {
108
- state.x = x;
109
- state.y = y;
110
- }
111
-
112
- let dx = x - state.x;
113
- let dy = y - state.y;
114
- let top = controls.e.offsetTop + dy;
115
- let left = controls.e.offsetLeft + dx;
116
-
117
- // Update position
118
- controls.top = top
119
- controls.left = left
120
- controls.e.style.top = top + 'px';
121
- controls.e.style.left = left + 'px';
122
-
123
- state.x = x;
124
- state.y = y;
125
- state.top = top
126
- state.left = left
127
- } else if (controls.type === 'resize') {
128
- let width = null;
129
- let height = null;
130
- let newHeight = null;
131
-
132
- if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {
133
- // Update width
134
- width = controls.w + (x - controls.x);
135
- controls.e.style.width = width + 'px';
136
-
137
- // Update Height
138
- if (e.shiftKey) {
139
- newHeight = (x - controls.x) * (controls.h / controls.w);
140
- height = controls.h + newHeight;
141
- controls.e.style.height = height + 'px';
142
- } else {
143
- newHeight = false;
144
- }
145
- }
146
-
147
- if (! newHeight) {
148
- if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
149
- height = controls.h + (y - controls.y);
150
- controls.e.style.height = height + 'px';
151
- }
152
- }
153
- }
154
- }
155
-
156
- document.addEventListener('mouseup', mouseUp);
157
- document.addEventListener('mousemove', mouseMove);
158
-
159
- // Dispatcher
160
- const Dispatch = function(type, option){
161
- if (typeof this[type] === 'function') {
162
- this[type](this, option)
163
- }
164
- }
165
-
166
- const refreshMinimized = function() {
167
- let items = minimizedModals;
168
- let numOfItems = items.length;
169
- let width = 0;
170
- let height = 5;
171
- for (let i = 0; i < numOfItems; i++) {
172
- let item = items[i];
173
- item.el.style.marginLeft = width;
174
- item.el.style.marginBottom = height;
175
- width += 205;
176
-
177
- if (document.body.offsetWidth - width < 205) {
178
- width = 0;
179
- height += 50;
180
- }
181
- }
182
- }
183
-
184
- const setMini = function(self) {
185
- // Minimize modals
186
- minimizedModals.push(self);
187
- // Refresh positions
188
- refreshMinimized.call(self);
189
- }
190
-
191
- const removeMini = function(self) {
192
- minimizedModals.splice(minimizedModals.indexOf(self), 1);
193
- self.el.style.marginLeft = '';
194
- self.el.style.marginBottom = '';
195
- // Refresh positions
196
- refreshMinimized.call(self);
197
- }
198
-
199
- const adjustTop = function() {
200
- let self = this;
201
- self.el.style.marginTop = '';
202
- let rect = self.el.getBoundingClientRect();
203
- let limit = document.documentElement.clientHeight + window.scrollY - (rect.top + rect.height);
204
- if (limit < 0) {
205
- self.el.style.marginTop = limit - 10 + 'px';
206
- }
207
- }
208
-
209
- const adjustLeft = function() {
210
- let self = this;
211
- self.el.style.marginLeft = '';
212
- let rect = self.el.getBoundingClientRect();
213
- // Make sure component will be visible on page
214
- let limit = document.documentElement.clientWidth - (rect.left + rect.width);
215
- if (limit < 0) {
216
- self.el.style.marginLeft = limit - 10 + 'px';
217
- }
218
- }
219
-
220
- const isTrue = function(e) {
221
- return e === true || e === 1 || e === 'true';
222
- }
223
-
224
- const Modal = function (template) {
225
- let self = this;
226
- let backdrop = null;
227
- // Make sure keep the state as boolean
228
- self.closed = !!self.closed;
229
-
230
- // Keep all modals references
231
- modals.push(self);
232
-
233
- self.back = function() {
234
- sendToBack(self.el);
235
- }
236
- self.front = function() {
237
- sendToFront(self.el);
238
- }
239
-
240
- self.onload = function() {
241
- if (self.url) {
242
- fetch(self.url)
243
- .then(response => response.clone().body)
244
- .then(body => {
245
- let reader = body.getReader();
246
- reader.read().then(function pump({done, value}) {
247
- const decoder = new TextDecoder();
248
- template += decoder.decode(value.buffer);
249
- });
250
- });
251
- }
252
-
253
- // Dimensions
254
- if (self.width) {
255
- self.el.style.width = self.width + 'px';
256
- } else if (self.el.offsetWidth) {
257
- self.width = self.el.offsetWidth;
258
- }
259
- if (self.height) {
260
- self.el.style.height = self.height + 'px';
261
- } else if (self.el.offsetHeight) {
262
- self.height = self.el.offsetHeight;
263
- }
264
- if (self.top) {
265
- self.el.style.top = self.top + 'px';
266
- }
267
- if (self.left) {
268
- self.el.style.left = self.left + 'px';
269
- }
270
-
271
- // Initial centralize
272
- if (self.position === 'center') {
273
- self.top = (window.innerHeight - self.height) / 2;
274
- self.left = (window.innerWidth - self.width) / 2;
275
- }
276
-
277
- // Full screen
278
- if (self.height > 300) {
279
- self.el.classList.add('fullscreen');
280
- }
281
-
282
- // Responsive
283
- if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
284
- self.el.setAttribute('data-responsive', true);
285
- }
286
-
287
- // Backdrop
288
- if (self.backdrop === true) {
289
- backdrop = document.createElement('div');
290
- backdrop.classList.add('lm-modal-backdrop');
291
- backdrop.addEventListener('mousedown', function() {
292
- self.closed = true;
293
- })
294
- }
295
-
296
- // Bring to front on focus
297
- if (self.layers !== false) {
298
- self.el.classList.add('lm-modal-layers');
299
- }
300
-
301
- // Focus out of the component
302
- self.el.addEventListener('focusout', function(e) {
303
- if (isTrue(self['auto-close'])) {
304
- if (!self.el.contains(e.relatedTarget)) {
305
- self.closed = true;
306
- }
307
- }
308
- });
309
-
310
- // Close and stop propagation
311
- document.addEventListener('keydown', (e) => {
312
- if (e.key === 'Escape' && self.closed === false) {
313
- self.closed = true;
314
- e.preventDefault();
315
- e.stopImmediatePropagation();
316
- }
317
- });
318
- }
319
-
320
- self.onchange = function(property) {
321
- if (property === 'closed') {
322
- if (self.closed === false) {
323
- // Focus on the modal
324
- if (self.focus !== false) {
325
- self.el.focus();
326
- }
327
- // Show backdrop
328
- if (backdrop) {
329
- self.el.parentNode.insertBefore(backdrop, self.el);
330
- }
331
- // Animation
332
- if (self.animation) {
333
- self.el.classList.add('lm-modal-animation');
334
- }
335
- } else {
336
- // Hide backdrop
337
- if (backdrop) {
338
- backdrop.remove();
339
- }
340
- if (self.animation) {
341
- self.el.classList.remove('lm-modal-animation');
342
- }
343
- }
344
-
345
- // Call the vents
346
- self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
347
- } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
348
- self.el.style[property] = self[property] + 'px';
349
- }
350
-
351
- // Adjust position
352
- if (self.closed === false) {
353
- if (isTrue(self['auto-adjust'])) {
354
- adjustTop.call(self);
355
- adjustLeft.call(self);
356
- }
357
- }
358
- }
359
-
360
- self.mousemove = function(e) {
361
- if (getButton(e)) {
362
- return;
363
- }
364
-
365
- // Root element of the component
366
- let item = self.el;
367
- // Get the position and dimensions
368
- let rect = item.getBoundingClientRect();
369
-
370
- controls.type = null;
371
- controls.d = null;
372
- controls.e = item;
373
- controls.w = rect.width;
374
- controls.h = rect.height;
375
-
376
- // When resizable
377
- if (self.resizable === true) {
378
- if (rect.height - (e.clientY - rect.top) < cornerSize) {
379
- if (rect.width - (e.clientX - rect.left) < cornerSize) {
380
- item.style.cursor = 'se-resize';
381
- } else {
382
- item.style.cursor = 's-resize';
383
- }
384
- } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
385
- item.style.cursor = 'e-resize';
386
- } else {
387
- item.style.cursor = '';
388
- }
389
-
390
- if (item.style.cursor) {
391
- controls.type = 'resize';
392
- controls.d = item.style.cursor;
393
- } else {
394
- controls.type = null;
395
- controls.d = null;
396
- }
397
- }
398
- }
399
-
400
- self.mousedown = function(e) {
401
- // Get mouse coordinates
402
- let [x,y] = getCoords(e);
403
- controls.x = x;
404
- controls.y = y;
405
- // Root element of the component
406
- let item = self.el;
407
- // Get the position and dimensions
408
- let rect = item.getBoundingClientRect();
409
-
410
- controls.e = item;
411
- controls.w = rect.width;
412
- controls.h = rect.height;
413
-
414
- let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
415
-
416
- if (isTrue(self.minimizable) && corner === true) {
417
- self.minimized = ! self.minimized;
418
- // Handles minimized modal positioning
419
- if (self.minimized) {
420
- setMini(self);
421
- } else {
422
- removeMini(self);
423
- }
424
- } else if (isTrue(self.closable) && corner === true) {
425
- self.closed = true;
426
- } else if (! self.minimized) {
427
- // If is not minimized
428
- if (controls.type === 'resize') {
429
- // This will be the callback when finalize the resize
430
- controls.action = function () {
431
- self.width = parseInt(item.style.width);
432
- self.height = parseInt(item.style.height);
433
- }
434
- // Make sure the width and height is defined for the modal
435
- if (!item.style.width) {
436
- item.style.width = controls.w + 'px';
437
- }
438
- if (!item.style.height) {
439
- item.style.height = controls.h + 'px';
440
- }
441
-
442
- e.preventDefault();
443
- } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
444
- // Action
445
- controls.type = 'move';
446
- // Callback
447
- controls.action = function () {
448
- self.top = parseInt(item.style.top);
449
- self.left = parseInt(item.style.left);
450
- }
451
- controls.e.classList.add('moving');
452
- }
453
- }
454
- }
455
-
456
- self.open = function() {
457
- if (self.closed === true) {
458
- self.closed = false;
459
- }
460
- }
461
-
462
- self.close = function() {
463
- if (self.closed === false) {
464
- self.closed = true;
465
- }
466
- }
467
-
468
- return `<div class="lm-modal" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
469
- <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
470
- <div>${template}</div>
471
- </div>`
472
- }
473
-
474
- lemonade.setComponents({ Modal: Modal });
475
-
476
- return function (root, options, template) {
477
- if (typeof(root) === 'object') {
478
- if (! template) {
479
- template = '';
480
- }
481
- // Keep the DOM elements
482
- let elements = [];
483
- while (root.firstChild) {
484
- elements.push(root.firstChild);
485
- root.firstChild.remove();
486
- }
487
- // Create the modal
488
- let e = lemonade.render(Modal, root, options, template);
489
- // Append any elements inside the modal
490
- if (elements.length) {
491
- while (elements[0]) {
492
- e.children[1].appendChild(elements[0]);
493
- elements.shift();
494
- }
495
- }
496
- return options;
497
- } else {
498
- return Modal.call(this, root);
499
- }
500
- }
1
+ /**
2
+ * pin the modal to the left panel
3
+ */
4
+ if (!lemonade && typeof (require) === 'function') {
5
+ var lemonade = require('lemonadejs');
6
+ }
7
+
8
+ ;(function (global, factory) {
9
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
10
+ typeof define === 'function' && define.amd ? define(factory) :
11
+ global.Modal = factory();
12
+ }(this, (function () {
13
+
14
+ // References
15
+ const modals = [];
16
+ // State of the resize and move modal
17
+ let state = {};
18
+ // Internal controls of the action of resize and move
19
+ let controls = {};
20
+ // Width of the border
21
+ let cornerSize = 10;
22
+ // Container with minimized modals
23
+ const minimizedModals = [];
24
+ // Default z-index for the modals
25
+ const defaultZIndex = 20;
26
+
27
+ /**
28
+ * Send the modal to the front
29
+ * @param container
30
+ */
31
+ const sendToFront = function(container) {
32
+ let highestXIndex = defaultZIndex;
33
+ for (let i = 0; i < modals.length; i++) {
34
+ const zIndex = parseInt(modals[i].el.style.zIndex);
35
+ if (zIndex > highestXIndex) {
36
+ highestXIndex = zIndex;
37
+ }
38
+ }
39
+ container.style.zIndex = highestXIndex + 1;
40
+ }
41
+
42
+ /**
43
+ * Send modal to the back
44
+ * @param container
45
+ */
46
+ const sendToBack = function(container) {
47
+ container.style.zIndex = defaultZIndex;
48
+ }
49
+
50
+ // Get the coordinates of the action
51
+ const getCoords = function(e) {
52
+ let x;
53
+ let y;
54
+
55
+ if (e.changedTouches && e.changedTouches[0]) {
56
+ x = e.changedTouches[0].clientX;
57
+ y = e.changedTouches[0].clientY;
58
+ } else {
59
+ x = e.clientX;
60
+ y = e.clientY;
61
+ }
62
+
63
+ return [x,y];
64
+ }
65
+
66
+ // Get the button status
67
+ const getButton = function(e) {
68
+ e = e || window.event;
69
+ if (e.buttons) {
70
+ return e.buttons;
71
+ } else if (e.button) {
72
+ return e.button;
73
+ } else {
74
+ return e.which;
75
+ }
76
+ }
77
+
78
+ // Finalize any potential action
79
+ const mouseUp = function(e) {
80
+ // Finalize all actions
81
+ if (typeof(controls.action) === 'function') {
82
+ controls.action();
83
+ }
84
+ // Remove cursor
85
+ if (controls.e) {
86
+ controls.e.style.cursor = '';
87
+ controls.e.classList.remove('moving');
88
+ }
89
+ // Reset controls
90
+ controls = {};
91
+ // Reset state controls
92
+ state = {
93
+ x: null,
94
+ y: null,
95
+ }
96
+ }
97
+
98
+ const mouseMove = function(e) {
99
+ if (! getButton(e)) {
100
+ return false;
101
+ }
102
+ // Get mouse coordinates
103
+ let [x,y] = getCoords(e);
104
+
105
+ // Move modal
106
+ if (controls.type === 'move') {
107
+ if (state && state.x == null && state.y == null) {
108
+ state.x = x;
109
+ state.y = y;
110
+ }
111
+
112
+ let dx = x - state.x;
113
+ let dy = y - state.y;
114
+ let top = controls.e.offsetTop + dy;
115
+ let left = controls.e.offsetLeft + dx;
116
+
117
+ // Update position
118
+ controls.top = top
119
+ controls.left = left
120
+ controls.e.style.top = top + 'px';
121
+ controls.e.style.left = left + 'px';
122
+
123
+ state.x = x;
124
+ state.y = y;
125
+ state.top = top
126
+ state.left = left
127
+ } else if (controls.type === 'resize') {
128
+ let width = null;
129
+ let height = null;
130
+ let newHeight = null;
131
+
132
+ if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {
133
+ // Update width
134
+ width = controls.w + (x - controls.x);
135
+ controls.e.style.width = width + 'px';
136
+
137
+ // Update Height
138
+ if (e.shiftKey) {
139
+ newHeight = (x - controls.x) * (controls.h / controls.w);
140
+ height = controls.h + newHeight;
141
+ controls.e.style.height = height + 'px';
142
+ } else {
143
+ newHeight = false;
144
+ }
145
+ }
146
+
147
+ if (! newHeight) {
148
+ if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
149
+ height = controls.h + (y - controls.y);
150
+ controls.e.style.height = height + 'px';
151
+ }
152
+ }
153
+ }
154
+ }
155
+
156
+ document.addEventListener('mouseup', mouseUp);
157
+ document.addEventListener('mousemove', mouseMove);
158
+
159
+ // Dispatcher
160
+ const Dispatch = function(type, option){
161
+ if (typeof this[type] === 'function') {
162
+ this[type](this, option)
163
+ }
164
+ }
165
+
166
+ const refreshMinimized = function() {
167
+ let items = minimizedModals;
168
+ let numOfItems = items.length;
169
+ let width = 0;
170
+ let height = 5;
171
+ for (let i = 0; i < numOfItems; i++) {
172
+ let item = items[i];
173
+ item.el.style.marginLeft = width;
174
+ item.el.style.marginBottom = height;
175
+ width += 205;
176
+
177
+ if (document.body.offsetWidth - width < 205) {
178
+ width = 0;
179
+ height += 50;
180
+ }
181
+ }
182
+ }
183
+
184
+ const setMini = function(self) {
185
+ // Minimize modals
186
+ minimizedModals.push(self);
187
+ // Refresh positions
188
+ refreshMinimized.call(self);
189
+ }
190
+
191
+ const removeMini = function(self) {
192
+ minimizedModals.splice(minimizedModals.indexOf(self), 1);
193
+ self.el.style.marginLeft = '';
194
+ self.el.style.marginBottom = '';
195
+ // Refresh positions
196
+ refreshMinimized.call(self);
197
+ }
198
+
199
+ const adjustTop = function() {
200
+ let self = this;
201
+ self.el.style.marginTop = '';
202
+ let rect = self.el.getBoundingClientRect();
203
+ let limit = document.documentElement.clientHeight + window.scrollY - (rect.top + rect.height);
204
+ if (limit < 0) {
205
+ self.el.style.marginTop = limit - 10 + 'px';
206
+ }
207
+ }
208
+
209
+ const adjustLeft = function() {
210
+ let self = this;
211
+ self.el.style.marginLeft = '';
212
+ let rect = self.el.getBoundingClientRect();
213
+ // Make sure component will be visible on page
214
+ let limit = document.documentElement.clientWidth - (rect.left + rect.width);
215
+ if (limit < 0) {
216
+ self.el.style.marginLeft = limit - 10 + 'px';
217
+ }
218
+ }
219
+
220
+ const isTrue = function(e) {
221
+ return e === true || e === 1 || e === 'true';
222
+ }
223
+
224
+ const Modal = function (template) {
225
+ let self = this;
226
+ let backdrop = null;
227
+ // Make sure keep the state as boolean
228
+ self.closed = !!self.closed;
229
+
230
+ // Keep all modals references
231
+ modals.push(self);
232
+
233
+ self.back = function() {
234
+ sendToBack(self.el);
235
+ }
236
+ self.front = function() {
237
+ sendToFront(self.el);
238
+ }
239
+
240
+ self.onload = function() {
241
+ if (self.url) {
242
+ fetch(self.url)
243
+ .then(response => response.clone().body)
244
+ .then(body => {
245
+ let reader = body.getReader();
246
+ reader.read().then(function pump({done, value}) {
247
+ const decoder = new TextDecoder();
248
+ template += decoder.decode(value.buffer);
249
+ });
250
+ });
251
+ }
252
+
253
+ // Dimensions
254
+ if (self.width) {
255
+ self.el.style.width = self.width + 'px';
256
+ } else if (self.el.offsetWidth) {
257
+ self.width = self.el.offsetWidth;
258
+ }
259
+ if (self.height) {
260
+ self.el.style.height = self.height + 'px';
261
+ } else if (self.el.offsetHeight) {
262
+ self.height = self.el.offsetHeight;
263
+ }
264
+ if (self.top) {
265
+ self.el.style.top = self.top + 'px';
266
+ }
267
+ if (self.left) {
268
+ self.el.style.left = self.left + 'px';
269
+ }
270
+
271
+ // Initial centralize
272
+ if (self.position === 'center') {
273
+ self.top = (window.innerHeight - self.height) / 2;
274
+ self.left = (window.innerWidth - self.width) / 2;
275
+ }
276
+
277
+ // Full screen
278
+ if (self.height > 300) {
279
+ self.el.classList.add('fullscreen');
280
+ }
281
+
282
+ // Responsive
283
+ if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
284
+ self.el.setAttribute('data-responsive', true);
285
+ }
286
+
287
+ // Backdrop
288
+ if (self.backdrop === true) {
289
+ backdrop = document.createElement('div');
290
+ backdrop.classList.add('lm-modal-backdrop');
291
+ backdrop.addEventListener('mousedown', function() {
292
+ self.closed = true;
293
+ })
294
+ }
295
+
296
+ // Bring to front on focus
297
+ if (self.layers !== false) {
298
+ self.el.classList.add('lm-modal-layers');
299
+ }
300
+
301
+ // Focus out of the component
302
+ self.el.addEventListener('focusout', function(e) {
303
+ if (isTrue(self['auto-close'])) {
304
+ if (!self.el.contains(e.relatedTarget)) {
305
+ self.closed = true;
306
+ }
307
+ }
308
+ });
309
+
310
+ // Close and stop propagation
311
+ document.addEventListener('keydown', (e) => {
312
+ if (e.key === 'Escape' && self.closed === false) {
313
+ self.closed = true;
314
+ e.preventDefault();
315
+ e.stopImmediatePropagation();
316
+ }
317
+ });
318
+ }
319
+
320
+ self.onchange = function(property) {
321
+ if (property === 'closed') {
322
+ if (self.closed === false) {
323
+ // Focus on the modal
324
+ if (self.focus !== false) {
325
+ self.el.focus();
326
+ }
327
+ // Show backdrop
328
+ if (backdrop) {
329
+ self.el.parentNode.insertBefore(backdrop, self.el);
330
+ }
331
+ // Animation
332
+ if (self.animation) {
333
+ self.el.classList.add('lm-modal-animation');
334
+ }
335
+ } else {
336
+ // Hide backdrop
337
+ if (backdrop) {
338
+ backdrop.remove();
339
+ }
340
+ if (self.animation) {
341
+ self.el.classList.remove('lm-modal-animation');
342
+ }
343
+ }
344
+
345
+ // Call the vents
346
+ self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
347
+ } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
348
+ self.el.style[property] = self[property] + 'px';
349
+ }
350
+
351
+ // Adjust position
352
+ if (self.closed === false) {
353
+ if (isTrue(self['auto-adjust'])) {
354
+ adjustTop.call(self);
355
+ adjustLeft.call(self);
356
+ }
357
+ }
358
+ }
359
+
360
+ self.mousemove = function(e) {
361
+ if (getButton(e)) {
362
+ return;
363
+ }
364
+
365
+ // Root element of the component
366
+ let item = self.el;
367
+ // Get the position and dimensions
368
+ let rect = item.getBoundingClientRect();
369
+
370
+ controls.type = null;
371
+ controls.d = null;
372
+ controls.e = item;
373
+ controls.w = rect.width;
374
+ controls.h = rect.height;
375
+
376
+ // When resizable
377
+ if (self.resizable === true) {
378
+ if (rect.height - (e.clientY - rect.top) < cornerSize) {
379
+ if (rect.width - (e.clientX - rect.left) < cornerSize) {
380
+ item.style.cursor = 'se-resize';
381
+ } else {
382
+ item.style.cursor = 's-resize';
383
+ }
384
+ } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
385
+ item.style.cursor = 'e-resize';
386
+ } else {
387
+ item.style.cursor = '';
388
+ }
389
+
390
+ if (item.style.cursor) {
391
+ controls.type = 'resize';
392
+ controls.d = item.style.cursor;
393
+ } else {
394
+ controls.type = null;
395
+ controls.d = null;
396
+ }
397
+ }
398
+ }
399
+
400
+ self.mousedown = function(e) {
401
+ // Get mouse coordinates
402
+ let [x,y] = getCoords(e);
403
+ controls.x = x;
404
+ controls.y = y;
405
+ // Root element of the component
406
+ let item = self.el;
407
+ // Get the position and dimensions
408
+ let rect = item.getBoundingClientRect();
409
+
410
+ controls.e = item;
411
+ controls.w = rect.width;
412
+ controls.h = rect.height;
413
+
414
+ let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
415
+
416
+ if (isTrue(self.minimizable) && corner === true) {
417
+ self.minimized = ! self.minimized;
418
+ // Handles minimized modal positioning
419
+ if (self.minimized) {
420
+ setMini(self);
421
+ } else {
422
+ removeMini(self);
423
+ }
424
+ } else if (isTrue(self.closable) && corner === true) {
425
+ self.closed = true;
426
+ } else if (! self.minimized) {
427
+ // If is not minimized
428
+ if (controls.type === 'resize') {
429
+ // This will be the callback when finalize the resize
430
+ controls.action = function () {
431
+ self.width = parseInt(item.style.width);
432
+ self.height = parseInt(item.style.height);
433
+ }
434
+ // Make sure the width and height is defined for the modal
435
+ if (!item.style.width) {
436
+ item.style.width = controls.w + 'px';
437
+ }
438
+ if (!item.style.height) {
439
+ item.style.height = controls.h + 'px';
440
+ }
441
+
442
+ e.preventDefault();
443
+ } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
444
+ // Action
445
+ controls.type = 'move';
446
+ // Callback
447
+ controls.action = function () {
448
+ self.top = parseInt(item.style.top);
449
+ self.left = parseInt(item.style.left);
450
+ }
451
+ controls.e.classList.add('moving');
452
+ }
453
+ }
454
+ }
455
+
456
+ self.open = function() {
457
+ if (self.closed === true) {
458
+ self.closed = false;
459
+ }
460
+ }
461
+
462
+ self.close = function() {
463
+ if (self.closed === false) {
464
+ self.closed = true;
465
+ }
466
+ }
467
+
468
+ return `<div class="lm-modal" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">
469
+ <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
470
+ <div>${template}</div>
471
+ </div>`
472
+ }
473
+
474
+ lemonade.setComponents({ Modal: Modal });
475
+
476
+ return function (root, options, template) {
477
+ if (typeof(root) === 'object') {
478
+ if (! template) {
479
+ template = '';
480
+ }
481
+ // Keep the DOM elements
482
+ let elements = [];
483
+ while (root.firstChild) {
484
+ elements.push(root.firstChild);
485
+ root.firstChild.remove();
486
+ }
487
+ // Create the modal
488
+ let e = lemonade.render(Modal, root, options, template);
489
+ // Append any elements inside the modal
490
+ if (elements.length) {
491
+ while (elements[0]) {
492
+ e.children[1].appendChild(elements[0]);
493
+ elements.shift();
494
+ }
495
+ }
496
+ return options;
497
+ } else {
498
+ return Modal.call(this, root);
499
+ }
500
+ }
501
501
  })));