webcimes-modal 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +155 -158
  2. package/demo/script_esm.js +3 -3
  3. package/demo/script_udm.js +2 -2
  4. package/dist/js/webcimes-modal.esm.d.ts +1 -1
  5. package/dist/js/webcimes-modal.esm.js +1 -1
  6. package/dist/js/webcimes-modal.esm.js.map +1 -1
  7. package/dist/js/webcimes-modal.udm.d.ts +1 -1
  8. package/dist/js/webcimes-modal.udm.js +1 -1
  9. package/dist/js/webcimes-modal.udm.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/ts/webcimes-modal.d.ts +1 -1
  12. package/src/ts/webcimes-modal.ts +1 -1
  13. package/test/script.js +3 -3
package/README.md CHANGED
@@ -19,46 +19,46 @@ You can use an importmap to resolve the arbitrary module names to complete paths
19
19
 
20
20
  ```html
21
21
  <html>
22
- <head>
22
+ <head>
23
+ ...
24
+ <script type="importmap">
25
+ {
26
+ "imports": {
27
+ "webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
28
+ }
29
+ }
30
+ </script>
31
+ </head>
23
32
  ...
24
- <script type="importmap">
25
- {
26
- "imports": {
27
- "webcimes-modal": "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js"
28
- }
29
- }
30
- </script>
31
- </head>
32
- ...
33
33
  </html>
34
34
  ```
35
35
 
36
36
  Then import javascript module:
37
37
 
38
38
  ```javascript
39
- import { createWebcimesModal } from "webcimes-modal";
39
+ import { CreateWebcimesModal } from 'webcimes-modal';
40
40
  ```
41
41
 
42
42
  Or you can also set the full path directly in the import:
43
43
 
44
44
  ```html
45
45
  <html>
46
- <head>
46
+ <head>
47
+ ...
48
+ <script type="module">
49
+ // Import webcimes-modal
50
+ import { CreateWebcimesModal } from "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js";
51
+ ...
52
+ </script>
53
+ </head>
47
54
  ...
48
- <script type="module">
49
- // Import webcimes-modal
50
- import { createWebcimesModal } from "./node_modules/webcimes-modal/dist/js/webcimes-modal.esm.js";
51
- ...
52
- </script>
53
- </head>
54
- ...
55
55
  </html>
56
56
  ```
57
57
 
58
58
  Or with JS bundlers (like Webpack) you can call directly the module :
59
59
 
60
60
  ```javascript
61
- import { createWebcimesModal } from "webcimes-modal";
61
+ import { CreateWebcimesModal } from 'webcimes-modal';
62
62
  ```
63
63
 
64
64
  ### UDM
@@ -67,76 +67,73 @@ You can directly load the udm module in the script tag:
67
67
 
68
68
  ```html
69
69
  <html>
70
- <head>
70
+ <head>
71
+ ...
72
+ <script
73
+ src="./node_modules/webcimes-modal/dist/js/webcimes-modal.udm.js"
74
+ type="text/javascript"
75
+ ></script>
76
+ </head>
71
77
  ...
72
- <script
73
- src="./node_modules/webcimes-modal/dist/js/webcimes-modal.udm.js"
74
- type="text/javascript"
75
- ></script>
76
- </head>
77
- ...
78
78
  </html>
79
79
  ```
80
80
 
81
81
  ### Import stylesheet:
82
82
 
83
83
  ```html
84
- <link
85
- rel="stylesheet"
86
- href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css"
87
- />
84
+ <link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.css" />
88
85
  ```
89
86
 
90
87
  ## Usage
91
88
 
92
- ### Call `createWebcimesModal()` to create modal:
89
+ ### Call `CreateWebcimesModal()` to create modal:
93
90
 
94
91
  ```javascript
95
- // Wait for dom content loaded or call createWebcimesModal before the end of body
96
- document.addEventListener("DOMContentLoaded", function () {
97
- // Create modal
98
- const myModal = createWebcimesModal({
99
- setId: null, // set a specific id on the modal. default "null"
100
- setClass: null, // set a specific class on the modal, default "null"
101
- width: "auto", // width (specify unit), default "auto"
102
- height: "auto", // height (specify unit), default "auto"
103
- titleHtml: "My title", // html for title, default "null"
104
- bodyHtml: "My Body", // html for body, default "null"
105
- buttonCancelHtml: "Cancel", // html for cancel button, default "null"
106
- buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
107
- closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
108
- closeOnConfirmButton: true, // close modal after trigger confirm button, default "true"
109
- showCloseButton: true, // show close button, default "true"
110
- allowCloseOutside: false, // allow the modal to close when clicked outside, default "true"
111
- allowMovement: true, // ability to move modal, default "true"
112
- moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
113
- moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
114
- moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
115
- stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
116
- stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
117
- style: null, // add extra css style to modal, default null
118
- animationOnShow: "animDropDown", // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
119
- animationOnDestroy: "animDropUp", // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
120
- animationDuration: 500, // animation duration in ms, default "500"
121
- beforeShow: () => {
122
- console.log("before show");
123
- }, // callback before show modal
124
- afterShow: () => {
125
- console.log("after show");
126
- }, // callback after show modal
127
- beforeDestroy: () => {
128
- console.log("before destroy");
129
- }, // callback before destroy modal
130
- afterDestroy: () => {
131
- console.log("after destroy");
132
- }, // callback after destroy modal
133
- onCancelButton: () => {
134
- console.log("on cancel button");
135
- }, // callback after triggering cancel button
136
- onConfirmButton: () => {
137
- console.log("on confirm button");
138
- }, // callback after triggering confirm button
139
- });
92
+ // Wait for dom content loaded or call CreateWebcimesModal before the end of body
93
+ document.addEventListener('DOMContentLoaded', function () {
94
+ // Create modal
95
+ const myModal = CreateWebcimesModal({
96
+ setId: null, // set a specific id on the modal. default "null"
97
+ setClass: null, // set a specific class on the modal, default "null"
98
+ width: 'auto', // width (specify unit), default "auto"
99
+ height: 'auto', // height (specify unit), default "auto"
100
+ titleHtml: 'My title', // html for title, default "null"
101
+ bodyHtml: 'My Body', // html for body, default "null"
102
+ buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
103
+ buttonConfirmHtml: 'Confirm', // html for confirm button, default "null"
104
+ closeOnCancelButton: false, // close modal after trigger cancel button, default "true"
105
+ closeOnConfirmButton: true, // close modal after trigger confirm button, default "true"
106
+ showCloseButton: true, // show close button, default "true"
107
+ allowCloseOutside: false, // allow the modal to close when clicked outside, default "true"
108
+ allowMovement: true, // ability to move modal, default "true"
109
+ moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
110
+ moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
111
+ moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
112
+ stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
113
+ stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
114
+ style: null, // add extra css style to modal, default null
115
+ animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
116
+ animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
117
+ animationDuration: 500, // animation duration in ms, default "500"
118
+ beforeShow: () => {
119
+ console.log('before show');
120
+ }, // callback before show modal
121
+ afterShow: () => {
122
+ console.log('after show');
123
+ }, // callback after show modal
124
+ beforeDestroy: () => {
125
+ console.log('before destroy');
126
+ }, // callback before destroy modal
127
+ afterDestroy: () => {
128
+ console.log('after destroy');
129
+ }, // callback after destroy modal
130
+ onCancelButton: () => {
131
+ console.log('on cancel button');
132
+ }, // callback after triggering cancel button
133
+ onConfirmButton: () => {
134
+ console.log('on confirm button');
135
+ }, // callback after triggering confirm button
136
+ });
140
137
  });
141
138
  ```
142
139
 
@@ -146,25 +143,25 @@ After a creating a modal, the basic html structure look like this:
146
143
 
147
144
  ```html
148
145
  <div class="webcimes-modal">
149
- <div class="webcimes-modal__header">
150
- <div class="webcimes-modal__title">My title</div>
151
- <button
152
- class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"
153
- ></button>
154
- </div>
155
- <div class="webcimes-modal__body">My body</div>
156
- <div class="webcimes-modal__footer">
157
- <button
158
- class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel"
159
- >
160
- Cancel
161
- </button>
162
- <button
163
- class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm"
164
- >
165
- Confirm
166
- </button>
167
- </div>
146
+ <div class="webcimes-modal__header">
147
+ <div class="webcimes-modal__title">My title</div>
148
+ <button
149
+ class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"
150
+ ></button>
151
+ </div>
152
+ <div class="webcimes-modal__body">My body</div>
153
+ <div class="webcimes-modal__footer">
154
+ <button
155
+ class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel"
156
+ >
157
+ Cancel
158
+ </button>
159
+ <button
160
+ class="webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm"
161
+ >
162
+ Confirm
163
+ </button>
164
+ </div>
168
165
  </div>
169
166
  ```
170
167
 
@@ -176,10 +173,10 @@ For these 4 fields you can just directly write the text or define tags, or call
176
173
 
177
174
  ```javascript
178
175
  const myModal = CreateWebcimesModal({
179
- titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
180
- bodyHtml: document.querySelector("#myID").outerHTML, // set html from an HTML element
181
- buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
182
- buttonConfirmHtml: "Confirm", // or just text
176
+ titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
177
+ bodyHtml: document.querySelector('#myID').outerHTML, // set html from an HTML element
178
+ buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
179
+ buttonConfirmHtml: 'Confirm', // or just text
183
180
  });
184
181
  ```
185
182
 
@@ -202,9 +199,9 @@ By default the `height` and `width` are set to `auto`, the modal will also be si
202
199
  You can also set the determined `height` or `width` by indicating the value with a number and a unit.
203
200
 
204
201
  ```javascript
205
- const myModal = createWebcimesModal({
206
- width: "80vm",
207
- height: "200px",
202
+ const myModal = CreateWebcimesModal({
203
+ width: '80vm',
204
+ height: '200px',
208
205
  });
209
206
  ```
210
207
 
