-
Notifications
You must be signed in to change notification settings - Fork 0
/
mellow-modal.js
106 lines (84 loc) · 3.59 KB
/
mellow-modal.js
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
// mellow-modal.js
class MellowModal {
constructor(params) {
this.id = params.id || 'mellowModal';
this.size = params.size || 'modal-md';
this.backdrop = params.backdrop || true;
this.showCloseButton = params.showCloseButton || true;
this.title = params.title || '';
this.header = params.header !== undefined ? params.header : true;
this.footer = params.footer !== undefined ? params.footer : true;
this.confirmButton = params.showConfirmButton !== undefined ? params.showConfirmButton : true;
this.confirmButtonType = params.confirmButtonType !== undefined ? params.confirmButtonType : "success";
this.confirmButtonText = params.confirmButtonText !== undefined ? params.confirmButtonText : "Confirm";
this.buttons = params.buttons !== undefined ? params.buttons : '';
this.content = params.content || '';
this.animation = params.animation || 'fade';
this.allowFullscreen = params.allowFullscreen || false;
this.css = params.css || '';
this.modal = null;
}
createModalElement() {
const modalElement = document.createElement('div');
modalElement.classList.add('modal', this.animation);
modalElement.setAttribute('id', this.id);
modalElement.setAttribute('id', this.id);
const modalDialog = document.createElement('div');
modalDialog.classList.add('modal-dialog', this.size);
modalDialog.setAttribute('role', 'document');
const modalContent = document.createElement('div');
modalContent.classList.add('modal-content');
if (this.header) {
const modalHeader = document.createElement('div');
modalHeader.classList.add('modal-header');
modalHeader.innerHTML = `
<h5 class="modal-title">${this.title}</h5>
${this.showCloseButton ? '<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>' : ''}
`;
modalContent.appendChild(modalHeader);
if (this.header && this.showCloseButton) {
const closeButton = modalHeader.querySelector('.btn-close');
closeButton.addEventListener('click', () => {
this.destroy();
});
}
}
const modalBody = document.createElement('div');
modalBody.classList.add('modal-body');
modalBody.innerHTML = this.content;
modalContent.appendChild(modalBody);
if (this.footer) {
const modalFooter = document.createElement('div');
modalFooter.classList.add('modal-footer');
modalFooter.innerHTML = this.confirmButton ? `${this.buttons} <button type="button" class="btn btn-${this.confirmButtonType}" id="${this.id}Btn">${this.confirmButtonText}</button>` : `${this.buttons}`;
modalContent.appendChild(modalFooter);
}
modalDialog.appendChild(modalContent);
modalElement.appendChild(modalDialog);
document.body.appendChild(modalElement);
if (this.allowFullscreen) {
modalDialog.classList.add('modal-fullscreen');
}
if (this.css) {
modalElement.style.cssText = this.css;
}
return modalElement;
}
fire() {
this.modal = this.createModalElement();
const options = {
backdrop: this.backdrop ? 'static' : true,
};
const modal = new bootstrap.Modal(this.modal, options);
modal.show();
}
hide() {
const modal = new bootstrap.Modal(this.modal);
modal.hide();
}
destroy() {
const modal = document.getElementById(this.id);
modal.remove();
}
}
module.exports = MellowModal;