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

popup.rect get & set

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-19 09:27:29 +08:00
parent 046ed387e6
commit 92a360cbc2
5 changed files with 54 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/ui/checkbox.js
View File

@ -6,7 +6,7 @@ function fillCheckbox(container, type, label, charactor = 'check') {
container.appendChild(
createElement('layer', 'check-box-inner', createIcon(type, charactor))
);
if (label instanceof HTMLElement) {
if (label instanceof Element) {
container.appendChild(label);
} else if (label?.length > 0) {
container.appendChild(

2
lib/ui/icon.js
View File

@ -10,7 +10,7 @@ function createUse(type, id) {
}
function changeIcon(svg, type, id) {
if (svg instanceof HTMLElement) {
if (svg instanceof SVGElement) {
svg.replaceChildren(createUse(type, id));
}
return svg;

1
lib/ui/popup.html
View File

@ -38,6 +38,7 @@
onResizeEnded: () => console.log('resize ended.', popup.rect)
});
popup.show();
window.popup = popup;
});
</script>
<style type="text/css">

64
lib/ui/popup.js
View File

@ -27,6 +27,17 @@ const ResizeMods = {
// [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;
}
class Popup {
#mask;
#option;
@ -45,11 +56,14 @@ class Popup {
return null;
}
const style = global.getComputedStyle(container);
const collapsed = container.classList.contains('popup-collapse');
const bounds = this.#bounds;
return {
left: style.left,
top: style.top,
width: style.width,
height: style.height
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) {
@ -64,11 +78,26 @@ class Popup {
if (!isNaN(r.top)) {
css.push(`top: ${r.top}px`);
}
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`);
const collapse = container.querySelector('.popup-header>.icon-expand');
if (r.collapsed === true) {
css.push('width: 160px', 'height: 40px');
this.#bounds = r;
container.classList.add('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('popup-collapse');
this.#bounds = null;
if (collapse != null) {
changeIcon(collapse, 'fa-regular', 'compress-alt');
}
}
if (css.length > 0) {
container.style.cssText += css.join('; ');
@ -106,17 +135,20 @@ class Popup {
move.addEventListener('mousedown', e => {
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;
};
mask.addEventListener('mousemove', move, { passive: false });
const up = () => {
mask.removeEventListener('mousemove', move, { passive: false });
mask.removeEventListener('mouseup', up);
if (typeof this.#option.onMoveEnded === 'function') {
if (moved === true && typeof this.#option.onMoveEnded === 'function') {
this.#option.onMoveEnded.call(this);
}
moved = false;
};
mask.addEventListener('mouseup', up);
});
@ -128,14 +160,15 @@ class Popup {
if (container.classList.contains('popup-collapse')) {
const bounds = this.#bounds;
if (bounds != null) {
container.style.cssText += `width: ${bounds.width}; height: ${bounds.height}`;
container.style.cssText += `width: ${bounds.width}px; height: ${bounds.height}px`;
this.#bounds = null;
}
container.classList.remove('popup-collapse');
changeIcon(collapse, 'fa-regular', 'compress-alt');
} else {
const rect = this.rect;
this.#bounds = rect;
container.style.cssText += `left: ${rect.left}; top: ${rect.top}; width: 160px; height: 40px`;
container.style.cssText += `width: 160px; height: 40px`;
container.classList.add('popup-collapse');
changeIcon(collapse, 'fa-regular', 'expand-alt');
}
@ -271,6 +304,7 @@ class Popup {
};
const minWidth = option.minWidth ?? 200;
const minHeight = option.minHeight ?? 200;
let resized;
const move = e => {
const offsetX = e.clientX - originalX;
const offsetY = e.clientY - originalY;
@ -313,6 +347,7 @@ class Popup {
} else {
container.style.cssText += `left: ${x}px; top: ${y}px; width: ${width}px; height: ${height}px`;
}
resized = true;
}
const parent = option.mask === false ? mask.parentElement : mask;
parent.addEventListener('mousemove', move, { passive: false });
@ -320,9 +355,10 @@ class Popup {
parent.removeEventListener('mousemove', move, { passive: false });
parent.removeEventListener('mouseup', up);
// mask.style.cursor = this.#cursor;
if (typeof option.onResizeEnded === 'function') {
if (resized === true && typeof option.onResizeEnded === 'function') {
option.onResizeEnded.call(this);
}
resized = false;
};
parent.addEventListener('mouseup', up);
}
@ -365,7 +401,7 @@ export function showAlert(title, message, iconType = 'info', parent = document.b
}
export function showConfirm(title, content, buttons, iconType = 'question', parent = document.body) {
return new Promise((resolve, reject) => {
return new Promise(resolve => {
const wrapper = createElement('div', 'message-wrapper');
if (!nullOrEmpty(iconType)) {
wrapper.appendChild(createIcon('fa-solid', iconTypes[iconType] ?? 'question-circle'));

2
lib/ui/tooltip.js
View File

@ -23,7 +23,7 @@ function setTooltip(container, content, flag = false, parent = null) {
createElement('div', 'tooltip-curtain tooltip-color'),
createElement('div', cnt => {
cnt.className = 'tooltip-content';
if (content instanceof HTMLElement) {
if (content instanceof Element) {
cnt.appendChild(content);
} else {
cnt.innerText = content;