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-06-05 10:09:25 +08:00
parent a930a2bf5b
commit 93d5be462e
5 changed files with 111 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
lib/ui/popup.js
View File

@ -78,7 +78,7 @@ class Popup {
if (!isNaN(r.top)) {
css.push(`top: ${r.top}px`);
}
const collapse = container.querySelector('.ui-popup-header>.icon-expand');
const collapse = container.querySelector('.ui-popup-header-icons>.icon-expand');
if (r.collapsed === true) {
css.push('width: 160px', 'height: 40px');
this.#bounds = r;
@ -150,6 +150,8 @@ class Popup {
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) {
@ -172,11 +174,15 @@ class Popup {
}
header.appendChild(title);
if (option.movable !== false) {
const move = title.querySelector('.ui-popup-move') ?? title;
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;
@ -186,61 +192,65 @@ class Popup {
container.style.top = `${e.clientY - y}px`;
moved = true;
} else {
mask.dispatchEvent(new MouseEvent('mouseup'));
parent.dispatchEvent(new MouseEvent('mouseup'));
}
};
mask.addEventListener('mousemove', move, { passive: false });
parent.addEventListener('mousemove', move, { passive: false });
const up = () => {
mask.removeEventListener('mousemove', move, { passive: false });
mask.removeEventListener('mouseup', up);
parent.removeEventListener('mousemove', move, { passive: false });
parent.removeEventListener('mouseup', up);
if (moved === true && typeof option.onMoveEnded === 'function') {
option.onMoveEnded.call(this);
}
moved = false;
};
mask.addEventListener('mouseup', up);
parent.addEventListener('mouseup', up);
});
}
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;
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'));
}
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);
});
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();
}
});
header.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);
});
cancel.addEventListener('click', () => this.close());
header.appendChild(cancel);
header.appendChild(icons);
}),
createElement('div', 'ui-popup-body', content, createElement('div', 'ui-popup-loading',
createElement('div', null, createIcon('fa-regular', 'spinner-third'))
@ -339,7 +349,8 @@ class Popup {
return;
}
let mask = this.#mask ?? this.create();
const exists = [...parent.children].filter(e => e.classList.contains('ui-popup-mask'));
// 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);