webcimes-modal 1.2.1 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/css/webcimes-modal.css +1 -1
- package/dist/css/webcimes-modal.css.map +1 -1
- package/dist/js/webcimes-modal.esm.d.ts +1 -2
- package/dist/js/webcimes-modal.esm.js +0 -0
- package/dist/js/webcimes-modal.esm.js.map +1 -1
- package/dist/js/webcimes-modal.udm.d.ts +1 -2
- package/dist/js/webcimes-modal.udm.js +0 -0
- package/dist/js/webcimes-modal.udm.js.map +1 -1
- package/package.json +1 -1
- package/src/css/webcimes-modal.css +1 -1
- package/src/ts/webcimes-modal.d.ts +1 -2
- package/src/ts/webcimes-modal.d.ts.map +1 -1
- package/src/ts/webcimes-modal.ts +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# webcimes-modal
|
|
2
2
|
|
|
3
|
-
Create and animate modals simply, you can use multiple modals at the same time, create alert or confirm modal with buttons, move modals, set title, set body, etc.. It works with vanilla javascript + html + css.
|
|
3
|
+
Create and animate modals simply, you can use multiple modals at the same time, create alert or confirm modal with buttons, move modals, set title, set body, etc.. It works with vanilla javascript + html + css, no dependencies are required and the module is built in a very lightweight size.
|
|
4
4
|
|
|
5
5
|
Once the `webcimes-modal` javascript is defined, we can simply call the WebcimesModal class with the desired options.
|
|
6
6
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.webcimes-modals,.webcimes-modals *,.webcimes-modals :after,.webcimes-modals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimes-modals{--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)}.webcimes-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}.webcimes-modal__button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimes-modal__header{align-items:center;background:var(--modal-background);border-bottom:1px solid var(--modal-border-color);display:flex;padding:20px 40px;position:relative}.webcimes-modal__header--is-sticky{position:sticky;top:0}.webcimes-modal__header--is-movable{cursor:move;touch-action:none}.webcimes-modal__title{flex:1;font-size:var(--modal-title-font-size);overflow:hidden;text-overflow:ellipsis}.webcimes-modal__header-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}.webcimes-modal__header-close:hover{opacity:.5}.webcimes-modal__body{padding:20px 40px}.webcimes-modal__body--is-movable{cursor:move}.webcimes-modal__footer{background:var(--modal-background);border-top:1px solid var(--modal-border-color);display:flex;flex-wrap:wrap;justify-content:
|
|
1
|
+
.webcimes-modals,.webcimes-modals *,.webcimes-modals :after,.webcimes-modals :before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.webcimes-modals{--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)}.webcimes-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}.webcimes-modal__button{background:none;border:none;font-family:inherit;font-size:inherit;font-weight:inherit}.webcimes-modal__header{align-items:center;background:var(--modal-background);border-bottom:1px solid var(--modal-border-color);display:flex;padding:20px 40px;position:relative}.webcimes-modal__header--is-sticky{position:sticky;top:0}.webcimes-modal__header--is-movable{cursor:move;touch-action:none}.webcimes-modal__title{flex:1;font-size:var(--modal-title-font-size);overflow:hidden;text-overflow:ellipsis}.webcimes-modal__header-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}.webcimes-modal__header-close:hover{opacity:.5}.webcimes-modal__body{padding:20px 40px}.webcimes-modal__body--is-movable{cursor:move}.webcimes-modal__footer{background:var(--modal-background);border-top:1px solid var(--modal-border-color);display:flex;flex-wrap:wrap;justify-content:center;padding:20px 40px}.webcimes-modal__footer--is-sticky{bottom:0;position:sticky}.webcimes-modal__footer--is-movable{cursor:move;touch-action:none}.webcimes-modal__footer-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}.webcimes-modal__footer-button--cancel{background:var(--modal-button-cancel-background);color:var(--modal-button-cancel-color)}.webcimes-modal__footer-button--cancel:hover{background:var(--modal-button-cancel-background-hover);color:var(--modal-button-cancel-color-hover)}.webcimes-modal__footer-button--confirm{background:var(--modal-button-confirm-background);color:var(--modal-button-confirm-color)}.webcimes-modal__footer-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
2
|
/*# sourceMappingURL=webcimes-modal.css.map*/
|
|
@@ -1 +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.webcimes-modals,\r\n.webcimes-modals *,\r\n.webcimes-modals *::before,\r\n.webcimes-modals *::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.webcimes-modals\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.webcimes-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.webcimes-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.webcimes-modal__header\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.webcimes-modal__header--is-sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimes-modal__header--is-movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimes-modal__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.webcimes-modal__header-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.webcimes-modal__header-close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimes-modal__body\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimes-modal__body--is-movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimes-modal__footer\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.webcimes-modal__footer--is-sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimes-modal__footer--is-movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimes-modal__footer-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.webcimes-modal__footer-button--cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimes-modal__footer-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.webcimes-modal__footer-button--confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimes-modal__footer-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":""}
|
|
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.webcimes-modals,\r\n.webcimes-modals *,\r\n.webcimes-modals *::before,\r\n.webcimes-modals *::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.webcimes-modals\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.webcimes-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.webcimes-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.webcimes-modal__header\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.webcimes-modal__header--is-sticky\r\n{\r\n\tposition: sticky;\r\n\ttop: 0;\r\n}\r\n.webcimes-modal__header--is-movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimes-modal__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.webcimes-modal__header-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.webcimes-modal__header-close:hover\r\n{\r\n\topacity: 0.5;\r\n}\r\n.webcimes-modal__body\r\n{\r\n\tpadding: 20px 40px;\r\n}\r\n.webcimes-modal__body--is-movable\r\n{\r\n\tcursor: move;\r\n}\r\n.webcimes-modal__footer\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: center;\r\n\tflex-wrap: wrap;\r\n}\r\n.webcimes-modal__footer--is-sticky\r\n{\r\n\tposition: sticky;\r\n\tbottom: 0;\r\n}\r\n.webcimes-modal__footer--is-movable\r\n{\r\n\tcursor: move;\r\n\ttouch-action: none;\r\n}\r\n.webcimes-modal__footer-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.webcimes-modal__footer-button--cancel\r\n{\r\n\tbackground: var(--modal-button-cancel-background);\r\n\tcolor: var(--modal-button-cancel-color);\r\n}\r\n.webcimes-modal__footer-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.webcimes-modal__footer-button--confirm\r\n{\r\n\tbackground: var(--modal-button-confirm-background);\r\n\tcolor: var(--modal-button-confirm-color);\r\n}\r\n.webcimes-modal__footer-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":""}
|
|
@@ -20,7 +20,7 @@ declare global {
|
|
|
20
20
|
/**
|
|
21
21
|
* Options
|
|
22
22
|
*/
|
|
23
|
-
interface Options {
|
|
23
|
+
export interface Options {
|
|
24
24
|
/** set a specific id on the modal. default "null" */
|
|
25
25
|
setId: string | null;
|
|
26
26
|
/** set a specific class on the modal, default "null" */
|
|
@@ -115,5 +115,4 @@ export declare class WebcimesModal {
|
|
|
115
115
|
*/
|
|
116
116
|
destroy(): void;
|
|
117
117
|
}
|
|
118
|
-
export {};
|
|
119
118
|
//# sourceMappingURL=webcimes-modal.d.ts.map
|
|
File without changes
|
|
@@ -1 +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 * Global\r\n */\r\ndeclare global {\r\n\t/** Events */\r\n\tinterface GlobalEventHandlersEventMap {\r\n\t\tbeforeShow: CustomEvent;\r\n\t\tafterShow: CustomEvent;\r\n\t\tbeforeDestroy: CustomEvent;\r\n\t\tafterDestroy: CustomEvent;\r\n\t\tonCancelButton: CustomEvent;\r\n\t\tonConfirmButton: CustomEvent;\r\n\t}\r\n}\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\t/** Get the dom element containing all modals */\r\n\tpublic modals: HTMLElement;\r\n\r\n\t/** Get the dom element of the current modal */\r\n\tpublic modal: HTMLElement;\r\n\r\n\t/** Options of the current modal */\r\n\tprivate options: Options;\r\n\r\n\tprivate eventCancelButton: () => void = () => {\r\n\t\t// Callback on cancel button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onCancelButton\"));\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\r\n\tprivate eventConfirmButton: () => void = () => {\r\n\t\t// Callback on confirm button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onConfirmButton\"));\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\r\n\tprivate eventClickOutside: (e: Event) => void = (e) => {\r\n\t\tif(e.target == this.modals)\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\r\n\tprivate eventClickCloseButton: () => void = () => {\r\n\t\t// Destroy modal\r\n\t\tthis.destroy();\r\n\t};\r\n\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(\".webcimes-modal__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(\".webcimes-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.modals.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\r\n\tprivate position: {x: number, y: number};\r\n\r\n\tprivate offset: {x: number, y: number};\r\n\r\n\tprivate isDragging: boolean = false;\r\n\r\n\tprivate moveFromElements: HTMLElement[] = [];\r\n\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(\".webcimes-modal__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\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\r\n\tprivate eventDragStop: () => void = () => {\r\n\t\tthis.isDragging = false;\r\n\t};\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\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: Partial<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 * Initialization of the current modal\r\n\t */\r\n private init()\r\n\t{\r\n\t\t// Create modals\r\n\t\tif(!document.querySelector(\".webcimes-modals\"))\r\n\t\t{\r\n\t\t\t// Create modals\r\n\t\t\tdocument.body.insertAdjacentHTML(\"beforeend\", '<div class=\"webcimes-modals animFadeIn\"></div>');\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\r\n\t\t\t\r\n\t\t\t// Set animation duration for modals\r\n\t\t\tthis.modals.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.modals.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 modals\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\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.modals.classList.remove(\"animFadeOut\");\r\n\t\t}\r\n\t\r\n\t\t// Create modal\r\n\t\tthis.modals.insertAdjacentHTML(\"beforeend\", \r\n\t\t\t`<div class=\"webcimes-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=\"webcimes-modal__header `+(this.options.stickyHeader?'webcimes-modal__header--is-sticky':'')+` `+(this.options.moveFromHeader?'webcimes-modal__header--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.titleHtml?'<div class=\"webcimes-modal__title\">'+this.options.titleHtml+'</div>':'')+`\r\n\t\t\t\t\t\t`+(this.options.showCloseButton?'<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__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=\"webcimes-modal__body `+(this.options.moveFromBody?'.webcimes-modal__body--is-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=\"webcimes-modal__footer `+(this.options.stickyFooter?'.webcimes-modal__footer--is-sticky':'')+` `+(this.options.moveFromFooter?'webcimes-modal__footer--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.buttonCancelHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel '+(this.options.closeOnCancelButton?'webcimes-modal__close':'')+'\">'+this.options.buttonCancelHtml+'</button>':'')+`\r\n\t\t\t\t\t\t`+(this.options.buttonConfirmHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm '+(this.options.closeOnConfirmButton?'webcimes-modal__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.modals.lastElementChild;\r\n\t\t\r\n\t\t// Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n\t\tsetTimeout(() => {\r\n\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"beforeShow\"));\r\n\t\t\tif(typeof this.options.beforeShow === 'function')\r\n\t\t\t{\r\n\t\t\t\tthis.options.beforeShow();\r\n\t\t\t}\r\n\t\t}, 0);\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\tthis.modal.dispatchEvent(new CustomEvent(\"afterShow\"));\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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.addEventListener(\"click\", this.eventConfirmButton);\r\n\t\t}\r\n\t\t\r\n\t\t// Event click outside (on modals)\r\n\t\tthis.modals.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(\".webcimes-modal__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(\".webcimes-modal__header\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__header\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromBody && this.modal.querySelector(\".webcimes-modal__body\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__body\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromFooter && this.modal.querySelector(\".webcimes-modal__footer\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__footer\"));\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 current modal\r\n\t */\r\n\tpublic destroy()\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\tthis.modal.dispatchEvent(new CustomEvent(\"beforeDestroy\"));\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 modals (according the number of modal not already destroying)\r\n\t\t\tif(document.querySelectorAll(\".webcimes-modal:not([data-destroying])\").length == 1)\r\n\t\t\t{\r\n\t\t\t\tthis.modals.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 modals 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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.removeEventListener(\"click\", this.eventConfirmButton);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthis.modals.removeEventListener(\"click\", this.eventClickOutside);\r\n\r\n\t\t\t\t\tthis.modal.querySelectorAll(\".webcimes-modal__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 modals or modal according the number of modal\r\n\t\t\t\t\t(document.querySelectorAll(\".webcimes-modal\").length>1?this.modal:this.modals).remove();\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Callback after destroy modal\r\n\t\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"afterDestroy\"));\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","modals","modal","options","eventCancelButton","this","dispatchEvent","CustomEvent","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":""}
|
|
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 * Global\r\n */\r\ndeclare global {\r\n\t/** Events */\r\n\tinterface GlobalEventHandlersEventMap {\r\n\t\tbeforeShow: CustomEvent;\r\n\t\tafterShow: CustomEvent;\r\n\t\tbeforeDestroy: CustomEvent;\r\n\t\tafterDestroy: CustomEvent;\r\n\t\tonCancelButton: CustomEvent;\r\n\t\tonConfirmButton: CustomEvent;\r\n\t}\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface 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\t/** Get the dom element containing all modals */\r\n\tpublic modals: HTMLElement;\r\n\r\n\t/** Get the dom element of the current modal */\r\n\tpublic modal: HTMLElement;\r\n\r\n\t/** Options of the current modal */\r\n\tprivate options: Options;\r\n\r\n\tprivate eventCancelButton: () => void = () => {\r\n\t\t// Callback on cancel button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onCancelButton\"));\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\r\n\tprivate eventConfirmButton: () => void = () => {\r\n\t\t// Callback on confirm button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onConfirmButton\"));\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\r\n\tprivate eventClickOutside: (e: Event) => void = (e) => {\r\n\t\tif(e.target == this.modals)\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\r\n\tprivate eventClickCloseButton: () => void = () => {\r\n\t\t// Destroy modal\r\n\t\tthis.destroy();\r\n\t};\r\n\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(\".webcimes-modal__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(\".webcimes-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.modals.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\r\n\tprivate position: {x: number, y: number};\r\n\r\n\tprivate offset: {x: number, y: number};\r\n\r\n\tprivate isDragging: boolean = false;\r\n\r\n\tprivate moveFromElements: HTMLElement[] = [];\r\n\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(\".webcimes-modal__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\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\r\n\tprivate eventDragStop: () => void = () => {\r\n\t\tthis.isDragging = false;\r\n\t};\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\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: Partial<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 * Initialization of the current modal\r\n\t */\r\n private init()\r\n\t{\r\n\t\t// Create modals\r\n\t\tif(!document.querySelector(\".webcimes-modals\"))\r\n\t\t{\r\n\t\t\t// Create modals\r\n\t\t\tdocument.body.insertAdjacentHTML(\"beforeend\", '<div class=\"webcimes-modals animFadeIn\"></div>');\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\r\n\t\t\t\r\n\t\t\t// Set animation duration for modals\r\n\t\t\tthis.modals.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.modals.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 modals\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\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.modals.classList.remove(\"animFadeOut\");\r\n\t\t}\r\n\t\r\n\t\t// Create modal\r\n\t\tthis.modals.insertAdjacentHTML(\"beforeend\", \r\n\t\t\t`<div class=\"webcimes-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=\"webcimes-modal__header `+(this.options.stickyHeader?'webcimes-modal__header--is-sticky':'')+` `+(this.options.moveFromHeader?'webcimes-modal__header--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.titleHtml?'<div class=\"webcimes-modal__title\">'+this.options.titleHtml+'</div>':'')+`\r\n\t\t\t\t\t\t`+(this.options.showCloseButton?'<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__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=\"webcimes-modal__body `+(this.options.moveFromBody?'.webcimes-modal__body--is-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=\"webcimes-modal__footer `+(this.options.stickyFooter?'.webcimes-modal__footer--is-sticky':'')+` `+(this.options.moveFromFooter?'webcimes-modal__footer--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.buttonCancelHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel '+(this.options.closeOnCancelButton?'webcimes-modal__close':'')+'\">'+this.options.buttonCancelHtml+'</button>':'')+`\r\n\t\t\t\t\t\t`+(this.options.buttonConfirmHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm '+(this.options.closeOnConfirmButton?'webcimes-modal__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.modals.lastElementChild;\r\n\t\t\r\n\t\t// Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n\t\tsetTimeout(() => {\r\n\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"beforeShow\"));\r\n\t\t\tif(typeof this.options.beforeShow === 'function')\r\n\t\t\t{\r\n\t\t\t\tthis.options.beforeShow();\r\n\t\t\t}\r\n\t\t}, 0);\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\tthis.modal.dispatchEvent(new CustomEvent(\"afterShow\"));\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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.addEventListener(\"click\", this.eventConfirmButton);\r\n\t\t}\r\n\t\t\r\n\t\t// Event click outside (on modals)\r\n\t\tthis.modals.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(\".webcimes-modal__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(\".webcimes-modal__header\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__header\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromBody && this.modal.querySelector(\".webcimes-modal__body\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__body\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromFooter && this.modal.querySelector(\".webcimes-modal__footer\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__footer\"));\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 current modal\r\n\t */\r\n\tpublic destroy()\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\tthis.modal.dispatchEvent(new CustomEvent(\"beforeDestroy\"));\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 modals (according the number of modal not already destroying)\r\n\t\t\tif(document.querySelectorAll(\".webcimes-modal:not([data-destroying])\").length == 1)\r\n\t\t\t{\r\n\t\t\t\tthis.modals.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 modals 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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.removeEventListener(\"click\", this.eventConfirmButton);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthis.modals.removeEventListener(\"click\", this.eventClickOutside);\r\n\r\n\t\t\t\t\tthis.modal.querySelectorAll(\".webcimes-modal__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 modals or modal according the number of modal\r\n\t\t\t\t\t(document.querySelectorAll(\".webcimes-modal\").length>1?this.modal:this.modals).remove();\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Callback after destroy modal\r\n\t\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"afterDestroy\"));\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","modals","modal","options","eventCancelButton","this","dispatchEvent","CustomEvent","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":""}
|
|
@@ -20,7 +20,7 @@ declare global {
|
|
|
20
20
|
/**
|
|
21
21
|
* Options
|
|
22
22
|
*/
|
|
23
|
-
interface Options {
|
|
23
|
+
export interface Options {
|
|
24
24
|
/** set a specific id on the modal. default "null" */
|
|
25
25
|
setId: string | null;
|
|
26
26
|
/** set a specific class on the modal, default "null" */
|
|
@@ -115,5 +115,4 @@ export declare class WebcimesModal {
|
|
|
115
115
|
*/
|
|
116
116
|
destroy(): void;
|
|
117
117
|
}
|
|
118
|
-
export {};
|
|
119
118
|
//# sourceMappingURL=webcimes-modal.d.ts.map
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"js/webcimes-modal.udm.js","mappings":"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","sources":["webpack://webcimes-modal/webpack/universalModuleDefinition","webpack://webcimes-modal/webpack/bootstrap","webpack://webcimes-modal/webpack/runtime/define property getters","webpack://webcimes-modal/webpack/runtime/hasOwnProperty shorthand","webpack://webcimes-modal/webpack/runtime/make namespace object","webpack://webcimes-modal/./src/ts/webcimes-modal.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(self, () => {\nreturn ","// 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))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/**\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 * Global\r\n */\r\ndeclare global {\r\n\t/** Events */\r\n\tinterface GlobalEventHandlersEventMap {\r\n\t\tbeforeShow: CustomEvent;\r\n\t\tafterShow: CustomEvent;\r\n\t\tbeforeDestroy: CustomEvent;\r\n\t\tafterDestroy: CustomEvent;\r\n\t\tonCancelButton: CustomEvent;\r\n\t\tonConfirmButton: CustomEvent;\r\n\t}\r\n}\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\t/** Get the dom element containing all modals */\r\n\tpublic modals: HTMLElement;\r\n\r\n\t/** Get the dom element of the current modal */\r\n\tpublic modal: HTMLElement;\r\n\r\n\t/** Options of the current modal */\r\n\tprivate options: Options;\r\n\r\n\tprivate eventCancelButton: () => void = () => {\r\n\t\t// Callback on cancel button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onCancelButton\"));\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\r\n\tprivate eventConfirmButton: () => void = () => {\r\n\t\t// Callback on confirm button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onConfirmButton\"));\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\r\n\tprivate eventClickOutside: (e: Event) => void = (e) => {\r\n\t\tif(e.target == this.modals)\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\r\n\tprivate eventClickCloseButton: () => void = () => {\r\n\t\t// Destroy modal\r\n\t\tthis.destroy();\r\n\t};\r\n\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(\".webcimes-modal__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(\".webcimes-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.modals.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\r\n\tprivate position: {x: number, y: number};\r\n\r\n\tprivate offset: {x: number, y: number};\r\n\r\n\tprivate isDragging: boolean = false;\r\n\r\n\tprivate moveFromElements: HTMLElement[] = [];\r\n\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(\".webcimes-modal__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\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\r\n\tprivate eventDragStop: () => void = () => {\r\n\t\tthis.isDragging = false;\r\n\t};\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\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: Partial<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 * Initialization of the current modal\r\n\t */\r\n private init()\r\n\t{\r\n\t\t// Create modals\r\n\t\tif(!document.querySelector(\".webcimes-modals\"))\r\n\t\t{\r\n\t\t\t// Create modals\r\n\t\t\tdocument.body.insertAdjacentHTML(\"beforeend\", '<div class=\"webcimes-modals animFadeIn\"></div>');\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\r\n\t\t\t\r\n\t\t\t// Set animation duration for modals\r\n\t\t\tthis.modals.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.modals.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 modals\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\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.modals.classList.remove(\"animFadeOut\");\r\n\t\t}\r\n\t\r\n\t\t// Create modal\r\n\t\tthis.modals.insertAdjacentHTML(\"beforeend\", \r\n\t\t\t`<div class=\"webcimes-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=\"webcimes-modal__header `+(this.options.stickyHeader?'webcimes-modal__header--is-sticky':'')+` `+(this.options.moveFromHeader?'webcimes-modal__header--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.titleHtml?'<div class=\"webcimes-modal__title\">'+this.options.titleHtml+'</div>':'')+`\r\n\t\t\t\t\t\t`+(this.options.showCloseButton?'<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__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=\"webcimes-modal__body `+(this.options.moveFromBody?'.webcimes-modal__body--is-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=\"webcimes-modal__footer `+(this.options.stickyFooter?'.webcimes-modal__footer--is-sticky':'')+` `+(this.options.moveFromFooter?'webcimes-modal__footer--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.buttonCancelHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel '+(this.options.closeOnCancelButton?'webcimes-modal__close':'')+'\">'+this.options.buttonCancelHtml+'</button>':'')+`\r\n\t\t\t\t\t\t`+(this.options.buttonConfirmHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm '+(this.options.closeOnConfirmButton?'webcimes-modal__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.modals.lastElementChild;\r\n\t\t\r\n\t\t// Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n\t\tsetTimeout(() => {\r\n\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"beforeShow\"));\r\n\t\t\tif(typeof this.options.beforeShow === 'function')\r\n\t\t\t{\r\n\t\t\t\tthis.options.beforeShow();\r\n\t\t\t}\r\n\t\t}, 0);\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\tthis.modal.dispatchEvent(new CustomEvent(\"afterShow\"));\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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.addEventListener(\"click\", this.eventConfirmButton);\r\n\t\t}\r\n\t\t\r\n\t\t// Event click outside (on modals)\r\n\t\tthis.modals.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(\".webcimes-modal__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(\".webcimes-modal__header\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__header\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromBody && this.modal.querySelector(\".webcimes-modal__body\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__body\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromFooter && this.modal.querySelector(\".webcimes-modal__footer\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__footer\"));\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 current modal\r\n\t */\r\n\tpublic destroy()\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\tthis.modal.dispatchEvent(new CustomEvent(\"beforeDestroy\"));\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 modals (according the number of modal not already destroying)\r\n\t\t\tif(document.querySelectorAll(\".webcimes-modal:not([data-destroying])\").length == 1)\r\n\t\t\t{\r\n\t\t\t\tthis.modals.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 modals 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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.removeEventListener(\"click\", this.eventConfirmButton);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthis.modals.removeEventListener(\"click\", this.eventClickOutside);\r\n\r\n\t\t\t\t\tthis.modal.querySelectorAll(\".webcimes-modal__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 modals or modal according the number of modal\r\n\t\t\t\t\t(document.querySelectorAll(\".webcimes-modal\").length>1?this.modal:this.modals).remove();\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Callback after destroy modal\r\n\t\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"afterDestroy\"));\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":["root","factory","exports","module","define","amd","a","i","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","WebcimesModal","modals","modal","options","eventCancelButton","this","dispatchEvent","CustomEvent","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":""}
|
|
1
|
+
{"version":3,"file":"js/webcimes-modal.udm.js","mappings":"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","sources":["webpack://webcimes-modal/webpack/universalModuleDefinition","webpack://webcimes-modal/webpack/bootstrap","webpack://webcimes-modal/webpack/runtime/define property getters","webpack://webcimes-modal/webpack/runtime/hasOwnProperty shorthand","webpack://webcimes-modal/webpack/runtime/make namespace object","webpack://webcimes-modal/./src/ts/webcimes-modal.ts"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse {\n\t\tvar a = factory();\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})(self, () => {\nreturn ","// 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))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/**\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 * Global\r\n */\r\ndeclare global {\r\n\t/** Events */\r\n\tinterface GlobalEventHandlersEventMap {\r\n\t\tbeforeShow: CustomEvent;\r\n\t\tafterShow: CustomEvent;\r\n\t\tbeforeDestroy: CustomEvent;\r\n\t\tafterDestroy: CustomEvent;\r\n\t\tonCancelButton: CustomEvent;\r\n\t\tonConfirmButton: CustomEvent;\r\n\t}\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface 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\t/** Get the dom element containing all modals */\r\n\tpublic modals: HTMLElement;\r\n\r\n\t/** Get the dom element of the current modal */\r\n\tpublic modal: HTMLElement;\r\n\r\n\t/** Options of the current modal */\r\n\tprivate options: Options;\r\n\r\n\tprivate eventCancelButton: () => void = () => {\r\n\t\t// Callback on cancel button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onCancelButton\"));\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\r\n\tprivate eventConfirmButton: () => void = () => {\r\n\t\t// Callback on confirm button\r\n\t\tthis.modal.dispatchEvent(new CustomEvent(\"onConfirmButton\"));\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\r\n\tprivate eventClickOutside: (e: Event) => void = (e) => {\r\n\t\tif(e.target == this.modals)\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\r\n\tprivate eventClickCloseButton: () => void = () => {\r\n\t\t// Destroy modal\r\n\t\tthis.destroy();\r\n\t};\r\n\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(\".webcimes-modal__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(\".webcimes-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.modals.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\r\n\tprivate position: {x: number, y: number};\r\n\r\n\tprivate offset: {x: number, y: number};\r\n\r\n\tprivate isDragging: boolean = false;\r\n\r\n\tprivate moveFromElements: HTMLElement[] = [];\r\n\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(\".webcimes-modal__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\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\r\n\tprivate eventDragStop: () => void = () => {\r\n\t\tthis.isDragging = false;\r\n\t};\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\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: Partial<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 * Initialization of the current modal\r\n\t */\r\n private init()\r\n\t{\r\n\t\t// Create modals\r\n\t\tif(!document.querySelector(\".webcimes-modals\"))\r\n\t\t{\r\n\t\t\t// Create modals\r\n\t\t\tdocument.body.insertAdjacentHTML(\"beforeend\", '<div class=\"webcimes-modals animFadeIn\"></div>');\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\r\n\t\t\t\r\n\t\t\t// Set animation duration for modals\r\n\t\t\tthis.modals.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.modals.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 modals\r\n\t\t\tthis.modals = <HTMLElement>document.querySelector(\".webcimes-modals\");\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.modals.classList.remove(\"animFadeOut\");\r\n\t\t}\r\n\t\r\n\t\t// Create modal\r\n\t\tthis.modals.insertAdjacentHTML(\"beforeend\", \r\n\t\t\t`<div class=\"webcimes-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=\"webcimes-modal__header `+(this.options.stickyHeader?'webcimes-modal__header--is-sticky':'')+` `+(this.options.moveFromHeader?'webcimes-modal__header--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.titleHtml?'<div class=\"webcimes-modal__title\">'+this.options.titleHtml+'</div>':'')+`\r\n\t\t\t\t\t\t`+(this.options.showCloseButton?'<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__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=\"webcimes-modal__body `+(this.options.moveFromBody?'.webcimes-modal__body--is-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=\"webcimes-modal__footer `+(this.options.stickyFooter?'.webcimes-modal__footer--is-sticky':'')+` `+(this.options.moveFromFooter?'webcimes-modal__footer--is-movable':'')+`\">\r\n\t\t\t\t\t\t`+(this.options.buttonCancelHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel '+(this.options.closeOnCancelButton?'webcimes-modal__close':'')+'\">'+this.options.buttonCancelHtml+'</button>':'')+`\r\n\t\t\t\t\t\t`+(this.options.buttonConfirmHtml?'<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm '+(this.options.closeOnConfirmButton?'webcimes-modal__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.modals.lastElementChild;\r\n\t\t\r\n\t\t// Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n\t\tsetTimeout(() => {\r\n\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"beforeShow\"));\r\n\t\t\tif(typeof this.options.beforeShow === 'function')\r\n\t\t\t{\r\n\t\t\t\tthis.options.beforeShow();\r\n\t\t\t}\r\n\t\t}, 0);\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\tthis.modal.dispatchEvent(new CustomEvent(\"afterShow\"));\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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.addEventListener(\"click\", this.eventConfirmButton);\r\n\t\t}\r\n\t\t\r\n\t\t// Event click outside (on modals)\r\n\t\tthis.modals.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(\".webcimes-modal__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(\".webcimes-modal__header\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__header\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromBody && this.modal.querySelector(\".webcimes-modal__body\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__body\"));\r\n\t\t\t}\r\n\t\t\tif(this.options.moveFromFooter && this.modal.querySelector(\".webcimes-modal__footer\"))\r\n\t\t\t{\r\n\t\t\t\tthis.moveFromElements.push(<HTMLElement>this.modal.querySelector(\".webcimes-modal__footer\"));\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 current modal\r\n\t */\r\n\tpublic destroy()\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\tthis.modal.dispatchEvent(new CustomEvent(\"beforeDestroy\"));\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 modals (according the number of modal not already destroying)\r\n\t\t\tif(document.querySelectorAll(\".webcimes-modal:not([data-destroying])\").length == 1)\r\n\t\t\t{\r\n\t\t\t\tthis.modals.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 modals 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(\".webcimes-modal__footer-button--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(\".webcimes-modal__footer-button--confirm\")?.removeEventListener(\"click\", this.eventConfirmButton);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tthis.modals.removeEventListener(\"click\", this.eventClickOutside);\r\n\r\n\t\t\t\t\tthis.modal.querySelectorAll(\".webcimes-modal__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 modals or modal according the number of modal\r\n\t\t\t\t\t(document.querySelectorAll(\".webcimes-modal\").length>1?this.modal:this.modals).remove();\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// Callback after destroy modal\r\n\t\t\t\tthis.modal.dispatchEvent(new CustomEvent(\"afterDestroy\"));\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":["root","factory","exports","module","define","amd","a","i","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","WebcimesModal","modals","modal","options","eventCancelButton","this","dispatchEvent","CustomEvent","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":""}
|
package/package.json
CHANGED
|
@@ -20,7 +20,7 @@ declare global {
|
|
|
20
20
|
/**
|
|
21
21
|
* Options
|
|
22
22
|
*/
|
|
23
|
-
interface Options {
|
|
23
|
+
export interface Options {
|
|
24
24
|
/** set a specific id on the modal. default "null" */
|
|
25
25
|
setId: string | null;
|
|
26
26
|
/** set a specific class on the modal, default "null" */
|
|
@@ -115,5 +115,4 @@ export declare class WebcimesModal {
|
|
|
115
115
|
*/
|
|
116
116
|
destroy(): void;
|
|
117
117
|
}
|
|
118
|
-
export {};
|
|
119
118
|
//# sourceMappingURL=webcimes-modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"webcimes-modal.d.ts","sourceRoot":"","sources":["webcimes-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACd,aAAa;IACb,UAAU,2BAA2B;QACpC,UAAU,EAAE,WAAW,CAAC;QACxB,SAAS,EAAE,WAAW,CAAC;QACvB,aAAa,EAAE,WAAW,CAAC;QAC3B,YAAY,EAAE,WAAW,CAAC;QAC1B,cAAc,EAAE,WAAW,CAAC;QAC5B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED;;GAEG;AACH,
|
|
1
|
+
{"version":3,"file":"webcimes-modal.d.ts","sourceRoot":"","sources":["webcimes-modal.ts"],"names":[],"mappings":"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"}
|
package/src/ts/webcimes-modal.ts
CHANGED