@lemonadejs/modal 2.4.6 → 2.4.9
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 +68 -43
- package/dist/index.js +4 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,74 +39,99 @@ To use modal via a CDN, include the following script tags in your HTML file:
|
|
|
39
39
|
Declarative - Quick example with Lemonade
|
|
40
40
|
|
|
41
41
|
```javascript
|
|
42
|
-
import
|
|
43
|
-
import
|
|
42
|
+
import lemonade from 'lemonadejs'
|
|
43
|
+
import Modal from '@lemonadejs/modal';
|
|
44
|
+
import '@lemonadejs/modal/dist/style.css';
|
|
44
45
|
|
|
45
|
-
export default function
|
|
46
|
+
export default function App() {
|
|
46
47
|
const self = this;
|
|
47
|
-
self.width = 400;
|
|
48
|
-
self.height = 200;
|
|
49
48
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
self.toggle = function () {
|
|
50
|
+
self.modalRef.closed = !self.modalRef.closed
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return `<>
|
|
54
|
+
<Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modalRef">
|
|
55
|
+
<div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
|
|
56
|
+
<p>Quick example!</p>
|
|
57
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
|
|
58
|
+
</div>
|
|
59
|
+
</Modal>
|
|
60
|
+
<input type="button" value="Toggle Modal" id="button" onclick="self.toggle" />
|
|
61
|
+
</>`
|
|
53
62
|
}
|
|
54
63
|
```
|
|
55
64
|
|
|
56
65
|
Programmatical - Quick example with Javascript
|
|
57
66
|
|
|
58
67
|
```html
|
|
59
|
-
<
|
|
60
|
-
<script
|
|
68
|
+
<html>
|
|
69
|
+
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
70
|
+
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
|
|
61
71
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
|
|
62
72
|
|
|
63
73
|
<div id="root">
|
|
64
|
-
<
|
|
74
|
+
<div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
|
|
75
|
+
<p>Quick example!</p>
|
|
76
|
+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
|
|
77
|
+
</div>
|
|
65
78
|
</div>
|
|
79
|
+
<input type="button" value="Toggle Modal" id="button" />
|
|
66
80
|
|
|
67
81
|
<script>
|
|
68
|
-
|
|
69
|
-
const root = document.getElementById("root")
|
|
70
|
-
|
|
71
|
-
// Call modal with the target and the options object
|
|
72
|
-
Modal(root, {
|
|
82
|
+
const modal = Modal(document.getElementById("root"), {
|
|
73
83
|
width: 400,
|
|
74
84
|
height: 200,
|
|
75
85
|
title: "My window modal",
|
|
76
|
-
|
|
86
|
+
closed: true,
|
|
87
|
+
center: true,
|
|
88
|
+
});
|
|
89
|
+
button.addEventListener('click', () => {
|
|
90
|
+
console.log(modal.closed)
|
|
91
|
+
modal.closed = !modal.closed;
|
|
92
|
+
});
|
|
77
93
|
</script>
|
|
94
|
+
</html>
|
|
78
95
|
```
|
|
79
96
|
|
|
80
97
|
### Configuration
|
|
81
98
|
|
|
82
99
|
You can configure things such as position, size, and functionalities.
|
|
83
100
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
|
87
|
-
|
|
88
|
-
| title?
|
|
89
|
-
| height?
|
|
90
|
-
| width?
|
|
91
|
-
| top?
|
|
92
|
-
| left?
|
|
93
|
-
| draggable?
|
|
94
|
-
| resizable?
|
|
95
|
-
| closed?
|
|
96
|
-
| closable?
|
|
97
|
-
|
|
|
98
|
-
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
101
|
+
### Settings
|
|
102
|
+
|
|
103
|
+
| Attribute | Type | Description |
|
|
104
|
+
| --- | --- | --- |
|
|
105
|
+
| title? | String | The header title of the modal. If empty, the header will be not displayed. |
|
|
106
|
+
| height? | Number | The height of the modal in pixels. |
|
|
107
|
+
| width? | Number | The width of the modal in pixels. |
|
|
108
|
+
| top? | Number | The vertical position of the modal within its window in pixels. |
|
|
109
|
+
| left? | Number | The horizontal position of the modal within its window in pixels. |
|
|
110
|
+
| draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
|
|
111
|
+
| resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
|
|
112
|
+
| closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
|
|
113
|
+
| closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
|
|
114
|
+
| center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
|
|
115
|
+
| url? | String | The URL from which to fetch and render content. |
|
|
116
|
+
| auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
|
|
117
|
+
| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
|
|
118
|
+
| backdrop? | Boolean | Enables the backdrop when the modal is opened. |
|
|
119
|
+
| minimizable? | Boolean | Modal can be minimized. `Default: false`. |
|
|
120
|
+
| minimized? | Boolean | Current minimized state of the modal. |
|
|
121
|
+
| position? | String | Modal is automatic align during initialization. |
|
|
122
|
+
| title? | String | Title of the modal. |
|
|
123
|
+
| responsive? | Boolean | Enables responsive mode. `Default: true`. |
|
|
124
|
+
| layers? | Boolean | Bring to front on focus. |
|
|
125
|
+
| focus? | Boolean | Focus on the modal when open it. `Default: true`. |
|
|
126
|
+
| overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
### Events
|
|
130
|
+
|
|
131
|
+
| Event | Description |
|
|
132
|
+
|------------------------------| --- |
|
|
133
|
+
| onclose? | Called when modal closes. |
|
|
134
|
+
| onopen? | Called when modal opens. |
|
|
110
135
|
|
|
111
136
|
## License
|
|
112
137
|
|
package/dist/index.js
CHANGED
|
@@ -208,7 +208,6 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
208
208
|
|
|
209
209
|
const adjustLeft = function() {
|
|
210
210
|
let self = this;
|
|
211
|
-
self.el.style.marginLeft = '';
|
|
212
211
|
let rect = self.el.getBoundingClientRect();
|
|
213
212
|
// Make sure component will be visible on page
|
|
214
213
|
let limit = document.documentElement.clientWidth - (rect.left + rect.width);
|
|
@@ -441,6 +440,10 @@ if (!lemonade && typeof (require) === 'function') {
|
|
|
441
440
|
|
|
442
441
|
e.preventDefault();
|
|
443
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;
|
|
444
447
|
// Action
|
|
445
448
|
controls.type = 'move';
|
|
446
449
|
// Callback
|
package/package.json
CHANGED