@@ -213,17 +210,17 @@ const myModal = createWebcimesModal({
213
210
  Below are the different options for customize the modal behavior.
214
211
 
215
212
  ```javascript
216
- const myModal = createWebcimesModal({
217
- closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
218
- closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
219
- showCloseButton: true, // show close button, default "true"
220
- allowCloseOutside: false, // allows the modal to close when clicked outside, default "true"
221
- allowMovement: true, // ability to move modal, default "true"
222
- moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
223
- moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
224
- moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
225
- stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
226
- stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
213
+ const myModal = CreateWebcimesModal({
214
+ closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
215
+ closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
216
+ showCloseButton: true, // show close button, default "true"
217
+ allowCloseOutside: false, // allows the modal to close when clicked outside, default "true"
218
+ allowMovement: true, // ability to move modal, default "true"
219
+ moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
220
+ moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
221
+ moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
222
+ stickyHeader: true, // keep header sticky (visible) when scrolling, default "true"
223
+ stickyFooter: true, // keep footer sticky (visible) when scrolling, default "true"
227
224
  });
228
225
  ```
229
226
 
@@ -232,8 +229,8 @@ const myModal = createWebcimesModal({
232
229
  You can define the style of the modal with `css`, but you can also use the style property which allows to directly add an additional style to the modal.
233
230
 
234
231
  ```javascript
235
- const myModal = createWebcimesModal({
236
- style: "background:black; color:#fff; text-align:center;",
232
+ const myModal = CreateWebcimesModal({
233
+ style: 'background:black; color:#fff; text-align:center;',
237
234
  });
238
235
  ```
239
236
 
@@ -248,10 +245,10 @@ For `animationOnDestroy` you can choose between `animDropUp` or `animFadeOut`
248
245
  And you can set the duration of all animation by setting `animationDuration` with a number in ms.
249
246
 
250
247
  ```javascript
251
- const myModal = createWebcimesModal({
252
- animationOnShow: "animDropDown", // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
253
- animationOnDestroy: "animDropUp", // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
254
- animationDuration: 500, // anim duration in ms, default "500"
248
+ const myModal = CreateWebcimesModal({
249
+ animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
250
+ animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
251
+ animationDuration: 500, // anim duration in ms, default "500"
255
252
  });
256
253
  ```
257
254
 
@@ -261,7 +258,7 @@ You can get the dom element of the current modal like this:
261
258
 
262
259
  ```javascript
263
260
  // Get the instance
264
- const myModal = createWebcimesModal(...);
261
+ const myModal = CreateWebcimesModal(...);
265
262
 
266
263
  // Things
267
264
 
@@ -273,7 +270,7 @@ Or you can get the global container of all modals like this:
273
270
 
274
271
  ```javascript
275
272
  // Get the instance
276
- const myModal = createWebcimesModal(...);
273
+ const myModal = CreateWebcimesModal(...);
277
274
 
278
275
  // Things
279
276
 
@@ -286,25 +283,25 @@ myModal.modals;
286
283
  Multiple events exist, which allow to interact with the modal at each step. You can use all events below:
287
284
 
288
285
  ```javascript
289
- const myModal = createWebcimesModal({
290
- beforeShow: () => {
291
- console.log("before show");
292
- }, // callback before show modal
293
- afterShow: () => {
294
- console.log("after show");
295
- }, // callback after show modal
296
- beforeDestroy: () => {
297
- console.log("before destroy");
298
- }, // callback before destroy modal
299
- afterDestroy: () => {
300
- console.log("after destroy");
301
- }, // callback after destroy modal
302
- onCancelButton: () => {
303
- console.log("on cancel button");
304
- }, // callback after triggering cancel button
305
- onConfirmButton: () => {
306
- console.log("on confirm button");
307
- }, // callback after triggering confirm button
286
+ const myModal = CreateWebcimesModal({
287
+ beforeShow: () => {
288
+ console.log('before show');
289
+ }, // callback before show modal
290
+ afterShow: () => {
291
+ console.log('after show');
292
+ }, // callback after show modal
293
+ beforeDestroy: () => {
294
+ console.log('before destroy');
295
+ }, // callback before destroy modal
296
+ afterDestroy: () => {
297
+ console.log('after destroy');
298
+ }, // callback after destroy modal
299
+ onCancelButton: () => {
300
+ console.log('on cancel button');
301
+ }, // callback after triggering cancel button
302
+ onConfirmButton: () => {
303
+ console.log('on confirm button');
304
+ }, // callback after triggering confirm button
308
305
  });
309
306
  ```
310
307
 
@@ -312,7 +309,7 @@ You can also use `addEventListener` for get the events from the instance like th
312
309
 
313
310
  ```javascript
314
311
  // Get the instance
315
- const myModal = createWebcimesModal(...);
312
+ const myModal = CreateWebcimesModal(...);
316
313
 
317
314
  // Create an event on the current modal
318
315
  myModal.modal.addEventListener("afterDestroy", () => {
@@ -334,7 +331,7 @@ To destroy the modal, you have several ways:
334
331
 
335
332
  ```javascript
336
333
  // Get the instance
337
- const myModal = createWebcimesModal(...);
334
+ const myModal = CreateWebcimesModal(...);
338
335
 
339
336
  // Things
340
337
 
@@ -348,23 +345,23 @@ You can style modal with the following field applying to the class of `.webcimes
348
345
 
349
346
  ```css
350
347
  .webcimes-modals {
351
- --webcimes-modals-background: rgba(0, 0, 0, 0.8);
352
- --webcimes-modals-z-index: 5;
348
+ --webcimes-modals-background: rgba(0, 0, 0, 0.8);
349
+ --webcimes-modals-z-index: 5;
353
350
  }
354
351
  .webcimes-modal {
355
- --modal-color: inherit;
356
- --modal-background: #fff;
357
- --modal-border-color: #ddd;
358
- --modal-box-shadow: 1px 1px 3px 0px #444;
359
- --modal-title-font-size: 24px;
360
- --modal-button-cancel-background: rgba(102, 102, 102, 1);
361
- --modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);
362
- --modal-button-cancel-color: #fff;
363
- --modal-button-cancel-color-hover: #fff;
364
- --modal-button-confirm-background: rgba(0, 0, 0, 1);
365
- --modal-button-confirm-background-hover: rgba(0, 0, 0, 0.7);
366
- --modal-button-confirm-color: #fff;
367
- --modal-button-confirm-color-hover: #fff;
352
+ --modal-color: inherit;
353
+ --modal-background: #fff;
354
+ --modal-border-color: #ddd;
355
+ --modal-box-shadow: 1px 1px 3px 0px #444;
356
+ --modal-title-font-size: 24px;
357
+ --modal-button-cancel-background: rgba(102, 102, 102, 1);
358
+ --modal-button-cancel-background-hover: rgba(102, 102, 102, 0.7);
359
+ --modal-button-cancel-color: #fff;
360
+ --modal-button-cancel-color-hover: #fff;
361
+ --modal-button-confirm-background: rgba(0, 0, 0, 1);
362
+ --modal-button-confirm-background-hover: rgba(0, 0, 0, 0.7);
363
+ --modal-button-confirm-color: #fff;
364
+ --modal-button-confirm-color-hover: #fff;
368
365
  }
369
366
  ```
370
367
 
package/demo/script_esm.js CHANGED
@@ -1,9 +1,9 @@
1
1
  // Import webcimes-modal
2
- import { createWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
2
+ import { CreateWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
3
3
 
4
4
  // Wait for dom content loaded
5
5
  document.addEventListener('DOMContentLoaded', function () {
6
- const myModal = createWebcimesModal({
6
+ const myModal = CreateWebcimesModal({
7
7
  setId: null, // set specific id to the modal, default "null"
8
8
  setClass: null, // set specific class to the modal, default "null"
9
9
  width: 'auto', // width (specify the unit), default "auto"
@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', function () {
46
46
  }, // callback after trigger confirm button
47
47
  });
48
48
 
49
- const myModal2 = createWebcimesModal({
49
+ const myModal2 = CreateWebcimesModal({
50
50
  titleHtml: 'My title', // html for title, default "null"
51
51
  bodyHtml: document.querySelector('.test').outerHTML, // html for body, default "null"
52
52
  buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
package/demo/script_udm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  // Wait for dom content loaded
2
2
  document.addEventListener('DOMContentLoaded', function () {
3
- const myModal = createWebcimesModal({
3
+ const myModal = CreateWebcimesModal({
4
4
  setId: null, // set specific id to the modal, default "null"
5
5
  setClass: null, // set specific class to the modal, default "null"
6
6
  width: 'auto', // width (specify the unit), default "auto"
@@ -43,7 +43,7 @@ document.addEventListener('DOMContentLoaded', function () {
43
43
  }, // callback after trigger confirm button
44
44
  });
45
45
 
46
- const myModal2 = createWebcimesModal({
46
+ const myModal2 = CreateWebcimesModal({
47
47
  titleHtml: 'My title', // html for title, default "null"
48
48
  bodyHtml: document.querySelector('.test').outerHTML, // html for body, default "null"
49
49
  buttonCancelHtml: 'Cancel', // html for cancel button, default "null"
package/dist/js/webcimes-modal.esm.d.ts CHANGED
@@ -93,5 +93,5 @@ export interface WebcimesModal {
93
93
  /**
94
94
  * Factory function to create a WebcimesModal instance with proper typing
95
95
  */
96
- export declare function createWebcimesModal(options: Partial<Options>): WebcimesModal;
96
+ export declare function CreateWebcimesModal(options: Partial<Options>): WebcimesModal;
97
97
  //# sourceMappingURL=webcimes-modal.d.ts.map
package/dist/js/webcimes-modal.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- var t={d:(o,e)=>{for(var s in e)t.o(e,s)&&!t.o(o,s)&&Object.defineProperty(o,s,{enumerable:!0,get:e[s]})},o:(t,o)=>Object.prototype.hasOwnProperty.call(t,o)},o={};t.d(o,{H:()=>s});class e{modals;modal;options;eventCancelButton=()=>{this.modal.dispatchEvent(new CustomEvent("onCancelButton")),"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{this.modal.dispatchEvent(new CustomEvent("onConfirmButton")),"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.modals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".webcimes-modal__close")&&document.querySelectorAll(".webcimes-modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.modals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest(".webcimes-modal__button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimes-modals")?(this.modals=document.querySelector(".webcimes-modals"),this.modals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimes-modals animFadeIn"></div>'),this.modals=document.querySelector(".webcimes-modals"),this.modals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.modals.insertAdjacentHTML("beforeend",'<div class="webcimes-modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="webcimes-modal__header '+(this.options.stickyHeader?"webcimes-modal__header--is-sticky":"")+" "+(this.options.moveFromHeader?"webcimes-modal__header--is-movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="webcimes-modal__title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="webcimes-modal__body '+(this.options.moveFromBody?".webcimes-modal__body--is-movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="webcimes-modal__footer '+(this.options.stickyFooter?".webcimes-modal__footer--is-sticky":"")+" "+(this.options.moveFromFooter?"webcimes-modal__footer--is-movable":"")+'">\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>":"")+"\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>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.modals.lastElementChild,setTimeout((()=>{this.modal.dispatchEvent(new CustomEvent("beforeShow")),"function"==typeof this.options.beforeShow&&this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),this.modal.dispatchEvent(new CustomEvent("afterShow")),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style")??"";this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.addEventListener("click",this.eventConfirmButton),this.modals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".webcimes-modal__header")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__header")),this.options.moveFromBody&&this.modal.querySelector(".webcimes-modal__body")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__body")),this.options.moveFromFooter&&this.modal.querySelector(".webcimes-modal__footer")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__footer")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||(this.modal.dispatchEvent(new CustomEvent("beforeDestroy")),"function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".webcimes-modal:not([data-destroying])").length&&this.modals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.removeEventListener("click",this.eventConfirmButton),this.modals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".webcimes-modal").length>1?this.modal:this.modals).remove()),this.modal.dispatchEvent(new CustomEvent("afterDestroy")),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}function s(t){return new e(t)}var i=o.H;export{i as createWebcimesModal};
1
+ var t={d:(o,e)=>{for(var s in e)t.o(e,s)&&!t.o(o,s)&&Object.defineProperty(o,s,{enumerable:!0,get:e[s]})},o:(t,o)=>Object.prototype.hasOwnProperty.call(t,o)},o={};t.d(o,{f:()=>s});class e{modals;modal;options;eventCancelButton=()=>{this.modal.dispatchEvent(new CustomEvent("onCancelButton")),"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{this.modal.dispatchEvent(new CustomEvent("onConfirmButton")),"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.modals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".webcimes-modal__close")&&document.querySelectorAll(".webcimes-modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.modals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest(".webcimes-modal__button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimes-modals")?(this.modals=document.querySelector(".webcimes-modals"),this.modals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimes-modals animFadeIn"></div>'),this.modals=document.querySelector(".webcimes-modals"),this.modals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.modals.insertAdjacentHTML("beforeend",'<div class="webcimes-modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="webcimes-modal__header '+(this.options.stickyHeader?"webcimes-modal__header--is-sticky":"")+" "+(this.options.moveFromHeader?"webcimes-modal__header--is-movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="webcimes-modal__title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="webcimes-modal__body '+(this.options.moveFromBody?".webcimes-modal__body--is-movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="webcimes-modal__footer '+(this.options.stickyFooter?".webcimes-modal__footer--is-sticky":"")+" "+(this.options.moveFromFooter?"webcimes-modal__footer--is-movable":"")+'">\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>":"")+"\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>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.modals.lastElementChild,setTimeout((()=>{this.modal.dispatchEvent(new CustomEvent("beforeShow")),"function"==typeof this.options.beforeShow&&this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),this.modal.dispatchEvent(new CustomEvent("afterShow")),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style")??"";this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.addEventListener("click",this.eventConfirmButton),this.modals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".webcimes-modal__header")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__header")),this.options.moveFromBody&&this.modal.querySelector(".webcimes-modal__body")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__body")),this.options.moveFromFooter&&this.modal.querySelector(".webcimes-modal__footer")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__footer")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||(this.modal.dispatchEvent(new CustomEvent("beforeDestroy")),"function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".webcimes-modal:not([data-destroying])").length&&this.modals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.removeEventListener("click",this.eventConfirmButton),this.modals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((o=>{o.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".webcimes-modal").length>1?this.modal:this.modals).remove()),this.modal.dispatchEvent(new CustomEvent("afterDestroy")),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}function s(t){return new e(t)}var i=o.f;export{i as CreateWebcimesModal};
2
2
  //# sourceMappingURL=webcimes-modal.esm.js.map
package/dist/js/webcimes-modal.esm.js.map CHANGED
@@ -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 /** Events */\r\n interface GlobalEventHandlersEventMap {\r\n beforeShow: CustomEvent;\r\n afterShow: CustomEvent;\r\n beforeDestroy: CustomEvent;\r\n afterDestroy: CustomEvent;\r\n onCancelButton: CustomEvent;\r\n onConfirmButton: CustomEvent;\r\n }\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface Options {\r\n /** set a specific id on the modal. default \"null\" */\r\n setId: string | null;\r\n /** set a specific class on the modal, default \"null\" */\r\n setClass: string | null;\r\n /** width (specify unit), default \"auto\" */\r\n width: string;\r\n /** height (specify unit), default \"auto\" */\r\n height: string;\r\n /** html for title, default \"null\" */\r\n titleHtml: string | null;\r\n /** html for body, default \"null\" */\r\n bodyHtml: string | null;\r\n /** html for cancel button, default \"null\" */\r\n buttonCancelHtml: string | null;\r\n /** html for confirm button, default \"null\" */\r\n buttonConfirmHtml: string | null;\r\n /** close modal after trigger cancel button, default \"true\" */\r\n closeOnCancelButton: boolean;\r\n /** close modal after trigger confirm button, default \"true\" */\r\n closeOnConfirmButton: boolean;\r\n /** show close button, default \"true\" */\r\n showCloseButton: boolean;\r\n /** allow the modal to close when clicked outside, default \"true\" */\r\n allowCloseOutside: boolean;\r\n /** ability to move modal, default \"true\" */\r\n allowMovement: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n moveFromHeader: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n moveFromBody: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n moveFromFooter: boolean;\r\n /** keep header sticky (visible) when scrolling, default \"true\" */\r\n stickyHeader: boolean;\r\n /** keep footer sticky (visible) when scrolling, default \"true\" */\r\n stickyFooter: boolean;\r\n /** add extra css style to modal, default null */\r\n style: string | null;\r\n /** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n animationOnShow: 'animDropDown' | 'animFadeIn';\r\n /** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n animationOnDestroy: 'animDropUp' | 'animFadeOut';\r\n /** animation duration in ms, default \"500\" */\r\n animationDuration: number;\r\n /** callback before show modal */\r\n beforeShow: () => void;\r\n /** callback after show modal */\r\n afterShow: () => void;\r\n /** callback before destroy modal */\r\n beforeDestroy: () => void;\r\n /** callback after destroy modal */\r\n afterDestroy: () => void;\r\n /** callback after triggering cancel button */\r\n onCancelButton: () => void;\r\n /** callback after triggering confirm button */\r\n onConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Public interface for WebcimesModal instances\r\n * This represents the actual accessible members of the instance\r\n */\r\nexport interface WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n modals: HTMLElement;\r\n /** Get the dom element of the current modal */\r\n modal: HTMLElement;\r\n /** Destroy the current modal */\r\n destroy(): void;\r\n}\r\n\r\n/**\r\n * WebcimesModal implementation class\r\n */\r\nclass WebcimesModalImpl implements WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n public modals: HTMLElement;\r\n\r\n /** Get the dom element of the current modal */\r\n public modal: HTMLElement;\r\n\r\n /** Options of the current modal */\r\n private options: Options;\r\n\r\n private eventCancelButton: () => void = () => {\r\n // Callback on cancel button\r\n this.modal.dispatchEvent(new CustomEvent('onCancelButton'));\r\n if (typeof this.options.onCancelButton === 'function') {\r\n this.options.onCancelButton();\r\n }\r\n };\r\n\r\n private eventConfirmButton: () => void = () => {\r\n // Callback on confirm button\r\n this.modal.dispatchEvent(new CustomEvent('onConfirmButton'));\r\n if (typeof this.options.onConfirmButton === 'function') {\r\n this.options.onConfirmButton();\r\n }\r\n };\r\n\r\n private eventClickOutside: (e: Event) => void = (e) => {\r\n if (e.target == this.modals) {\r\n if (this.options.allowCloseOutside) {\r\n // Destroy modal\r\n this.destroy();\r\n } else {\r\n // Add animation for show modal who can't be close\r\n this.modal.classList.add('animGrowShrink');\r\n\r\n // Delete animation after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove('animGrowShrink');\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n };\r\n\r\n private eventClickCloseButton: () => void = () => {\r\n // Destroy modal\r\n this.destroy();\r\n };\r\n\r\n private eventDragModalOnTop: (e: Event) => void = (e) => {\r\n // Only if target is not close button (for bug in chrome)\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__close')) {\r\n // If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n if (\r\n document.querySelectorAll('.webcimes-modal').length > 1 &&\r\n this.modal.nextElementSibling !== null\r\n ) {\r\n let oldScrollTop = this.modal.scrollTop;\r\n this.modals.insertAdjacentElement('beforeend', this.modal);\r\n this.modal.scrollTop = oldScrollTop;\r\n }\r\n }\r\n };\r\n\r\n private position: { x: number; y: number };\r\n\r\n private offset: { x: number; y: number };\r\n\r\n private isDragging: boolean = false;\r\n\r\n private moveFromElements: HTMLElement[] = [];\r\n\r\n private eventDragStart: (e: Event) => void = (e) => {\r\n // Start drag only if it's not a button\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__button')) {\r\n this.isDragging = true;\r\n\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n y: this.modal.offsetTop - (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n y: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n }\r\n };\r\n\r\n private eventMove: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.position = {\r\n x: (<MouseEvent>e).clientX,\r\n y: (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.position = {\r\n x: (<TouchEvent>e).touches[0].clientX,\r\n y: (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n this.modal.style.left = this.position.x + this.offset.x + 'px';\r\n this.modal.style.top = this.position.y + this.offset.y + 'px';\r\n }\r\n };\r\n\r\n private eventDragStop: () => void = () => {\r\n this.isDragging = false;\r\n };\r\n\r\n private eventPreventSelectText: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n private eventResize: () => void = () => {\r\n this.modal.style.removeProperty('left');\r\n this.modal.style.removeProperty('top');\r\n };\r\n\r\n /**\r\n * Create modal\r\n */\r\n constructor(options: Partial<Options>) {\r\n // Defaults\r\n const defaults: Options = {\r\n setId: null,\r\n setClass: null,\r\n width: 'auto',\r\n height: 'auto',\r\n titleHtml: null,\r\n bodyHtml: null,\r\n buttonCancelHtml: null,\r\n buttonConfirmHtml: null,\r\n closeOnCancelButton: true,\r\n closeOnConfirmButton: true,\r\n showCloseButton: true,\r\n allowCloseOutside: true,\r\n allowMovement: true,\r\n moveFromHeader: true,\r\n moveFromBody: false,\r\n moveFromFooter: true,\r\n stickyHeader: true,\r\n stickyFooter: true,\r\n style: null,\r\n animationOnShow: 'animDropDown',\r\n animationOnDestroy: 'animDropUp',\r\n animationDuration: 500,\r\n beforeShow: () => {},\r\n afterShow: () => {},\r\n beforeDestroy: () => {},\r\n afterDestroy: () => {},\r\n onCancelButton: () => {},\r\n onConfirmButton: () => {},\r\n };\r\n this.options = { ...defaults, ...options };\r\n\r\n // Call init method\r\n this.init();\r\n }\r\n\r\n /**\r\n * Initialization of the current modal\r\n */\r\n private init() {\r\n // Create modals\r\n if (!document.querySelector('.webcimes-modals')) {\r\n // Create modals\r\n document.body.insertAdjacentHTML(\r\n 'beforeend',\r\n '<div class=\"webcimes-modals animFadeIn\"></div>',\r\n );\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Set animation duration for modals\r\n this.modals.style.setProperty(\r\n 'animation-duration',\r\n this.options.animationDuration + 'ms',\r\n );\r\n\r\n // Delete enter animation after animation delay\r\n setTimeout(() => {\r\n this.modals.classList.remove('animFadeIn');\r\n }, this.options.animationDuration);\r\n } else {\r\n // Get modals\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n this.modals.classList.remove('animFadeOut');\r\n }\r\n\r\n // Create modal\r\n this.modals.insertAdjacentHTML(\r\n 'beforeend',\r\n `<div class=\"webcimes-modal ` +\r\n (this.options.setClass ? this.options.setClass : '') +\r\n ` ` +\r\n this.options.animationOnShow +\r\n `\" ` +\r\n (this.options.setId ? 'id=\"' + this.options.setId + '\"' : '') +\r\n `>\r\n\t\t\t\t` +\r\n (this.options.titleHtml || this.options.showCloseButton\r\n ? `<div class=\"webcimes-modal__header ` +\r\n (this.options.stickyHeader ? 'webcimes-modal__header--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromHeader ? 'webcimes-modal__header--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.titleHtml\r\n ? '<div class=\"webcimes-modal__title\">' +\r\n this.options.titleHtml +\r\n '</div>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.showCloseButton\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__close\"></button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.bodyHtml\r\n ? `<div class=\"webcimes-modal__body ` +\r\n (this.options.moveFromBody ? '.webcimes-modal__body--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n this.options.bodyHtml +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.buttonCancelHtml || this.options.buttonConfirmHtml\r\n ? `<div class=\"webcimes-modal__footer ` +\r\n (this.options.stickyFooter ? '.webcimes-modal__footer--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromFooter ? 'webcimes-modal__footer--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonCancelHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel ' +\r\n (this.options.closeOnCancelButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonCancelHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonConfirmHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm ' +\r\n (this.options.closeOnConfirmButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonConfirmHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t</div>`,\r\n );\r\n this.modal = <HTMLElement>this.modals.lastElementChild;\r\n\r\n // Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n setTimeout(() => {\r\n this.modal.dispatchEvent(new CustomEvent('beforeShow'));\r\n if (typeof this.options.beforeShow === 'function') {\r\n this.options.beforeShow();\r\n }\r\n }, 0);\r\n\r\n // Set animation duration for modal\r\n this.modal.style.setProperty('animation-duration', this.options.animationDuration + 'ms');\r\n\r\n // Delete animation of enter after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove(this.options.animationOnShow);\r\n\r\n // Callback after show modal\r\n this.modal.dispatchEvent(new CustomEvent('afterShow'));\r\n if (typeof this.options.afterShow === 'function') {\r\n this.options.afterShow();\r\n }\r\n }, this.options.animationDuration);\r\n\r\n // Width of modal\r\n this.modal.style.setProperty('max-width', '90%');\r\n if (this.options.width != 'auto' && this.options.width) {\r\n this.modal.style.setProperty('width', this.options.width);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n this.modal.style.setProperty('width', 'max-content');\r\n }\r\n\r\n // Height of modal\r\n this.modal.style.setProperty('max-height', '90%');\r\n if (this.options.height != 'auto' && this.options.height) {\r\n this.modal.style.setProperty('height', this.options.height);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n this.modal.style.setProperty('height', 'max-content');\r\n }\r\n\r\n // Style\r\n if (this.options.style) {\r\n let oldStyle = this.modal.getAttribute('style') ?? '';\r\n this.modal.setAttribute('style', oldStyle + this.options.style);\r\n }\r\n\r\n // Event on cancel button\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.addEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n // Event on confirm button\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.addEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n // Event click outside (on modals)\r\n this.modals.addEventListener('click', this.eventClickOutside);\r\n\r\n // Event close modal when click on close button\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.addEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n // Place selected modal on top\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n // Move modal\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n if (\r\n this.options.moveFromHeader &&\r\n this.modal.querySelector('.webcimes-modal__header')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__header'),\r\n );\r\n }\r\n if (this.options.moveFromBody && this.modal.querySelector('.webcimes-modal__body')) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__body'),\r\n );\r\n }\r\n if (\r\n this.options.moveFromFooter &&\r\n this.modal.querySelector('.webcimes-modal__footer')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__footer'),\r\n );\r\n }\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.addEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.addEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n // When resizing window, reset modal position to center\r\n window.addEventListener('resize', this.eventResize);\r\n }\r\n\r\n /**\r\n * Destroy current modal\r\n */\r\n public destroy() {\r\n // If modal is not already destroying\r\n if (!this.modal.getAttribute('data-destroying')) {\r\n // Callback before destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('beforeDestroy'));\r\n if (typeof this.options.beforeDestroy === 'function') {\r\n this.options.beforeDestroy();\r\n }\r\n\r\n // Close modals (according the number of modal not already destroying)\r\n if (document.querySelectorAll('.webcimes-modal:not([data-destroying])').length == 1) {\r\n this.modals.classList.add('animFadeOut');\r\n }\r\n\r\n // Close modal\r\n this.modal.setAttribute('data-destroying', '1');\r\n this.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n // Destroy all events from modal and remove modals or modal after animation duration\r\n setTimeout(() => {\r\n if (typeof this.modal !== 'undefined') {\r\n // Destroy all events from modal\r\n\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.removeEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.removeEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n this.modals.removeEventListener('click', this.eventClickOutside);\r\n\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.removeEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.removeEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.removeEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n window.removeEventListener('resize', this.eventResize);\r\n\r\n // Remove modals or modal according the number of modal\r\n (document.querySelectorAll('.webcimes-modal').length > 1\r\n ? this.modal\r\n : this.modals\r\n ).remove();\r\n }\r\n\r\n // Callback after destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('afterDestroy'));\r\n if (typeof this.options.afterDestroy === 'function') {\r\n this.options.afterDestroy();\r\n }\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Factory function to create a WebcimesModal instance with proper typing\r\n */\r\nexport function createWebcimesModal(options: Partial<Options>): WebcimesModal {\r\n return new WebcimesModalImpl(options);\r\n}\r\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","WebcimesModalImpl","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","createWebcimesModal"],"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 /** Events */\r\n interface GlobalEventHandlersEventMap {\r\n beforeShow: CustomEvent;\r\n afterShow: CustomEvent;\r\n beforeDestroy: CustomEvent;\r\n afterDestroy: CustomEvent;\r\n onCancelButton: CustomEvent;\r\n onConfirmButton: CustomEvent;\r\n }\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface Options {\r\n /** set a specific id on the modal. default \"null\" */\r\n setId: string | null;\r\n /** set a specific class on the modal, default \"null\" */\r\n setClass: string | null;\r\n /** width (specify unit), default \"auto\" */\r\n width: string;\r\n /** height (specify unit), default \"auto\" */\r\n height: string;\r\n /** html for title, default \"null\" */\r\n titleHtml: string | null;\r\n /** html for body, default \"null\" */\r\n bodyHtml: string | null;\r\n /** html for cancel button, default \"null\" */\r\n buttonCancelHtml: string | null;\r\n /** html for confirm button, default \"null\" */\r\n buttonConfirmHtml: string | null;\r\n /** close modal after trigger cancel button, default \"true\" */\r\n closeOnCancelButton: boolean;\r\n /** close modal after trigger confirm button, default \"true\" */\r\n closeOnConfirmButton: boolean;\r\n /** show close button, default \"true\" */\r\n showCloseButton: boolean;\r\n /** allow the modal to close when clicked outside, default \"true\" */\r\n allowCloseOutside: boolean;\r\n /** ability to move modal, default \"true\" */\r\n allowMovement: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n moveFromHeader: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n moveFromBody: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n moveFromFooter: boolean;\r\n /** keep header sticky (visible) when scrolling, default \"true\" */\r\n stickyHeader: boolean;\r\n /** keep footer sticky (visible) when scrolling, default \"true\" */\r\n stickyFooter: boolean;\r\n /** add extra css style to modal, default null */\r\n style: string | null;\r\n /** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n animationOnShow: 'animDropDown' | 'animFadeIn';\r\n /** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n animationOnDestroy: 'animDropUp' | 'animFadeOut';\r\n /** animation duration in ms, default \"500\" */\r\n animationDuration: number;\r\n /** callback before show modal */\r\n beforeShow: () => void;\r\n /** callback after show modal */\r\n afterShow: () => void;\r\n /** callback before destroy modal */\r\n beforeDestroy: () => void;\r\n /** callback after destroy modal */\r\n afterDestroy: () => void;\r\n /** callback after triggering cancel button */\r\n onCancelButton: () => void;\r\n /** callback after triggering confirm button */\r\n onConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Public interface for WebcimesModal instances\r\n * This represents the actual accessible members of the instance\r\n */\r\nexport interface WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n modals: HTMLElement;\r\n /** Get the dom element of the current modal */\r\n modal: HTMLElement;\r\n /** Destroy the current modal */\r\n destroy(): void;\r\n}\r\n\r\n/**\r\n * WebcimesModal implementation class\r\n */\r\nclass WebcimesModalImpl implements WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n public modals: HTMLElement;\r\n\r\n /** Get the dom element of the current modal */\r\n public modal: HTMLElement;\r\n\r\n /** Options of the current modal */\r\n private options: Options;\r\n\r\n private eventCancelButton: () => void = () => {\r\n // Callback on cancel button\r\n this.modal.dispatchEvent(new CustomEvent('onCancelButton'));\r\n if (typeof this.options.onCancelButton === 'function') {\r\n this.options.onCancelButton();\r\n }\r\n };\r\n\r\n private eventConfirmButton: () => void = () => {\r\n // Callback on confirm button\r\n this.modal.dispatchEvent(new CustomEvent('onConfirmButton'));\r\n if (typeof this.options.onConfirmButton === 'function') {\r\n this.options.onConfirmButton();\r\n }\r\n };\r\n\r\n private eventClickOutside: (e: Event) => void = (e) => {\r\n if (e.target == this.modals) {\r\n if (this.options.allowCloseOutside) {\r\n // Destroy modal\r\n this.destroy();\r\n } else {\r\n // Add animation for show modal who can't be close\r\n this.modal.classList.add('animGrowShrink');\r\n\r\n // Delete animation after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove('animGrowShrink');\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n };\r\n\r\n private eventClickCloseButton: () => void = () => {\r\n // Destroy modal\r\n this.destroy();\r\n };\r\n\r\n private eventDragModalOnTop: (e: Event) => void = (e) => {\r\n // Only if target is not close button (for bug in chrome)\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__close')) {\r\n // If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n if (\r\n document.querySelectorAll('.webcimes-modal').length > 1 &&\r\n this.modal.nextElementSibling !== null\r\n ) {\r\n let oldScrollTop = this.modal.scrollTop;\r\n this.modals.insertAdjacentElement('beforeend', this.modal);\r\n this.modal.scrollTop = oldScrollTop;\r\n }\r\n }\r\n };\r\n\r\n private position: { x: number; y: number };\r\n\r\n private offset: { x: number; y: number };\r\n\r\n private isDragging: boolean = false;\r\n\r\n private moveFromElements: HTMLElement[] = [];\r\n\r\n private eventDragStart: (e: Event) => void = (e) => {\r\n // Start drag only if it's not a button\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__button')) {\r\n this.isDragging = true;\r\n\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n y: this.modal.offsetTop - (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n y: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n }\r\n };\r\n\r\n private eventMove: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.position = {\r\n x: (<MouseEvent>e).clientX,\r\n y: (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.position = {\r\n x: (<TouchEvent>e).touches[0].clientX,\r\n y: (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n this.modal.style.left = this.position.x + this.offset.x + 'px';\r\n this.modal.style.top = this.position.y + this.offset.y + 'px';\r\n }\r\n };\r\n\r\n private eventDragStop: () => void = () => {\r\n this.isDragging = false;\r\n };\r\n\r\n private eventPreventSelectText: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n private eventResize: () => void = () => {\r\n this.modal.style.removeProperty('left');\r\n this.modal.style.removeProperty('top');\r\n };\r\n\r\n /**\r\n * Create modal\r\n */\r\n constructor(options: Partial<Options>) {\r\n // Defaults\r\n const defaults: Options = {\r\n setId: null,\r\n setClass: null,\r\n width: 'auto',\r\n height: 'auto',\r\n titleHtml: null,\r\n bodyHtml: null,\r\n buttonCancelHtml: null,\r\n buttonConfirmHtml: null,\r\n closeOnCancelButton: true,\r\n closeOnConfirmButton: true,\r\n showCloseButton: true,\r\n allowCloseOutside: true,\r\n allowMovement: true,\r\n moveFromHeader: true,\r\n moveFromBody: false,\r\n moveFromFooter: true,\r\n stickyHeader: true,\r\n stickyFooter: true,\r\n style: null,\r\n animationOnShow: 'animDropDown',\r\n animationOnDestroy: 'animDropUp',\r\n animationDuration: 500,\r\n beforeShow: () => {},\r\n afterShow: () => {},\r\n beforeDestroy: () => {},\r\n afterDestroy: () => {},\r\n onCancelButton: () => {},\r\n onConfirmButton: () => {},\r\n };\r\n this.options = { ...defaults, ...options };\r\n\r\n // Call init method\r\n this.init();\r\n }\r\n\r\n /**\r\n * Initialization of the current modal\r\n */\r\n private init() {\r\n // Create modals\r\n if (!document.querySelector('.webcimes-modals')) {\r\n // Create modals\r\n document.body.insertAdjacentHTML(\r\n 'beforeend',\r\n '<div class=\"webcimes-modals animFadeIn\"></div>',\r\n );\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Set animation duration for modals\r\n this.modals.style.setProperty(\r\n 'animation-duration',\r\n this.options.animationDuration + 'ms',\r\n );\r\n\r\n // Delete enter animation after animation delay\r\n setTimeout(() => {\r\n this.modals.classList.remove('animFadeIn');\r\n }, this.options.animationDuration);\r\n } else {\r\n // Get modals\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n this.modals.classList.remove('animFadeOut');\r\n }\r\n\r\n // Create modal\r\n this.modals.insertAdjacentHTML(\r\n 'beforeend',\r\n `<div class=\"webcimes-modal ` +\r\n (this.options.setClass ? this.options.setClass : '') +\r\n ` ` +\r\n this.options.animationOnShow +\r\n `\" ` +\r\n (this.options.setId ? 'id=\"' + this.options.setId + '\"' : '') +\r\n `>\r\n\t\t\t\t` +\r\n (this.options.titleHtml || this.options.showCloseButton\r\n ? `<div class=\"webcimes-modal__header ` +\r\n (this.options.stickyHeader ? 'webcimes-modal__header--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromHeader ? 'webcimes-modal__header--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.titleHtml\r\n ? '<div class=\"webcimes-modal__title\">' +\r\n this.options.titleHtml +\r\n '</div>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.showCloseButton\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__close\"></button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.bodyHtml\r\n ? `<div class=\"webcimes-modal__body ` +\r\n (this.options.moveFromBody ? '.webcimes-modal__body--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n this.options.bodyHtml +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.buttonCancelHtml || this.options.buttonConfirmHtml\r\n ? `<div class=\"webcimes-modal__footer ` +\r\n (this.options.stickyFooter ? '.webcimes-modal__footer--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromFooter ? 'webcimes-modal__footer--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonCancelHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel ' +\r\n (this.options.closeOnCancelButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonCancelHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonConfirmHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm ' +\r\n (this.options.closeOnConfirmButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonConfirmHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t</div>`,\r\n );\r\n this.modal = <HTMLElement>this.modals.lastElementChild;\r\n\r\n // Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n setTimeout(() => {\r\n this.modal.dispatchEvent(new CustomEvent('beforeShow'));\r\n if (typeof this.options.beforeShow === 'function') {\r\n this.options.beforeShow();\r\n }\r\n }, 0);\r\n\r\n // Set animation duration for modal\r\n this.modal.style.setProperty('animation-duration', this.options.animationDuration + 'ms');\r\n\r\n // Delete animation of enter after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove(this.options.animationOnShow);\r\n\r\n // Callback after show modal\r\n this.modal.dispatchEvent(new CustomEvent('afterShow'));\r\n if (typeof this.options.afterShow === 'function') {\r\n this.options.afterShow();\r\n }\r\n }, this.options.animationDuration);\r\n\r\n // Width of modal\r\n this.modal.style.setProperty('max-width', '90%');\r\n if (this.options.width != 'auto' && this.options.width) {\r\n this.modal.style.setProperty('width', this.options.width);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n this.modal.style.setProperty('width', 'max-content');\r\n }\r\n\r\n // Height of modal\r\n this.modal.style.setProperty('max-height', '90%');\r\n if (this.options.height != 'auto' && this.options.height) {\r\n this.modal.style.setProperty('height', this.options.height);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n this.modal.style.setProperty('height', 'max-content');\r\n }\r\n\r\n // Style\r\n if (this.options.style) {\r\n let oldStyle = this.modal.getAttribute('style') ?? '';\r\n this.modal.setAttribute('style', oldStyle + this.options.style);\r\n }\r\n\r\n // Event on cancel button\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.addEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n // Event on confirm button\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.addEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n // Event click outside (on modals)\r\n this.modals.addEventListener('click', this.eventClickOutside);\r\n\r\n // Event close modal when click on close button\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.addEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n // Place selected modal on top\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n // Move modal\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n if (\r\n this.options.moveFromHeader &&\r\n this.modal.querySelector('.webcimes-modal__header')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__header'),\r\n );\r\n }\r\n if (this.options.moveFromBody && this.modal.querySelector('.webcimes-modal__body')) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__body'),\r\n );\r\n }\r\n if (\r\n this.options.moveFromFooter &&\r\n this.modal.querySelector('.webcimes-modal__footer')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__footer'),\r\n );\r\n }\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.addEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.addEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n // When resizing window, reset modal position to center\r\n window.addEventListener('resize', this.eventResize);\r\n }\r\n\r\n /**\r\n * Destroy current modal\r\n */\r\n public destroy() {\r\n // If modal is not already destroying\r\n if (!this.modal.getAttribute('data-destroying')) {\r\n // Callback before destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('beforeDestroy'));\r\n if (typeof this.options.beforeDestroy === 'function') {\r\n this.options.beforeDestroy();\r\n }\r\n\r\n // Close modals (according the number of modal not already destroying)\r\n if (document.querySelectorAll('.webcimes-modal:not([data-destroying])').length == 1) {\r\n this.modals.classList.add('animFadeOut');\r\n }\r\n\r\n // Close modal\r\n this.modal.setAttribute('data-destroying', '1');\r\n this.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n // Destroy all events from modal and remove modals or modal after animation duration\r\n setTimeout(() => {\r\n if (typeof this.modal !== 'undefined') {\r\n // Destroy all events from modal\r\n\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.removeEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.removeEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n this.modals.removeEventListener('click', this.eventClickOutside);\r\n\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.removeEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.removeEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.removeEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n window.removeEventListener('resize', this.eventResize);\r\n\r\n // Remove modals or modal according the number of modal\r\n (document.querySelectorAll('.webcimes-modal').length > 1\r\n ? this.modal\r\n : this.modals\r\n ).remove();\r\n }\r\n\r\n // Callback after destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('afterDestroy'));\r\n if (typeof this.options.afterDestroy === 'function') {\r\n this.options.afterDestroy();\r\n }\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Factory function to create a WebcimesModal instance with proper typing\r\n */\r\nexport function CreateWebcimesModal(options: Partial<Options>): WebcimesModal {\r\n return new WebcimesModalImpl(options);\r\n}\r\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","WebcimesModalImpl","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","CreateWebcimesModal"],"sourceRoot":""}
package/dist/js/webcimes-modal.udm.d.ts CHANGED
@@ -93,5 +93,5 @@ export interface WebcimesModal {
93
93
  /**
94
94
  * Factory function to create a WebcimesModal instance with proper typing
95
95
  */
96
- export declare function createWebcimesModal(options: Partial<Options>): WebcimesModal;
96
+ export declare function CreateWebcimesModal(options: Partial<Options>): WebcimesModal;
97
97
  //# sourceMappingURL=webcimes-modal.d.ts.map
package/dist/js/webcimes-modal.udm.js CHANGED
@@ -1,2 +1,2 @@
1
- !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var s in o)("object"==typeof exports?exports:t)[s]=o[s]}}(self,(()=>(()=>{"use strict";var t={d:(e,o)=>{for(var s in o)t.o(o,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{createWebcimesModal:()=>s});class o{modals;modal;options;eventCancelButton=()=>{this.modal.dispatchEvent(new CustomEvent("onCancelButton")),"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{this.modal.dispatchEvent(new CustomEvent("onConfirmButton")),"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.modals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".webcimes-modal__close")&&document.querySelectorAll(".webcimes-modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.modals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest(".webcimes-modal__button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimes-modals")?(this.modals=document.querySelector(".webcimes-modals"),this.modals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimes-modals animFadeIn"></div>'),this.modals=document.querySelector(".webcimes-modals"),this.modals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.modals.insertAdjacentHTML("beforeend",'<div class="webcimes-modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="webcimes-modal__header '+(this.options.stickyHeader?"webcimes-modal__header--is-sticky":"")+" "+(this.options.moveFromHeader?"webcimes-modal__header--is-movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="webcimes-modal__title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="webcimes-modal__body '+(this.options.moveFromBody?".webcimes-modal__body--is-movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="webcimes-modal__footer '+(this.options.stickyFooter?".webcimes-modal__footer--is-sticky":"")+" "+(this.options.moveFromFooter?"webcimes-modal__footer--is-movable":"")+'">\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>":"")+"\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>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.modals.lastElementChild,setTimeout((()=>{this.modal.dispatchEvent(new CustomEvent("beforeShow")),"function"==typeof this.options.beforeShow&&this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),this.modal.dispatchEvent(new CustomEvent("afterShow")),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style")??"";this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.addEventListener("click",this.eventConfirmButton),this.modals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".webcimes-modal__header")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__header")),this.options.moveFromBody&&this.modal.querySelector(".webcimes-modal__body")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__body")),this.options.moveFromFooter&&this.modal.querySelector(".webcimes-modal__footer")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__footer")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((e=>{e.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||(this.modal.dispatchEvent(new CustomEvent("beforeDestroy")),"function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".webcimes-modal:not([data-destroying])").length&&this.modals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.removeEventListener("click",this.eventConfirmButton),this.modals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((e=>{e.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".webcimes-modal").length>1?this.modal:this.modals).remove()),this.modal.dispatchEvent(new CustomEvent("afterDestroy")),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}function s(t){return new o(t)}return e})()));
1
+ !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o=e();for(var s in o)("object"==typeof exports?exports:t)[s]=o[s]}}(self,(()=>(()=>{"use strict";var t={d:(e,o)=>{for(var s in o)t.o(o,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{CreateWebcimesModal:()=>s});class o{modals;modal;options;eventCancelButton=()=>{this.modal.dispatchEvent(new CustomEvent("onCancelButton")),"function"==typeof this.options.onCancelButton&&this.options.onCancelButton()};eventConfirmButton=()=>{this.modal.dispatchEvent(new CustomEvent("onConfirmButton")),"function"==typeof this.options.onConfirmButton&&this.options.onConfirmButton()};eventClickOutside=t=>{t.target==this.modals&&(this.options.allowCloseOutside?this.destroy():(this.modal.classList.add("animGrowShrink"),setTimeout((()=>{this.modal.classList.remove("animGrowShrink")}),this.options.animationDuration)))};eventClickCloseButton=()=>{this.destroy()};eventDragModalOnTop=t=>{if(!t.target.closest(".webcimes-modal__close")&&document.querySelectorAll(".webcimes-modal").length>1&&null!==this.modal.nextElementSibling){let t=this.modal.scrollTop;this.modals.insertAdjacentElement("beforeend",this.modal),this.modal.scrollTop=t}};position;offset;isDragging=!1;moveFromElements=[];eventDragStart=t=>{t.target.closest(".webcimes-modal__button")||(this.isDragging=!0,t.clientX?this.offset={x:this.modal.offsetLeft-t.clientX,y:this.modal.offsetTop-t.clientY}:t.touches&&(this.offset={x:this.modal.offsetLeft-t.touches[0].clientX,y:this.modal.offsetTop-t.touches[0].clientY}))};eventMove=t=>{this.isDragging&&(t.clientX?this.position={x:t.clientX,y:t.clientY}:t.touches&&(this.position={x:t.touches[0].clientX,y:t.touches[0].clientY}),this.modal.style.left=this.position.x+this.offset.x+"px",this.modal.style.top=this.position.y+this.offset.y+"px")};eventDragStop=()=>{this.isDragging=!1};eventPreventSelectText=t=>{this.isDragging&&t.preventDefault()};eventResize=()=>{this.modal.style.removeProperty("left"),this.modal.style.removeProperty("top")};constructor(t){this.options={setId:null,setClass:null,width:"auto",height:"auto",titleHtml:null,bodyHtml:null,buttonCancelHtml:null,buttonConfirmHtml:null,closeOnCancelButton:!0,closeOnConfirmButton:!0,showCloseButton:!0,allowCloseOutside:!0,allowMovement:!0,moveFromHeader:!0,moveFromBody:!1,moveFromFooter:!0,stickyHeader:!0,stickyFooter:!0,style:null,animationOnShow:"animDropDown",animationOnDestroy:"animDropUp",animationDuration:500,beforeShow:()=>{},afterShow:()=>{},beforeDestroy:()=>{},afterDestroy:()=>{},onCancelButton:()=>{},onConfirmButton:()=>{},...t},this.init()}init(){if(document.querySelector(".webcimes-modals")?(this.modals=document.querySelector(".webcimes-modals"),this.modals.classList.remove("animFadeOut")):(document.body.insertAdjacentHTML("beforeend",'<div class="webcimes-modals animFadeIn"></div>'),this.modals=document.querySelector(".webcimes-modals"),this.modals.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modals.classList.remove("animFadeIn")}),this.options.animationDuration)),this.modals.insertAdjacentHTML("beforeend",'<div class="webcimes-modal '+(this.options.setClass?this.options.setClass:"")+" "+this.options.animationOnShow+'" '+(this.options.setId?'id="'+this.options.setId+'"':"")+">\n\t\t\t\t"+(this.options.titleHtml||this.options.showCloseButton?'<div class="webcimes-modal__header '+(this.options.stickyHeader?"webcimes-modal__header--is-sticky":"")+" "+(this.options.moveFromHeader?"webcimes-modal__header--is-movable":"")+'">\n\t\t\t\t\t\t'+(this.options.titleHtml?'<div class="webcimes-modal__title">'+this.options.titleHtml+"</div>":"")+"\n\t\t\t\t\t\t"+(this.options.showCloseButton?'<button class="webcimes-modal__button webcimes-modal__header-close webcimes-modal__close"></button>':"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.bodyHtml?'<div class="webcimes-modal__body '+(this.options.moveFromBody?".webcimes-modal__body--is-movable":"")+'">\n\t\t\t\t\t\t'+this.options.bodyHtml+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t\t"+(this.options.buttonCancelHtml||this.options.buttonConfirmHtml?'<div class="webcimes-modal__footer '+(this.options.stickyFooter?".webcimes-modal__footer--is-sticky":"")+" "+(this.options.moveFromFooter?"webcimes-modal__footer--is-movable":"")+'">\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>":"")+"\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>":"")+"\n\t\t\t\t\t</div>":"")+"\n\t\t\t</div>"),this.modal=this.modals.lastElementChild,setTimeout((()=>{this.modal.dispatchEvent(new CustomEvent("beforeShow")),"function"==typeof this.options.beforeShow&&this.options.beforeShow()}),0),this.modal.style.setProperty("animation-duration",this.options.animationDuration+"ms"),setTimeout((()=>{this.modal.classList.remove(this.options.animationOnShow),this.modal.dispatchEvent(new CustomEvent("afterShow")),"function"==typeof this.options.afterShow&&this.options.afterShow()}),this.options.animationDuration),this.modal.style.setProperty("max-width","90%"),"auto"!=this.options.width&&this.options.width?this.modal.style.setProperty("width",this.options.width):this.modal.style.setProperty("width","max-content"),this.modal.style.setProperty("max-height","90%"),"auto"!=this.options.height&&this.options.height?this.modal.style.setProperty("height",this.options.height):this.modal.style.setProperty("height","max-content"),this.options.style){let t=this.modal.getAttribute("style")??"";this.modal.setAttribute("style",t+this.options.style)}this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.addEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.addEventListener("click",this.eventConfirmButton),this.modals.addEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.addEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.addEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(this.options.moveFromHeader&&this.modal.querySelector(".webcimes-modal__header")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__header")),this.options.moveFromBody&&this.modal.querySelector(".webcimes-modal__body")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__body")),this.options.moveFromFooter&&this.modal.querySelector(".webcimes-modal__footer")&&this.moveFromElements.push(this.modal.querySelector(".webcimes-modal__footer")),["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((e=>{e.addEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.addEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.addEventListener(t,this.eventDragStop)})),document.addEventListener("selectstart",this.eventPreventSelectText)),window.addEventListener("resize",this.eventResize)}destroy(){this.modal.getAttribute("data-destroying")||(this.modal.dispatchEvent(new CustomEvent("beforeDestroy")),"function"==typeof this.options.beforeDestroy&&this.options.beforeDestroy(),1==document.querySelectorAll(".webcimes-modal:not([data-destroying])").length&&this.modals.classList.add("animFadeOut"),this.modal.setAttribute("data-destroying","1"),this.modal.classList.add(this.options.animationOnDestroy),setTimeout((()=>{void 0!==this.modal&&(this.options.buttonCancelHtml&&this.modal.querySelector(".webcimes-modal__footer-button--cancel")?.removeEventListener("click",this.eventCancelButton),this.options.buttonConfirmHtml&&this.modal.querySelector(".webcimes-modal__footer-button--confirm")?.removeEventListener("click",this.eventConfirmButton),this.modals.removeEventListener("click",this.eventClickOutside),this.modal.querySelectorAll(".webcimes-modal__close").forEach((t=>{t.removeEventListener("click",this.eventClickCloseButton)})),["mousedown","touchstart"].forEach((t=>{this.modal.removeEventListener(t,this.eventDragModalOnTop)})),this.options.allowMovement&&(this.options.moveFromHeader||this.options.moveFromBody||this.options.moveFromFooter)&&(["mousedown","touchstart"].forEach((t=>{this.moveFromElements.forEach((e=>{e.removeEventListener(t,this.eventDragStart)}))})),["mousemove","touchmove"].forEach((t=>{document.removeEventListener(t,this.eventMove)})),["mouseup","touchend"].forEach((t=>{document.removeEventListener(t,this.eventDragStop)})),document.removeEventListener("selectstart",this.eventPreventSelectText)),window.removeEventListener("resize",this.eventResize),(document.querySelectorAll(".webcimes-modal").length>1?this.modal:this.modals).remove()),this.modal.dispatchEvent(new CustomEvent("afterDestroy")),"function"==typeof this.options.afterDestroy&&this.options.afterDestroy()}),this.options.animationDuration))}}function s(t){return new o(t)}return e})()));
2
2
  //# sourceMappingURL=webcimes-modal.udm.js.map
package/dist/js/webcimes-modal.udm.js.map CHANGED
@@ -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 /** Events */\r\n interface GlobalEventHandlersEventMap {\r\n beforeShow: CustomEvent;\r\n afterShow: CustomEvent;\r\n beforeDestroy: CustomEvent;\r\n afterDestroy: CustomEvent;\r\n onCancelButton: CustomEvent;\r\n onConfirmButton: CustomEvent;\r\n }\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface Options {\r\n /** set a specific id on the modal. default \"null\" */\r\n setId: string | null;\r\n /** set a specific class on the modal, default \"null\" */\r\n setClass: string | null;\r\n /** width (specify unit), default \"auto\" */\r\n width: string;\r\n /** height (specify unit), default \"auto\" */\r\n height: string;\r\n /** html for title, default \"null\" */\r\n titleHtml: string | null;\r\n /** html for body, default \"null\" */\r\n bodyHtml: string | null;\r\n /** html for cancel button, default \"null\" */\r\n buttonCancelHtml: string | null;\r\n /** html for confirm button, default \"null\" */\r\n buttonConfirmHtml: string | null;\r\n /** close modal after trigger cancel button, default \"true\" */\r\n closeOnCancelButton: boolean;\r\n /** close modal after trigger confirm button, default \"true\" */\r\n closeOnConfirmButton: boolean;\r\n /** show close button, default \"true\" */\r\n showCloseButton: boolean;\r\n /** allow the modal to close when clicked outside, default \"true\" */\r\n allowCloseOutside: boolean;\r\n /** ability to move modal, default \"true\" */\r\n allowMovement: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n moveFromHeader: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n moveFromBody: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n moveFromFooter: boolean;\r\n /** keep header sticky (visible) when scrolling, default \"true\" */\r\n stickyHeader: boolean;\r\n /** keep footer sticky (visible) when scrolling, default \"true\" */\r\n stickyFooter: boolean;\r\n /** add extra css style to modal, default null */\r\n style: string | null;\r\n /** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n animationOnShow: 'animDropDown' | 'animFadeIn';\r\n /** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n animationOnDestroy: 'animDropUp' | 'animFadeOut';\r\n /** animation duration in ms, default \"500\" */\r\n animationDuration: number;\r\n /** callback before show modal */\r\n beforeShow: () => void;\r\n /** callback after show modal */\r\n afterShow: () => void;\r\n /** callback before destroy modal */\r\n beforeDestroy: () => void;\r\n /** callback after destroy modal */\r\n afterDestroy: () => void;\r\n /** callback after triggering cancel button */\r\n onCancelButton: () => void;\r\n /** callback after triggering confirm button */\r\n onConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Public interface for WebcimesModal instances\r\n * This represents the actual accessible members of the instance\r\n */\r\nexport interface WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n modals: HTMLElement;\r\n /** Get the dom element of the current modal */\r\n modal: HTMLElement;\r\n /** Destroy the current modal */\r\n destroy(): void;\r\n}\r\n\r\n/**\r\n * WebcimesModal implementation class\r\n */\r\nclass WebcimesModalImpl implements WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n public modals: HTMLElement;\r\n\r\n /** Get the dom element of the current modal */\r\n public modal: HTMLElement;\r\n\r\n /** Options of the current modal */\r\n private options: Options;\r\n\r\n private eventCancelButton: () => void = () => {\r\n // Callback on cancel button\r\n this.modal.dispatchEvent(new CustomEvent('onCancelButton'));\r\n if (typeof this.options.onCancelButton === 'function') {\r\n this.options.onCancelButton();\r\n }\r\n };\r\n\r\n private eventConfirmButton: () => void = () => {\r\n // Callback on confirm button\r\n this.modal.dispatchEvent(new CustomEvent('onConfirmButton'));\r\n if (typeof this.options.onConfirmButton === 'function') {\r\n this.options.onConfirmButton();\r\n }\r\n };\r\n\r\n private eventClickOutside: (e: Event) => void = (e) => {\r\n if (e.target == this.modals) {\r\n if (this.options.allowCloseOutside) {\r\n // Destroy modal\r\n this.destroy();\r\n } else {\r\n // Add animation for show modal who can't be close\r\n this.modal.classList.add('animGrowShrink');\r\n\r\n // Delete animation after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove('animGrowShrink');\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n };\r\n\r\n private eventClickCloseButton: () => void = () => {\r\n // Destroy modal\r\n this.destroy();\r\n };\r\n\r\n private eventDragModalOnTop: (e: Event) => void = (e) => {\r\n // Only if target is not close button (for bug in chrome)\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__close')) {\r\n // If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n if (\r\n document.querySelectorAll('.webcimes-modal').length > 1 &&\r\n this.modal.nextElementSibling !== null\r\n ) {\r\n let oldScrollTop = this.modal.scrollTop;\r\n this.modals.insertAdjacentElement('beforeend', this.modal);\r\n this.modal.scrollTop = oldScrollTop;\r\n }\r\n }\r\n };\r\n\r\n private position: { x: number; y: number };\r\n\r\n private offset: { x: number; y: number };\r\n\r\n private isDragging: boolean = false;\r\n\r\n private moveFromElements: HTMLElement[] = [];\r\n\r\n private eventDragStart: (e: Event) => void = (e) => {\r\n // Start drag only if it's not a button\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__button')) {\r\n this.isDragging = true;\r\n\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n y: this.modal.offsetTop - (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n y: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n }\r\n };\r\n\r\n private eventMove: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.position = {\r\n x: (<MouseEvent>e).clientX,\r\n y: (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.position = {\r\n x: (<TouchEvent>e).touches[0].clientX,\r\n y: (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n this.modal.style.left = this.position.x + this.offset.x + 'px';\r\n this.modal.style.top = this.position.y + this.offset.y + 'px';\r\n }\r\n };\r\n\r\n private eventDragStop: () => void = () => {\r\n this.isDragging = false;\r\n };\r\n\r\n private eventPreventSelectText: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n private eventResize: () => void = () => {\r\n this.modal.style.removeProperty('left');\r\n this.modal.style.removeProperty('top');\r\n };\r\n\r\n /**\r\n * Create modal\r\n */\r\n constructor(options: Partial<Options>) {\r\n // Defaults\r\n const defaults: Options = {\r\n setId: null,\r\n setClass: null,\r\n width: 'auto',\r\n height: 'auto',\r\n titleHtml: null,\r\n bodyHtml: null,\r\n buttonCancelHtml: null,\r\n buttonConfirmHtml: null,\r\n closeOnCancelButton: true,\r\n closeOnConfirmButton: true,\r\n showCloseButton: true,\r\n allowCloseOutside: true,\r\n allowMovement: true,\r\n moveFromHeader: true,\r\n moveFromBody: false,\r\n moveFromFooter: true,\r\n stickyHeader: true,\r\n stickyFooter: true,\r\n style: null,\r\n animationOnShow: 'animDropDown',\r\n animationOnDestroy: 'animDropUp',\r\n animationDuration: 500,\r\n beforeShow: () => {},\r\n afterShow: () => {},\r\n beforeDestroy: () => {},\r\n afterDestroy: () => {},\r\n onCancelButton: () => {},\r\n onConfirmButton: () => {},\r\n };\r\n this.options = { ...defaults, ...options };\r\n\r\n // Call init method\r\n this.init();\r\n }\r\n\r\n /**\r\n * Initialization of the current modal\r\n */\r\n private init() {\r\n // Create modals\r\n if (!document.querySelector('.webcimes-modals')) {\r\n // Create modals\r\n document.body.insertAdjacentHTML(\r\n 'beforeend',\r\n '<div class=\"webcimes-modals animFadeIn\"></div>',\r\n );\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Set animation duration for modals\r\n this.modals.style.setProperty(\r\n 'animation-duration',\r\n this.options.animationDuration + 'ms',\r\n );\r\n\r\n // Delete enter animation after animation delay\r\n setTimeout(() => {\r\n this.modals.classList.remove('animFadeIn');\r\n }, this.options.animationDuration);\r\n } else {\r\n // Get modals\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n this.modals.classList.remove('animFadeOut');\r\n }\r\n\r\n // Create modal\r\n this.modals.insertAdjacentHTML(\r\n 'beforeend',\r\n `<div class=\"webcimes-modal ` +\r\n (this.options.setClass ? this.options.setClass : '') +\r\n ` ` +\r\n this.options.animationOnShow +\r\n `\" ` +\r\n (this.options.setId ? 'id=\"' + this.options.setId + '\"' : '') +\r\n `>\r\n\t\t\t\t` +\r\n (this.options.titleHtml || this.options.showCloseButton\r\n ? `<div class=\"webcimes-modal__header ` +\r\n (this.options.stickyHeader ? 'webcimes-modal__header--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromHeader ? 'webcimes-modal__header--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.titleHtml\r\n ? '<div class=\"webcimes-modal__title\">' +\r\n this.options.titleHtml +\r\n '</div>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.showCloseButton\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__close\"></button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.bodyHtml\r\n ? `<div class=\"webcimes-modal__body ` +\r\n (this.options.moveFromBody ? '.webcimes-modal__body--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n this.options.bodyHtml +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.buttonCancelHtml || this.options.buttonConfirmHtml\r\n ? `<div class=\"webcimes-modal__footer ` +\r\n (this.options.stickyFooter ? '.webcimes-modal__footer--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromFooter ? 'webcimes-modal__footer--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonCancelHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel ' +\r\n (this.options.closeOnCancelButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonCancelHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonConfirmHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm ' +\r\n (this.options.closeOnConfirmButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonConfirmHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t</div>`,\r\n );\r\n this.modal = <HTMLElement>this.modals.lastElementChild;\r\n\r\n // Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n setTimeout(() => {\r\n this.modal.dispatchEvent(new CustomEvent('beforeShow'));\r\n if (typeof this.options.beforeShow === 'function') {\r\n this.options.beforeShow();\r\n }\r\n }, 0);\r\n\r\n // Set animation duration for modal\r\n this.modal.style.setProperty('animation-duration', this.options.animationDuration + 'ms');\r\n\r\n // Delete animation of enter after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove(this.options.animationOnShow);\r\n\r\n // Callback after show modal\r\n this.modal.dispatchEvent(new CustomEvent('afterShow'));\r\n if (typeof this.options.afterShow === 'function') {\r\n this.options.afterShow();\r\n }\r\n }, this.options.animationDuration);\r\n\r\n // Width of modal\r\n this.modal.style.setProperty('max-width', '90%');\r\n if (this.options.width != 'auto' && this.options.width) {\r\n this.modal.style.setProperty('width', this.options.width);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n this.modal.style.setProperty('width', 'max-content');\r\n }\r\n\r\n // Height of modal\r\n this.modal.style.setProperty('max-height', '90%');\r\n if (this.options.height != 'auto' && this.options.height) {\r\n this.modal.style.setProperty('height', this.options.height);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n this.modal.style.setProperty('height', 'max-content');\r\n }\r\n\r\n // Style\r\n if (this.options.style) {\r\n let oldStyle = this.modal.getAttribute('style') ?? '';\r\n this.modal.setAttribute('style', oldStyle + this.options.style);\r\n }\r\n\r\n // Event on cancel button\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.addEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n // Event on confirm button\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.addEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n // Event click outside (on modals)\r\n this.modals.addEventListener('click', this.eventClickOutside);\r\n\r\n // Event close modal when click on close button\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.addEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n // Place selected modal on top\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n // Move modal\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n if (\r\n this.options.moveFromHeader &&\r\n this.modal.querySelector('.webcimes-modal__header')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__header'),\r\n );\r\n }\r\n if (this.options.moveFromBody && this.modal.querySelector('.webcimes-modal__body')) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__body'),\r\n );\r\n }\r\n if (\r\n this.options.moveFromFooter &&\r\n this.modal.querySelector('.webcimes-modal__footer')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__footer'),\r\n );\r\n }\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.addEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.addEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n // When resizing window, reset modal position to center\r\n window.addEventListener('resize', this.eventResize);\r\n }\r\n\r\n /**\r\n * Destroy current modal\r\n */\r\n public destroy() {\r\n // If modal is not already destroying\r\n if (!this.modal.getAttribute('data-destroying')) {\r\n // Callback before destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('beforeDestroy'));\r\n if (typeof this.options.beforeDestroy === 'function') {\r\n this.options.beforeDestroy();\r\n }\r\n\r\n // Close modals (according the number of modal not already destroying)\r\n if (document.querySelectorAll('.webcimes-modal:not([data-destroying])').length == 1) {\r\n this.modals.classList.add('animFadeOut');\r\n }\r\n\r\n // Close modal\r\n this.modal.setAttribute('data-destroying', '1');\r\n this.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n // Destroy all events from modal and remove modals or modal after animation duration\r\n setTimeout(() => {\r\n if (typeof this.modal !== 'undefined') {\r\n // Destroy all events from modal\r\n\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.removeEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.removeEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n this.modals.removeEventListener('click', this.eventClickOutside);\r\n\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.removeEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.removeEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.removeEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n window.removeEventListener('resize', this.eventResize);\r\n\r\n // Remove modals or modal according the number of modal\r\n (document.querySelectorAll('.webcimes-modal').length > 1\r\n ? this.modal\r\n : this.modals\r\n ).remove();\r\n }\r\n\r\n // Callback after destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('afterDestroy'));\r\n if (typeof this.options.afterDestroy === 'function') {\r\n this.options.afterDestroy();\r\n }\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Factory function to create a WebcimesModal instance with proper typing\r\n */\r\nexport function createWebcimesModal(options: Partial<Options>): WebcimesModal {\r\n return new WebcimesModalImpl(options);\r\n}\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","WebcimesModalImpl","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","createWebcimesModal"],"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 /** Events */\r\n interface GlobalEventHandlersEventMap {\r\n beforeShow: CustomEvent;\r\n afterShow: CustomEvent;\r\n beforeDestroy: CustomEvent;\r\n afterDestroy: CustomEvent;\r\n onCancelButton: CustomEvent;\r\n onConfirmButton: CustomEvent;\r\n }\r\n}\r\n\r\n/**\r\n * Options\r\n */\r\nexport interface Options {\r\n /** set a specific id on the modal. default \"null\" */\r\n setId: string | null;\r\n /** set a specific class on the modal, default \"null\" */\r\n setClass: string | null;\r\n /** width (specify unit), default \"auto\" */\r\n width: string;\r\n /** height (specify unit), default \"auto\" */\r\n height: string;\r\n /** html for title, default \"null\" */\r\n titleHtml: string | null;\r\n /** html for body, default \"null\" */\r\n bodyHtml: string | null;\r\n /** html for cancel button, default \"null\" */\r\n buttonCancelHtml: string | null;\r\n /** html for confirm button, default \"null\" */\r\n buttonConfirmHtml: string | null;\r\n /** close modal after trigger cancel button, default \"true\" */\r\n closeOnCancelButton: boolean;\r\n /** close modal after trigger confirm button, default \"true\" */\r\n closeOnConfirmButton: boolean;\r\n /** show close button, default \"true\" */\r\n showCloseButton: boolean;\r\n /** allow the modal to close when clicked outside, default \"true\" */\r\n allowCloseOutside: boolean;\r\n /** ability to move modal, default \"true\" */\r\n allowMovement: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from header, default \"true\" */\r\n moveFromHeader: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from body, default \"false\" */\r\n moveFromBody: boolean;\r\n /** if allowMovement is set to \"true\", ability to move modal from footer, default \"true\" */\r\n moveFromFooter: boolean;\r\n /** keep header sticky (visible) when scrolling, default \"true\" */\r\n stickyHeader: boolean;\r\n /** keep footer sticky (visible) when scrolling, default \"true\" */\r\n stickyFooter: boolean;\r\n /** add extra css style to modal, default null */\r\n style: string | null;\r\n /** \"animDropDown\" or \"animFadeIn\" for show animation, default \"animDropDown\" */\r\n animationOnShow: 'animDropDown' | 'animFadeIn';\r\n /** \"animDropUp\" or \"animFadeOut\" for destroy animation, default \"animDropUp\" */\r\n animationOnDestroy: 'animDropUp' | 'animFadeOut';\r\n /** animation duration in ms, default \"500\" */\r\n animationDuration: number;\r\n /** callback before show modal */\r\n beforeShow: () => void;\r\n /** callback after show modal */\r\n afterShow: () => void;\r\n /** callback before destroy modal */\r\n beforeDestroy: () => void;\r\n /** callback after destroy modal */\r\n afterDestroy: () => void;\r\n /** callback after triggering cancel button */\r\n onCancelButton: () => void;\r\n /** callback after triggering confirm button */\r\n onConfirmButton: () => void;\r\n}\r\n\r\n/**\r\n * Public interface for WebcimesModal instances\r\n * This represents the actual accessible members of the instance\r\n */\r\nexport interface WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n modals: HTMLElement;\r\n /** Get the dom element of the current modal */\r\n modal: HTMLElement;\r\n /** Destroy the current modal */\r\n destroy(): void;\r\n}\r\n\r\n/**\r\n * WebcimesModal implementation class\r\n */\r\nclass WebcimesModalImpl implements WebcimesModal {\r\n /** Get the dom element containing all modals */\r\n public modals: HTMLElement;\r\n\r\n /** Get the dom element of the current modal */\r\n public modal: HTMLElement;\r\n\r\n /** Options of the current modal */\r\n private options: Options;\r\n\r\n private eventCancelButton: () => void = () => {\r\n // Callback on cancel button\r\n this.modal.dispatchEvent(new CustomEvent('onCancelButton'));\r\n if (typeof this.options.onCancelButton === 'function') {\r\n this.options.onCancelButton();\r\n }\r\n };\r\n\r\n private eventConfirmButton: () => void = () => {\r\n // Callback on confirm button\r\n this.modal.dispatchEvent(new CustomEvent('onConfirmButton'));\r\n if (typeof this.options.onConfirmButton === 'function') {\r\n this.options.onConfirmButton();\r\n }\r\n };\r\n\r\n private eventClickOutside: (e: Event) => void = (e) => {\r\n if (e.target == this.modals) {\r\n if (this.options.allowCloseOutside) {\r\n // Destroy modal\r\n this.destroy();\r\n } else {\r\n // Add animation for show modal who can't be close\r\n this.modal.classList.add('animGrowShrink');\r\n\r\n // Delete animation after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove('animGrowShrink');\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n };\r\n\r\n private eventClickCloseButton: () => void = () => {\r\n // Destroy modal\r\n this.destroy();\r\n };\r\n\r\n private eventDragModalOnTop: (e: Event) => void = (e) => {\r\n // Only if target is not close button (for bug in chrome)\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__close')) {\r\n // If multiple modal, and modal not already on top (no next sibling), we place the current modal on the top\r\n if (\r\n document.querySelectorAll('.webcimes-modal').length > 1 &&\r\n this.modal.nextElementSibling !== null\r\n ) {\r\n let oldScrollTop = this.modal.scrollTop;\r\n this.modals.insertAdjacentElement('beforeend', this.modal);\r\n this.modal.scrollTop = oldScrollTop;\r\n }\r\n }\r\n };\r\n\r\n private position: { x: number; y: number };\r\n\r\n private offset: { x: number; y: number };\r\n\r\n private isDragging: boolean = false;\r\n\r\n private moveFromElements: HTMLElement[] = [];\r\n\r\n private eventDragStart: (e: Event) => void = (e) => {\r\n // Start drag only if it's not a button\r\n if (!(<HTMLElement>e.target).closest('.webcimes-modal__button')) {\r\n this.isDragging = true;\r\n\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<MouseEvent>e).clientX,\r\n y: this.modal.offsetTop - (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.offset = {\r\n x: this.modal.offsetLeft - (<TouchEvent>e).touches[0].clientX,\r\n y: this.modal.offsetTop - (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n }\r\n };\r\n\r\n private eventMove: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n // Mouse\r\n if ((<MouseEvent>e).clientX) {\r\n this.position = {\r\n x: (<MouseEvent>e).clientX,\r\n y: (<MouseEvent>e).clientY,\r\n };\r\n }\r\n // Touch device (use the first touch only)\r\n else if ((<TouchEvent>e).touches) {\r\n this.position = {\r\n x: (<TouchEvent>e).touches[0].clientX,\r\n y: (<TouchEvent>e).touches[0].clientY,\r\n };\r\n }\r\n this.modal.style.left = this.position.x + this.offset.x + 'px';\r\n this.modal.style.top = this.position.y + this.offset.y + 'px';\r\n }\r\n };\r\n\r\n private eventDragStop: () => void = () => {\r\n this.isDragging = false;\r\n };\r\n\r\n private eventPreventSelectText: (e: Event) => void = (e) => {\r\n if (this.isDragging) {\r\n e.preventDefault();\r\n }\r\n };\r\n\r\n private eventResize: () => void = () => {\r\n this.modal.style.removeProperty('left');\r\n this.modal.style.removeProperty('top');\r\n };\r\n\r\n /**\r\n * Create modal\r\n */\r\n constructor(options: Partial<Options>) {\r\n // Defaults\r\n const defaults: Options = {\r\n setId: null,\r\n setClass: null,\r\n width: 'auto',\r\n height: 'auto',\r\n titleHtml: null,\r\n bodyHtml: null,\r\n buttonCancelHtml: null,\r\n buttonConfirmHtml: null,\r\n closeOnCancelButton: true,\r\n closeOnConfirmButton: true,\r\n showCloseButton: true,\r\n allowCloseOutside: true,\r\n allowMovement: true,\r\n moveFromHeader: true,\r\n moveFromBody: false,\r\n moveFromFooter: true,\r\n stickyHeader: true,\r\n stickyFooter: true,\r\n style: null,\r\n animationOnShow: 'animDropDown',\r\n animationOnDestroy: 'animDropUp',\r\n animationDuration: 500,\r\n beforeShow: () => {},\r\n afterShow: () => {},\r\n beforeDestroy: () => {},\r\n afterDestroy: () => {},\r\n onCancelButton: () => {},\r\n onConfirmButton: () => {},\r\n };\r\n this.options = { ...defaults, ...options };\r\n\r\n // Call init method\r\n this.init();\r\n }\r\n\r\n /**\r\n * Initialization of the current modal\r\n */\r\n private init() {\r\n // Create modals\r\n if (!document.querySelector('.webcimes-modals')) {\r\n // Create modals\r\n document.body.insertAdjacentHTML(\r\n 'beforeend',\r\n '<div class=\"webcimes-modals animFadeIn\"></div>',\r\n );\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Set animation duration for modals\r\n this.modals.style.setProperty(\r\n 'animation-duration',\r\n this.options.animationDuration + 'ms',\r\n );\r\n\r\n // Delete enter animation after animation delay\r\n setTimeout(() => {\r\n this.modals.classList.remove('animFadeIn');\r\n }, this.options.animationDuration);\r\n } else {\r\n // Get modals\r\n this.modals = <HTMLElement>document.querySelector('.webcimes-modals');\r\n\r\n // Remove animFadeOut in case of create new modal after destroy the last one before (during animation duration)\r\n this.modals.classList.remove('animFadeOut');\r\n }\r\n\r\n // Create modal\r\n this.modals.insertAdjacentHTML(\r\n 'beforeend',\r\n `<div class=\"webcimes-modal ` +\r\n (this.options.setClass ? this.options.setClass : '') +\r\n ` ` +\r\n this.options.animationOnShow +\r\n `\" ` +\r\n (this.options.setId ? 'id=\"' + this.options.setId + '\"' : '') +\r\n `>\r\n\t\t\t\t` +\r\n (this.options.titleHtml || this.options.showCloseButton\r\n ? `<div class=\"webcimes-modal__header ` +\r\n (this.options.stickyHeader ? 'webcimes-modal__header--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromHeader ? 'webcimes-modal__header--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.titleHtml\r\n ? '<div class=\"webcimes-modal__title\">' +\r\n this.options.titleHtml +\r\n '</div>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.showCloseButton\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__header-close webcimes-modal__close\"></button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.bodyHtml\r\n ? `<div class=\"webcimes-modal__body ` +\r\n (this.options.moveFromBody ? '.webcimes-modal__body--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n this.options.bodyHtml +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t\t` +\r\n (this.options.buttonCancelHtml || this.options.buttonConfirmHtml\r\n ? `<div class=\"webcimes-modal__footer ` +\r\n (this.options.stickyFooter ? '.webcimes-modal__footer--is-sticky' : '') +\r\n ` ` +\r\n (this.options.moveFromFooter ? 'webcimes-modal__footer--is-movable' : '') +\r\n `\">\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonCancelHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--cancel ' +\r\n (this.options.closeOnCancelButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonCancelHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t\t` +\r\n (this.options.buttonConfirmHtml\r\n ? '<button class=\"webcimes-modal__button webcimes-modal__footer-button webcimes-modal__footer-button--confirm ' +\r\n (this.options.closeOnConfirmButton ? 'webcimes-modal__close' : '') +\r\n '\">' +\r\n this.options.buttonConfirmHtml +\r\n '</button>'\r\n : '') +\r\n `\r\n\t\t\t\t\t</div>`\r\n : '') +\r\n `\r\n\t\t\t</div>`,\r\n );\r\n this.modal = <HTMLElement>this.modals.lastElementChild;\r\n\r\n // Callback before show modal (set a timeout of zero, to wait for some dom to load)\r\n setTimeout(() => {\r\n this.modal.dispatchEvent(new CustomEvent('beforeShow'));\r\n if (typeof this.options.beforeShow === 'function') {\r\n this.options.beforeShow();\r\n }\r\n }, 0);\r\n\r\n // Set animation duration for modal\r\n this.modal.style.setProperty('animation-duration', this.options.animationDuration + 'ms');\r\n\r\n // Delete animation of enter after the animation delay\r\n setTimeout(() => {\r\n this.modal.classList.remove(this.options.animationOnShow);\r\n\r\n // Callback after show modal\r\n this.modal.dispatchEvent(new CustomEvent('afterShow'));\r\n if (typeof this.options.afterShow === 'function') {\r\n this.options.afterShow();\r\n }\r\n }, this.options.animationDuration);\r\n\r\n // Width of modal\r\n this.modal.style.setProperty('max-width', '90%');\r\n if (this.options.width != 'auto' && this.options.width) {\r\n this.modal.style.setProperty('width', this.options.width);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-width\r\n this.modal.style.setProperty('width', 'max-content');\r\n }\r\n\r\n // Height of modal\r\n this.modal.style.setProperty('max-height', '90%');\r\n if (this.options.height != 'auto' && this.options.height) {\r\n this.modal.style.setProperty('height', this.options.height);\r\n } else {\r\n // \"max-content\" is for keep size in \"auto\" and for maximum to max-height\r\n this.modal.style.setProperty('height', 'max-content');\r\n }\r\n\r\n // Style\r\n if (this.options.style) {\r\n let oldStyle = this.modal.getAttribute('style') ?? '';\r\n this.modal.setAttribute('style', oldStyle + this.options.style);\r\n }\r\n\r\n // Event on cancel button\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.addEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n // Event on confirm button\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.addEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n // Event click outside (on modals)\r\n this.modals.addEventListener('click', this.eventClickOutside);\r\n\r\n // Event close modal when click on close button\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.addEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n // Place selected modal on top\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.addEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n // Move modal\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n if (\r\n this.options.moveFromHeader &&\r\n this.modal.querySelector('.webcimes-modal__header')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__header'),\r\n );\r\n }\r\n if (this.options.moveFromBody && this.modal.querySelector('.webcimes-modal__body')) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__body'),\r\n );\r\n }\r\n if (\r\n this.options.moveFromFooter &&\r\n this.modal.querySelector('.webcimes-modal__footer')\r\n ) {\r\n this.moveFromElements.push(\r\n <HTMLElement>this.modal.querySelector('.webcimes-modal__footer'),\r\n );\r\n }\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.addEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.addEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.addEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n // When resizing window, reset modal position to center\r\n window.addEventListener('resize', this.eventResize);\r\n }\r\n\r\n /**\r\n * Destroy current modal\r\n */\r\n public destroy() {\r\n // If modal is not already destroying\r\n if (!this.modal.getAttribute('data-destroying')) {\r\n // Callback before destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('beforeDestroy'));\r\n if (typeof this.options.beforeDestroy === 'function') {\r\n this.options.beforeDestroy();\r\n }\r\n\r\n // Close modals (according the number of modal not already destroying)\r\n if (document.querySelectorAll('.webcimes-modal:not([data-destroying])').length == 1) {\r\n this.modals.classList.add('animFadeOut');\r\n }\r\n\r\n // Close modal\r\n this.modal.setAttribute('data-destroying', '1');\r\n this.modal.classList.add(this.options.animationOnDestroy);\r\n\r\n // Destroy all events from modal and remove modals or modal after animation duration\r\n setTimeout(() => {\r\n if (typeof this.modal !== 'undefined') {\r\n // Destroy all events from modal\r\n\r\n if (this.options.buttonCancelHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--cancel')\r\n ?.removeEventListener('click', this.eventCancelButton);\r\n }\r\n\r\n if (this.options.buttonConfirmHtml) {\r\n this.modal\r\n .querySelector('.webcimes-modal__footer-button--confirm')\r\n ?.removeEventListener('click', this.eventConfirmButton);\r\n }\r\n\r\n this.modals.removeEventListener('click', this.eventClickOutside);\r\n\r\n this.modal.querySelectorAll('.webcimes-modal__close').forEach((el) => {\r\n el.removeEventListener('click', this.eventClickCloseButton);\r\n });\r\n\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.modal.removeEventListener(typeEvent, this.eventDragModalOnTop);\r\n });\r\n\r\n if (\r\n this.options.allowMovement &&\r\n (this.options.moveFromHeader ||\r\n this.options.moveFromBody ||\r\n this.options.moveFromFooter)\r\n ) {\r\n ['mousedown', 'touchstart'].forEach((typeEvent) => {\r\n this.moveFromElements.forEach((el) => {\r\n el.removeEventListener(typeEvent, this.eventDragStart);\r\n });\r\n });\r\n\r\n ['mousemove', 'touchmove'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventMove);\r\n });\r\n\r\n ['mouseup', 'touchend'].forEach((typeEvent) => {\r\n document.removeEventListener(typeEvent, this.eventDragStop);\r\n });\r\n\r\n document.removeEventListener('selectstart', this.eventPreventSelectText);\r\n }\r\n\r\n window.removeEventListener('resize', this.eventResize);\r\n\r\n // Remove modals or modal according the number of modal\r\n (document.querySelectorAll('.webcimes-modal').length > 1\r\n ? this.modal\r\n : this.modals\r\n ).remove();\r\n }\r\n\r\n // Callback after destroy modal\r\n this.modal.dispatchEvent(new CustomEvent('afterDestroy'));\r\n if (typeof this.options.afterDestroy === 'function') {\r\n this.options.afterDestroy();\r\n }\r\n }, this.options.animationDuration);\r\n }\r\n }\r\n}\r\n\r\n/**\r\n * Factory function to create a WebcimesModal instance with proper typing\r\n */\r\nexport function CreateWebcimesModal(options: Partial<Options>): WebcimesModal {\r\n return new WebcimesModalImpl(options);\r\n}\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","WebcimesModalImpl","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","CreateWebcimesModal"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "webcimes-modal",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "Simply create and animate modals. It works with vanilla javascript + html + css.",
5
5
  "main": "./dist/js/webcimes-modal.udm.js",
6
6
  "module": "./dist/js/webcimes-modal.esm.js",
package/src/ts/webcimes-modal.d.ts CHANGED
@@ -93,5 +93,5 @@ export interface WebcimesModal {
93
93
  /**
94
94
  * Factory function to create a WebcimesModal instance with proper typing
95
95
  */
96
- export declare function createWebcimesModal(options: Partial<Options>): WebcimesModal;
96
+ export declare function CreateWebcimesModal(options: Partial<Options>): WebcimesModal;
97
97
  //# sourceMappingURL=webcimes-modal.d.ts.map
package/src/ts/webcimes-modal.ts CHANGED
@@ -591,6 +591,6 @@ class WebcimesModalImpl implements WebcimesModal {
591
591
  /**
592
592
  * Factory function to create a WebcimesModal instance with proper typing
593
593
  */
594
- export function createWebcimesModal(options: Partial<Options>): WebcimesModal {
594
+ export function CreateWebcimesModal(options: Partial<Options>): WebcimesModal {
595
595
  return new WebcimesModalImpl(options);
596
596
  }
package/test/script.js CHANGED
@@ -1,9 +1,9 @@
1
1
  // Import webcimes-modal
2
- import { createWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
2
+ import { CreateWebcimesModal } from '../dist/js/webcimes-modal.esm.js';
3
3
 
4
4
  // Wait for dom content loaded
5
5
  document.addEventListener('DOMContentLoaded', function () {
6
- let modal1 = createWebcimesModal({
6
+ let modal1 = CreateWebcimesModal({
7
7
  titleHtml: 'My title',
8
8
  bodyHtml: 'My Body',
9
9
  afterDestroy: () => {
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function () {
16
16
  console.log('event');
17
17
  });
18
18
 
19
- createWebcimesModal({
19
+ CreateWebcimesModal({
20
20
  titleHtml: 'My title 2',
21
21
  bodyHtml: 'My Body 2',
22
22
  afterDestroy: () => {