webcimes-modal 1.0.2 → 1.1.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/.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/dist/css/webcimes-modal.css +2 -0
- package/dist/css/webcimes-modal.css.map +1 -0
- package/{images → dist/images}/times.svg +0 -0
- package/dist/js/webcimes-modal.esm.d.ts +102 -0
- package/dist/js/webcimes-modal.esm.js +2 -0
- package/dist/js/webcimes-modal.esm.js.map +1 -0
- package/dist/js/webcimes-modal.udm.d.ts +102 -0
- package/dist/js/webcimes-modal.udm.js +2 -0
- package/dist/js/webcimes-modal.udm.js.map +1 -0
- package/package.json +19 -4
- package/{webcimes-modal.css → src/css/webcimes-modal.css} +1 -1
- package/src/images/times.svg +1 -0
- package/src/ts/webcimes-modal.d.ts +101 -0
- package/src/ts/webcimes-modal.d.ts.map +1 -0
- package/{webcimes-modal.ts → src/ts/webcimes-modal.ts} +5 -30
- package/test/script.js +25 -0
- package/test/test.html +55 -0
- package/tsconfig.json +16 -8
- package/webpack.config.ts +152 -0
- package/webcimes-modal.js +0 -363
- 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/webcimes-modal.esm.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/webcimes-modal.esm.js";
|
|
41
|
+
...
|
|
42
|
+
</script>
|
|
43
|
+
</head>
|
|
44
|
+
...
|
|
38
45
|
```
|
|
39
46
|
|
|
40
|
-
|
|
47
|
+
#### Then 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/webcimes-modal.udm.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.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.css">
|
|
10
10
|
<script type="importmap">
|
|
11
11
|
{
|
|
12
12
|
"imports": {
|
|
13
|
-
"webcimes-modal": "
|
|
13
|
+
"webcimes-modal": "../dist/js/webcimes-modal.esm.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.css">
|
|
10
|
+
<script src="../dist/js/webcimes-modal.udm.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>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.webcimesModals,.webcimesModals *,.webcimesModals :after,.webcimesModals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimesModals{--webcimes-modals-background:rgba(0,0,0,.8);--webcimes-modals-z-index:5;align-items:center;background:var(--webcimes-modals-background);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--webcimes-modals-z-index)}.webcimesModals>.modal{--modal-color:inherit;--modal-background:#fff;--modal-border-color:#ddd;--modal-box-shadow:1px 1px 3px 0px #444;--modal-title-font-size:24px;--modal-button-cancel-background:#666;--modal-button-cancel-background-hover:hsla(0,0%,40%,.7);--modal-button-cancel-color:#fff;--modal-button-cancel-color-hover:#fff;--modal-button-confirm-background:#000;--modal-button-confirm-background-hover:rgba(0,0,0,.7);--modal-button-confirm-color:#fff;--modal-button-confirm-color-hover:#fff;background:var(--modal-background);border-radius:5px;-webkit-box-shadow:var(--modal-box-shadow);-moz-box-shadow:var(--modal-box-shadow);-o-box-shadow:var(--modal-box-shadow);box-shadow:var(--modal-box-shadow);color:var(--modal-color);overflow:auto;position:absolute}.webcimesModals>.modal button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimesModals>.modal>.modalHeader{align-items:center;background:var(--modal-background);border-bottom:1px solid var(--modal-border-color);display:flex;padding:20px 40px;position:relative}.webcimesModals>.modal>.modalHeader.sticky{position:sticky;top:0}.webcimesModals>.modal>.modalHeader.movable{cursor:move;touch-action:none}.webcimesModals>.modal>.modalHeader>.title{flex:1;font-size:var(--modal-title-font-size);overflow:hidden;text-overflow:ellipsis}.webcimesModals>.modal>.modalHeader>.close{background-image:url(../images/times.svg);cursor:pointer;height:20px;margin-top:-10px;opacity:1;position:absolute;right:15px;top:50%;-webkit-transition:opacity .6s ease 0s;-moz-transition:opacity .6s ease 0s;-o-transition:opacity .6s ease 0s;transition:opacity .6s ease 0s;width:12px}.webcimesModals>.modal>.modalHeader>.close:hover{opacity:.5}.webcimesModals>.modal>.modalBody{padding:20px 40px}.webcimesModals>.modal>.modalBody.movable{cursor:move}.webcimesModals>.modal>.modalFooter{background:var(--modal-background);border-top:1px solid var(--modal-border-color);display:flex;flex-wrap:wrap;justify-content:flex-end;padding:20px 40px}.webcimesModals>.modal>.modalFooter.sticky{bottom:0;position:sticky}.webcimesModals>.modal>.modalFooter.movable{cursor:move;touch-action:none}.webcimesModals>.modal>.modalFooter button{border-radius:5px;cursor:pointer;flex:0 0 auto;margin:5px;max-width:100%;overflow:hidden;padding:10px 30px;text-overflow:ellipsis;-webkit-transition:color .6s ease 0s,background .6s ease 0s;-moz-transition:color .6s ease 0s,background .6s ease 0s;-o-transition:color .6s ease 0s,background .6s ease 0s;transition:color .6s ease 0s,background .6s ease 0s}.webcimesModals>.modal>.modalFooter button.cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimesModals>.modal>.modalFooter button.cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimesModals>.modal>.modalFooter button.confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimesModals>.modal>.modalFooter button.confirm:hover{background:var(--modal-button-confirm-background-hover);color:var(--modal-button-confirm-color-hover)}@-webkit-keyframes animFadeIn{0%{opacity:0}to{opacity:1}}@keyframes animFadeIn{0%{opacity:0}to{opacity:1}}.animFadeIn{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeIn;animation-name:animFadeIn}@-webkit-keyframes animFadeOut{0%{opacity:1}to{opacity:0}}@keyframes animFadeOut{0%{opacity:1}to{opacity:0}}.animFadeOut{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animFadeOut;animation-name:animFadeOut}@-webkit-keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}@keyframes animDropDown{0%{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}to{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}.animDropDown{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropDown;animation-name:animDropDown}@-webkit-keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}@keyframes animDropUp{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-20vh);-moz-transform:translateY(-20vh);-ms-transform:translateY(-20vh);-o-transform:translateY(-20vh);transform:translateY(-20vh)}}.animDropUp{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animDropUp;animation-name:animDropUp}@-webkit-keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes animGrowShrink{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.animGrowShrink{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:animGrowShrink;animation-name:animGrowShrink}
|
|
2
|
+
/*# sourceMappingURL=webcimes-modal.css.map*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css/webcimes-modal.css","mappings":"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","sources":["webpack://webcimes-modal/./src/css/webcimes-modal.css"],"sourcesContent":["/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n/*\r\n-----------------------\r\n WEBCIMES MODAL\r\n-----------------------\r\n*/\r\n\r\n.webcimesModals,\r\n.webcimesModals *,\r\n.webcimesModals *::before,\r\n.webcimesModals *::after\r\n{ \r\n\t-webkit-box-sizing: border-box;\r\n\t-moz-box-sizing: border-box;\r\n\tbox-sizing: border-box;\r\n}\r\n.webcimesModals\r\n{\r\n\t--webcimes-modals-background: rgba(0,0,0,0.8);\r\n\t--webcimes-modals-z-index: 5;\r\n\r\n\tposition: fixed;\r\n\tbackground: var(--webcimes-modals-background);\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tz-index: var(--webcimes-modals-z-index);\r\n}\r\n.webcimesModals > .modal\r\n{\r\n\t--modal-color: inherit;\r\n\t--modal-background: #fff;\r\n\t--modal-border-color: #ddd;\r\n\t--modal-box-shadow: 1px 1px 3px 0px #444;\r\n\t--modal-title-font-size: 24px;\r\n\t--modal-button-cancel-background: rgba(102,102,102,1);\r\n\t--modal-button-cancel-background-hover: rgba(102,102,102,0.7);\r\n\t--modal-button-cancel-color: #fff;\r\n\t--modal-button-cancel-color-hover: #fff;\r\n\t--modal-button-confirm-background: rgba(0,0,0,1);\r\n\t--modal-button-confirm-background-hover: rgba(0,0,0,0.7);\r\n\t--modal-button-confirm-color: #fff;\r\n\t--modal-button-confirm-color-hover: #fff;\r\n\t\r\n\tposition: absolute;\r\n\tborder-radius: 5px;\r\n\toverflow:auto;\r\n\tcolor: var(--modal-color);\r\n\tbackground: var(--modal-background);\r\n\t-webkit-box-shadow: var(--modal-box-shadow);\r\n\t-moz-box-shadow: var(--modal-box-shadow);\r\n\t-o-box-shadow: var(--modal-box-shadow);\r\n\tbox-shadow: var(--modal-box-shadow);\r\n}\r\n.webcimesModals > .modal button\r\n{\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tfont-weight: inherit;\r\n\tborder: none;\r\n\tbackground: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader\r\n{\r\n\tposition: relative;\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-bottom: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n}\r\n.webcimesModals > .modal > .modalHeader.sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimesModals > .modal > .modalHeader.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .title\r\n{\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\ttext-overflow: ellipsis;\r\n\tfont-size: var(--modal-title-font-size);\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close\r\n{\r\n\tposition: absolute;\r\n\theight: 20px;\r\n\twidth: 12px;\r\n\tright: 15px;\r\n\ttop: 50%;\r\n\tmargin-top: -10px;\r\n\tbackground-image: url(\"../images/times.svg\");\r\n cursor: pointer;\r\n\topacity: 1;\r\n -webkit-transition: opacity 0.6s ease 0s;\r\n -moz-transition: opacity 0.6s ease 0s;\r\n -o-transition: opacity 0.6s ease 0s;\r\n transition: opacity 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalHeader > .close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimesModals > .modal > .modalBody\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimesModals > .modal > .modalBody.movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimesModals > .modal > .modalFooter\r\n{\r\n\tbackground: var(--modal-background);\r\n\tpadding: 20px 40px;\r\n\tborder-top: 1px solid var(--modal-border-color);\r\n\tdisplay: flex;\r\n\tjustify-content: flex-end;\r\n\tflex-wrap: wrap;\r\n}\r\n.webcimesModals > .modal > .modalFooter.sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimesModals > .modal > .modalFooter.movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimesModals > .modal > .modalFooter button\r\n{\r\n\tmax-width: 100%;\r\n\tflex: 0 0 auto;\r\n\tborder-radius: 5px;\r\n\tpadding: 10px 30px;\r\n\tmargin: 5px;\r\n\tcursor: pointer;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n -webkit-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n -moz-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n -o-transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n transition: color 0.6s ease 0s, background 0.6s ease 0s;\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.cancel:hover\r\n{\r\n\tbackground: var(--modal-button-cancel-background-hover);\r\n\tcolor: var(--modal-button-cancel-color-hover);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimesModals > .modal > .modalFooter button.confirm:hover\r\n{\r\n\tbackground: var(--modal-button-confirm-background-hover);\r\n\tcolor: var(--modal-button-confirm-color-hover);\r\n}\r\n\r\n/* ANIMATIONS */\r\n\r\n@-webkit-keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n@keyframes animFadeIn\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity:0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity:1;\r\n\t}\r\n}\r\n.animFadeIn\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeIn;\r\n\tanimation-name: animFadeIn;\r\n}\r\n\r\n@-webkit-keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n@keyframes animFadeOut\r\n{\r\n\t0%\r\n\t{\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animFadeOut\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animFadeOut;\r\n\tanimation-name: animFadeOut;\r\n}\r\n\r\n@-webkit-keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n\r\n@keyframes animDropDown\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t}\r\n}\r\n.animDropDown\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropDown;\r\n\tanimation-name: animDropDown;\r\n}\r\n\r\n@-webkit-keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n\r\n@keyframes animDropUp\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: translateY(0);\r\n\t\t-moz-transform: translateY(0);\r\n\t\t-ms-transform: translateY(0);\r\n\t\t-o-transform: translateY(0);\r\n\t\ttransform: translateY(0);\r\n\t\topacity: 1;\r\n\t} \r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: translateY(-20vh);\r\n\t\t-moz-transform: translateY(-20vh);\r\n\t\t-ms-transform: translateY(-20vh);\r\n\t\t-o-transform: translateY(-20vh);\r\n\t\ttransform: translateY(-20vh);\r\n\t\topacity: 0;\r\n\t}\r\n}\r\n.animDropUp\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animDropUp;\r\n\tanimation-name: animDropUp;\r\n}\r\n\r\n@-webkit-keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.2);\r\n\t\t-moz-transform: scale(1.2);\r\n\t\t-ms-transform: scale(1.2);\r\n\t\t-o-transform: scale(1.2);\r\n\t\ttransform: scale(1.2);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n\r\n@keyframes animGrowShrink\r\n{\r\n\t0%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n\t50%\r\n\t{\r\n\t\t-webkit-transform: scale(1.1);\r\n\t\t-moz-transform: scale(1.1);\r\n\t\t-ms-transform: scale(1.1);\r\n\t\t-o-transform: scale(1.1);\r\n\t\ttransform: scale(1.1);\r\n\t}\r\n\t100%\r\n\t{\r\n\t\t-webkit-transform: scale(1);\r\n\t\t-moz-transform: scale(1);\r\n\t\t-ms-transform: scale(1);\r\n\t\t-o-transform: scale(1);\r\n\t\ttransform: scale(1);\r\n\t}\r\n}\r\n.animGrowShrink\r\n{\r\n\t-webkit-animation-duration: 0.5s;\r\n\tanimation-duration: 0.5s;\r\n\t-webkit-animation-fill-mode: both;\r\n\tanimation-fill-mode: both;\r\n\t-webkit-animation-name: animGrowShrink;\r\n\tanimation-name: animGrowShrink;\r\n}"],"names":[],"sourceRoot":""}
|
|
File without changes
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)
|
|
3
|
+
* MIT License - https://choosealicense.com/licenses/mit/
|
|
4
|
+
* Date: 2023-03-25
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Options
|
|
8
|
+
*/
|
|
9
|
+
interface Options {
|
|
10
|
+
/** set a specific id on the modal. default "null" */
|
|
11
|
+
setId: string | null;
|
|
12
|
+
/** set a specific class on the modal, default "null" */
|
|
13
|
+
setClass: string | null;
|
|
14
|
+
/** width (specify unit), default "auto" */
|
|
15
|
+
width: string;
|
|
16
|
+
/** height (specify unit), default "auto" */
|
|
17
|
+
height: string;
|
|
18
|
+
/** html for title, default "null" */
|
|
19
|
+
titleHtml: string | null;
|
|
20
|
+
/** html for body, default "null" */
|
|
21
|
+
bodyHtml: string | null;
|
|
22
|
+
/** html for cancel button, default "null" */
|
|
23
|
+
buttonCancelHtml: string | null;
|
|
24
|
+
/** html for confirm button, default "null" */
|
|
25
|
+
buttonConfirmHtml: string | null;
|
|
26
|
+
/** close modal after trigger cancel button, default "true" */
|
|
27
|
+
closeOnCancelButton: boolean;
|
|
28
|
+
/** close modal after trigger confirm button, default "true" */
|
|
29
|
+
closeOnConfirmButton: boolean;
|
|
30
|
+
/** show close button, default "true" */
|
|
31
|
+
showCloseButton: boolean;
|
|
32
|
+
/** allow the modal to close when clicked outside, default "true" */
|
|
33
|
+
allowCloseOutside: boolean;
|
|
34
|
+
/** ability to move modal, default "true" */
|
|
35
|
+
allowMovement: boolean;
|
|
36
|
+
/** if allowMovement is set to "true", ability to move modal from header, default "true" */
|
|
37
|
+
moveFromHeader: boolean;
|
|
38
|
+
/** if allowMovement is set to "true", ability to move modal from body, default "false" */
|
|
39
|
+
moveFromBody: boolean;
|
|
40
|
+
/** if allowMovement is set to "true", ability to move modal from footer, default "true" */
|
|
41
|
+
moveFromFooter: boolean;
|
|
42
|
+
/** keep header sticky (visible) when scrolling, default "true" */
|
|
43
|
+
stickyHeader: boolean;
|
|
44
|
+
/** keep footer sticky (visible) when scrolling, default "true" */
|
|
45
|
+
stickyFooter: boolean;
|
|
46
|
+
/** add extra css style to modal, default null */
|
|
47
|
+
style: string | null;
|
|
48
|
+
/** "animDropDown" or "animFadeIn" for show animation, default "animDropDown" */
|
|
49
|
+
animationOnShow: "animDropDown" | "animFadeIn";
|
|
50
|
+
/** "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp" */
|
|
51
|
+
animationOnDestroy: "animDropUp" | "animFadeOut";
|
|
52
|
+
/** animation duration in ms, default "500" */
|
|
53
|
+
animationDuration: number;
|
|
54
|
+
/** callback before show modal */
|
|
55
|
+
beforeShow: () => void;
|
|
56
|
+
/** callback after show modal */
|
|
57
|
+
afterShow: () => void;
|
|
58
|
+
/** callback before destroy modal */
|
|
59
|
+
beforeDestroy: () => void;
|
|
60
|
+
/** callback after destroy modal */
|
|
61
|
+
afterDestroy: () => void;
|
|
62
|
+
/** callback after triggering cancel button */
|
|
63
|
+
onCancelButton: () => void;
|
|
64
|
+
/** callback after triggering confirm button */
|
|
65
|
+
onConfirmButton: () => void;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Class WebcimesModal
|
|
69
|
+
*/
|
|
70
|
+
export declare class WebcimesModal {
|
|
71
|
+
webcimesModals: HTMLElement;
|
|
72
|
+
modal: HTMLElement;
|
|
73
|
+
private options;
|
|
74
|
+
private eventCancelButton;
|
|
75
|
+
private eventConfirmButton;
|
|
76
|
+
private eventClickOutside;
|
|
77
|
+
private eventClickCloseButton;
|
|
78
|
+
private eventDragModalOnTop;
|
|
79
|
+
private position;
|
|
80
|
+
private offset;
|
|
81
|
+
private isDragging;
|
|
82
|
+
private moveFromElements;
|
|
83
|
+
private eventDragStart;
|
|
84
|
+
private eventMove;
|
|
85
|
+
private eventDragStop;
|
|
86
|
+
private eventPreventSelectText;
|
|
87
|
+
private eventResize;
|
|
88
|
+
/**
|
|
89
|
+
* Create modal
|
|
90
|
+
*/
|
|
91
|
+
constructor(options: Options);
|
|
92
|
+
/**
|
|
93
|
+
* Init modal
|
|
94
|
+
*/
|
|
95
|
+
init(): void;
|
|
96
|
+
/**
|
|
97
|
+
* Destroy modal
|
|
98
|
+
*/
|
|
99
|
+
destroy(): void;
|
|
100
|
+
}
|
|
101
|
+
export {};
|
|
102
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var t={d:(o,e)=>{for(var s in e)t.o(e,s)&&!t.o(o,s)&&Object.defineProperty(o,s,{enumerable:!0,get:e[s]})},o:(t,o)=>Object.prototype.hasOwnProperty.call(t,o)},o={};t.d(o,{V:()=>e});class e{webcimesModals;modal;options;eventCancelButton=()=>{"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.webcimesModals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".close")&&document.querySelectorAll(".modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.webcimesModals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest("button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimesModals")?(this.webcimesModals=document.querySelector(".webcimesModals"),this.webcimesModals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimesModals animFadeIn"></div>'),this.webcimesModals=document.querySelector(".webcimesModals"),this.webcimesModals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.webcimesModals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.webcimesModals.insertAdjacentHTML("beforeend",'<div class="modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="modalHeader '+(this.options.stickyHeader?"sticky":"")+" "+(this.options.moveFromHeader?"movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="modalBody '+(this.options.moveFromBody?"movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="modalFooter '+(this.options.stickyFooter?"sticky":"")+" "+(this.options.moveFromFooter?"movable":"")+'">\n\t\t\t\t\t\t'+(this.options.buttonCancelHtml?'<button class="cancel '+(this.options.closeOnCancelButton?"close":"")+'">'+this.options.buttonCancelHtml+"</button>":"")+"\n\t\t\t\t\t\t"+(this.options.buttonConfirmHtml?'<button class="confirm '+(this.options.closeOnConfirmButton?"close":"")+'">'+this.options.buttonConfirmHtml+"</button>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.webcimesModals.lastElementChild,"function"==typeof this.options.beforeShow&&setTimeout((()=>{this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style");this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".confirm")?.addEventListener("click",this.eventConfirmButton),this.webcimesModals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".modalHeader")&&this.moveFromElements.push(this.modal.querySelector(".modalHeader")),this.options.moveFromBody&&this.modal.querySelector(".modalBody")&&this.moveFromElements.push(this.modal.querySelector(".modalBody")),this.options.moveFromFooter&&this.modal.querySelector(".modalFooter")&&this.moveFromElements.push(this.modal.querySelector(".modalFooter")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||("function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".modal:not([data-destroying])").length&&this.webcimesModals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".confirm")?.removeEventListener("click",this.eventConfirmButton),this.webcimesModals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".modal").length>1?this.modal:this.webcimesModals).remove()),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}var s=o.V;export{s as WebcimesModal};
|
|
2
|
+
//# sourceMappingURL=webcimes-modal.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"js/webcimes-modal.esm.js","mappings":"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","sources":["webpack://webcimes-modal/webpack/bootstrap","webpack://webcimes-modal/webpack/runtime/define property getters","webpack://webcimes-modal/webpack/runtime/hasOwnProperty shorthand","webpack://webcimes-modal/./src/ts/webcimes-modal.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","/**\r\n * Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)\r\n * MIT License - https://choosealicense.com/licenses/mit/\r\n * Date: 2023-03-25\r\n */\r\n\r\n\"use strict\";\r\n\r\n/**\r\n * Options\r\n */\r\ninterface Options {\r\n\t/** set a specific id on the modal. default \"null\" */\r\n\tsetId: string | null;\r\n\t/** set a specific class on the modal, default \"null\" */\r\n\tsetClass: string | null;\r\n\t/** width (specify unit), default \"auto\" */\r\n\twidth: string;\r\n\t/** height (specify unit), default \"auto\" */\r\n\theight: string;\r\n\t/** html for title, default \"null\" */\r\n\ttitleHtml: string | null;\r\n\t/** html for body, default \"null\" */\r\n\tbodyHtml: string | null;\r\n\t/** html for cancel button, default \"null\" */\r\n\tbuttonCancelHtml: string | null;\r\n\t/** html for confirm button, default \"null\" */\r\n\tbuttonConfirmHtml: string | null;\r\n\t/** close modal after trigger cancel button, default \"true\" */\r\n\tcloseOnCancelButton: boolean;\r\n\t/** close modal after trigger confirm button, default \"true\" */\r\n\tcloseOnConfirmButton: boolean;\r\n\t/** show close button, default \"true\" */\r\n\tshowCloseButton: boolean;\r\n\t/** allow the modal to close when clicked outside, default \"true\" */\r\n\tallowCloseOutside: boolean;\r\n\t/** ability to move modal, default \"true\" */\r\n\tallowMovement: boolean;\r\n\t/** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n\tmoveFromHeader: boolean;\r\n\t/** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n\tmoveFromBody: boolean;\r\n\t/** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n\tmoveFromFooter: boolean;\r\n\t/** keep header sticky (visible) when scrolling, default \"true\" */\r\n\tstickyHeader: boolean;\r\n\t/** keep footer sticky (visible) when scrolling, default \"true\" */\r\n\tstickyFooter: boolean;\r\n\t/** add extra css style to modal, default null */\r\n\tstyle: string | null;\r\n\t/** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n\tanimationOnShow: \"animDropDown\" | \"animFadeIn\";\r\n\t/** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n\tanimationOnDestroy: \"animDropUp\" | \"animFadeOut\";\r\n\t/** animation duration in ms, default \"500\" */\r\n\tanimationDuration: number;\r\n\t/** callback before show modal */\r\n\tbeforeShow: () => void;\r\n\t/** callback after show modal */\r\n\tafterShow: () => void;\r\n\t/** callback before destroy modal */\r\n\tbeforeDestroy: () => void;\r\n\t/** callback after destroy modal */\r\n\tafterDestroy: () => void;\r\n\t/** callback after triggering cancel button */\r\n\tonCancelButton: () => void;\r\n\t/** callback after triggering confirm button */\r\n\tonConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Class WebcimesModal\r\n */\r\nexport class WebcimesModal\r\n{\r\n\tpublic webcimesModals: HTMLElement;\r\n\tpublic modal: HTMLElement;\r\n\tprivate options: Options;\r\n\tprivate eventCancelButton: () => void = () => {\r\n\t\t// Callback on cancel button\r\n\t\tif(typeof this.options.onCancelButton === 'function')\r\n\t\t{\r\n\t\t\tthis.options.onCancelButton();\r\n\t\t}\r\n\t};\r\n\tprivate eventConfirmButton: () => void = () => {\r\n\t\t// Callback on confirm button\r\n\t\tif(typeof this.options.onConfirmButton === 'function')\r\n\t\t{\r\n\t\t\tthis.options.onConfirmButton();\r\n\t\t}\r\n\t};\r\n\tprivate eventClickOutside: (e: Event) => void = (e) => {\r\n\t\tif(e.target == this.webcimesModals)\r\n\t\t{\r\n\t\t\tif(this.options.allowCloseOutside)\r\n\t\t\t{\r\n\t\t\t\t// Destroy modal\r\n\t\t\t\tthis.destroy();\r\n\t\t\t}\r\n\t\t\telse\r\n\t\t\t{\r\n\t\t\t\t// Add animation for show modal who can't be close\r\n\t\t\t\tthis.modal.classList.add(\"animGrowShrink\");\r\n\r\n\t\t\t\t// Delete animation after the animation delay\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\tthis.modal.classList.remove(\"animGrowShrink\");\r\n\t\t\t\t}, this.options.animationDuration);\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\tprivate eventClickCloseButton: () => void = () => {\r\n\t\t// Destroy modal\r\n\t\tthis.destroy();\r\n\t};\r\n\tprivate eventDragModalOnTop: (e: Event) => void = (e) => {\r\n\t\t// Only if target is not close button (for bug in chrome)\r\n\t\tif(!(<HTMLElement>e.target).closest(\".close\"))\r\n\t\t{\r\n\t\t\t// If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n\t\t\tif(document.querySelectorAll(\".modal\").length > 1 && this.modal.nextElementSibling !== null)\r\n\t\t\t{\r\n\t\t\t\tlet oldScrollTop = this.modal.scrollTop;\r\n\t\t\t\tthis.webcimesModals.insertAdjacentElement(\"beforeend\", this.modal);\r\n\t\t\t\tthis.modal.scrollTop = oldScrollTop;\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\tprivate position: {x: number, y: number};\r\n\tprivate offset: {x: number, y: number};\r\n\tprivate isDragging: boolean = false;\r\n\tprivate moveFromElements: HTMLElement[] = [];\r\n\tprivate eventDragStart: (e: Event) => void = (e) => {\r\n\t\t// Start drag only if it's not a button\r\n\t\tif(!(<HTMLElement>e.target).closest(\"button\"))\r\n\t\t{\r\n\t\t\tthis.isDragging = true;\r\n\r\n\t\t\t// Mouse\r\n\t\t\tif((<MouseEvent>e).clientX)\r\n\t\t\t{\r\n\t\t\t\tthis.offset = {\r\n\t\t\t\t\tx: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n\t\t\t\t\ty: this.modal.offsetTop - (<MouseEvent>e).clientY\r\n\t\t\t\t};\r\n\t\t\t}\r\n\t\t\t// Touch device (use the first touch only)\r\n\t\t\telse if((<TouchEvent>e).touches)\r\n\t\t\t{\r\n\t\t\t\tthis.offset = {\r\n\t\t\t\t\tx: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n\t\t\t\t\ty: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY\r\n\t\t\t\t};\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\tprivate eventMove: (e: Event) => void = (e) => {\r\n\t\tif(this.isDragging)\r\n\t\t{\r\n\t\t\t// Mouse\r\n\t\t\tif((<MouseEvent>e).clientX)\r\n\t\t\t{\r\n\t\t\t\tthis.position = {\r\n\t\t\t\t\tx: (<MouseEvent>e).clientX,\r\n\t\t\t\t\ty: (<MouseEvent>e).clientY\r\n\t\t\t\t};\r\n\t\t\t}\r\n\t\t\t// Touch device (use the first touch only)\r\n\t\t\telse if((<TouchEvent>e).touches)\r\n\t\t\t{\r\n\t\t\t\tthis.position = {\r\n\t\t\t\t\tx: (<TouchEvent>e).touches[0].clientX,\r\n\t\t\t\t\ty: (<TouchEvent>e).touches[0].clientY\r\n\t\t\t\t};\r\n\t\t\t}\r\n\t\t\tthis.modal.style.left = (this.position.x + this.offset.x)+'px';\r\n\t\t\tthis.modal.style.top = (this.position.y + this.offset.y)+'px';\r\n\t\t}\r\n\t};\r\n\tprivate eventDragStop: () => void = () => {\r\n\t\tthis.isDragging = false;\r\n\t};\r\n\tprivate eventPreventSelectText: (e: Event) => void = (e) => {\r\n\t\tif(this.isDragging)\r\n\t\t{\r\n\t\t\te.preventDefault();\r\n\t\t}\r\n\t};\r\n\tprivate eventResize: () => void = () => {\r\n\t\tthis.modal.style.removeProperty(\"left\");\r\n\t\tthis.modal.style.removeProperty(\"top\");\r\n\t\t\r\n\t};\r\n\r\n\t/**\r\n\t * Create modal\r\n\t */\r\n\tconstructor(options: Options)\r\n\t{\r\n\t\t// Defaults\r\n\t\tconst defaults: Options = {\r\n\t\t\tsetId: null,\r\n\t\t\tsetClass: null,\r\n\t\t\twidth: 'auto',\r\n\t\t\theight: 'auto',\r\n\t\t\ttitleHtml: null,\r\n\t\t\tbodyHtml: null,\r\n\t\t\tbuttonCancelHtml: null,\r\n\t\t\tbuttonConfirmHtml: null,\r\n\t\t\tcloseOnCancelButton: true,\r\n\t\t\tcloseOnConfirmButton: true,\r\n\t\t\tshowCloseButton: true,\r\n\t\t\tallowCloseOutside: true,\r\n\t\t\tallowMovement: true,\r\n\t\t\tmoveFromHeader: true,\r\n\t\t\tmoveFromBody: false,\r\n\t\t\tmoveFromFooter: true,\r\n\t\t\tstickyHeader: true,\r\n\t\t\tstickyFooter: true,\r\n\t\t\tstyle: null,\r\n\t\t\tanimationOnShow: 'animDropDown',\r\n\t\t\tanimationOnDestroy: 'animDropUp',\r\n\t\t\tanimationDuration: 500,\r\n\t\t\tbeforeShow: () => {},\r\n\t\t\tafterShow: () => {},\r\n\t\t\tbeforeDestroy: () => {},\r\n\t\t\tafterDestroy: () => {},\r\n\t\t\tonCancelButton: () => {},\r\n\t\t\tonConfirmButton: () => {},\r\n\t\t}\r\n\t\tthis.options = {...defaults, ...options};\r\n\t\t\r\n\t\t// Call init method\r\n\t\tthis.init();\r\n\t}\r\n\r\n\t/**\r\n\t * Init modal\r\n\t */\r\n init()\r\n\t{\r\n\t\t// Create webcimesModals\r\n\t\tif(!document.querySelector(\".webcimesModals\"))\r\n\t\t{\r\n\t\t\t// Create webcimesModals\r\n\t\t\tdocument.body.insertAdjacentHTML(\"beforeend\", '<div class=\"webcimesModals animFadeIn\"></div>');\r\n\t\t\tthis.webcimesModals = <HTMLElement>document.querySelector(\".webcimesModals\");\r\n\t\t\t\r\n\t\t\t// Set animation duration for webcimesModals\r\n\t\t\tthis.webcimesModals.style.setProperty(\"animation-duration\", this.options.animationDuration+\"ms\");\r\n\t\r\n\t\t\t// Delete enter animation after animation delay\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tthis.webcimesModals.classList.remove(\"animFadeIn\");\r\n\t\t\t}, this.options.animationDuration);\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\t// Get webcimesModals\r\n\t\t\tthis.webcimesModals = <HTMLElement>document.querySelector(\".webcimesModals\");\r\n\r\n\t\t\t// Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n\t\t\tthis.webcimesModals.classList.remove(\"animFadeOut\");\r\n\t\t}\r\n\t\r\n\t\t// Create modal\r\n\t\tthis.webcimesModals.insertAdjacentHTML(\"beforeend\", \r\n\t\t\t`<div class=\"modal `+(this.options.setClass?this.options.setClass:'')+` `+this.options.animationOnShow+`\" `+(this.options.setId?'id=\"'+this.options.setId+'\"':'')+`>\r\n\t\t\t\t`+(this.options.titleHtml||this.options.showCloseButton?\r\n\t\t\t\t\t`<div class=\"modalHeader `+(this.options.stickyHeader?'sticky':'')+` `+(this.options.moveFromHeader?'movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.titleHtml?'<div class=\"title\">'+this.options.titleHtml+'</div>':'')+`\r\n\t\t\t\t\t\t`+(this.options.showCloseButton?'<button class=\"close\"></button>':'')+`\r\n\t\t\t\t\t</div>`\r\n\t\t\t\t:'')+`\r\n\t\t\t\t`+(this.options.bodyHtml?\r\n\t\t\t\t\t`<div class=\"modalBody `+(this.options.moveFromBody?'movable':'')+`\">\r\n\t\t\t\t\t\t`+this.options.bodyHtml+`\r\n\t\t\t\t\t</div>`\r\n\t\t\t\t:'')+`\r\n\t\t\t\t`+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?\r\n\t\t\t\t\t`<div class=\"modalFooter `+(this.options.stickyFooter?'sticky':'')+` `+(this.options.moveFromFooter?'movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.buttonCancelHtml?'<button class=\"cancel '+(this.options.closeOnCancelButton?'close':'')+'\">'+this.options.buttonCancelHtml+'</button>':'')+`\r\n\t\t\t\t\t\t`+(this.options.buttonConfirmHtml?'<button class=\"confirm '+(this.options.closeOnConfirmButton?'close':'')+'\">'+this.options.buttonConfirmHtml+'</button>':'')+`\r\n\t\t\t\t\t</div>`\r\n\t\t\t\t:'')+`\r\n\t\t\t</div>`\r\n\t\t);\r\n\t\tthis.modal = <HTMLElement>this.webcimesModals.lastElementChild;\r\n\t\t\r\n\t\t// Callback before show modal\r\n\t\tif(typeof this.options.beforeShow === 'function')\r\n\t\t{\r\n\t\t\t// Set a timeout of zero, to wait for some dom to load\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tthis.options.beforeShow();\r\n\t\t\t}, 0);\r\n\t\t}\r\n\t\t\r\n\t\t// Set animation duration for modal\r\n\t\tthis.modal.style.setProperty(\"animation-duration\", this.options.animationDuration+\"ms\");\r\n\t\t\r\n\t\t// Delete animation of enter after the animation delay\r\n\t\tsetTimeout(() => {\r\n\t\t\tthis.modal.classList.remove(this.options.animationOnShow);\r\n\t\r\n\t\t\t// Callback after show modal\r\n\t\t\tif(typeof this.options.afterShow === 'function')\r\n\t\t\t{\r\n\t\t\t\tthis.options.afterShow();\r\n\t\t\t}\r\n\t\t}, this.options.animationDuration);\r\n\t\r\n\t\t// Width of modal\r\n\t\tthis.modal.style.setProperty(\"max-width\", \"90%\");\r\n\t\tif(this.options.width != \"auto\" && this.options.width)\r\n\t\t{\r\n\t\t\tthis.modal.style.setProperty(\"width\", this.options.width);\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\t// \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n\t\t\tthis.modal.style.setProperty(\"width\", \"max-content\");\r\n\t\t}\r\n\t\r\n\t\t// Height of modal\r\n\t\tthis.modal.style.setProperty(\"max-height\", \"90%\");\r\n\t\tif(this.options.height != \"auto\" && this.options.height)\r\n\t\t{\r\n\t\t\tthis.modal.style.setProperty(\"height\", this.options.height);\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\t// \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n\t\t\tthis.modal.style.setProperty(\"height\", \"max-content\");\r\n\t\t}\r\n\t\r\n\t\t// Style\r\n\t\tif(this.options.style)\r\n\t\t{\r\n\t\t\tlet oldStyle = this.modal.getAttribute(\"style\");\r\n\t\t\tthis.modal.setAttribute(\"style\", oldStyle+this.options.style);\r\n\t\t}\r\n\t\r\n\t\t// Event on cancel button\r\n\t\tif(this.options.buttonCancelHtml)\r\n\t\t{\r\n\t\t\tthis.modal.querySelector(\".cancel\")?.addEventListener(\"click\", this.eventCancelButton);\r\n\t\t}\r\n\t\r\n\t\t// Event on confirm button\r\n\t\tif(this.options.buttonConfirmHtml)\r\n\t\t{\r\n\t\t\tthis.modal.querySelector(\".confirm\")?.addEventListener(\"click\", this.eventConfirmButton);\r\n\t\t}\r\n\t\t\r\n\t\t// Event click outside (on webcimesModals)\r\n\t\tthis.webcimesModals.addEventListener(\"click\", this.eventClickOutside);\r\n\t\r\n\t\t// Event close modal when click on close button\r\n\t\tthis.modal.querySelectorAll(\".close\").forEach((el) => {\r\n\t\t\tel.addEventListener(\"click\", this.eventClickCloseButton);\r\n\t\t});\r\n\t\r\n\t\t// Place selected modal on top\r\n\t\t['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n\t\t\tthis.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n\t\t});\r\n\t\t\r\n\t\t// Move modal\r\n\t\tif(this.options.allowMovement && (this.options.moveFromHeader || this.options.moveFromBody || this.options.moveFromFooter))\r\n\t\t{\r\n\t\t\tif(this.options.moveFromHeader && this.modal.querySelector(\".modalHeader\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".modalHeader\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromBody && this.modal.querySelector(\".modalBody\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".modalBody\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromFooter && this.modal.querySelector(\".modalFooter\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".modalFooter\"));\r\n\t\t\t}\r\n\t\r\n\t\t\t['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n\t\t\t\tthis.moveFromElements.forEach((el) => {\r\n\t\t\t\t\tel.addEventListener(typeEvent, this.eventDragStart);\r\n\t\t\t\t});\r\n\t\t\t});\r\n\r\n\t\t\t['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n\t\t\t\tdocument.addEventListener(typeEvent, this.eventMove);\r\n\t\t\t});\r\n\r\n\t\t\t['mouseup', 'touchend'].forEach((typeEvent) => {\r\n\t\t\t\tdocument.addEventListener(typeEvent, this.eventDragStop);\r\n\t\t\t});\r\n\r\n\t\t\tdocument.addEventListener(\"selectstart\", this.eventPreventSelectText);\r\n\t\t}\r\n\r\n\t\t// When resizing window, reset modal position to center\r\n\t\twindow.addEventListener(\"resize\", this.eventResize);\r\n }\r\n\r\n\t/**\r\n\t * Destroy modal\r\n\t */\r\n\tdestroy()\r\n\t{\r\n\t\t// If modal is not already destroying\r\n\t\tif(!this.modal.getAttribute(\"data-destroying\"))\r\n\t\t{\r\n\t\t\t// Callback before destroy modal\r\n\t\t\tif(typeof this.options.beforeDestroy === 'function')\r\n\t\t\t{\r\n\t\t\t\tthis.options.beforeDestroy();\r\n\t\t\t}\r\n\r\n\t\t\t// Close webcimesModals (according the number of modal not already destroying)\r\n\t\t\tif(document.querySelectorAll(\".modal:not([data-destroying])\").length == 1)\r\n\t\t\t{\r\n\t\t\t\tthis.webcimesModals.classList.add(\"animFadeOut\");\r\n\t\t\t}\r\n\r\n\t\t\t// Close modal\r\n\t\t\tthis.modal.setAttribute(\"data-destroying\", \"1\");\r\n\t\t\tthis.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n\t\t\t// Destroy all events from modal and remove webcimesModals or modal after animation duration\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif(typeof this.modal !== 'undefined')\r\n\t\t\t\t{\r\n\t\t\t\t\t// Destroy all events from modal\r\n\r\n\t\t\t\t\tif(this.options.buttonCancelHtml)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthis.modal.querySelector(\".cancel\")?.removeEventListener(\"click\", this.eventCancelButton);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif(this.options.buttonConfirmHtml)\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthis.modal.querySelector(\".confirm\")?.removeEventListener(\"click\", this.eventConfirmButton);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthis.webcimesModals.removeEventListener(\"click\", this.eventClickOutside);\r\n\r\n\t\t\t\t\tthis.modal.querySelectorAll(\".close\").forEach((el) => {\r\n\t\t\t\t\t\tel.removeEventListener(\"click\", this.eventClickCloseButton);\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\t['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n\t\t\t\t\t\tthis.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\tif(this.options.allowMovement && (this.options.moveFromHeader || this.options.moveFromBody || this.options.moveFromFooter))\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\t['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n\t\t\t\t\t\t\tthis.moveFromElements.forEach((el) => {\r\n\t\t\t\t\t\t\t\tel.removeEventListener(typeEvent, this.eventDragStart);\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t});\r\n\t\t\t\r\n\t\t\t\t\t\t['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n\t\t\t\t\t\t\tdocument.removeEventListener(typeEvent, this.eventMove);\r\n\t\t\t\t\t\t});\r\n\t\t\t\r\n\t\t\t\t\t\t['mouseup', 'touchend'].forEach((typeEvent) => {\r\n\t\t\t\t\t\t\tdocument.removeEventListener(typeEvent, this.eventDragStop);\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tdocument.removeEventListener(\"selectstart\", this.eventPreventSelectText);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\twindow.removeEventListener(\"resize\", this.eventResize);\r\n\t\t\t\t\t\r\n\t\t\t\t\t// Remove webcimesModals or modal according the number of modal\r\n\t\t\t\t\t(document.querySelectorAll(\".modal\").length>1?this.modal:this.webcimesModals).remove();\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Callback after destroy modal\r\n\t\t\t\tif(typeof this.options.afterDestroy === 'function')\r\n\t\t\t\t{\r\n\t\t\t\t\tthis.options.afterDestroy();\r\n\t\t\t\t}\r\n\t\t\t}, this.options.animationDuration);\r\n\t\t}\r\n\t}\r\n}"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","WebcimesModal","webcimesModals","modal","options","eventCancelButton","this","onCancelButton","eventConfirmButton","onConfirmButton","eventClickOutside","e","target","allowCloseOutside","destroy","classList","add","setTimeout","remove","animationDuration","eventClickCloseButton","eventDragModalOnTop","closest","document","querySelectorAll","length","nextElementSibling","oldScrollTop","scrollTop","insertAdjacentElement","position","offset","isDragging","moveFromElements","eventDragStart","clientX","x","offsetLeft","y","offsetTop","clientY","touches","eventMove","style","left","top","eventDragStop","eventPreventSelectText","preventDefault","eventResize","removeProperty","constructor","setId","setClass","width","height","titleHtml","bodyHtml","buttonCancelHtml","buttonConfirmHtml","closeOnCancelButton","closeOnConfirmButton","showCloseButton","allowMovement","moveFromHeader","moveFromBody","moveFromFooter","stickyHeader","stickyFooter","animationOnShow","animationOnDestroy","beforeShow","afterShow","beforeDestroy","afterDestroy","init","querySelector","body","insertAdjacentHTML","setProperty","lastElementChild","oldStyle","getAttribute","setAttribute","addEventListener","forEach","el","typeEvent","push","window","removeEventListener"],"sourceRoot":""}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2023 WebCimes - RICHARD Florian (https://webcimes.com)
|
|
3
|
+
* MIT License - https://choosealicense.com/licenses/mit/
|
|
4
|
+
* Date: 2023-03-25
|
|
5
|
+
*/
|
|
6
|
+
/**
|
|
7
|
+
* Options
|
|
8
|
+
*/
|
|
9
|
+
interface Options {
|
|
10
|
+
/** set a specific id on the modal. default "null" */
|
|
11
|
+
setId: string | null;
|
|
12
|
+
/** set a specific class on the modal, default "null" */
|
|
13
|
+
setClass: string | null;
|
|
14
|
+
/** width (specify unit), default "auto" */
|
|
15
|
+
width: string;
|
|
16
|
+
/** height (specify unit), default "auto" */
|
|
17
|
+
height: string;
|
|
18
|
+
/** html for title, default "null" */
|
|
19
|
+
titleHtml: string | null;
|
|
20
|
+
/** html for body, default "null" */
|
|
21
|
+
bodyHtml: string | null;
|
|
22
|
+
/** html for cancel button, default "null" */
|
|
23
|
+
buttonCancelHtml: string | null;
|
|
24
|
+
/** html for confirm button, default "null" */
|
|
25
|
+
buttonConfirmHtml: string | null;
|
|
26
|
+
/** close modal after trigger cancel button, default "true" */
|
|
27
|
+
closeOnCancelButton: boolean;
|
|
28
|
+
/** close modal after trigger confirm button, default "true" */
|
|
29
|
+
closeOnConfirmButton: boolean;
|
|
30
|
+
/** show close button, default "true" */
|
|
31
|
+
showCloseButton: boolean;
|
|
32
|
+
/** allow the modal to close when clicked outside, default "true" */
|
|
33
|
+
allowCloseOutside: boolean;
|
|
34
|
+
/** ability to move modal, default "true" */
|
|
35
|
+
allowMovement: boolean;
|
|
36
|
+
/** if allowMovement is set to "true", ability to move modal from header, default "true" */
|
|
37
|
+
moveFromHeader: boolean;
|
|
38
|
+
/** if allowMovement is set to "true", ability to move modal from body, default "false" */
|
|
39
|
+
moveFromBody: boolean;
|
|
40
|
+
/** if allowMovement is set to "true", ability to move modal from footer, default "true" */
|
|
41
|
+
moveFromFooter: boolean;
|
|
42
|
+
/** keep header sticky (visible) when scrolling, default "true" */
|
|
43
|
+
stickyHeader: boolean;
|
|
44
|
+
/** keep footer sticky (visible) when scrolling, default "true" */
|
|
45
|
+
stickyFooter: boolean;
|
|
46
|
+
/** add extra css style to modal, default null */
|
|
47
|
+
style: string | null;
|
|
48
|
+
/** "animDropDown" or "animFadeIn" for show animation, default "animDropDown" */
|
|
49
|
+
animationOnShow: "animDropDown" | "animFadeIn";
|
|
50
|
+
/** "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp" */
|
|
51
|
+
animationOnDestroy: "animDropUp" | "animFadeOut";
|
|
52
|
+
/** animation duration in ms, default "500" */
|
|
53
|
+
animationDuration: number;
|
|
54
|
+
/** callback before show modal */
|
|
55
|
+
beforeShow: () => void;
|
|
56
|
+
/** callback after show modal */
|
|
57
|
+
afterShow: () => void;
|
|
58
|
+
/** callback before destroy modal */
|
|
59
|
+
beforeDestroy: () => void;
|
|
60
|
+
/** callback after destroy modal */
|
|
61
|
+
afterDestroy: () => void;
|
|
62
|
+
/** callback after triggering cancel button */
|
|
63
|
+
onCancelButton: () => void;
|
|
64
|
+
/** callback after triggering confirm button */
|
|
65
|
+
onConfirmButton: () => void;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Class WebcimesModal
|
|
69
|
+
*/
|
|
70
|
+
export declare class WebcimesModal {
|
|
71
|
+
webcimesModals: HTMLElement;
|
|
72
|
+
modal: HTMLElement;
|
|
73
|
+
private options;
|
|
74
|
+
private eventCancelButton;
|
|
75
|
+
private eventConfirmButton;
|
|
76
|
+
private eventClickOutside;
|
|
77
|
+
private eventClickCloseButton;
|
|
78
|
+
private eventDragModalOnTop;
|
|
79
|
+
private position;
|
|
80
|
+
private offset;
|
|
81
|
+
private isDragging;
|
|
82
|
+
private moveFromElements;
|
|
83
|
+
private eventDragStart;
|
|
84
|
+
private eventMove;
|
|
85
|
+
private eventDragStop;
|
|
86
|
+
private eventPreventSelectText;
|
|
87
|
+
private eventResize;
|
|
88
|
+
/**
|
|
89
|
+
* Create modal
|
|
90
|
+
*/
|
|
91
|
+
constructor(options: Options);
|
|
92
|
+
/**
|
|
93
|
+
* Init modal
|
|
94
|
+
*/
|
|
95
|
+
init(): void;
|
|
96
|
+
/**
|
|
97
|
+
* Destroy modal
|
|
98
|
+
*/
|
|
99
|
+
destroy(): void;
|
|
100
|
+
}
|
|
101
|
+
export {};
|
|
102
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(t,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var e=o();for(var s in e)("object"==typeof exports?exports:t)[s]=e[s]}}(self,(()=>(()=>{"use strict";var t={d:(o,e)=>{for(var s in e)t.o(e,s)&&!t.o(o,s)&&Object.defineProperty(o,s,{enumerable:!0,get:e[s]})},o:(t,o)=>Object.prototype.hasOwnProperty.call(t,o),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},o={};t.r(o),t.d(o,{WebcimesModal:()=>e});class e{webcimesModals;modal;options;eventCancelButton=()=>{"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.webcimesModals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".close")&&document.querySelectorAll(".modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.webcimesModals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest("button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimesModals")?(this.webcimesModals=document.querySelector(".webcimesModals"),this.webcimesModals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimesModals animFadeIn"></div>'),this.webcimesModals=document.querySelector(".webcimesModals"),this.webcimesModals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.webcimesModals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.webcimesModals.insertAdjacentHTML("beforeend",'<div class="modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="modalHeader '+(this.options.stickyHeader?"sticky":"")+" "+(this.options.moveFromHeader?"movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="modalBody '+(this.options.moveFromBody?"movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="modalFooter '+(this.options.stickyFooter?"sticky":"")+" "+(this.options.moveFromFooter?"movable":"")+'">\n\t\t\t\t\t\t'+(this.options.buttonCancelHtml?'<button class="cancel '+(this.options.closeOnCancelButton?"close":"")+'">'+this.options.buttonCancelHtml+"</button>":"")+"\n\t\t\t\t\t\t"+(this.options.buttonConfirmHtml?'<button class="confirm '+(this.options.closeOnConfirmButton?"close":"")+'">'+this.options.buttonConfirmHtml+"</button>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.webcimesModals.lastElementChild,"function"==typeof this.options.beforeShow&&setTimeout((()=>{this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style");this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".confirm")?.addEventListener("click",this.eventConfirmButton),this.webcimesModals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".modalHeader")&&this.moveFromElements.push(this.modal.querySelector(".modalHeader")),this.options.moveFromBody&&this.modal.querySelector(".modalBody")&&this.moveFromElements.push(this.modal.querySelector(".modalBody")),this.options.moveFromFooter&&this.modal.querySelector(".modalFooter")&&this.moveFromElements.push(this.modal.querySelector(".modalFooter")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||("function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".modal:not([data-destroying])").length&&this.webcimesModals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".confirm")?.removeEventListener("click",this.eventConfirmButton),this.webcimesModals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".modal").length>1?this.modal:this.webcimesModals).remove()),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}return o})()));
|
|
2
|
+
//# sourceMappingURL=webcimes-modal.udm.js.map
|