45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import "../../css/popup.scss";
|
|
import { createElement } from "../functions";
|
|
import { createIcon } from "./icon";
|
|
|
|
function createPopup(title, content, ...buttons) {
|
|
const mask = createElement('div', 'popup-mask');
|
|
const container = createElement('div', 'popup-container');
|
|
const close = () => {
|
|
mask.classList.add('popup-active');
|
|
mask.style.opacity = 0;
|
|
setTimeout(() => mask.remove(), 120);
|
|
};
|
|
container.append(
|
|
createElement('div', header => {
|
|
header.className = 'popup-header';
|
|
if (title instanceof HTMLElement) {
|
|
header.appendChild(title);
|
|
} else {
|
|
header.appendChild(createElement('div', t => t.innerText = title));
|
|
}
|
|
const cancel = createIcon('fa-regular', 'times');
|
|
cancel.addEventListener('click', () => close());
|
|
header.appendChild(cancel);
|
|
}),
|
|
createElement('div', 'popup-body', content),
|
|
createElement('div', 'popup-footer', ...buttons.map(b => {
|
|
const button = createElement('div', 'popup-button');
|
|
button.innerText = b.text;
|
|
if (typeof b.trigger === 'function') {
|
|
button.addEventListener('click', () => {
|
|
if (b.trigger(container) === false) {
|
|
return;
|
|
}
|
|
close();
|
|
});
|
|
}
|
|
}))
|
|
);
|
|
mask.appendChild(container);
|
|
return mask;
|
|
}
|
|
|
|
export {
|
|
createPopup
|
|
} |