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