@lemonadejs/modal 3.1.0 → 3.2.0
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.
- package/README.md +44 -29
- package/dist/index.d.ts +4 -0
- package/dist/index.js +14 -4
- package/dist/style.css +23 -23
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -121,7 +121,7 @@ Quick example with Vue
|
|
|
121
121
|
</script>
|
|
122
122
|
```
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
Programmatically - Quick example with Javascript
|
|
125
125
|
|
|
126
126
|
```html
|
|
127
127
|
<html>
|
|
@@ -159,43 +159,58 @@ You can configure things such as position, size, and functionalities.
|
|
|
159
159
|
|
|
160
160
|
### Settings
|
|
161
161
|
|
|
162
|
-
| Attribute
|
|
163
|
-
|
|
164
|
-
| title?
|
|
165
|
-
| height?
|
|
166
|
-
| width?
|
|
167
|
-
| top?
|
|
168
|
-
| left?
|
|
169
|
-
| draggable?
|
|
170
|
-
| resizable?
|
|
171
|
-
| closed?
|
|
172
|
-
| closable?
|
|
173
|
-
| center?
|
|
174
|
-
| url?
|
|
175
|
-
| auto-close?
|
|
176
|
-
| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`.
|
|
177
|
-
| backdrop?
|
|
178
|
-
| minimizable? | Boolean | Modal can be minimized. `Default: false`.
|
|
179
|
-
| minimized?
|
|
180
|
-
| position?
|
|
181
|
-
| title?
|
|
182
|
-
| responsive?
|
|
183
|
-
| layers?
|
|
184
|
-
| focus?
|
|
185
|
-
| overflow?
|
|
162
|
+
| Attribute | Type | Description |
|
|
163
|
+
|--------------|---------|----------------------------------------------------------------------------|
|
|
164
|
+
| title? | String | The header title of the modal. If empty, the header will be not displayed. |
|
|
165
|
+
| height? | Number | The height of the modal in pixels. |
|
|
166
|
+
| width? | Number | The width of the modal in pixels. |
|
|
167
|
+
| top? | Number | The vertical position of the modal within its window in pixels. |
|
|
168
|
+
| left? | Number | The horizontal position of the modal within its window in pixels. |
|
|
169
|
+
| draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
|
|
170
|
+
| resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
|
|
171
|
+
| closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
|
|
172
|
+
| closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
|
|
173
|
+
| center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
|
|
174
|
+
| url? | String | The URL from which to fetch and render content. |
|
|
175
|
+
| auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
|
|
176
|
+
| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
|
|
177
|
+
| backdrop? | Boolean | Enables the backdrop when the modal is opened. |
|
|
178
|
+
| minimizable? | Boolean | Modal can be minimized. `Default: false`. |
|
|
179
|
+
| minimized? | Boolean | Current minimized state of the modal. |
|
|
180
|
+
| position? | String | Modal is automatic align during initialization. |
|
|
181
|
+
| title? | String | Title of the modal. |
|
|
182
|
+
| responsive? | Boolean | Enables responsive mode. `Default: true`. |
|
|
183
|
+
| layers? | Boolean | Bring to front on focus. |
|
|
184
|
+
| focus? | Boolean | Focus on the modal when open it. `Default: true`. |
|
|
185
|
+
| overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
|
|
186
186
|
|
|
187
187
|
|
|
188
188
|
### Events
|
|
189
189
|
|
|
190
|
-
| Event
|
|
191
|
-
|
|
192
|
-
|
|
|
193
|
-
|
|
|
190
|
+
| Event | Description |
|
|
191
|
+
|-----------|------------------------------------------|
|
|
192
|
+
| onload? | When the modal is ready. |
|
|
193
|
+
| onclose? | Called when modal closes. |
|
|
194
|
+
| onopen? | Called when modal opens. |
|
|
195
|
+
| onresize? | When the user resize the modal. |
|
|
196
|
+
| onmove? | When the user change the modal position. |
|
|
197
|
+
|
|
194
198
|
|
|
195
199
|
## License
|
|
196
200
|
|
|
197
201
|
The LemonadeJS Modal is released under the MIT.
|
|
198
202
|
|
|
203
|
+
|
|
204
|
+
## Changelog
|
|
205
|
+
|
|
206
|
+
### 3.1.1
|
|
207
|
+
|
|
208
|
+
- Added new events: `onmove` and `onresize`.
|
|
209
|
+
|
|
210
|
+
### 3.1.0
|
|
211
|
+
|
|
212
|
+
- Close modal using the keyboard by pressing `Shift + Tab` on the icon.
|
|
213
|
+
|
|
199
214
|
## Other Tools
|
|
200
215
|
|
|
201
216
|
- [jSuites](https://jsuites.net/docs)
|
package/dist/index.d.ts
CHANGED
|
@@ -54,6 +54,10 @@ declare namespace Modal {
|
|
|
54
54
|
onclose?: (self: object) => void;
|
|
55
55
|
/** onload event */
|
|
56
56
|
onload?: (self: object) => void;
|
|
57
|
+
/** Move event */
|
|
58
|
+
onmove?: (self: object, x: number, y: number) => void;
|
|
59
|
+
/** Resize event */
|
|
60
|
+
onresize?: (self: object, w: number, h: number) => void;
|
|
57
61
|
/** Import content from DOM reference */
|
|
58
62
|
content?: HTMLElement;
|
|
59
63
|
}
|
package/dist/index.js
CHANGED
|
@@ -188,9 +188,11 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
// Dispatcher
|
|
191
|
-
const Dispatch = function(type
|
|
191
|
+
const Dispatch = function(type){
|
|
192
192
|
if (typeof this[type] === 'function') {
|
|
193
|
-
|
|
193
|
+
let args = Array.from(arguments);
|
|
194
|
+
args.shift();
|
|
195
|
+
this[type](...args)
|
|
194
196
|
}
|
|
195
197
|
}
|
|
196
198
|
|
|
@@ -497,7 +499,11 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
497
499
|
backdrop.classList.add('lm-modal-backdrop');
|
|
498
500
|
backdrop.addEventListener('click', function() {
|
|
499
501
|
self.closed = true;
|
|
500
|
-
})
|
|
502
|
+
});
|
|
503
|
+
|
|
504
|
+
if (self.closed === false) {
|
|
505
|
+
self.el.parentNode.insertBefore(backdrop, self.el);
|
|
506
|
+
}
|
|
501
507
|
}
|
|
502
508
|
|
|
503
509
|
// Bring to front on focus
|
|
@@ -704,6 +710,8 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
704
710
|
self.width = parseInt(item.style.width);
|
|
705
711
|
self.height = parseInt(item.style.height);
|
|
706
712
|
controls.e.classList.remove('action');
|
|
713
|
+
// Event
|
|
714
|
+
Dispatch.call(self, 'onresize', self, self.width, self.height);
|
|
707
715
|
}
|
|
708
716
|
controls.e.classList.add('action');
|
|
709
717
|
} else if (isTrue(self.draggable) && y - rect.top < 40) {
|
|
@@ -712,6 +720,8 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
712
720
|
self.top = parseInt(item.style.top);
|
|
713
721
|
self.left = parseInt(item.style.left);
|
|
714
722
|
controls.e.classList.remove('action');
|
|
723
|
+
// Event
|
|
724
|
+
Dispatch.call(self, 'onmove', self, self.top, self.left);
|
|
715
725
|
}
|
|
716
726
|
controls.e.classList.add('action');
|
|
717
727
|
// Remove transform
|
|
@@ -751,7 +761,7 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
751
761
|
template = '';
|
|
752
762
|
}
|
|
753
763
|
|
|
754
|
-
return `<div class="lm-modal" animation="{{self.animation}}" 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" onmousemove="self.mousemove" onclick="self.click" tabindex="-1">
|
|
764
|
+
return `<div class="lm-modal" animation="{{self.animation}}" 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" onmousemove="self.mousemove" onclick="self.click" tabindex="-1" role="modal">
|
|
755
765
|
<div class="lm-modal-title" data-title="{{self.title}}" data-icon="{{self.icon}}"><div class="lm-modal-icon">{{self.icon}}</div><div>{{self.title}}</div><div class="lm-modal-icon lm-modal-minimize" tabindex="0"></div><div class="lm-modal-icon lm-modal-close" tabindex="0"></div></div>
|
|
756
766
|
<div>${template}</div>
|
|
757
767
|
</div>`
|
package/dist/style.css
CHANGED
|
@@ -17,6 +17,10 @@
|
|
|
17
17
|
color: var(--lm-font-color, #000);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
+
.lm-modal[closed="true"] {
|
|
21
|
+
display: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
20
24
|
.lm-modal.action {
|
|
21
25
|
user-select: none;
|
|
22
26
|
}
|
|
@@ -30,62 +34,58 @@
|
|
|
30
34
|
line-height: 24px;
|
|
31
35
|
user-select: none;
|
|
32
36
|
display: flex;
|
|
33
|
-
border-radius: 5px;
|
|
37
|
+
border-radius: 5px 5px 0 0;
|
|
34
38
|
}
|
|
35
39
|
|
|
36
|
-
.lm-modal .lm-modal-title {
|
|
40
|
+
.lm-modal > .lm-modal-title {
|
|
37
41
|
display: none;
|
|
38
42
|
}
|
|
39
43
|
|
|
40
|
-
.lm-modal .lm-modal-title[data-icon],
|
|
41
|
-
.lm-modal .lm-modal-title[data-title],
|
|
42
|
-
.lm-modal[closable="true"] .lm-modal-title,
|
|
43
|
-
.lm-modal[minimizable="true"] .lm-modal-title {
|
|
44
|
+
.lm-modal > .lm-modal-title[data-icon],
|
|
45
|
+
.lm-modal > .lm-modal-title[data-title],
|
|
46
|
+
.lm-modal[closable="true"] > .lm-modal-title,
|
|
47
|
+
.lm-modal[minimizable="true"] > .lm-modal-title {
|
|
44
48
|
display: inherit;
|
|
45
49
|
}
|
|
46
50
|
|
|
47
|
-
.lm-modal-title > div:nth-child(2) {
|
|
51
|
+
.lm-modal > .lm-modal-title > div:nth-child(2) {
|
|
48
52
|
flex: 1;
|
|
49
53
|
}
|
|
50
54
|
|
|
51
|
-
.lm-modal .lm-modal-icon {
|
|
55
|
+
.lm-modal > .lm-modal-title > .lm-modal-icon {
|
|
52
56
|
width: 24px;
|
|
53
57
|
height: 24px;
|
|
54
58
|
font-size: 24px;
|
|
55
59
|
cursor: pointer;
|
|
56
60
|
font-family: "Material Icons";
|
|
57
61
|
text-align: center;
|
|
62
|
+
margin-right: 5px;
|
|
58
63
|
display: none;
|
|
59
64
|
}
|
|
60
65
|
|
|
61
|
-
.lm-modal .lm-modal-icon:not(:empty) {
|
|
66
|
+
.lm-modal > .lm-modal-title > .lm-modal-icon:not(:empty) {
|
|
62
67
|
display: inherit;
|
|
63
68
|
}
|
|
64
69
|
|
|
65
|
-
.lm-modal .lm-modal-close::before {
|
|
70
|
+
.lm-modal > .lm-modal-title > .lm-modal-close::before {
|
|
66
71
|
content: 'close';
|
|
67
72
|
}
|
|
68
73
|
|
|
69
|
-
.lm-modal .lm-modal-minimize::before {
|
|
74
|
+
.lm-modal > .lm-modal-title > .lm-modal-minimize::before {
|
|
70
75
|
content: '\2500';
|
|
71
76
|
}
|
|
72
77
|
|
|
73
|
-
.lm-modal
|
|
74
|
-
|
|
75
|
-
margin-right: 5px;
|
|
76
|
-
display: block;
|
|
78
|
+
.lm-modal[minimized="true"] > .lm-modal-title > .lm-modal-minimize::before {
|
|
79
|
+
content: '\e5d7';
|
|
77
80
|
}
|
|
78
81
|
|
|
79
|
-
.lm-modal[
|
|
82
|
+
.lm-modal[minimizable="true"] > .lm-modal-title > .lm-modal-minimize {
|
|
80
83
|
display: block;
|
|
81
84
|
}
|
|
82
85
|
|
|
83
|
-
.lm-modal[
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
.lm-modal[minimized="true"] .lm-modal-minimize::before {
|
|
88
|
-
content: '\e5d7';
|
|
86
|
+
.lm-modal[closable="true"] > .lm-modal-title > .lm-modal-close {
|
|
87
|
+
margin-right: 0;
|
|
88
|
+
display: block;
|
|
89
89
|
}
|
|
90
90
|
|
|
91
91
|
.lm-modal.hide {
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
width: 100vw;
|
|
112
112
|
height: 100vh;
|
|
113
113
|
background-color: #00000020;
|
|
114
|
-
z-index:
|
|
114
|
+
z-index: 15;
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.lm-modal > div:last-child {
|