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

sync from server

Browse Source
This commit is contained in:
Chen Lily
2023-05-30 17:34:14 +08:00
parent 98a45a6f19
commit a930a2bf5b
5 changed files with 81 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lib/ui/popup.js
View File

@ -109,10 +109,13 @@ class Popup {
if (animation) {
mask.classList.add('ui-popup-active');
mask.style.opacity = 0;
setTimeout(() => mask.remove(), 120);
setTimeout(() => { mask.remove(); }, 120);
} else {
mask.remove();
}
if (typeof this.#option.onMasking === 'function') {
this.#option.onMasking.call(this, false);
}
}
create() {
@ -120,6 +123,8 @@ class Popup {
const option = this.#option;
if (option.mask === false) {
mask.classList.add('ui-popup-transparent');
} else if (typeof option.onMasking === 'function') {
this.#option.onMasking.call(this, true);
}
if (!isNaN(option.zIndex)) {
mask.style.zIndex = String(option.zIndex);
@ -151,11 +156,6 @@ class Popup {
tabIndex = 0;
}
container.tabIndex = tabIndex + 1;
const close = () => {
mask.classList.add('ui-popup-active');
mask.style.opacity = 0;
setTimeout(() => mask.remove(), 120);
};
let content = option.content;
if (!(content instanceof HTMLElement)) {
content = createElement('div', d => d.innerText = content);
@ -174,13 +174,20 @@ class Popup {
if (option.movable !== false) {
const move = title.querySelector('.ui-popup-move') ?? title;
move.addEventListener('mousedown', e => {
if (e.buttons !== 1) {
return;
}
const x = e.clientX - container.offsetLeft;
const y = e.clientY - container.offsetTop;
let moved;
const move = e => {
container.style.left = `${e.clientX - x}px`;
container.style.top = `${e.clientY - y}px`;
moved = true;
if (e.buttons === 1) {
container.style.left = `${e.clientX - x}px`;
container.style.top = `${e.clientY - y}px`;
moved = true;
} else {
mask.dispatchEvent(new MouseEvent('mouseup'));
}
};
mask.addEventListener('mousemove', move, { passive: false });
const up = () => {
@ -229,10 +236,10 @@ class Popup {
cancel.tabIndex = tabIndex + 3;
cancel.addEventListener('keypress', e => {
if (e.key === ' ' || e.key === 'Enter') {
close();
this.close();
}
});
cancel.addEventListener('click', () => close());
cancel.addEventListener('click', () => this.close());
header.appendChild(cancel);
}),
createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
@ -256,14 +263,14 @@ class Popup {
if (typeof result?.then === 'function') {
result.then(r => {
if (r !== false) {
close();
this.close();
}
}).catch(() => { });
}).catch(reason => console.warn(reason));
} else if (result !== false) {
close();
this.close();
}
} else {
close();
this.close();
}
});
return button;
@ -375,6 +382,9 @@ class Popup {
}
#resize(mod, e) {
if (e.buttons !== 1) {
return;
}
const container = this.container;
const option = this.#option;
if (typeof option.onResizeStarted === 'function') {
@ -394,7 +404,12 @@ class Popup {
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;
@ -438,7 +453,6 @@ class Popup {
}
resized = true;
}
const parent = option.mask === false ? mask.parentElement : mask;
parent.addEventListener('mousemove', move, { passive: false });
const up = () => {
parent.removeEventListener('mousemove', move, { passive: false });