@lemonadejs/modal 2.4.6 → 2.4.10

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 +143 -118
  2. package/dist/index.d.ts +108 -108
  3. package/dist/index.js +516 -500
  4. package/dist/react.d.ts +17 -17
  5. package/dist/react.js +36 -36
  6. package/dist/style.css +171 -165
  7. package/dist/vue.d.ts +14 -14
  8. package/dist/vue.js +52 -52
  9. package/package.json +21 -21
package/dist/index.js CHANGED
@@ -1,501 +1,517 @@
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 adjustVertical = 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
+ } else if (rect.top < 0) {
207
+ self.el.style.marginTop = -1 * rect.top + 10 + 'px';
208
+ }
209
+ }
210
+
211
+ const adjustHorizontal = function() {
212
+ let self = this;
213
+ let rect = self.el.getBoundingClientRect();
214
+ // Make sure component will be visible on page
215
+ let limit = document.documentElement.clientWidth - (rect.left + rect.width);
216
+ if (limit < 0) {
217
+ self.el.style.marginLeft = limit - 10 + 'px';
218
+ } else if (rect.left < 0) {
219
+ self.el.style.marginLeft = -1 * rect.left + 10 + 'px';
220
+ }
221
+ }
222
+
223
+ const isTrue = function(e) {
224
+ return e === true || e === 1 || e === 'true';
225
+ }
226
+
227
+ const Modal = function (template) {
228
+ let self = this;
229
+ let backdrop = null;
230
+ // Make sure keep the state as boolean
231
+ self.closed = !!self.closed;
232
+
233
+ // Keep all modals references
234
+ modals.push(self);
235
+
236
+ self.back = function() {
237
+ sendToBack(self.el);
238
+ }
239
+ self.front = function() {
240
+ sendToFront(self.el);
241
+ }
242
+
243
+ self.onload = function() {
244
+ if (self.url) {
245
+ fetch(self.url)
246
+ .then(response => response.clone().body)
247
+ .then(body => {
248
+ let reader = body.getReader();
249
+ reader.read().then(function pump({done, value}) {
250
+ const decoder = new TextDecoder();
251
+ template += decoder.decode(value.buffer);
252
+ });
253
+ });
254
+ }
255
+
256
+ // Dimensions
257
+ if (self.width) {
258
+ self.el.style.width = self.width + 'px';
259
+ } else if (self.el.offsetWidth) {
260
+ self.width = self.el.offsetWidth;
261
+ }
262
+ if (self.height) {
263
+ self.el.style.height = self.height + 'px';
264
+ } else if (self.el.offsetHeight) {
265
+ self.height = self.el.offsetHeight;
266
+ }
267
+ if (self.top) {
268
+ self.el.style.top = self.top + 'px';
269
+ }
270
+ if (self.left) {
271
+ self.el.style.left = self.left + 'px';
272
+ }
273
+
274
+ // Initial centralize
275
+ if (self.position === 'center') {
276
+ self.top = (window.innerHeight - self.height) / 2;
277
+ self.left = (window.innerWidth - self.width) / 2;
278
+ }
279
+
280
+ // Full screen
281
+ if (self.height > 300) {
282
+ self.el.classList.add('fullscreen');
283
+ }
284
+
285
+ // Responsive
286
+ if (document.documentElement.clientWidth < 800 && self.responsive !== false) {
287
+ self.el.setAttribute('data-responsive', true);
288
+ }
289
+
290
+ // Backdrop
291
+ if (self.backdrop === true) {
292
+ backdrop = document.createElement('div');
293
+ backdrop.classList.add('lm-modal-backdrop');
294
+ backdrop.addEventListener('mousedown', function() {
295
+ self.closed = true;
296
+ })
297
+ }
298
+
299
+ // Adjust position
300
+ if (isTrue(self['auto-adjust'])) {
301
+ adjustVertical.call(self);
302
+ adjustHorizontal.call(self);
303
+ }
304
+
305
+ // Bring to front on focus
306
+ if (self.layers !== false) {
307
+ self.el.classList.add('lm-modal-layers');
308
+ }
309
+
310
+ // Focus out of the component
311
+ self.el.addEventListener('focusout', function(e) {
312
+ if (isTrue(self['auto-close'])) {
313
+ if (!self.el.contains(e.relatedTarget)) {
314
+ self.closed = true;
315
+ }
316
+ }
317
+ });
318
+
319
+ // Close and stop propagation
320
+ document.addEventListener('keydown', (e) => {
321
+ if (e.key === 'Escape' && self.closed === false) {
322
+ self.closed = true;
323
+ e.preventDefault();
324
+ e.stopImmediatePropagation();
325
+ }
326
+ });
327
+ }
328
+
329
+ self.onchange = function(property) {
330
+ if (property === 'closed') {
331
+ if (self.closed === false) {
332
+ // Focus on the modal
333
+ if (self.focus !== false) {
334
+ self.el.focus();
335
+ }
336
+ // Show backdrop
337
+ if (backdrop) {
338
+ self.el.parentNode.insertBefore(backdrop, self.el);
339
+ }
340
+ // Animation
341
+ if (self.animation) {
342
+ self.el.classList.add('lm-modal-animation');
343
+ }
344
+ } else {
345
+ // Hide backdrop
346
+ if (backdrop) {
347
+ backdrop.remove();
348
+ }
349
+ if (self.animation) {
350
+ self.el.classList.remove('lm-modal-animation');
351
+ }
352
+ }
353
+
354
+ // Call the vents
355
+ self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
356
+ } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
357
+ self.el.style[property] = self[property] + 'px';
358
+ }
359
+
360
+ // Adjust position
361
+ if (self.closed === false) {
362
+ if (isTrue(self['auto-adjust'])) {
363
+ adjustVertical.call(self);
364
+ adjustHorizontal.call(self);
365
+ }
366
+ }
367
+ }
368
+
369
+ self.mousemove = function(e) {
370
+ if (getButton(e)) {
371
+ return;
372
+ }
373
+
374
+ // Root element of the component
375
+ let item = self.el;
376
+ // Get the position and dimensions
377
+ let rect = item.getBoundingClientRect();
378
+
379
+ controls.type = null;
380
+ controls.d = null;
381
+ controls.e = item;
382
+ controls.w = rect.width;
383
+ controls.h = rect.height;
384
+
385
+ // When resizable
386
+ if (self.resizable === true) {
387
+ if (rect.height - (e.clientY - rect.top) < cornerSize) {
388
+ if (rect.width - (e.clientX - rect.left) < cornerSize) {
389
+ item.style.cursor = 'se-resize';
390
+ } else {
391
+ item.style.cursor = 's-resize';
392
+ }
393
+ } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
394
+ item.style.cursor = 'e-resize';
395
+ } else {
396
+ item.style.cursor = '';
397
+ }
398
+
399
+ if (item.style.cursor) {
400
+ controls.type = 'resize';
401
+ controls.d = item.style.cursor;
402
+ } else {
403
+ controls.type = null;
404
+ controls.d = null;
405
+ }
406
+ }
407
+ }
408
+
409
+ self.mousedown = function(e) {
410
+ // Get mouse coordinates
411
+ let [x,y] = getCoords(e);
412
+ controls.x = x;
413
+ controls.y = y;
414
+ // Root element of the component
415
+ let item = self.el;
416
+ // Get the position and dimensions
417
+ let rect = item.getBoundingClientRect();
418
+
419
+ controls.e = item;
420
+ controls.w = rect.width;
421
+ controls.h = rect.height;
422
+
423
+ let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
424
+
425
+ if (isTrue(self.minimizable) && corner === true) {
426
+ self.minimized = ! self.minimized;
427
+ // Handles minimized modal positioning
428
+ if (self.minimized) {
429
+ setMini(self);
430
+ } else {
431
+ removeMini(self);
432
+ }
433
+ } else if (isTrue(self.closable) && corner === true) {
434
+ self.closed = true;
435
+ } else if (! self.minimized) {
436
+ // If is not minimized
437
+ if (controls.type === 'resize') {
438
+ // This will be the callback when finalize the resize
439
+ controls.action = function () {
440
+ self.width = parseInt(item.style.width);
441
+ self.height = parseInt(item.style.height);
442
+ }
443
+ // Make sure the width and height is defined for the modal
444
+ if (!item.style.width) {
445
+ item.style.width = controls.w + 'px';
446
+ }
447
+ if (!item.style.height) {
448
+ item.style.height = controls.h + 'px';
449
+ }
450
+
451
+ e.preventDefault();
452
+ } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
453
+ let rect = self.el.getBoundingClientRect();
454
+ let top = rect.top;
455
+ let left = rect.left;
456
+ self.el.style.marginLeft = 0;
457
+ self.el.style.marginTop = 0;
458
+ self.el.style.top = top + 'px';
459
+ self.el.style.left = left + 'px';
460
+ // Action
461
+ controls.type = 'move';
462
+ // Callback
463
+ controls.action = function () {
464
+ self.top = parseInt(item.style.top);
465
+ self.left = parseInt(item.style.left);
466
+ }
467
+ controls.e.classList.add('moving');
468
+ }
469
+ }
470
+ }
471
+
472
+ self.open = function() {
473
+ if (self.closed === true) {
474
+ self.closed = false;
475
+ }
476
+ }
477
+
478
+ self.close = function() {
479
+ if (self.closed === false) {
480
+ self.closed = true;
481
+ }
482
+ }
483
+
484
+ 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">
485
+ <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
486
+ <div>${template}</div>
487
+ </div>`
488
+ }
489
+
490
+ lemonade.setComponents({ Modal: Modal });
491
+
492
+ return function (root, options, template) {
493
+ if (typeof(root) === 'object') {
494
+ if (! template) {
495
+ template = '';
496
+ }
497
+ // Keep the DOM elements
498
+ let elements = [];
499
+ while (root.firstChild) {
500
+ elements.push(root.firstChild);
501
+ root.firstChild.remove();
502
+ }
503
+ // Create the modal
504
+ let e = lemonade.render(Modal, root, options, template);
505
+ // Append any elements inside the modal
506
+ if (elements.length) {
507
+ while (elements[0]) {
508
+ e.children[1].appendChild(elements[0]);
509
+ elements.shift();
510
+ }
511
+ }
512
+ return options;
513
+ } else {
514
+ return Modal.call(this, root);
515
+ }
516
+ }
501
517
  })));