webcimes-modal 1.2.3 → 2.0.1
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 +182 -126
- package/demo/script_esm.js +38 -22
- package/demo/script_udm.js +37 -22
- package/dist/js/webcimes-modal.esm.d.ts +10 -31
- 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 +10 -31
- 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 +10 -31
- package/src/ts/webcimes-modal.d.ts.map +1 -1
- package/src/ts/webcimes-modal.ts +570 -503
- 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
|
@@ -13,140 +13,177 @@ 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
22
|
<head>
|
|
21
|
-
|
|
23
|
+
...
|
|
22
24
|
<script type="importmap">
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
{
|
|
26
|
+
"imports": {
|
|
27
|
+
"webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
|
|
28
|
+
}
|
|
26
29
|
}
|
|
27
|
-
}
|
|
28
30
|
</script>
|
|
29
|
-
|
|
30
|
-
|
|
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
46
|
<head>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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
70
|
<head>
|
|
62
|
-
|
|
63
|
-
<script
|
|
64
|
-
|
|
65
|
-
|
|
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 rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css"
|
|
84
|
+
<link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css" />
|
|
71
85
|
```
|
|
72
86
|
|
|
73
87
|
## Usage
|
|
74
88
|
|
|
75
|
-
### Call `
|
|
89
|
+
### Call `CreateWebcimesModal()` to create modal:
|
|
90
|
+
|
|
76
91
|
```javascript
|
|
77
|
-
// Wait for dom content loaded or call
|
|
78
|
-
document.addEventListener(
|
|
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
|
-
|
|
92
|
+
// Wait for dom content loaded or call CreateWebcimesModal before the end of body
|
|
93
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
94
|
+
// Create modal
|
|
95
|
+
const myModal = CreateWebcimesModal({
|
|
96
|
+
setId: null, // set a specific id on the modal. default "null"
|
|
97
|
+
setClass: null, // set a specific class on the modal, default "null"
|
|
98
|
+
width: 'auto', // width (specify unit), default "auto"
|
|
99
|
+
height: 'auto', // height (specify unit), default "auto"
|
|
100
|
+
titleHtml: 'My title', // html for title, default "null"
|
|
101
|
+
bodyHtml: 'My Body', // html for body, default "null"
|
|
102
|
+
buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
|
|
103
|
+
buttonConfirmHtml: 'Confirm', // html for confirm button, default "null"
|
|
104
|
+
closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
|
|
105
|
+
closeOnConfirmButton: true, // close modal after trigger confirm button, default "true"
|
|
106
|
+
showCloseButton: true, // show close button, default "true"
|
|
107
|
+
allowCloseOutside: false, // allow the modal to close when clicked outside, default "true"
|
|
108
|
+
allowMovement: true, // ability to move modal, default "true"
|
|
109
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
110
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
111
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
112
|
+
stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
|
|
113
|
+
stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
|
|
114
|
+
style: null, // add extra css style to modal, default null
|
|
115
|
+
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
|
|
116
|
+
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
|
|
117
|
+
animationDuration: 500, // animation duration in ms, default "500"
|
|
118
|
+
beforeShow: () => {
|
|
119
|
+
console.log('before show');
|
|
120
|
+
}, // callback before show modal
|
|
121
|
+
afterShow: () => {
|
|
122
|
+
console.log('after show');
|
|
123
|
+
}, // callback after show modal
|
|
124
|
+
beforeDestroy: () => {
|
|
125
|
+
console.log('before destroy');
|
|
126
|
+
}, // callback before destroy modal
|
|
127
|
+
afterDestroy: () => {
|
|
128
|
+
console.log('after destroy');
|
|
129
|
+
}, // callback after destroy modal
|
|
130
|
+
onCancelButton: () => {
|
|
131
|
+
console.log('on cancel button');
|
|
132
|
+
}, // callback after triggering cancel button
|
|
133
|
+
onConfirmButton: () => {
|
|
134
|
+
console.log('on confirm button');
|
|
135
|
+
}, // callback after triggering confirm button
|
|
136
|
+
});
|
|
111
137
|
});
|
|
112
138
|
```
|
|
113
139
|
|
|
114
140
|
### Modal html structure:
|
|
141
|
+
|
|
115
142
|
After a creating a modal, the basic html structure look like this:
|
|
116
143
|
|
|
117
144
|
```html
|
|
118
145
|
<div class="webcimes-modal">
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
146
|
+
<div class="webcimes-modal__header">
|
|
147
|
+
<div class="webcimes-modal__title">My title</div>
|
|
148
|
+
<button
|
|
149
|
+
class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"
|
|
150
|
+
></button>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="webcimes-modal__body">My body</div>
|
|
153
|
+
<div class="webcimes-modal__footer">
|
|
154
|
+
<button
|
|
155
|
+
class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel"
|
|
156
|
+
>
|
|
157
|
+
Cancel
|
|
158
|
+
</button>
|
|
159
|
+
<button
|
|
160
|
+
class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm"
|
|
161
|
+
>
|
|
162
|
+
Confirm
|
|
163
|
+
</button>
|
|
164
|
+
</div>
|
|
130
165
|
</div>
|
|
131
166
|
```
|
|
132
167
|
|
|
133
168
|
### Set basic parameter on the modal:
|
|
169
|
+
|
|
134
170
|
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
171
|
|
|
136
|
-
For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
|
|
172
|
+
For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
|
|
137
173
|
|
|
138
174
|
```javascript
|
|
139
|
-
const myModal =
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
175
|
+
const myModal = CreateWebcimesModal({
|
|
176
|
+
titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
|
|
177
|
+
bodyHtml: document.querySelector('#myID').outerHTML, // set html from an HTML element
|
|
178
|
+
buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
|
|
179
|
+
buttonConfirmHtml: 'Confirm', // or just text
|
|
144
180
|
});
|
|
145
181
|
```
|
|
146
182
|
|
|
147
183
|
if any of these 4 fields is set to null (the default), it will not appear on the modal
|
|
148
184
|
|
|
149
185
|
### Remove specific structure of the modal:
|
|
186
|
+
|
|
150
187
|
If you want to completely remove `webcimes-modal__header`, `webcimes-modal__body` or `webcimes-modal__footer` you need:
|
|
151
188
|
|
|
152
189
|
To remove `webcimes-modal__header`: set `titleHtml` to `null` and `showCloseButton` to `false`
|
|
@@ -156,45 +193,49 @@ To remove `webcimes-modal__body`: set `bodyHtml` to `null`
|
|
|
156
193
|
To remove `webcimes-modal__footer`: set `buttonCancelHtml` to `null` and `buttonConfirmHtml` to `null`
|
|
157
194
|
|
|
158
195
|
### Scale the modal:
|
|
196
|
+
|
|
159
197
|
By default the `height` and `width` are set to `auto`, the modal will also be sized according to the html content.
|
|
160
198
|
|
|
161
199
|
You can also set the determined `height` or `width` by indicating the value with a number and a unit.
|
|
162
200
|
|
|
163
201
|
```javascript
|
|
164
|
-
const myModal =
|
|
165
|
-
|
|
166
|
-
|
|
202
|
+
const myModal = CreateWebcimesModal({
|
|
203
|
+
width: '80vm',
|
|
204
|
+
height: '200px',
|
|
167
205
|
});
|
|
168
206
|
```
|
|
169
207
|
|
|
170
208
|
### Modal behavior:
|
|
209
|
+
|
|
171
210
|
Below are the different options for customize the modal behavior.
|
|
172
211
|
|
|
173
212
|
```javascript
|
|
174
|
-
const myModal =
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
213
|
+
const myModal = CreateWebcimesModal({
|
|
214
|
+
closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
|
|
215
|
+
closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
|
|
216
|
+
showCloseButton: true, // show close button, default "true"
|
|
217
|
+
allowCloseOutside: false, // allows the modal to close when clicked outside, default "true"
|
|
218
|
+
allowMovement: true, // ability to move modal, default "true"
|
|
219
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
220
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
221
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
222
|
+
stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
|
|
223
|
+
stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
|
|
185
224
|
});
|
|
186
225
|
```
|
|
187
226
|
|
|
188
227
|
### Add extra style to the modal:
|
|
228
|
+
|
|
189
229
|
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
230
|
|
|
191
231
|
```javascript
|
|
192
|
-
const myModal =
|
|
193
|
-
|
|
232
|
+
const myModal = CreateWebcimesModal({
|
|
233
|
+
style: 'background:black; color:#fff; text-align:center;',
|
|
194
234
|
});
|
|
195
235
|
```
|
|
196
236
|
|
|
197
237
|
### Animation:
|
|
238
|
+
|
|
198
239
|
Once the modal is created, it will be shown and hidden with an animation, you can choose between two animations for each case:
|
|
199
240
|
|
|
200
241
|
For `animationOnShow` you can choose between `animDropDown` or `animFadeIn`
|
|
@@ -204,19 +245,20 @@ For `animationOnDestroy` you can choose between `animDropUp` or `animFadeOut`
|
|
|
204
245
|
And you can set the duration of all animation by setting `animationDuration` with a number in ms.
|
|
205
246
|
|
|
206
247
|
```javascript
|
|
207
|
-
const myModal =
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
248
|
+
const myModal = CreateWebcimesModal({
|
|
249
|
+
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
|
|
250
|
+
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
|
|
251
|
+
animationDuration: 500, // anim duration in ms, default "500"
|
|
211
252
|
});
|
|
212
253
|
```
|
|
213
254
|
|
|
214
255
|
### Get dom element
|
|
256
|
+
|
|
215
257
|
You can get the dom element of the current modal like this:
|
|
216
258
|
|
|
217
259
|
```javascript
|
|
218
260
|
// Get the instance
|
|
219
|
-
const myModal =
|
|
261
|
+
const myModal = CreateWebcimesModal(...);
|
|
220
262
|
|
|
221
263
|
// Things
|
|
222
264
|
|
|
@@ -228,7 +270,7 @@ Or you can get the global container of all modals like this:
|
|
|
228
270
|
|
|
229
271
|
```javascript
|
|
230
272
|
// Get the instance
|
|
231
|
-
const myModal =
|
|
273
|
+
const myModal = CreateWebcimesModal(...);
|
|
232
274
|
|
|
233
275
|
// Things
|
|
234
276
|
|
|
@@ -237,16 +279,29 @@ myModal.modals;
|
|
|
237
279
|
```
|
|
238
280
|
|
|
239
281
|
### Events:
|
|
240
|
-
|
|
282
|
+
|
|
283
|
+
Multiple events exist, which allow to interact with the modal at each step. You can use all events below:
|
|
241
284
|
|
|
242
285
|
```javascript
|
|
243
|
-
const myModal =
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
286
|
+
const myModal = CreateWebcimesModal({
|
|
287
|
+
beforeShow: () => {
|
|
288
|
+
console.log('before show');
|
|
289
|
+
}, // callback before show modal
|
|
290
|
+
afterShow: () => {
|
|
291
|
+
console.log('after show');
|
|
292
|
+
}, // callback after show modal
|
|
293
|
+
beforeDestroy: () => {
|
|
294
|
+
console.log('before destroy');
|
|
295
|
+
}, // callback before destroy modal
|
|
296
|
+
afterDestroy: () => {
|
|
297
|
+
console.log('after destroy');
|
|
298
|
+
}, // callback after destroy modal
|
|
299
|
+
onCancelButton: () => {
|
|
300
|
+
console.log('on cancel button');
|
|
301
|
+
}, // callback after triggering cancel button
|
|
302
|
+
onConfirmButton: () => {
|
|
303
|
+
console.log('on confirm button');
|
|
304
|
+
}, // callback after triggering confirm button
|
|
250
305
|
});
|
|
251
306
|
```
|
|
252
307
|
|
|
@@ -254,7 +309,7 @@ You can also use `addEventListener` for get the events from the instance like th
|
|
|
254
309
|
|
|
255
310
|
```javascript
|
|
256
311
|
// Get the instance
|
|
257
|
-
const myModal =
|
|
312
|
+
const myModal = CreateWebcimesModal(...);
|
|
258
313
|
|
|
259
314
|
// Create an event on the current modal
|
|
260
315
|
myModal.modal.addEventListener("afterDestroy", () => {
|
|
@@ -263,6 +318,7 @@ myModal.modal.addEventListener("afterDestroy", () => {
|
|
|
263
318
|
```
|
|
264
319
|
|
|
265
320
|
### Destroy
|
|
321
|
+
|
|
266
322
|
To destroy the modal, you have several ways:
|
|
267
323
|
|
|
268
324
|
- You can use basic close button with `showCloseButton` property set to `true`
|
|
@@ -275,7 +331,7 @@ To destroy the modal, you have several ways:
|
|
|
275
331
|
|
|
276
332
|
```javascript
|
|
277
333
|
// Get the instance
|
|
278
|
-
const myModal =
|
|
334
|
+
const myModal = CreateWebcimesModal(...);
|
|
279
335
|
|
|
280
336
|
// Things
|
|
281
337
|
|
|
@@ -284,31 +340,31 @@ myModal.destroy();
|
|
|
284
340
|
```
|
|
285
341
|
|
|
286
342
|
### Style modals:
|
|
343
|
+
|
|
287
344
|
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
345
|
|
|
289
346
|
```css
|
|
290
|
-
.webcimes-modals
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
--webcimes-modals-z-index: 5;
|
|
347
|
+
.webcimes-modals {
|
|
348
|
+
--webcimes-modals-background: rgba(0, 0, 0, 0.8);
|
|
349
|
+
--webcimes-modals-z-index: 5;
|
|
294
350
|
}
|
|
295
|
-
.webcimes-modal
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
--modal-button-confirm-color-hover: #fff;
|
|
351
|
+
.webcimes-modal {
|
|
352
|
+
--modal-color: inherit;
|
|
353
|
+
--modal-background: #fff;
|
|
354
|
+
--modal-border-color: #ddd;
|
|
355
|
+
--modal-box-shadow: 1px 1px 3px 0px #444;
|
|
356
|
+
--modal-title-font-size: 24px;
|
|
357
|
+
--modal-button-cancel-background: rgba(102, 102, 102, 1);
|
|
358
|
+
--modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);
|
|
359
|
+
--modal-button-cancel-color: #fff;
|
|
360
|
+
--modal-button-cancel-color-hover: #fff;
|
|
361
|
+
--modal-button-confirm-background: rgba(0, 0, 0, 1);
|
|
362
|
+
--modal-button-confirm-background-hover: rgba(0, 0, 0, 0.7);
|
|
363
|
+
--modal-button-confirm-color: #fff;
|
|
364
|
+
--modal-button-confirm-color-hover: #fff;
|
|
310
365
|
}
|
|
311
366
|
```
|
|
312
367
|
|
|
313
368
|
## License
|
|
314
|
-
|
|
369
|
+
|
|
370
|
+
[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
|
+
});
|