tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjustment

Browse Source
This commit is contained in:
Tsanie Lily
2023-04-21 17:17:56 +08:00
parent c4316e7e52
commit 222ca43afb
23 changed files with 341 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
lib/ui/popup.js
View File

@ -48,7 +48,7 @@ class Popup {
this.#option = opts;
}
get container() { return this.#mask.querySelector('.popup-container') }
get container() { return this.#mask.querySelector('.ui-popup-container') }
get rect() {
const container = this.container;
@ -56,7 +56,7 @@ class Popup {
return null;
}
const style = global.getComputedStyle(container);
const collapsed = container.classList.contains('popup-collapse');
const collapsed = container.classList.contains('ui-popup-collapse');
const bounds = this.#bounds;
return {
collapsed,
@ -78,11 +78,11 @@ class Popup {
if (!isNaN(r.top)) {
css.push(`top: ${r.top}px`);
}
const collapse = container.querySelector('.popup-header>.icon-expand');
const collapse = container.querySelector('.ui-popup-header>.icon-expand');
if (r.collapsed === true) {
css.push('width: 160px', 'height: 40px');
this.#bounds = r;
container.classList.add('popup-collapse');
container.classList.add('ui-popup-collapse');
if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'expand-alt');
}
@ -93,7 +93,7 @@ class Popup {
if (!isNaN(r.height) && r.height > 0) {
css.push(`height: ${r.height}px`);
}
container.classList.remove('popup-collapse');
container.classList.remove('ui-popup-collapse');
this.#bounds = null;
if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'compress-alt');
@ -105,15 +105,18 @@ class Popup {
}
create() {
const mask = createElement('div', 'popup-mask');
const mask = createElement('div', 'ui-popup-mask');
if (this.#option.mask === false) {
mask.classList.add('popup-transparent');
mask.classList.add('ui-popup-transparent');
}
const container = createElement('div', 'popup-container');
const container = createElement('div', 'ui-popup-container');
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
if (tabIndex < 0) {
tabIndex = 0;
}
container.tabIndex = tabIndex + 1;
const close = () => {
mask.classList.add('popup-active');
mask.classList.add('ui-popup-active');
mask.style.opacity = 0;
setTimeout(() => mask.remove(), 120);
};
@ -123,17 +126,17 @@ class Popup {
}
container.append(
createElement('div', header => {
header.className = 'popup-header';
header.className = 'ui-popup-header';
let title = this.#option.title;
if (!(title instanceof HTMLElement)) {
title = createElement('div', t => {
t.className = 'popup-header-title';
t.className = 'ui-popup-header-title';
t.innerText = title;
});
}
header.appendChild(title);
if (this.#option.movable !== false) {
const move = title.querySelector('.popup-move') ?? title;
const move = title.querySelector('.ui-popup-move') ?? title;
move.addEventListener('mousedown', e => {
const x = e.clientX - container.offsetLeft;
const y = e.clientY - container.offsetTop;
@ -165,19 +168,19 @@ class Popup {
}
});
collapse.addEventListener('click', () => {
if (container.classList.contains('popup-collapse')) {
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('popup-collapse');
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('popup-collapse');
container.classList.add('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'expand-alt');
}
});
@ -193,17 +196,17 @@ class Popup {
cancel.addEventListener('click', () => close());
header.appendChild(cancel);
}),
createElement('div', 'popup-body', content, createElement('div', 'popup-loading',
createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
))
);
if (Array.isArray(this.#option.buttons)) {
tabIndex = Math.max.apply(null, [...container.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
container.appendChild(
createElement('div', 'popup-footer', ...this.#option.buttons.map((b, i) => {
const button = createElement('button', 'popup-button');
if (b.tabindex > 0) {
button.tabIndex = b.tabindex;
createElement('div', 'ui-popup-footer', ...this.#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;
}
@ -245,35 +248,35 @@ class Popup {
if (this.#option.resizable === true) {
container.append(
createElement('layer', layer => {
layer.className = 'popup-border popup-border-right';
layer.className = 'ui-popup-border ui-popup-border-right';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.right, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-bottom';
layer.className = 'ui-popup-border ui-popup-border-bottom';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottom, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-left';
layer.className = 'ui-popup-border ui-popup-border-left';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.left, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-top';
layer.className = 'ui-popup-border ui-popup-border-top';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.top, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-bottom-right';
layer.className = 'ui-popup-border ui-popup-border-bottom-right';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomRight, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-bottom-left';
layer.className = 'ui-popup-border ui-popup-border-bottom-left';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.bottomLeft, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-top-left';
layer.className = 'ui-popup-border ui-popup-border-top-left';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topLeft, e));
}),
createElement('layer', layer => {
layer.className = 'popup-border popup-border-top-right';
layer.className = 'ui-popup-border ui-popup-border-top-right';
layer.addEventListener('mousedown', e => this.#resize(ResizeMods.topRight, e));
})
)
@ -304,9 +307,9 @@ class Popup {
});
}
get loading() { return this.#mask?.querySelector('.popup-body>.popup-loading')?.style?.visibility === 'visible' }
get loading() { return this.#mask?.querySelector('.ui-popup-body>.ui-popup-loading')?.style?.visibility === 'visible' }
set loading(flag) {
let loading = this.#mask?.querySelector('.popup-body>.popup-loading');
let loading = this.#mask?.querySelector('.ui-popup-body>.ui-popup-loading');
if (loading == null) {
return;
}
@ -431,7 +434,7 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
]
});
popup.show(parent).then(mask => {
const button = mask.querySelector('.popup-container .popup-footer .popup-button:last-child');
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
button?.focus();
});
});
@ -480,7 +483,7 @@ export function showConfirm(title, content, buttons, iconType = 'question', pare
]
});
popup.show(parent).then(mask => {
const button = mask.querySelector('.popup-container .popup-footer .popup-button:last-child');
const button = mask.querySelector('.ui-popup-container .ui-popup-footer .ui-popup-button:last-child');
button?.focus();
});
});