popup.rect get & set

lib/ui/checkbox.js

@@ -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(

lib/ui/icon.js

@@ -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;

lib/ui/popup.html

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

lib/ui/popup.js

@@ -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,
+            collapsed,
-            top: style.top,
+            left: trimPx(style.left),
-            width: style.width,
+            top: trimPx(style.top),
-            height: style.height
+            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) {
+        const collapse = container.querySelector('.popup-header>.icon-expand');
-            css.push(`width: ${r.width}px`);
+        if (r.collapsed === true) {
-        }
+            css.push('width: 160px', 'height: 40px');
-        if (!isNaN(r.height) && r.height > 0) {
+            this.#bounds = r;
-            css.push(`height: ${r.height}px`);
+            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'));

lib/ui/tooltip.js

@@ -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;