webcimes-modal 1.0.1 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/.eslintrc.json +0 -0
  2. package/.gitignore +2 -0
  3. package/LICENSE.md +0 -0
  4. package/README.md +67 -17
  5. package/{demo.html → demo/demo_esm.html} +7 -6
  6. package/demo/demo_udm.html +94 -0
  7. package/{webcimes-modal.css → dist/css/webcimes-modal.css} +418 -415
  8. package/dist/css/webcimes-modal.css.map +1 -0
  9. package/dist/css/webcimes-modal.min.css +2 -0
  10. package/dist/css/webcimes-modal.min.css.map +1 -0
  11. package/{images → dist/images}/times.svg +0 -0
  12. package/{webcimes-modal.js → dist/js/esm/webcimes-modal.esm.js} +151 -108
  13. package/dist/js/esm/webcimes-modal.esm.js.map +1 -0
  14. package/dist/js/esm/webcimes-modal.esm.min.js +2 -0
  15. package/dist/js/esm/webcimes-modal.esm.min.js.map +1 -0
  16. package/dist/js/udm/webcimes-modal.udm.js +421 -0
  17. package/dist/js/udm/webcimes-modal.udm.js.map +1 -0
  18. package/dist/js/udm/webcimes-modal.udm.min.js +2 -0
  19. package/dist/js/udm/webcimes-modal.udm.min.js.map +1 -0
  20. package/package.json +16 -4
  21. package/src/css/webcimes-modal.css +416 -0
  22. package/src/images/times.svg +1 -0
  23. package/{webcimes-modal.ts → src/ts/webcimes-modal.ts} +22 -9
  24. package/tsconfig.json +15 -8
  25. package/webpack.config.ts +147 -0
  26. package/demo_test.html +0 -0
  27. package/webcimes-modal.js.map +0 -1
package/.eslintrc.json CHANGED
File without changes
package/.gitignore ADDED
@@ -0,0 +1,2 @@
1
+ !.gitignore
2
+ node_modules/
package/LICENSE.md CHANGED
File without changes
package/README.md CHANGED
@@ -22,33 +22,58 @@ You can use an importmap to resolve the arbitrary module names to complete paths
22
22
  <script type="importmap">
23
23
  {
24
24
  "imports": {
25
- "webcimes-modal": "./node_modules/webcimes-modal/webcimes-modal.js"
25
+ "webcimes-modal": "./node_modules/webcimes-modal/dist/js/esm/webcimes-modal.esm.min.js"
26
26
  }
27
27
  }
28
28
  </script>
29
29
  </head>
30
- ...
30
+ ...
31
31
  ```
32
32
 
33
- ## Usage
34
-
35
- ### Import stylesheet:
33
+ Or you can also set the full path directly in the import:
36
34
  ```html
37
- <link rel="stylesheet" href="./node_modules/webcimes-modal/webcimes-modal.css">
35
+ <html>
36
+ <head>
37
+ ...
38
+ <script type="module">
39
+ // Import webcimes-modal
40
+ import {WebcimesModal} from "./node_modules/webcimes-modal/dist/js/esm/webcimes-modal.esm.min.js";
41
+ ...
42
+ </script>
43
+ </head>
44
+ ...
38
45
  ```
39
46
 
40
- ### Import javascript module:
47
+ #### Import javascript module:
41
48
  ```javascript
42
49
  import { WebcimesModal } from "webcimes-modal";
43
50
  ```
44
51
 
52
+ ### UDM
53
+ You can directly load the udm module in the script tag:
54
+ ```html
55
+ <html>
56
+ <head>
57
+ ...
58
+ <script src="./node_modules/webcimes-modal/dist/js/udm/webcimes-modal.udm.min.js" type="text/javascript"></script>
59
+ </head>
60
+ ...
61
+ ```
62
+
63
+ ### Import stylesheet:
64
+ ```html
65
+ <link rel="stylesheet" href="./node_modules/webcimes-modal/dist/css/webcimes-modal.min.css">
66
+ ```
67
+
68
+ ## Usage
69
+
45
70
  ### Call `WebcimesModal` for create modal:
46
71
  ```javascript
47
72
  // Wait for dom content loaded or call WebcimesModal before the end of body
