webcimes-modal 2.0.0 → 2.0.2
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 +145 -148
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -19,46 +19,46 @@ You can use an importmap to resolve the arbitrary module names to complete paths
|
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
21
|
<html>
|
|
22
|
-
|
|
22
|
+
<head>
|
|
23
|
+
...
|
|
24
|
+
<script type="importmap">
|
|
25
|
+
{
|
|
26
|
+
"imports": {
|
|
27
|
+
"webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
</head>
|
|
23
32
|
...
|
|
24
|
-
<script type="importmap">
|
|
25
|
-
{
|
|
26
|
-
"imports": {
|
|
27
|
-
"webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
</script>
|
|
31
|
-
</head>
|
|
32
|
-
...
|
|
33
33
|
</html>
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
Then import javascript module:
|
|
37
37
|
|
|
38
38
|
```javascript
|
|
39
|
-
import { createWebcimesModal } from
|
|
39
|
+
import { createWebcimesModal } from 'webcimes-modal';
|
|
40
40
|
```
|
|
41
41
|
|
|
42
42
|
Or you can also set the full path directly in the import:
|
|
43
43
|
|
|
44
44
|
```html
|
|
45
45
|
<html>
|
|
46
|
-
|
|
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>
|
|
47
54
|
...
|
|
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
55
|
</html>
|
|
56
56
|
```
|
|
57
57
|
|
|
58
58
|
Or with JS bundlers (like Webpack) you can call directly the module :
|
|
59
59
|
|
|
60
60
|
```javascript
|
|
61
|
-
import { createWebcimesModal } from
|
|
61
|
+
import { createWebcimesModal } from 'webcimes-modal';
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
### UDM
|
|
@@ -67,24 +67,21 @@ You can directly load the udm module in the script tag:
|
|
|
67
67
|
|
|
68
68
|
```html
|
|
69
69
|
<html>
|
|
70
|
-
|
|
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>
|
|
71
77
|
...
|
|
72
|
-
<script
|
|
73
|
-
src="./node_modules/webcimes-modal/dist/js/webcimes-modal.udm.js"
|
|
74
|
-
type="text/javascript"
|
|
75
|
-
></script>
|
|
76
|
-
</head>
|
|
77
|
-
...
|
|
78
78
|
</html>
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
### Import stylesheet:
|
|
82
82
|
|
|
83
83
|
```html
|
|
84
|
-
<link
|
|
85
|
-
rel="stylesheet"
|
|
86
|
-
href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css"
|
|
87
|
-
/>
|
|
84
|
+
<link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css" />
|
|
88
85
|
```
|
|
89
86
|
|
|
90
87
|
## Usage
|
|
@@ -93,50 +90,50 @@ You can directly load the udm module in the script tag:
|
|
|
93
90
|
|
|
94
91
|
```javascript
|
|
95
92
|
// Wait for dom content loaded or call createWebcimesModal before the end of body
|
|
96
|
-
document.addEventListener(
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
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
|
+
});
|
|
140
137
|
});
|
|
141
138
|
```
|
|
142
139
|
|
|
@@ -146,25 +143,25 @@ After a creating a modal, the basic html structure look like this:
|
|
|
146
143
|
|
|
147
144
|
```html
|
|
148
145
|
<div class="webcimes-modal">
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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>
|
|
168
165
|
</div>
|
|
169
166
|
```
|
|
170
167
|
|
|
@@ -175,11 +172,11 @@ All parameters are optionnal, but to set the base message on the modal you can u
|
|
|
175
172
|
For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
|
|
176
173
|
|
|
177
174
|
```javascript
|
|
178
|
-
const myModal =
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
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
|
|
183
180
|
});
|
|
184
181
|
```
|
|
185
182
|
|
|
@@ -203,8 +200,8 @@ You can also set the determined `height` or `width` by indicating the value with
|
|
|
203
200
|
|
|
204
201
|
```javascript
|
|
205
202
|
const myModal = createWebcimesModal({
|
|
206
|
-
|
|
207
|
-
|
|
203
|
+
width: '80vm',
|
|
204
|
+
height: '200px',
|
|
208
205
|
});
|
|
209
206
|
```
|
|
210
207
|
|
|
@@ -214,16 +211,16 @@ Below are the different options for customize the modal behavior.
|
|
|
214
211
|
|
|
215
212
|
```javascript
|
|
216
213
|
const myModal = createWebcimesModal({
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
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"
|
|
227
224
|
});
|
|
228
225
|
```
|
|
229
226
|
|
|
@@ -233,7 +230,7 @@ You can define the style of the modal with `css`, but you can also use the style
|
|
|
233
230
|
|
|
234
231
|
```javascript
|
|
235
232
|
const myModal = createWebcimesModal({
|
|
236
|
-
|
|
233
|
+
style: 'background:black; color:#fff; text-align:center;',
|
|
237
234
|
});
|
|
238
235
|
```
|
|
239
236
|
|
|
@@ -249,9 +246,9 @@ And you can set the duration of all animation by setting `animationDuration` wit
|
|
|
249
246
|
|
|
250
247
|
```javascript
|
|
251
248
|
const myModal = createWebcimesModal({
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
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"
|
|
255
252
|
});
|
|
256
253
|
```
|
|
257
254
|
|
|
@@ -287,24 +284,24 @@ Multiple events exist, which allow to interact with the modal at each step. You
|
|
|
287
284
|
|
|
288
285
|
```javascript
|
|
289
286
|
const myModal = createWebcimesModal({
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
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
|
|
308
305
|
});
|
|
309
306
|
```
|
|
310
307
|
|
|
@@ -348,23 +345,23 @@ You can style modal with the following field applying to the class of `.webcimes
|
|
|
348
345
|
|
|
349
346
|
```css
|
|
350
347
|
.webcimes-modals {
|
|
351
|
-
|
|
352
|
-
|
|
348
|
+
--webcimes-modals-background: rgba(0, 0, 0, 0.8);
|
|
349
|
+
--webcimes-modals-z-index: 5;
|
|
353
350
|
}
|
|
354
351
|
.webcimes-modal {
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
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;
|
|
368
365
|
}
|
|
369
366
|
```
|
|
370
367
|
|
package/package.json
CHANGED