webcimes-modal 1.0.2 → 1.1.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/.eslintrc.json +0 -0
- package/.gitignore +2 -0
- package/LICENSE.md +0 -0
- package/README.md +32 -7
- package/{demo.html → demo/demo_esm.html} +3 -3
- package/demo/demo_udm.html +94 -0
- package/{webcimes-modal.css → dist/css/webcimes-modal.css} +418 -416
- package/dist/css/webcimes-modal.css.map +1 -0
- package/dist/css/webcimes-modal.min.css +2 -0
- package/dist/css/webcimes-modal.min.css.map +1 -0
- package/{images → dist/images}/times.svg +0 -0
- package/{webcimes-modal.js → dist/js/esm/webcimes-modal.esm.js} +141 -108
- package/dist/js/esm/webcimes-modal.esm.js.map +1 -0
- package/dist/js/esm/webcimes-modal.esm.min.js +2 -0
- package/dist/js/esm/webcimes-modal.esm.min.js.map +1 -0
- package/dist/js/udm/webcimes-modal.udm.js +421 -0
- package/dist/js/udm/webcimes-modal.udm.js.map +1 -0
- package/dist/js/udm/webcimes-modal.udm.min.js +2 -0
- package/dist/js/udm/webcimes-modal.udm.min.js.map +1 -0
- package/package.json +16 -4
- package/src/css/webcimes-modal.css +416 -0
- package/src/images/times.svg +1 -0
- package/{webcimes-modal.ts → src/ts/webcimes-modal.ts} +1 -1
- package/tsconfig.json +15 -8
- package/webpack.config.ts +147 -0
- package/webcimes-modal.js.map +0 -1
package/.eslintrc.json
CHANGED
|
File without changes
|
package/.gitignore
ADDED
package/LICENSE.md
CHANGED
|
File without changes
|
package/README.md
CHANGED
|
@@ -22,26 +22,51 @@ You can use an importmap to resolve the arbitrary module names to complete paths
|
|
|
22
22
|
<script type="importmap">
|
|
23
23
|
{
|
|
24
24
|
"imports": {
|
|
25
|
-
"webcimes-modal": "./node_modules/webcimes-modal/webcimes-modal.js"
|
|
25
|
+
"webcimes-modal": "./node_modules/webcimes-modal/dist/js/esm/webcimes-modal.esm.min.js"
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
</script>
|
|
29
29
|
</head>
|
|
30
|
-
|
|
30
|
+
...
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
### Import stylesheet:
|
|
33
|
+
Or you can also set the full path directly in the import:
|
|
36
34
|
```html
|
|
37
|
-
<
|
|
35
|
+
<html>
|
|
36
|
+
<head>
|
|
37
|
+
...
|
|
38
|
+
<script type="module">
|
|
39
|
+
// Import webcimes-modal
|
|
40
|
+
import {WebcimesModal} from "./node_modules/webcimes-modal/dist/js/esm/webcimes-modal.esm.min.js";
|
|
41
|
+
...
|
|
42
|
+
</script>
|
|
43
|
+
</head>
|
|
44
|
+
...
|
|
38
45
|
```
|
|
39
46
|
|
|
40
|
-
|
|
47
|
+
#### Import javascript module:
|
|
41
48
|
```javascript
|
|
42
49
|
import { WebcimesModal } from "webcimes-modal";
|
|
43
50
|
```
|
|
44
51
|
|
|
52
|
+
### UDM
|
|
53
|
+
You can directly load the udm module in the script tag:
|
|
54
|
+
```html
|
|
55
|
+
<html>
|
|
56
|
+
<head>
|
|
57
|
+
...
|
|
58
|
+
<script src="./node_modules/webcimes-modal/dist/js/udm/webcimes-modal.udm.min.js" type="text/javascript"></script>
|
|
59
|
+
</head>
|
|
60
|
+
...
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Import stylesheet:
|
|
64
|
+
```html
|
|
65
|
+
<link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.min.css">
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Usage
|
|
69
|
+
|
|
45
70
|
### Call `WebcimesModal` for create modal:
|
|
46
71
|
```javascript
|
|
47
72
|
// Wait for dom content loaded or call WebcimesModal before the end of body
|
|
@@ -5,12 +5,12 @@
|
|
|
5
5
|
<meta name="Author" content="WebCimes">
|
|
6
6
|
<meta name="Copyright" content="© https://webcimes.com">
|
|
7
7
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
8
|
-
<title>Demo webcimes-modal</title>
|
|
9
|
-
<link rel="stylesheet" href="
|
|
8
|
+
<title>Demo webcimes-modal ESM</title>
|
|
9
|
+
<link rel="stylesheet" href="../dist/css/webcimes-modal.min.css">
|
|
10
10
|
<script type="importmap">
|
|
11
11
|
{
|
|
12
12
|
"imports": {
|
|
13
|
-
"webcimes-modal": "
|
|
13
|
+
"webcimes-modal": "../dist/js/esm/webcimes-modal.esm.min.js"
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
</script>
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="Author" content="WebCimes">
|
|
6
|
+
<meta name="Copyright" content="© https://webcimes.com">
|
|
7
|
+
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
8
|
+
<title>Demo webcimes-modal UDM</title>
|
|
9
|
+
<link rel="stylesheet" href="../dist/css/webcimes-modal.min.css">
|
|
10
|
+
<script src="../dist/js/udm/webcimes-modal.udm.min.js" type="text/javascript"></script>
|
|
11
|
+
<script>
|
|
12
|
+
// Wait for dom content loaded
|
|
13
|
+
document.addEventListener("DOMContentLoaded", function()
|
|
14
|
+
{
|
|
15
|
+
const myModal = new WebcimesModal({
|
|
16
|
+
setId: null, // set specific id to the modal, default "null"
|
|
17
|
+
setClass: null, // set specific class to the modal, default "null"
|
|
18
|
+
width: 'auto', // width (specify the unit), default "auto"
|
|
19
|
+
height: 'auto', // height (specify the unit), default "auto"
|
|
20
|
+
titleHtml: "My title", // html for title, default "null"
|
|
21
|
+
bodyHtml: "My Body", // html for body, default "null"
|
|
22
|
+
buttonCancelHtml: "Cancel", // html for cancel button, default "null"
|
|
23
|
+
buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
|
|
24
|
+
closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
|
|
25
|
+
closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
|
|
26
|
+
showCloseButton: true, // show the close button, default "true"
|
|
27
|
+
allowCloseOutside: false, // allow to close modal when click outside, default "true"
|
|
28
|
+
allowMovement: true, // possibility to move the modal, default "true"
|
|
29
|
+
moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
|
|
30
|
+
moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
|
|
31
|
+
moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
|
|
32
|
+
stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
|
|
33
|
+
stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
|
|
34
|
+
style: null, // add extra style css to the modal, default null
|
|
35
|
+
animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
|
|
36
|
+
animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
|
|
37
|
+
animationDuration: 500, // anim duration in ms, default "500"
|
|
38
|
+
beforeShow: () => {console.log("before show");}, // callback before show modal
|
|
39
|
+
afterShow: () => {console.log("after show");}, // callback after destroy modal
|
|
40
|
+
beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
|
|
41
|
+
afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
|
|
42
|
+
onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
|
|
43
|
+
onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
const myModal2 = new WebcimesModal({
|
|
47
|
+
titleHtml: "My title", // html for title, default "null"
|
|
48
|
+
bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
|
|
49
|
+
buttonCancelHtml: "Cancel", // html for cancel button, default "null"
|
|
50
|
+
buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
|
|
51
|
+
closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
|
|
52
|
+
afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
|
|
53
|
+
onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
</script>
|
|
57
|
+
</head>
|
|
58
|
+
<body>
|
|
59
|
+
<div style="display:none;">
|
|
60
|
+
<div class="test">
|
|
61
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
62
|
+
<br>
|
|
63
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
64
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
65
|
+
<br>
|
|
66
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
67
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
68
|
+
<br>
|
|
69
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
70
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
71
|
+
<br>
|
|
72
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
73
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
74
|
+
<br>
|
|
75
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
76
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
77
|
+
<br>
|
|
78
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
79
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
80
|
+
<br>
|
|
81
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
82
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
83
|
+
<br>
|
|
84
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
85
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
86
|
+
<br>
|
|
87
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
88
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
89
|
+
<br>
|
|
90
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|