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
import { html, render } from 'lit-html';
import { ElementById, showElement, hideElement } from './helpers.js';
const overlayElement = ElementById('overlay');
export const showAlertModal = (text) => {
showElement(overlayElement);
return new Promise(resolve => {
render(html`
<div class="modal alert">
${text}
<br><button class="color" id="alertButton" @click=${() => { hideOverlay(); resolve(); }}>OK</button>
</div>
`, overlayElement);
ElementById('alertButton').focus();
});
};
export const showSelectModal = (items) => {
showElement(overlayElement);
return new Promise(resolve => {
render(html`
<div class="modal select flex-column">
${items.map(
(item) => html`<a class="button color" @click=${item.action}>${item.label}</a>`
)}
<a class="button color" @click=${() => { hideOverlay(); resolve(); }}>Close</a>
</div>
`, overlayElement);
});
};
export const showModal = (title, content) => {
showElement(overlayElement);
return new Promise(resolve => {
render(html`
<div class="modal dialog">
<div class="header flex-row">
<h4>${title}</h4>
<div class="icon-close" title="Close" @click=${() => { hideOverlay(); resolve(); }}></div>
</div>
<div class="body">${content}</div>
</div>
`, overlayElement);
});
};
export const showLoader = () => {
showElement(overlayElement);
render(html`<div class="spinner"></div>`, overlayElement);
};
export const hideOverlay = () => hideElement(overlayElement);