-
Notifications
You must be signed in to change notification settings - Fork 0
/
wh-modal.js
93 lines (86 loc) · 2.27 KB
/
wh-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
export default class WhModal extends HTMLElement {
constructor() {
super();
this._root = this.attachShadow({ mode: "open" });
this._open = false;
this._$modal = null;
this._$backdrop = null;
this._$button = null;
}
connectedCallback() {
this._root.innerHTML = `
<style>
.open {
display: block !important;
z-index: 99;
}
.dp-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
width: 100%;
}
.dp-container {
position: inherit;
}
.mod-container {
display: none;
}
.background {
position: fixed;
width: 100%;
display: none;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}
</style>
<div class="dp-container">
<button class="dp-button">
<slot name="modal-opener"></slot>
</button>
<div class="background"></div>
<slot name="mod-content" class="mod-container">
</slot>
</div>
`;
this._$modal = this._root.querySelector(".mod-container");
this._$backdrop = this._root.querySelector(".background");
this._$backdrop.addEventListener("click", (event) => {
this.open = false
})
this._$button = this._root.querySelector(".dp-button")
this._$button.addEventListener("click", (event) => {
this.open = true
})
}
set open(value) {
const result = (value === true)
if (this._open === value) return
this._open = result;
this._render();
}
_render() {
if (this._open === true) {
this._$modal.classList.add("open");
this._$backdrop.classList.add("open");
this.dispatchEvent(new CustomEvent("modal-opened"));
} else {
this._$modal.classList.remove("open");
this._$backdrop.classList.remove("open");
this.dispatchEvent(new CustomEvent("modal-closed"));
}
}
}
if (!window.customElements.get('wh-modal')) {
window.WhModal = WhModal
window.customElements.define("wh-modal", WhModal)
}