]>
Commit | Line | Data |
---|---|---|
905f0895 VP |
1 | /** |
2 | * Generate a bootstrap modal | |
3 | * Mandatory: | |
4 | * @param {string} title - The modal title | |
5 | * @param {string} body - HTML for the body | |
6 | * @param {string} footer - HTML for the footer | |
7 | * | |
8 | * Optional: | |
e8b225fd VP |
9 | * @param {string|null} size - the bootstrap size category for modals (sm, lg, xl). Default is null. |
10 | * @param {boolean} static - whether or not to make the backdrop static, forcing the user to respond to the dialog. Default is false | |
11 | * @param {boolean} show - whether or not to automatically show the modal. Default is false. | |
12 | * @param {boolean} closebutton - display and allow the close button. Default is true. | |
905f0895 VP |
13 | * @returns {string} returns the ID |
14 | */ | |
15 | ||
e8b225fd | 16 | function bsModal(title, body, footer, size = null, static = false, show = false, closebutton = true) |
905f0895 VP |
17 | { |
18 | /* generate a random number between 1000 and 90000 to use as an id */ | |
19 | const min = 1000; | |
20 | const max = 90000; | |
21 | id = Date.now().toString(36); // base36 unique id | |
22 | ourSize = ""; | |
23 | if (size) | |
24 | ourSize += "modal-" + size; | |
25 | ||
26 | const m1 = document.createElement("div"); | |
27 | const m2 = m1.cloneNode(); | |
28 | const m3 = m1.cloneNode(); | |
29 | const mHeader = m1.cloneNode(); | |
30 | const mBody = m1.cloneNode(); | |
31 | const mFooter = m1.cloneNode(); | |
32 | ||
33 | m1.classList.add("modal", "fade"); | |
34 | m1.id = id; | |
35 | m1.role = "dialog"; | |
36 | m1.ariaHidden = "true"; | |
37 | ||
38 | m2.classList.add("modal-dialog", "modal-dialog-centered"); | |
39 | if (ourSize.length) | |
40 | m2.classList.add(ourSize); | |
41 | ||
42 | m2.role = "document"; | |
43 | m2.id = id + "-2"; | |
44 | ||
45 | m3.classList.add("modal-content"); | |
46 | m3.id = id + "-3"; | |
47 | ||
48 | mHeader.classList.add("modal-header"); | |
49 | mHeader.id = id + "-header"; | |
e8b225fd VP |
50 | mHeader.innerHTML =`<h5 class="modal-title" id="` + id + `"-title">` + title + `</h5>`; |
51 | ||
52 | if (closebutton) | |
53 | mHeader.innerHTML += `<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
54 | <span aria-hidden="true">×</span></button>`; | |
905f0895 VP |
55 | |
56 | mBody.classList.add("modal-body"); | |
57 | mBody.id = id + "-body"; | |
58 | mBody.innerHTML = body; | |
59 | ||
60 | mFooter.classList.add("modal-footer"); | |
61 | mFooter.id = id + "-footer"; | |
62 | mFooter.innerHTML = footer; | |
63 | ||
64 | m1.appendChild(m2); | |
65 | m2.appendChild(m3); | |
66 | m3.appendChild(mHeader); | |
67 | m3.appendChild(mBody); | |
68 | m3.appendChild(mFooter); | |
69 | ||
70 | document.body.append(m1); | |
71 | ||
72 | if (static) | |
73 | $('#' + m1.id).modal({ backdrop: "static" }); | |
74 | ||
75 | if (show) | |
76 | $('#' + m1.id).modal('show'); | |
e8b225fd VP |
77 | |
78 | return m1.id; | |
905f0895 | 79 | } |