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

sync

Browse Source
This commit is contained in:
Chen Lily
2023-05-30 09:13:02 +08:00
parent 8dafc1c5f4
commit 98a45a6f19
6 changed files with 289 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
lib/ui/popup.js
View File

@ -104,12 +104,48 @@ class Popup {
}
}
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();
}
}
create() {
const mask = createElement('div', 'ui-popup-mask');
if (this.#option.mask === false) {
const option = this.#option;
if (option.mask === false) {
mask.classList.add('ui-popup-transparent');
}
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;
});
}
let tabIndex = Math.max.apply(null, [...document.querySelectorAll('[tabindex]')].map(e => e.tabIndex ?? 0));
if (tabIndex < 0) {
tabIndex = 0;
@ -120,14 +156,14 @@ class Popup {
mask.style.opacity = 0;
setTimeout(() => mask.remove(), 120);
};
let content = this.#option.content;
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 = this.#option.title;
let title = option.title;
if (!(title instanceof HTMLElement)) {
title = createElement('div', t => {
t.className = 'ui-popup-header-title';
@ -135,7 +171,7 @@ class Popup {
});
}
header.appendChild(title);
if (this.#option.movable !== false) {
if (option.movable !== false) {
const move = title.querySelector('.ui-popup-move') ?? title;
move.addEventListener('mousedown', e => {
const x = e.clientX - container.offsetLeft;
@ -150,15 +186,15 @@ class Popup {
const up = () => {
mask.removeEventListener('mousemove', move, { passive: false });
mask.removeEventListener('mouseup', up);
if (moved === true && typeof this.#option.onMoveEnded === 'function') {
this.#option.onMoveEnded.call(this);
if (moved === true && typeof option.onMoveEnded === 'function') {
option.onMoveEnded.call(this);
}
moved = false;
};
mask.addEventListener('mouseup', up);
});
}
if (this.#option.collapsable === true) {
if (option.collapsable === true) {
const collapse = createIcon('fa-regular', 'compress-alt');
collapse.tabIndex = tabIndex + 2;
collapse.classList.add('icon-expand');
@ -183,6 +219,9 @@ class Popup {
container.classList.add('ui-popup-collapse');
changeIcon(collapse, 'fa-regular', 'expand-alt');
}
if (typeof option.onResizeEnded === 'function') {
option.onResizeEnded.call(this);
}
});
header.appendChild(collapse);
}
@ -200,10 +239,10 @@ class Popup {
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
))
);
if (Array.isArray(this.#option.buttons)) {
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', ...this.#option.buttons.map((b, i) => {
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;
@ -243,9 +282,11 @@ class Popup {
}
});
}
} else {
container.querySelector('.ui-popup-body>.ui-popup-loading').classList.add('ui-popup-loading-content');
}
// resizable
if (this.#option.resizable === true) {
if (option.resizable === true) {
container.append(
createElement('layer', layer => {
layer.className = 'ui-popup-border ui-popup-border-right';
@ -291,6 +332,17 @@ class Popup {
return;
}
let mask = this.#mask ?? this.create();
const exists = [...parent.children].filter(e => e.classList.contains('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