-
Notifications
You must be signed in to change notification settings - Fork 3
/
modal.ts
216 lines (180 loc) · 6.58 KB
/
modal.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
import { Components } from "gd-sprest-bs";
/**
* Modal
*/
export class Modal {
private static _modal: Components.IModal = null;
private static _onCloseEvent: Function = null;
// Modal Body
private static _elBody: HTMLElement = null;
static get BodyElement(): HTMLElement { return this._elBody; }
// Modal Footer
private static _elFooter: HTMLElement = null;
static get FooterElement(): HTMLElement { return this._elFooter; }
// Modal Header
private static _elHeader: HTMLElement = null;
static get HeaderElement(): HTMLElement { return this._elHeader; }
// Hides the footer if it's empty
private static _hideEmptyFooter: boolean = true;
static get HideEmptyFooter(): boolean { return this._hideEmptyFooter; }
// Hides the header if it's empty
private static _hideEmptyHeader: boolean = false;
static get HideEmptyHeader(): boolean { return this._hideEmptyHeader; }
// Constructor
constructor() {
// Render the canvas
Modal.render();
}
// Clears the canvas form
static clear() {
// Clear the header, body and footer
this.setHeader("");
this.setBody("");
this.setFooter("");
// Set the default properties
this.setAutoClose(false);
this.setBackdrop(true);
this.setCloseButtonVisibility(true);
this.setCloseEvent(null);
this.setHideEmptyFooter(true);
this.setHideEmptyHeader(false);
this.setFocus(false);
this.setIsCentered(true);
this.setKeyboard(true);
this.setScrollable(false);
this.setType(Components.ModalTypes.Large);
// Ensure the header, body and footer are visible
this._elBody.classList.remove("d-none");
this._elFooter.classList.remove("d-none");
this._elHeader.classList.remove("d-none");
}
// Hides the modal
static hide() {
// Hide the modal
this._modal.hide();
// Call the close event
this._onCloseEvent ? this._onCloseEvent() : null;
}
// Renders the canvas
private static render() {
// Create the element
let el = document.createElement("div");
el.id = "core-modal";
// Ensure the body exists
if (document.body) {
// Append the element
document.body.appendChild(el);
} else {
// Create an event
window.addEventListener("load", () => {
// Append the element
document.body.appendChild(el);
});
}
// Render the canvas
this._modal = Components.Modal({
el,
type: Components.ModalTypes.Large,
options: {
autoClose: false,
backdrop: true,
centered: true,
keyboard: true
},
onRenderBody: el => { this._elBody = el; },
onRenderFooter: el => { this._elFooter = el; },
onRenderHeader: el => { this._elHeader = el.querySelector(".modal-title");; },
onClose: () => {
// Call the close event
this._onCloseEvent ? this._onCloseEvent() : null;
}
});
}
// Sets the auto close flag
static setAutoClose(value: boolean) { this._modal.setAutoClose(value); }
// Sets the backdrop option
static setBackdrop(value: boolean) { this._modal.setBackdrop(value); }
// Sets the body
static setBody(content) {
// Clear the body
while (this._elBody.firstChild) { this._elBody.removeChild(this._elBody.firstChild); }
// See if content exists
if (content) {
// See if this is text
if (typeof (content) == "string") {
// Set the html
this._elBody.innerHTML = content;
} else {
// Append the element
this._elBody.appendChild(content);
}
}
}
// Sets the close button visibility
static setCloseButtonVisibility(showFl: boolean) { this._modal.setCloseButtonVisibility(showFl); }
// Sets the close event
static setCloseEvent(event) { this._onCloseEvent = event; }
// Sets the flag to hide the empty footer
static setHideEmptyFooter(value: boolean) { this._hideEmptyFooter = value; }
// Sets the flag to hide the empty header
static setHideEmptyHeader(value: boolean) { this._hideEmptyHeader = value; }
// Sets the focus option
static setFocus(value: boolean) { this._modal.setFocus(value); }
// Sets the footer
static setFooter(content) {
// Clear the body
while (this._elFooter.firstChild) { this._elFooter.removeChild(this._elFooter.firstChild); }
// See if content exists
if (content) {
// See if this is text
if (typeof (content) == "string") {
// Set the html
this._elFooter.innerHTML = content;
} else {
// Append the element
this._elFooter.appendChild(content);
}
}
}
// Sets the header
static setHeader(content) {
// Clear the body
while (this._elHeader.firstChild) { this._elHeader.removeChild(this._elHeader.firstChild); }
// See if content exists
if (content) {
// See if this is text
if (typeof (content) == "string") {
// Set the html
this._elHeader.innerHTML = content;
} else {
// Append the element
this._elHeader.appendChild(content);
}
}
}
// Sets the center option
static setIsCentered(value: boolean) { this._modal.setIsCentered(value); }
// Sets the keyboard option
static setKeyboard(value: boolean) { this._modal.setKeyboard(value); }
// Sets the scrollable option
static setScrollable(value: boolean) { this._modal.setScrollable(value); }
// Sets the modal type
static setType(type) { this._modal.setType(type); }
// Shows the modal
static show() {
// See if we are hiding the header
if (this.HideEmptyHeader && this.HeaderElement.innerText.trim().length == 0) {
// Hide the header
this.HeaderElement.classList.add("d-none");
}
// See if we are hiding the footer
if (this.HideEmptyFooter && this.FooterElement.innerText.trim().length == 0) {
// Hide the footer
this.FooterElement.classList.add("d-none");
}
// Show the modal
this._modal.show();
}
}
// Create an instance of the modal
new Modal();