/
Popup.js
69 lines (63 loc) · 1.89 KB
/
Popup.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
function Popup(label, content, buttons) {
this.label = label;
this.content = content;
this.buttons = buttons || [];
this.h = 440;
this.w = 400;
this.style = {
position: 'fixed',
display: 'inline-block',
width: this.w + 'px',
height: this.h + 'px',
margin: 'auto',
zIndex: 10,
backgroundColor: 'white',
top: 0,
transform: 'translate(50%,50%)',
left: 0
};
this.render();
}
Popup.prototype.render = function() {
var container = document.createElement('div');
setStyle(container, this.style);
var top = document.createElement('div');
var th = 24;
top.textContent = this.label || 'Label';
top.style.height = top.style.lineHeight = th + 'px';
top.style.textAlign = 'center';
container.appendChild(top);
Array.isArray(this.content) && this.content.forEach((tag) => {
container.appendChild(tag);
});
var bottom = document.createElement('div');
bottom.style.height = '100%';
bottom.style.width = '1px';
bottom.style.maxHeight = this.h - th + 'px';
bottom.style.float = 'right';
container.appendChild(bottom);
this.buttons.forEach((b) => {
b.tag.style.verticalAlign = 'bottom';
b.tag.style.float = 'right';
b.tag.style.position = 'relative';
b.tag.style.right = '-100px';
bottom.appendChild(b.tag);
})
var onClose = () => document.body.removeChild(container);
closeButton(bottom, onClose);
container.appendChild(this.content)
document.body.appendChild(container);
}
function setStyle(tag, style) {
Object.keys(style).forEach((key) => {
tag.style[key] = style[key];
})
}
function closeButton(container, onClose) {
var b = new Button('Cancel', 'button', onClose);
b.tag.style.verticalAlign = 'bottom';
b.tag.style.float = 'right';
b.tag.style.position = 'relative';
b.tag.style.right = '-100px';
container.appendChild(b.tag);
}