48
73
  document.addEventListener("DOMContentLoaded", function()
49
74
  {
50
75
  // Create modal
51
- const modal = new WebcimesModal({
76
+ const myModal = new WebcimesModal({
52
77
  setId: null, // set a specific id on the modal. default "null"
53
78
  setClass: null, // set a specific class on the modal, default "null"
54
79
  width: 'auto', // width (specify unit), default "auto"
@@ -95,7 +120,7 @@ After a creating a modal, the basic html structure look like this:
95
120
  </div>
96
121
  <div class="modalFooter">
97
122
  <button class="cancel">Cancel</button>
98
- <button class="confirm ">Confirm</button>
123
+ <button class="confirm">Confirm</button>
99
124
  </div>
100
125
  </div>
101
126
  ```
@@ -106,7 +131,7 @@ All parameters are optionnal, but to set the base message on the modal you can u
106
131
  For these 4 fields you can just directly write the text or define tags, or call html from an element like this :
107
132
 
108
133
  ```javascript
109
- const modal = new WebcimesModal({
134
+ const myModal = new WebcimesModal({
110
135
  titleHtml: "My title <span style='color:red'>with red color</span>", // directly put an html tag or attribute like span and style
111
136
  bodyHtml: document.querySelector("#myID").outerHTML, // set html from an HTML element
112
137
  buttonCancelHtml: "Cancel <img src='my-url' alt=''>", // put the img tag
@@ -131,7 +156,7 @@ By default the `height` and `width` are set to `auto`, the modal will also be si
131
156
  You can also set the determined `height` or `width` by indicating the value with a number and a unit.
132
157
 
133
158
  ```javascript
134
- const modal = new WebcimesModal({
159
+ const myModal = new WebcimesModal({
135
160
  width: '80vm',
136
161
  height: '200px',
137
162
  });
@@ -141,7 +166,7 @@ const modal = new WebcimesModal({
141
166
  Below are the different options for customize the modal behavior.
142
167
 
143
168
  ```javascript
144
- const modal = new WebcimesModal({
169
+ const myModal = new WebcimesModal({
145
170
  closeOnCancelButton: false, // close modal after triggering cancel button, default "true"
146
171
  closeOnConfirmButton: false, // close modal after triggering confirm button, default "true"
147
172
  showCloseButton: true, // show close button, default "true"
@@ -159,7 +184,7 @@ const modal = new WebcimesModal({
159
184
  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.
160
185
 
161
186
  ```javascript
162
- const modal = new WebcimesModal({
187
+ const myModal = new WebcimesModal({
163
188
  style: "background:black; color:#fff; text-align:center;",
164
189
  });
165
190
  ```
@@ -174,7 +199,7 @@ For `animationOnDestroy` you can choose between `animDropUp` or `animFadeOut`
174
199
  And you can set the duration of all animation by setting `animationDuration` with a number in ms.
175
200
 
176
201
  ```javascript
177
- const modal = new WebcimesModal({
202
+ const myModal = new WebcimesModal({
178
203
  animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for show animation, default "animDropDown"
179
204
  animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for destroy animation, default "animDropUp"
180
205
  animationDuration: 500, // anim duration in ms, default "500"
@@ -185,7 +210,7 @@ const modal = new WebcimesModal({
185
210
  Multiple events exist, which allow to interact with the modal at each step. You can use all events below:
186
211
 
187
212
  ```javascript
188
- const modal = new WebcimesModal({
213
+ const myModal = new WebcimesModal({
189
214
  beforeShow: () => {console.log("before show");}, // callback before show modal
190
215
  afterShow: () => {console.log("after show");}, // callback after show modal
191
216
  beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
@@ -208,12 +233,37 @@ To destroy the modal, you have several ways:
208
233
 
209
234
  ```javascript
210
235
  // Get the instance
211
- const modal = new WebcimesModal(...);
236
+ const myModal = new WebcimesModal(...);
212
237
 
213
238
  // Things
214
239
 
215
240
  // Then call the destroy method:
216
- modal.destroy();
241
+ myModal.destroy();
242
+ ```
243
+
244
+ ### Get dom element
245
+ You can get the current dom element from the modal like this:
246
+
247
+ ```javascript
248
+ // Get the instance
249
+ const myModal = new WebcimesModal(...);
250
+
251
+ // Things
252
+
253
+ // Then get the dom element
254
+ myModal.modal;
255
+ ```
256
+
257
+ Or you can get the global container of all modals like this:
258
+
259
+ ```javascript
260
+ // Get the instance
261
+ const myModal = new WebcimesModal(...);
262
+
263
+ // Things
264
+
265
+ // Then get the dom element
266
+ myModal.webcimesModals;
217
267
  ```
218
268
 
219
269
  ### Style modals:
package/{demo.html → demo/demo_esm.html} RENAMED
@@ -5,12 +5,12 @@
5
5
  <meta name="Author" content="WebCimes">
6
6
  <meta name="Copyright" content="© https://webcimes.com">
7
7
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
- <title>Demo webcimes-modal</title>
9
- <link rel="stylesheet" href="./webcimes-modal.css">
8
+ <title>Demo webcimes-modal ESM</title>
9
+ <link rel="stylesheet" href="../dist/css/webcimes-modal.min.css">
10
10
  <script type="importmap">
11
11
  {
12
12
  "imports": {
13
- "webcimes-modal": "./webcimes-modal.js"
13
+ "webcimes-modal": "../dist/js/esm/webcimes-modal.esm.min.js"
14
14
  }
15
15
  }
16
16
  </script>
@@ -21,7 +21,7 @@
21
21
  // Wait for dom content loaded
22
22
  document.addEventListener("DOMContentLoaded", function()
23
23
  {
24
- const modal = new WebcimesModal({
24
+ const myModal = new WebcimesModal({
25
25
  setId: null, // set specific id to the modal, default "null"
26
26
  setClass: null, // set specific class to the modal, default "null"
27
27
  width: 'auto', // width (specify the unit), default "auto"
@@ -52,13 +52,14 @@
52
52
  onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
53
53
  });
54
54
 
55
- const modal2 = new WebcimesModal({
55
+ const myModal2 = new WebcimesModal({
56
56
  titleHtml: "My title", // html for title, default "null"
57
57
  bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
58
58
  buttonCancelHtml: "Cancel", // html for cancel button, default "null"
59
59
  buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
60
60
  closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
61
- onConfirmButton: () => {modal2.destroy();}, // callback after trigger confirm button
61
+ afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
62
+ onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
62
63
  });
63
64
  });
64
65
  </script>
package/demo/demo_udm.html ADDED
@@ -0,0 +1,94 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="Author" content="WebCimes">
6
+ <meta name="Copyright" content="© https://webcimes.com">
7
+ <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8
+ <title>Demo webcimes-modal UDM</title>
9
+ <link rel="stylesheet" href="../dist/css/webcimes-modal.min.css">
10
+ <script src="../dist/js/udm/webcimes-modal.udm.min.js" type="text/javascript"></script>
11
+ <script>
12
+ // Wait for dom content loaded
13
+ document.addEventListener("DOMContentLoaded", function()
14
+ {
15
+ const myModal = new WebcimesModal({
16
+ setId: null, // set specific id to the modal, default "null"
17
+ setClass: null, // set specific class to the modal, default "null"
18
+ width: 'auto', // width (specify the unit), default "auto"
19
+ height: 'auto', // height (specify the unit), default "auto"
20
+ titleHtml: "My title", // html for title, default "null"
21
+ bodyHtml: "My Body", // html for body, default "null"
22
+ buttonCancelHtml: "Cancel", // html for cancel button, default "null"
23
+ buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
24
+ closeOnCancelButton: true, // close the modal after trigger cancel button, default "true"
25
+ closeOnConfirmButton: true, // close the modal after trigger confirm button, default "true"
26
+ showCloseButton: true, // show the close button, default "true"
27
+ allowCloseOutside: false, // allow to close modal when click outside, default "true"
28
+ allowMovement: true, // possibility to move the modal, default "true"
29
+ moveFromHeader: true, // if allowMovement is set to "true", ability to move modal from header, default "true"
30
+ moveFromBody: false, // if allowMovement is set to "true", ability to move modal from body, default "false"
31
+ moveFromFooter: true, // if allowMovement is set to "true", ability to move modal from footer, default "true"
32
+ stickyHeader: true, // keep sticky (visible) the header when scrolling, default "true"
33
+ stickyFooter: true, // keep sticky (visible) the footer when scrolling, default "true"
34
+ style: null, // add extra style css to the modal, default null
35
+ animationOnShow: 'animDropDown', // "animDropDown" or "animFadeIn" for enter animation, default "animDropDown"
36
+ animationOnDestroy: 'animDropUp', // "animDropUp" or "animFadeOut" for end animation, default "animDropUp"
37
+ animationDuration: 500, // anim duration in ms, default "500"
38
+ beforeShow: () => {console.log("before show");}, // callback before show modal
39
+ afterShow: () => {console.log("after show");}, // callback after destroy modal
40
+ beforeDestroy: () => {console.log("before destroy");}, // callback before destroy modal
41
+ afterDestroy: () => {console.log("after destroy");}, // callback after destroy modal
42
+ onCancelButton: () => {console.log("on cancel button");}, // callback after trigger cancel button
43
+ onConfirmButton: () => {console.log("on confirm button");}, // callback after trigger confirm button
44
+ });
45
+
46
+ const myModal2 = new WebcimesModal({
47
+ titleHtml: "My title", // html for title, default "null"
48
+ bodyHtml: document.querySelector(".test").outerHTML, // html for body, default "null"
49
+ buttonCancelHtml: "Cancel", // html for cancel button, default "null"
50
+ buttonConfirmHtml: "Confirm", // html for confirm button, default "null"
51
+ closeOnConfirmButton: false, // close the modal after trigger confirm button, default "true"
52
+ afterShow: () => {console.log(myModal2.webcimesModals); console.log(myModal2.modal);}, // callback before show modal
53
+ onConfirmButton: () => {myModal2.destroy();}, // callback after trigger confirm button
54
+ });
55
+ });
56
+ </script>
57
+ </head>
58
+ <body>
59
+ <div style="display:none;">
60
+ <div class="test">
61
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
62
+ <br>
63
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
64
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
65
+ <br>
66
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
67
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
68
+ <br>
69
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
70
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
71
+ <br>
72
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
73
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
74
+ <br>
75
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
76
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
77
+ <br>
78
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
79
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
80
+ <br>
81
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
82
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
83
+ <br>
84
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
85
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
86
+ <br>
87
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
88
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
89
+ <br>
90
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui sapien eget mi proin sed libero enim. Quis lectus nulla at volutpat diam ut venenatis tellus. Odio eu feugiat pretium nibh ipsum consequat nisl vel. Ultricies integer quis auctor elit sed.
91
+ </div>
92
+ </div>
93
+ </body>
94
+ </html>