570 lines
23 KiB
JavaScript
570 lines
23 KiB
JavaScript
import "./css/popup.scss";
|
|
import { r } from "../utility/lgres";
|
|
import { nullOrEmpty } from "../utility/strings";
|
|
import { global } from "../utility";
|
|
import { createElement } from "../functions";
|
|
import { createIcon, changeIcon } from "./icon";
|
|
|
|
const ResizeMods = {
|
|
right: 1,
|
|
bottom: 2,
|
|
left: 4,
|
|
top: 8,
|
|
bottomRight: 2 | 1,
|
|
bottomLeft: 2 | 4,
|
|
topRight: 8 | 1,
|
|
topLeft: 8 | 4
|
|
}
|
|
|
|
// const Cursors = {
|
|
// [ResizeMods.right]: 'ew-resize',
|
|
// [ResizeMods.bottom]: 'ns-resize',
|
|
// [ResizeMods.bottomRight]: 'nwse-resize',
|
|
// [ResizeMods.left]: 'ew-resize',
|
|
// [ResizeMods.bottomLeft]: 'nesw-resize',
|
|
// [ResizeMods.top]: 'ns-resize',
|
|
// [ResizeMods.topRight]: 'nesw-resize',
|
|
// [ResizeMods.topLeft]: 'nwse-resize'
|
|
// }
|
|
|
|
function trimPx(px) {
|
|
if (typeof px !== 'string') {
|
|
return px;
|
|
}
|
|
if (px.endsWith('px')) {
|
|
const size = Number(px.substring(0, px.length - 2));
|
|
return isNaN(size) ? px : size;
|
|
}
|
|
return px;
|
|
}
|
|
|
|
export class Popup {
|
|
#mask;
|
|
#option;
|
|
#bounds;
|
|
// #cursor;
|
|
|
|
constructor(opts = {}) {
|
|
this.#option = opts;
|
|
}
|
|
|
|
get container() { return this.#mask.querySelector('.ui-popup-container') }
|
|
|
|
get rect() {
|
|
const container = this.container;
|
|
if (container == null) {
|
|
return null;
|
|
}
|
|
const style = global.getComputedStyle(container);
|
|
const collapsed = container.classList.contains('ui-popup-collapse');
|
|
const bounds = this.#bounds;
|
|
return {
|
|
collapsed,
|
|
left: trimPx(style.left),
|
|
top: trimPx(style.top),
|
|
width: collapsed === true && bounds != null ? bounds.width : trimPx(style.width),
|
|
height: collapsed === true && bounds != null ? bounds.height : trimPx(style.height)
|
|
};
|
|
}
|
|
set rect(r) {
|
|
const container = this.container;
|
|
if (container == null) {
|
|
return;
|
|
}
|
|
const css = [];
|
|
if (!isNaN(r.left)) {
|
|
css.push(`left: ${r.left}px`);
|
|
}
|
|
if (!isNaN(r.top)) {
|
|
css.push(`top: ${r.top}px`);
|
|
}
|
|
const collapse = container.querySelector('.ui-popup-header-icons>.icon-expand');
|
|
if (r.collapsed === true) {
|
|
css.push('width: 160px', 'height: 40px');
|
|
this.#bounds = r;
|
|
container.classList.add('ui-popup-collapse');
|
|
if (collapse != null) {
|
|
changeIcon(collapse, 'fa-regular', 'expand-alt');
|
|
}
|
|
} else {
|
|
if (!isNaN(r.width) && r.width > 0) {
|
|
css.push(`width: ${r.width}px`);
|
|
}
|
|
if (!isNaN(r.height) && r.height > 0) {
|
|
css.push(`height: ${r.height}px`);
|
|
}
|
|
container.classList.remove('ui-popup-collapse');
|
|
this.#bounds = null;
|
|
if (collapse != null) {
|
|
changeIcon(collapse, 'fa-regular', 'compress-alt');
|
|
}
|
|
}
|
|
if (css.length > 0) {
|
|
container.style.cssText += css.join('; ');
|
|
}
|
|
}
|
|
|
|
close(animation = true) {
|
|
const mask = this.#mask;
|
|
if (animation) {
|
|
mask.classList.add('ui-popup-active');
|
|
mask.style.opacity = 0;
|
|
setTimeout(() => { mask.remove(); }, 120);
|
|
} else {
|
|
mask.remove();
|
|
}
|
|
if (typeof this.#option.onMasking === 'function') {
|
|
this.#option.onMasking.call(this, false);
|
|
}
|
|
if (typeof this.#option.resolve === 'function') {
|
|
this.#option.resolve();
|
|
}
|
|
}
|
|
|
|
create() {
|
|
const mask = createElement('div', 'ui-popup-mask');
|
|
const option = this.#option;
|
|
if (option.mask === false) {
|
|
mask.classList.add('ui-popup-transparent');
|
|
} else if (typeof option.onMasking === 'function') {
|
|
option.onMasking.call(this, true);
|
|
}
|
|
if (!isNaN(option.zIndex)) {
|
|
mask.style.zIndex = String(option.zIndex);
|
|
}
|
|
const container = createElement('div', 'ui-popup-container');
|
|
if (option.changeZIndex === true) {
|
|
container.addEventListener('mousedown', () => {
|
|
const masks = [...this.#mask.parentElement.children].filter(e => e.classList.contains('ui-popup-mask'));
|
|
let max = 200;
|
|
masks.forEach(m => {
|
|
let index;
|
|
if (m.dataset.zindex != null) {
|
|
index = parseInt(m.dataset.zindex);
|
|
m.style.zIndex = isNaN(index) ? '' : String(index);
|
|
delete m.dataset.zindex;
|
|
} else {
|
|
index = parseInt(m.style.zIndex);
|
|
}
|
|
if (index > max) {
|
|
max = index;
|
|
}
|
|
});
|
|
mask.dataset.zindex = mask.style.zIndex;
|
|
mask.style.zIndex = max + 1;
|
|
});
|
|
} else {
|
|
|
|
}
|
|
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
|
|
if (tabIndex < 0) {
|
|
tabIndex = 0;
|
|
}
|
|
container.tabIndex = tabIndex + 1;
|
|
let content = option.content;
|
|
if (!(content instanceof HTMLElement)) {
|
|
content = createElement('div', d => d.innerText = content);
|
|
}
|
|
container.append(
|
|
createElement('div', header => {
|
|
header.className = 'ui-popup-header';
|
|
let title = option.title;
|
|
if (!(title instanceof HTMLElement)) {
|
|
title = createElement('div', t => {
|
|
t.className = 'ui-popup-header-title';
|
|
t.innerText = title;
|
|
});
|
|
}
|
|
header.appendChild(title);
|
|
if (option.movable !== false) {
|
|
const move = header; // title.querySelector('.ui-popup-move') ?? title;
|
|
move.addEventListener('mousedown', e => {
|
|
if (['svg', 'use'].includes(e.target?.tagName)) {
|
|
return;
|
|
}
|
|
if (e.buttons !== 1) {
|
|
return;
|
|
}
|
|
const parent = option.mask === false ? mask.parentElement : mask;
|
|
const x = e.clientX - container.offsetLeft;
|
|
const y = e.clientY - container.offsetTop;
|
|
let moved;
|
|
const move = e => {
|
|
if (e.buttons === 1) {
|
|
container.style.left = `${e.clientX - x}px`;
|
|
container.style.top = `${e.clientY - y}px`;
|
|
moved = true;
|
|
} else {
|
|
parent.dispatchEvent(new MouseEvent('mouseup'));
|
|
}
|
|
};
|
|
parent.addEventListener('mousemove', move, { passive: false });
|
|
const up = () => {
|
|
parent.removeEventListener('mousemove', move, { passive: false });
|
|
parent.removeEventListener('mouseup', up);
|
|
if (moved === true && typeof option.onMoveEnded === 'function') {
|
|
option.onMoveEnded.call(this);
|
|
}
|
|
moved = false;
|
|
};
|
|
parent.addEventListener('mouseup', up);
|
|
});
|
|
}
|
|
const icons = createElement('div', icons => {
|
|
icons.className = 'ui-popup-header-icons';
|
|
if (option.collapsable === true) {
|
|
const collapse = createIcon('fa-regular', 'compress-alt');
|
|
collapse.tabIndex = tabIndex + 2;
|
|
collapse.classList.add('icon-expand');
|
|
collapse.addEventListener('keypress', e => {
|
|
if (e.key === ' ' || e.key === 'Enter') {
|
|
collapse.dispatchEvent(new MouseEvent('click'));
|
|
}
|
|
});
|
|
collapse.addEventListener('click', () => {
|
|
if (container.classList.contains('ui-popup-collapse')) {
|
|
const bounds = this.#bounds;
|
|
if (bounds != null) {
|
|
container.style.cssText += `width: ${bounds.width}px; height: ${bounds.height}px`;
|
|
this.#bounds = null;
|
|
}
|
|
container.classList.remove('ui-popup-collapse');
|
|
changeIcon(collapse, 'fa-regular', 'compress-alt');
|
|
} else {
|
|
const rect = this.rect;
|
|
this.#bounds = rect;
|
|
container.style.cssText += `width: 160px; height: 40px`;
|
|
container.classList.add('ui-popup-collapse');
|
|
changeIcon(collapse, 'fa-regular', 'expand-alt');
|
|
}
|
|
if (typeof option.onResizeEnded === 'function') {
|
|
option.onResizeEnded.call(this);
|
|
}
|
|
});
|
|
icons.appendChild(collapse);
|
|
}
|
|
const cancel = createIcon('fa-regular', 'times');
|
|
cancel.tabIndex = tabIndex + 3;
|
|
cancel.addEventListener('keypress', e => {
|
|
if (e.key === ' ' || e.key === 'Enter') {
|
|
this.close();
|
|
}
|
|
});
|
|
cancel.addEventListener('click', () => this.close());
|
|
icons.appendChild(cancel);
|
|
});
|
|
header.appendChild(icons);
|
|
}),
|
|
createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
|
|
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
|
|
))
|
|
);
|
|
if (Array.isArray(option.buttons) && option.buttons.length > 0) {
|
|
tabIndex = Math.max.apply(null, [...container.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
|
|
container.appendChild(
|
|
createElement('div', 'ui-popup-footer', ...option.buttons.map((b, i) => {
|
|
const button = createElement('button', 'ui-popup-button');
|
|
if (b.tabIndex > 0) {
|
|
button.tabIndex = b.tabIndex;
|
|
} else {
|
|
button.tabIndex = tabIndex + i + 1;
|
|
}
|
|
button.innerText = b.text;
|
|
button.addEventListener('click', () => {
|
|
if (typeof b.trigger === 'function') {
|
|
const result = b.trigger(this);
|
|
if (typeof result?.then === 'function') {
|
|
result.then(r => {
|
|
if (r !== false) {
|
|
this.close();
|
|
}
|
|
}).catch(reason => console.warn(reason));
|
|
} else if (result !== false) {
|
|
this.close();
|
|
}
|
|
} else {
|
|
this.close();
|
|
}
|
|
});
|
|
return button;
|
|
}))
|
|
);
|
|
const tabs = [...container.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0);
|
|
const tabMin = Math.min.apply(null, tabs);
|
|
const tabMax = Math.max.apply(null, tabs);
|
|
const last = container.querySelector(`[tabindex="${tabMax}"]`);
|
|
if (last != null) {
|
|
last.addEventListener('keydown', e => {
|
|
if (e.key === 'Tab') {
|
|
const first = container.querySelector(`[tabindex="${tabMin}"]`);
|
|
first?.focus();
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
container.querySelector('.ui-popup-body>.ui-popup-loading').classList.add('ui-popup-loading-content');
|
|
}
|
|
// resizable
|
|
if (option.resizable === true) {
|
|
container.append(
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-right';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-bottom';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-left';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-top';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-bottom-right';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-bottom-left';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-top-left';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e));
|
|
}),
|
|
createElement('layer', layer => {
|
|
layer.className = 'ui-popup-border ui-popup-border-top-right';
|
|
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e));
|
|
})
|
|
)
|
|
}
|
|
mask.appendChild(container);
|
|
this.#mask = mask;
|
|
return mask;
|
|
}
|
|
|
|
show(parent = document.body) {
|
|
if (parent == null) {
|
|
return;
|
|
}
|
|
let mask = this.#mask ?? this.create();
|
|
// const exists = [...parent.children].filter(e => e.classList.contains('ui-popup-mask'));
|
|
const exists = parent.querySelectorAll('.ui-popup-mask');
|
|
let zindex = 0;
|
|
for (let ex of exists) {
|
|
let z = parseInt(ex.style.zIndex);
|
|
if (!isNaN(z) && z > zindex) {
|
|
zindex = z;
|
|
}
|
|
}
|
|
if (zindex > 0) {
|
|
mask.style.zIndex = String(zindex + 1);
|
|
}
|
|
parent.appendChild(mask);
|
|
if (this.#option.mask === false) {
|
|
// calculator position
|
|
const container = this.container;
|
|
container.style.left = String((parent.offsetWidth - container.offsetWidth) / 2) + 'px';
|
|
container.style.top = String((parent.offsetHeight - container.offsetHeight) / 2) + 'px';
|
|
}
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
mask.style.opacity = 1;
|
|
this.container.focus();
|
|
resolve(mask);
|
|
}, 0);
|
|
});
|
|
}
|
|
|
|
get loading() { return this.#mask?.querySelector('.ui-popup-body>.ui-popup-loading')?.style?.visibility === 'visible' }
|
|
set loading(flag) {
|
|
let loading = this.#mask?.querySelector('.ui-popup-body>.ui-popup-loading');
|
|
if (loading == null) {
|
|
return;
|
|
}
|
|
if (flag === false) {
|
|
loading.style.visibility = 'hidden';
|
|
loading.style.opacity = 0;
|
|
} else {
|
|
loading.style.visibility = 'visible';
|
|
loading.style.opacity = 1;
|
|
}
|
|
}
|
|
|
|
#resize(mod, e) {
|
|
if (e.buttons !== 1) {
|
|
return;
|
|
}
|
|
const container = this.container;
|
|
const option = this.#option;
|
|
if (typeof option.onResizeStarted === 'function') {
|
|
option.onResizeStarted.call(this);
|
|
}
|
|
const mask = this.#mask;
|
|
// this.#cursor = mask.style.cursor;
|
|
// mask.style.cursor = Cursors[mod];
|
|
const originalX = e.clientX;
|
|
const originalY = e.clientY;
|
|
const original = {
|
|
width: container.offsetWidth,
|
|
height: container.offsetHeight,
|
|
left: container.offsetLeft,
|
|
top: container.offsetTop
|
|
};
|
|
const minWidth = option.minWidth ?? 200;
|
|
const minHeight = option.minHeight ?? 200;
|
|
let resized;
|
|
const parent = option.mask === false ? mask.parentElement : mask;
|
|
const move = e => {
|
|
if (e.buttons !== 1) {
|
|
parent.dispatchEvent(new MouseEvent('mouseup'));
|
|
return;
|
|
}
|
|
const offsetX = e.clientX - originalX;
|
|
const offsetY = e.clientY - originalY;
|
|
let width = original.width;
|
|
let height = original.height;
|
|
let x = original.left;
|
|
let y = original.top;
|
|
if ((mod & ResizeMods.right) === ResizeMods.right) {
|
|
width += offsetX;
|
|
if (width < minWidth) {
|
|
width = minWidth;
|
|
}
|
|
}
|
|
if ((mod & ResizeMods.bottom) === ResizeMods.bottom) {
|
|
height += offsetY;
|
|
if (height < minHeight) {
|
|
height = minHeight;
|
|
}
|
|
}
|
|
if ((mod & ResizeMods.left) === ResizeMods.left) {
|
|
width -= offsetX;
|
|
if (width < minWidth) {
|
|
width = minWidth;
|
|
x = originalX + original.width - minWidth;
|
|
} else {
|
|
x += offsetX;
|
|
}
|
|
}
|
|
if ((mod & ResizeMods.top) === ResizeMods.top) {
|
|
height -= offsetY;
|
|
if (height < minHeight) {
|
|
height = minHeight;
|
|
y = originalY + original.height - minHeight;
|
|
} else {
|
|
y += offsetY;
|
|
}
|
|
}
|
|
if (typeof option.onResizing === 'function') {
|
|
option.onResizing.call(this, x, y, width, height);
|
|
} else {
|
|
container.style.cssText += `left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px`;
|
|
}
|
|
resized = true;
|
|
}
|
|
parent.addEventListener('mousemove', move, { passive: false });
|
|
const up = () => {
|
|
parent.removeEventListener('mousemove', move, { passive: false });
|
|
parent.removeEventListener('mouseup', up);
|
|
// mask.style.cursor = this.#cursor;
|
|
if (resized === true && typeof option.onResizeEnded === 'function') {
|
|
option.onResizeEnded.call(this);
|
|
}
|
|
resized = false;
|
|
};
|
|
parent.addEventListener('mouseup', up);
|
|
}
|
|
}
|
|
|
|
export function createPopup(title, content, ...buttons) {
|
|
const popup = new Popup({
|
|
title,
|
|
content,
|
|
buttons
|
|
});
|
|
return popup;
|
|
}
|
|
|
|
const iconTypes = {
|
|
'info': 'info-circle',
|
|
'information': 'info-circle',
|
|
'warn': 'exclamation-triangle',
|
|
'warning': 'exclamation-triangle',
|
|
'question': 'question-circle',
|
|
'error': 'times-circle'
|
|
}
|
|
|
|
export function showAlert(title, message, iconType = 'info', parent = document.body) {
|
|
return new Promise(resolve => {
|
|
const popup = new Popup({
|
|
title,
|
|
content: createElement('div', 'message-wrapper',
|
|
createIcon('fa-solid', iconTypes[iconType] ?? 'info-circle'),
|
|
createElement('span', span => span.innerText = message)
|
|
),
|
|
resolve,
|
|
buttons: [
|
|
{ text: r('ok', 'OK'), trigger: resolve }
|
|
]
|
|
});
|
|
popup.show(parent).then(mask => {
|
|
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
|
|
button?.focus();
|
|
});
|
|
});
|
|
}
|
|
|
|
export function showConfirm(title, content, buttons, iconType = 'question', parent = document.body) {
|
|
return new Promise(resolve => {
|
|
const wrapper = createElement('div', 'message-wrapper');
|
|
if (!nullOrEmpty(iconType)) {
|
|
wrapper.appendChild(createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'));
|
|
}
|
|
wrapper.appendChild(content instanceof HTMLElement ?
|
|
content :
|
|
createElement('span', span => span.innerText = content));
|
|
const popup = new Popup({
|
|
title,
|
|
content: wrapper,
|
|
resolve,
|
|
buttons: buttons?.map(b => {
|
|
return {
|
|
text: b.text,
|
|
trigger: p => {
|
|
let result;
|
|
if (typeof b.trigger === 'function') {
|
|
result = b.trigger(p, b);
|
|
if (typeof result?.then === 'function') {
|
|
return result.then(r => {
|
|
r !== false && resolve(r);
|
|
return r;
|
|
});
|
|
}
|
|
result !== false && resolve(result);
|
|
} else {
|
|
result = {
|
|
key: b.key,
|
|
popup: p
|
|
};
|
|
resolve(result);
|
|
}
|
|
return result;
|
|
}
|
|
};
|
|
}) ??
|
|
[
|
|
{ text: r('yes', 'Yes'), trigger: p => resolve({ key: 'yes', popup: p }) },
|
|
{ text: r('no', 'No'), trigger: p => resolve({ key: 'no', popup: p }) }
|
|
]
|
|
});
|
|
popup.show(parent).then(mask => {
|
|
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
|
|
button?.focus();
|
|
});
|
|
});
|
|
} |