webcimes-modal 1.2.2 → 2.0.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/.prettierrc +19 -0
- package/README.md +191 -132
- package/demo/script_esm.js +38 -22
- package/demo/script_udm.js +37 -22
- package/dist/css/webcimes-modal.css +0 -0
- package/dist/css/webcimes-modal.css.map +0 -0
- package/dist/js/webcimes-modal.esm.d.ts +11 -33
- package/dist/js/webcimes-modal.esm.js +1 -1
- package/dist/js/webcimes-modal.esm.js.map +1 -1
- package/dist/js/webcimes-modal.udm.d.ts +11 -33
- package/dist/js/webcimes-modal.udm.js +1 -1
- package/dist/js/webcimes-modal.udm.js.map +1 -1
- package/package.json +3 -2
- package/src/ts/webcimes-modal.d.ts +11 -33
- package/src/ts/webcimes-modal.d.ts.map +1 -1
- package/src/ts/webcimes-modal.ts +571 -504
- package/test/script.js +14 -16
package/.prettierrc
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
{
|
|
2
|
+
"printWidth": 100,
|
|
3
|
+
"tabWidth": 4,
|
|
4
|
+
"singleQuote": true,
|
|
5
|
+
"vueIndentScriptAndStyle": true,
|
|
6
|
+
"htmlWhitespaceSensitivity": "css",
|
|
7
|
+
"overrides": [
|
|
8
|
+
{
|
|
9
|
+
"files": [
|
|
10
|
+
"*.css",
|
|
11
|
+
"*.scss",
|
|
12
|
+
"*.postcss"
|
|
13
|
+
],
|
|
14
|
+
"options": {
|
|
15
|
+
"printWidth": 200
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
]
|
|
19
|
+
}
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# webcimes-modal
|
|
2
2
|
|
|
3
|
-
Create and animate modals simply, you can use multiple modals at the same time, create alert or confirm modal with buttons, move modals, set title, set body, etc.. It works with vanilla javascript + html + css.
|
|
3
|
+
Create and animate modals simply, you can use multiple modals at the same time, create alert or confirm modal with buttons, move modals, set title, set body, etc.. It works with vanilla javascript + html + css, no dependencies are required and the module is built in a very lightweight size.
|
|
4
4
|
|
|
5
5
|
Once the `webcimes-modal` javascript is defined, we can simply call the WebcimesModal class with the desired options.
|
|
6
6
|
|
|
@@ -13,140 +13,180 @@ npm install webcimes-modal
|
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
### ESM
|
|
16
|
+
|
|
16
17
|
Compared to JS bundlers (like Webpack), using ESM in the browser requires you to use the full path and filename instead of the module name.
|
|
17
18
|
You can use an importmap to resolve the arbitrary module names to complete paths (not needed if you use JS bundlers):
|
|
19
|
+
|
|
18
20
|
```html
|
|
19
21
|
<html>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
22
|
+
<head>
|
|
23
|
+
...
|
|
24
|
+
<script type="importmap">
|
|
25
|
+
{
|
|
26
|
+
"imports": {
|
|
27
|
+
"webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
|
|
27
28
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
</head>
|
|
32
|
+
...
|
|
33
|
+
</html>
|
|
31
34
|
```
|
|
32
35
|
|
|
33
36
|
Then import javascript module:
|
|
37
|
+
|
|
34
38
|
```javascript
|
|
35
|
-
import {
|
|
39
|
+
import { createWebcimesModal } from "webcimes-modal";
|
|
36
40
|
```
|
|
37
41
|
|
|
38
42
|
Or you can also set the full path directly in the import:
|
|
43
|
+
|
|
39
44
|
```html
|
|
40
45
|
<html>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
<head>
|
|
47
|
+
...
|
|
48
|
+
<script type="module">
|
|
49
|
+
// Import webcimes-modal
|
|
50
|
+
import { createWebcimesModal } from "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js";
|
|
51
|
+
...
|
|
52
|
+
</script>
|
|
53
|
+
</head>
|
|
54
|
+
...
|
|
55
|
+
</html>
|
|
50
56
|
```
|
|
51
57
|
|
|
52
58
|
Or with JS bundlers (like Webpack) you can call directly the module :
|
|
59
|
+
|
|
53
60
|
```javascript
|
|
54
|
-
import {
|
|
61
|
+
import { createWebcimesModal } from "webcimes-modal";
|
|
55
62
|
```
|
|
56
63
|
|
|
57
64
|
### UDM
|
|
65
|
+
|
|
58
66
|
You can directly load the udm module in the script tag:
|
|
67
|
+
|
|
59
68
|
```html
|
|
60
69
|
<html>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
<head>
|
|
71
|
+
...
|
|
72
|
+
<script
|
|
73
|
+
src="./node_modules/webcimes-modal/dist/js/webcimes-modal.udm.js"
|
|
74
|
+
type="text/javascript"
|
|
75
|
+
></script>
|
|
76
|
+
</head>
|
|
77
|
+
...
|
|
78
|
+
</html>
|
|
66
79
|
```
|
|
67
80
|
|
|
68
81
|
### Import stylesheet:
|
|
82
|
+
|
|
69
83
|
```html
|
|
70
|
-
<link
|
|
84
|
+
<link
|
|
85
|
+
rel="stylesheet"
|
|
86
|
+
href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css"
|
|
87
|
+
/>
|
|
71
88
|
```
|
|
72
89
|
|
|
73
90
|
## Usage
|
|
74
91
|
|
|
75
|
-
### Call `
|
|
92
|
+
### Call `createWebcimesModal()` to create modal:
|
|
93
|
+
|
|
76
94
|
```javascript
|
|
77
|
-
// Wait for dom content loaded or call
|
|
78
|
-
document.addEventListener("DOMContentLoaded", function()
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
95
|
+
// Wait for dom content loaded or call createWebcimesModal before the end of body
|
|
96
|
+
document.addEventListener("DOMContentLoaded", function () {
|
|
97
|
+
// Create modal
|
|
98
|
+
const myModal = createWebcimesModal({
|
|
99
|
+
setId: null, // set a specific id on the modal. default "null"
|
|
100
|
+
setClass: null, // set a specific class on the modal, default "null"
|
|
101
|
+
width: "auto", // width (specify unit), default "auto"
|
|
102
|
+
height: "auto", // height (specify unit), default "auto"
|
|
103
|
+
titleHtml: "My title", // html for title, default "null"
|
|
104
|
+
bodyHtml: "My Body", // html for body, default "null"
|
|
105
|
+
buttonCancelHtml: "Cancel", // html for cancel button, default "null"
|
|
106
|
+
buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
|
|
107
|
+
closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
|
|
108
|
+
closeOnConfirmButton: true, // close modal after trigger confirm button, default "true"
|
|
109
|
+
showCloseButton: true, // show close button, default "true"
|
|
110
|
+
allowCloseOutside: false, // allow the modal to close when clicked outside, default "true"
|
|
111
|
+
allowMovement: true, // ability to move modal, default "true"
|
|
112
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
113
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
114
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
115
|
+
stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
|
|
116
|
+
stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
|
|
117
|
+
style: null, // add extra css style to modal, default null
|
|
118
|
+
animationOnShow: "animDropDown", // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
|
|
119
|
+
animationOnDestroy: "animDropUp", // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
|
|
120
|
+
animationDuration: 500, // animation duration in ms, default "500"
|
|
121
|
+
beforeShow: () => {
|
|
122
|
+
console.log("before show");
|
|
123
|
+
}, // callback before show modal
|
|
124
|
+
afterShow: () => {
|
|
125
|
+
console.log("after show");
|
|
126
|
+
}, // callback after show modal
|
|
127
|
+
beforeDestroy: () => {
|
|
128
|
+
console.log("before destroy");
|
|
129
|
+
}, // callback before destroy modal
|
|
130
|
+
afterDestroy: () => {
|
|
131
|
+
console.log("after destroy");
|
|
132
|
+
}, // callback after destroy modal
|
|
133
|
+
onCancelButton: () => {
|
|
134
|
+
console.log("on cancel button");
|
|
135
|
+
}, // callback after triggering cancel button
|
|
136
|
+
onConfirmButton: () => {
|
|
137
|
+
console.log("on confirm button");
|
|
138
|
+
}, // callback after triggering confirm button
|
|
139
|
+
});
|
|
111
140
|
});
|
|
112
141
|
```
|
|
113
142
|
|
|
114
143
|
### Modal html structure:
|
|
144
|
+
|
|
115
145
|
After a creating a modal, the basic html structure look like this:
|
|
116
146
|
|
|
117
147
|
```html
|
|
118
148
|
<div class="webcimes-modal">
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
149
|
+
<div class="webcimes-modal__header">
|
|
150
|
+
<div class="webcimes-modal__title">My title</div>
|
|
151
|
+
<button
|
|
152
|
+
class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"
|
|
153
|
+
></button>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="webcimes-modal__body">My body</div>
|
|
156
|
+
<div class="webcimes-modal__footer">
|
|
157
|
+
<button
|
|
158
|
+
class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel"
|
|
159
|
+
>
|
|
160
|
+
Cancel
|
|
161
|
+
</button>
|
|
162
|
+
<button
|
|
163
|
+
class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm"
|
|
164
|
+
>
|
|
165
|
+
Confirm
|
|
166
|
+
</button>
|
|
167
|
+
</div>
|
|
130
168
|
</div>
|
|
131
169
|
```
|
|
132
170
|
|
|
133
171
|
### Set basic parameter on the modal:
|
|
172
|
+
|
|
134
173
|
All parameters are optionnal, but to set the base message on the modal you can use `titleHtml` to create the title, `bodyHtml` contain the main message of the modal, and `buttonCancelHtml` & `buttonConfirmHtml` contain the html for each button.
|
|
135
174
|
|
|
136
|
-
For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
|
|
175
|
+
For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
|
|
137
176
|
|
|
138
177
|
```javascript
|
|
139
|
-
const myModal =
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
178
|
+
const myModal = CreateWebcimesModal({
|
|
179
|
+
titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
|
|
180
|
+
bodyHtml: document.querySelector("#myID").outerHTML, // set html from an HTML element
|
|
181
|
+
buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
|
|
182
|
+
buttonConfirmHtml: "Confirm", // or just text
|
|
144
183
|
});
|
|
145
184
|
```
|
|
146
185
|
|
|
147
186
|
if any of these 4 fields is set to null (the default), it will not appear on the modal
|
|
148
187
|
|
|
149
188
|
### Remove specific structure of the modal:
|
|
189
|
+
|
|
150
190
|
If you want to completely remove `webcimes-modal__header`, `webcimes-modal__body` or `webcimes-modal__footer` you need:
|
|
151
191
|
|
|
152
192
|
To remove `webcimes-modal__header`: set `titleHtml` to `null` and `showCloseButton` to `false`
|
|
@@ -156,45 +196,49 @@ To remove `webcimes-modal__body`: set `bodyHtml` to `null`
|
|
|
156
196
|
To remove `webcimes-modal__footer`: set `buttonCancelHtml` to `null` and `buttonConfirmHtml` to `null`
|
|
157
197
|
|
|
158
198
|
### Scale the modal:
|
|
199
|
+
|
|
159
200
|
By default the `height` and `width` are set to `auto`, the modal will also be sized according to the html content.
|
|
160
201
|
|
|
161
202
|
You can also set the determined `height` or `width` by indicating the value with a number and a unit.
|
|
162
203
|
|
|
163
204
|
```javascript
|
|
164
|
-
const myModal =
|
|
165
|
-
|
|
166
|
-
|
|
205
|
+
const myModal = createWebcimesModal({
|
|
206
|
+
width: "80vm",
|
|
207
|
+
height: "200px",
|
|
167
208
|
});
|
|
168
209
|
```
|
|
169
210
|
|
|
170
211
|
### Modal behavior:
|
|
212
|
+
|
|
171
213
|
Below are the different options for customize the modal behavior.
|
|
172
214
|
|
|
173
215
|
```javascript
|
|
174
|
-
const myModal =
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
216
|
+
const myModal = createWebcimesModal({
|
|
217
|
+
closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
|
|
218
|
+
closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
|
|
219
|
+
showCloseButton: true, // show close button, default "true"
|
|
220
|
+
allowCloseOutside: false, // allows the modal to close when clicked outside, default "true"
|
|
221
|
+
allowMovement: true, // ability to move modal, default "true"
|
|
222
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
223
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
224
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
225
|
+
stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
|
|
226
|
+
stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
|
|
185
227
|
});
|
|
186
228
|
```
|
|
187
229
|
|
|
188
230
|
### Add extra style to the modal:
|
|
231
|
+
|
|
189
232
|
You can define the style of the modal with `css`, but you can also use the style property which allows to directly add an additional style to the modal.
|
|
190
233
|
|
|
191
234
|
```javascript
|
|
192
|
-
const myModal =
|
|
193
|
-
|
|
235
|
+
const myModal = createWebcimesModal({
|
|
236
|
+
style: "background:black; color:#fff; text-align:center;",
|
|
194
237
|
});
|
|
195
238
|
```
|
|
196
239
|
|
|
197
240
|
### Animation:
|
|
241
|
+
|
|
198
242
|
Once the modal is created, it will be shown and hidden with an animation, you can choose between two animations for each case:
|
|
199
243
|
|
|
200
244
|
For `animationOnShow` you can choose between `animDropDown` or `animFadeIn`
|
|
@@ -204,19 +248,20 @@ For `animationOnDestroy` you can choose between `animDropUp` or `animFadeOut`
|
|
|
204
248
|
And you can set the duration of all animation by setting `animationDuration` with a number in ms.
|
|
205
249
|
|
|
206
250
|
```javascript
|
|
207
|
-
const myModal =
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
251
|
+
const myModal = createWebcimesModal({
|
|
252
|
+
animationOnShow: "animDropDown", // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
|
|
253
|
+
animationOnDestroy: "animDropUp", // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
|
|
254
|
+
animationDuration: 500, // anim duration in ms, default "500"
|
|
211
255
|
});
|
|
212
256
|
```
|
|
213
257
|
|
|
214
258
|
### Get dom element
|
|
259
|
+
|
|
215
260
|
You can get the dom element of the current modal like this:
|
|
216
261
|
|
|
217
262
|
```javascript
|
|
218
263
|
// Get the instance
|
|
219
|
-
const myModal =
|
|
264
|
+
const myModal = createWebcimesModal(...);
|
|
220
265
|
|
|
221
266
|
// Things
|
|
222
267
|
|
|
@@ -228,7 +273,7 @@ Or you can get the global container of all modals like this:
|
|
|
228
273
|
|
|
229
274
|
```javascript
|
|
230
275
|
// Get the instance
|
|
231
|
-
const myModal =
|
|
276
|
+
const myModal = createWebcimesModal(...);
|
|
232
277
|
|
|
233
278
|
// Things
|
|
234
279
|
|
|
@@ -237,16 +282,29 @@ myModal.modals;
|
|
|
237
282
|
```
|
|
238
283
|
|
|
239
284
|
### Events:
|
|
240
|
-
|
|
285
|
+
|
|
286
|
+
Multiple events exist, which allow to interact with the modal at each step. You can use all events below:
|
|
241
287
|
|
|
242
288
|
```javascript
|
|
243
|
-
const myModal =
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
289
|
+
const myModal = createWebcimesModal({
|
|
290
|
+
beforeShow: () => {
|
|
291
|
+
console.log("before show");
|
|
292
|
+
}, // callback before show modal
|
|
293
|
+
afterShow: () => {
|
|
294
|
+
console.log("after show");
|
|
295
|
+
}, // callback after show modal
|
|
296
|
+
beforeDestroy: () => {
|
|
297
|
+
console.log("before destroy");
|
|
298
|
+
}, // callback before destroy modal
|
|
299
|
+
afterDestroy: () => {
|
|
300
|
+
console.log("after destroy");
|
|
301
|
+
}, // callback after destroy modal
|
|
302
|
+
onCancelButton: () => {
|
|
303
|
+
console.log("on cancel button");
|
|
304
|
+
}, // callback after triggering cancel button
|
|
305
|
+
onConfirmButton: () => {
|
|
306
|
+
console.log("on confirm button");
|
|
307
|
+
}, // callback after triggering confirm button
|
|
250
308
|
});
|
|
251
309
|
```
|
|
252
310
|
|
|
@@ -254,7 +312,7 @@ You can also use `addEventListener` for get the events from the instance like th
|
|
|
254
312
|
|
|
255
313
|
```javascript
|
|
256
314
|
// Get the instance
|
|
257
|
-
const myModal =
|
|
315
|
+
const myModal = createWebcimesModal(...);
|
|
258
316
|
|
|
259
317
|
// Create an event on the current modal
|
|
260
318
|
myModal.modal.addEventListener("afterDestroy", () => {
|
|
@@ -263,6 +321,7 @@ myModal.modal.addEventListener("afterDestroy", () => {
|
|
|
263
321
|
```
|
|
264
322
|
|
|
265
323
|
### Destroy
|
|
324
|
+
|
|
266
325
|
To destroy the modal, you have several ways:
|
|
267
326
|
|
|
268
327
|
- You can use basic close button with `showCloseButton` property set to `true`
|
|
@@ -275,7 +334,7 @@ To destroy the modal, you have several ways:
|
|
|
275
334
|
|
|
276
335
|
```javascript
|
|
277
336
|
// Get the instance
|
|
278
|
-
const myModal =
|
|
337
|
+
const myModal = createWebcimesModal(...);
|
|
279
338
|
|
|
280
339
|
// Things
|
|
281
340
|
|
|
@@ -284,31 +343,31 @@ myModal.destroy();
|
|
|
284
343
|
```
|
|
285
344
|
|
|
286
345
|
### Style modals:
|
|
346
|
+
|
|
287
347
|
You can style modal with the following field applying to the class of `.webcimes-modals` (for background and z-index behind the modal) and `.webcimes-modal` (for modal):
|
|
288
348
|
|
|
289
349
|
```css
|
|
290
|
-
.webcimes-modals
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
--webcimes-modals-z-index: 5;
|
|
350
|
+
.webcimes-modals {
|
|
351
|
+
--webcimes-modals-background: rgba(0, 0, 0, 0.8);
|
|
352
|
+
--webcimes-modals-z-index: 5;
|
|
294
353
|
}
|
|
295
|
-
.webcimes-modal
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
--modal-button-confirm-color-hover: #fff;
|
|
354
|
+
.webcimes-modal {
|
|
355
|
+
--modal-color: inherit;
|
|
356
|
+
--modal-background: #fff;
|
|
357
|
+
--modal-border-color: #ddd;
|
|
358
|
+
--modal-box-shadow: 1px 1px 3px 0px #444;
|
|
359
|
+
--modal-title-font-size: 24px;
|
|
360
|
+
--modal-button-cancel-background: rgba(102, 102, 102, 1);
|
|
361
|
+
--modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);
|
|
362
|
+
--modal-button-cancel-color: #fff;
|
|
363
|
+
--modal-button-cancel-color-hover: #fff;
|
|
364
|
+
--modal-button-confirm-background: rgba(0, 0, 0, 1);
|
|
365
|
+
--modal-button-confirm-background-hover: rgba(0, 0, 0, 0.7);
|
|
366
|
+
--modal-button-confirm-color: #fff;
|
|
367
|
+
--modal-button-confirm-color-hover: #fff;
|
|
310
368
|
}
|
|
311
369
|
```
|
|
312
370
|
|
|
313
371
|
## License
|
|
314
|
-
|
|
372
|
+
|
|
373
|
+
[MIT](https://choosealicense.com/licenses/mit/)
|
package/demo/script_esm.js
CHANGED
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
// Import webcimes-modal
|
|
2
|
-
import {
|
|
2
|
+
import { createWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
|
|
3
3
|
|
|
4
4
|
// Wait for dom content loaded
|
|
5
|
-
document.addEventListener(
|
|
6
|
-
{
|
|
7
|
-
const myModal = new WebcimesModal({
|
|
5
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
6
|
+
const myModal = createWebcimesModal({
|
|
8
7
|
setId: null, // set specific id to the modal, default "null"
|
|
9
8
|
setClass: null, // set specific class to the modal, default "null"
|
|
10
9
|
width: 'auto', // width (specify the unit), default "auto"
|
|
11
10
|
height: 'auto', // height (specify the unit), default "auto"
|
|
12
|
-
titleHtml:
|
|
13
|
-
bodyHtml:
|
|
14
|
-
buttonCancelHtml:
|
|
15
|
-
buttonConfirmHtml:
|
|
11
|
+
titleHtml: 'My title', // html for title, default "null"
|
|
12
|
+
bodyHtml: 'My Body', // html for body, default "null"
|
|
13
|
+
buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
|
|
14
|
+
buttonConfirmHtml: 'Confirm', // html for confirm button, default "null"
|
|
16
15
|
closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
|
|
17
16
|
closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
|
|
18
17
|
showCloseButton: true, // show the close button, default "true"
|
|
@@ -27,21 +26,38 @@ document.addEventListener("DOMContentLoaded", function()
|
|
|
27
26
|
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
|
|
28
27
|
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
|
|
29
28
|
animationDuration: 500, // anim duration in ms, default "500"
|
|
30
|
-
beforeShow: () => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
beforeShow: () => {
|
|
30
|
+
console.log('before show');
|
|
31
|
+
}, // callback before show modal
|
|
32
|
+
afterShow: () => {
|
|
33
|
+
console.log('after show');
|
|
34
|
+
}, // callback after show modal
|
|
35
|
+
beforeDestroy: () => {
|
|
36
|
+
console.log('before destroy');
|
|
37
|
+
}, // callback before destroy modal
|
|
38
|
+
afterDestroy: () => {
|
|
39
|
+
console.log('after destroy');
|
|
40
|
+
}, // callback after destroy modal
|
|
41
|
+
onCancelButton: () => {
|
|
42
|
+
console.log('on cancel button');
|
|
43
|
+
}, // callback after trigger cancel button
|
|
44
|
+
onConfirmButton: () => {
|
|
45
|
+
console.log('on confirm button');
|
|
46
|
+
}, // callback after trigger confirm button
|
|
36
47
|
});
|
|
37
48
|
|
|
38
|
-
const myModal2 =
|
|
39
|
-
titleHtml:
|
|
40
|
-
bodyHtml: document.querySelector(
|
|
41
|
-
buttonCancelHtml:
|
|
42
|
-
buttonConfirmHtml:
|
|
49
|
+
const myModal2 = createWebcimesModal({
|
|
50
|
+
titleHtml: 'My title', // html for title, default "null"
|
|
51
|
+
bodyHtml: document.querySelector('.test').outerHTML, // html for body, default "null"
|
|
52
|
+
buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
|
|
53
|
+
buttonConfirmHtml: 'Confirm', // html for confirm button, default "null"
|
|
43
54
|
closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
|
|
44
|
-
afterShow: () => {
|
|
45
|
-
|
|
55
|
+
afterShow: () => {
|
|
56
|
+
console.log(myModal2.modals);
|
|
57
|
+
console.log(myModal2.modal);
|
|
58
|
+
}, // callback before show modal
|
|
59
|
+
onConfirmButton: () => {
|
|
60
|
+
myModal2.destroy();
|
|
61
|
+
}, // callback after trigger confirm button
|
|
46
62
|
});
|
|
47
|
-
});
|
|
63
|
+
});
|