From b6a9df7ebcf4f40b4335a8ced61c8c7ce6ec7b1e Mon Sep 17 00:00:00 2001
From: brahim <92426196+BrhmDev@users.noreply.github.com>
Date: Tue, 24 Sep 2024 19:57:20 +0200
Subject: [PATCH] Add drag function for Zen Sidebar

---
 src/ZenSidebarManager.mjs | 44 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/ZenSidebarManager.mjs b/src/ZenSidebarManager.mjs
index abb1994..200fcad 100644
--- a/src/ZenSidebarManager.mjs
+++ b/src/ZenSidebarManager.mjs
@@ -108,10 +108,45 @@ var gZenBrowserManagerSidebar = {
         }
       }.bind(this)
     );
-
+    this.panelHeader.addEventListener('mousedown', this.handleDragPanel.bind(this));
     this.handleEvent();
   },
 
+  handleDragPanel(mouseDownEvent) {
+    if (mouseDownEvent.target !== this.panelHeader) return;
+    this._isDragging = true;
+    const sidebar = document.getElementById('zen-sidebar-web-panel');
+    const wrapper = document.getElementById('zen-sidebar-web-panel-wrapper');
+    const startTop = sidebar.style.top?.match(/\d+/)?.[0] || 0;
+    const startLeft = sidebar.style.left?.match(/\d+/)?.[0] || 0;
+
+
+    const sidebarBBox = sidebar.getBoundingClientRect();
+    const sideBarHeight = sidebarBBox.height;
+    const sideBarWidth = sidebarBBox.width;
+
+    const topMouseOffset = startTop - mouseDownEvent.screenY;
+    const leftMouseOffset = startLeft - mouseDownEvent.screenX;
+    const moveListener = (mouseMoveEvent) => {
+      let top = mouseMoveEvent.screenY + topMouseOffset;
+      let left = mouseMoveEvent.screenX + leftMouseOffset;
+
+      const wrapperBounds = wrapper.getBoundingClientRect();
+      top = Math.max(0, Math.min(top, wrapperBounds.height - sideBarHeight));
+      left = Math.max(0, Math.min(left, wrapperBounds.width - sideBarWidth));
+
+      sidebar.style.top = top + "px";
+      sidebar.style.left = left + "px";
+    };
+
+
+    document.addEventListener('mousemove', moveListener);
+    document.addEventListener('mouseup', () => {
+      document.removeEventListener('mousemove', moveListener);
+      this._isDragging = false;
+      }, {once: true});
+  },
+
   get isFloating() {
     return document.getElementById('zen-sidebar-web-panel').hasAttribute('pinned');
   },
@@ -508,6 +543,13 @@ var gZenBrowserManagerSidebar = {
     return this._hSplitterElement;
   },
 
+  get panelHeader() {
+    if (!this._header) {
+      return document.getElementById('zen-sidebar-web-header');
+    }
+    return this._header;
+  },
+
   // Context menu
 
   updateContextMenu(aPopupMenu) {