From 046ed387e6f5a50a7635728e75f7707cdc0a1049 Mon Sep 17 00:00:00 2001
From: Tsanie Lily <tsorgy@gmail.com>
Date: Tue, 18 Apr 2023 17:34:47 +0800
Subject: [PATCH] adjust events

---
 lib/ui/popup.html | 10 ++++++++--
 lib/ui/popup.js   | 37 +++++++++++++++++++++++--------------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/lib/ui/popup.html b/lib/ui/popup.html
index 0d2ef2a..977ab2b 100644
--- a/lib/ui/popup.html
+++ b/lib/ui/popup.html
@@ -15,8 +15,11 @@
         document.querySelector('#button-popup').addEventListener('click', () => {
             const popup = new ui.Popup({
                 title: 'title long title, looooooong title, looooooooooooooooooooooooong ~',
-                content: 'content',
+                content: ui.createElement('div', 'class-content',
+                    ui.createElement('span', span => span.innerText = 'Text content.')
+                ),
                 mask: false,
+                // movable: false,
                 resizable: true,
                 collapsable: true,
                 minWidth: 210,
@@ -30,7 +33,9 @@
                         }
                     },
                     { text: 'OK' }
-                ]
+                ],
+                onMoveEnded: () => console.log('move ended.', popup.rect),
+                onResizeEnded: () => console.log('resize ended.', popup.rect)
             });
             popup.show();
         });
@@ -40,6 +45,7 @@
             --title-bg-color: lightgray;
             --title-color: #333;
         }
+
         .popup-mask .popup-container {
             min-width: 210px;
             min-height: 200px;
diff --git a/lib/ui/popup.js b/lib/ui/popup.js
index b75d91f..94ad1b6 100644
--- a/lib/ui/popup.js
+++ b/lib/ui/popup.js
@@ -101,19 +101,26 @@ class Popup {
                     });
                 }
                 header.appendChild(title);
-                const move = title.querySelector('.popup-move') ?? title;
-                move.addEventListener('mousedown', e => {
-                    const x = e.clientX - container.offsetLeft;
-                    const y = e.clientY - container.offsetTop;
-                    const move = e => {
-                        container.style.left = `${e.clientX - x}px`;
-                        container.style.top = `${e.clientY - y}px`;
-                    };
-                    mask.addEventListener('mousemove', move, { passive: false });
-                    mask.addEventListener('mouseup', () => {
-                        mask.removeEventListener('mousemove', move, { passive: false });
+                if (this.#option.movable !== false) {
+                    const move = title.querySelector('.popup-move') ?? title;
+                    move.addEventListener('mousedown', e => {
+                        const x = e.clientX - container.offsetLeft;
+                        const y = e.clientY - container.offsetTop;
+                        const move = e => {
+                            container.style.left = `${e.clientX - x}px`;
+                            container.style.top = `${e.clientY - y}px`;
+                        };
+                        mask.addEventListener('mousemove', move, { passive: false });
+                        const up = () => {
+                            mask.removeEventListener('mousemove', move, { passive: false });
+                            mask.removeEventListener('mouseup', up);
+                            if (typeof this.#option.onMoveEnded === 'function') {
+                                this.#option.onMoveEnded.call(this);
+                            }
+                        };
+                        mask.addEventListener('mouseup', up);
                     });
-                });
+                }
                 if (this.#option.collapsable === true) {
                     const collapse = createIcon('fa-regular', 'compress-alt');
                     collapse.classList.add('icon-expand');
@@ -309,13 +316,15 @@ class Popup {
         }
         const parent = option.mask === false ? mask.parentElement : mask;
         parent.addEventListener('mousemove', move, { passive: false });
-        parent.addEventListener('mouseup', () => {
+        const up = () => {
             parent.removeEventListener('mousemove', move, { passive: false });
+            parent.removeEventListener('mouseup', up);
             // mask.style.cursor = this.#cursor;
             if (typeof option.onResizeEnded === 'function') {
                 option.onResizeEnded.call(this);
             }
-        });
+        };
+        parent.addEventListener('mouseup', up);
     }
 }