From db63095cf15c80a266639dff586baea4a5f87e44 Mon Sep 17 00:00:00 2001
From: mauro-balades <mauro.balades@tutanota.com>
Date: Fri, 30 Aug 2024 10:07:29 +0200
Subject: [PATCH] Allowed moving around web panel pages

---
 src/ZenSidebarManager.mjs | 45 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/ZenSidebarManager.mjs b/src/ZenSidebarManager.mjs
index 1855c53..ddb06dc 100644
--- a/src/ZenSidebarManager.mjs
+++ b/src/ZenSidebarManager.mjs
@@ -247,6 +247,10 @@ var gZenBrowserManagerSidebar = {
       button.setAttribute("context", "zenWebPanelContextMenu");
       this._getWebPanelIcon(panel.url, button);
       button.addEventListener("click", this._handleClick.bind(this));
+      button.addEventListener('dragstart', this._handleDragStart.bind(this));
+      button.addEventListener('dragover', this._handleDragOver.bind(this));
+      button.addEventListener('dragenter', this._handleDragEnter.bind(this));
+      button.addEventListener('dragend', this._handleDragEnd.bind(this));
       this.sidebarElement.appendChild(button);
     }
     const addButton = document.getElementById("zen-sidebar-add-panel-button");
@@ -302,6 +306,47 @@ var gZenBrowserManagerSidebar = {
     this._updateWebPanel();
   },
 
+  _handleDragStart(event) {
+    this.__dragingElement = event.target;
+    this.__dragingIndex = Array.prototype.indexOf.call(event.target.parentNode.children, event.target);
+    event.target.style.opacity = '0.7';
+
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/html', event.target.innerHTML);
+    event.dataTransfer.setData('text/plain', event.target.id);
+  },
+
+  _handleDragOver(event) {
+  },
+
+  _handleDragEnter(event) {
+    const target = event.target;
+    const elIndex = Array.prototype.indexOf.call(target.parentNode.children, target);
+    if (elIndex < this.__dragingIndex) {
+      target.before(this.__dragingElement);
+      this.__dragingIndex = elIndex - 1;
+    }
+    target.after(this.__dragingElement);
+    this.__dragingIndex = elIndex + 1;
+  },
+
+  _handleDragEnd(event) {
+    event.target.style.opacity = '1';
+
+    let data = this.sidebarData;
+    let newPos = [];
+    for (let element of this.__dragingElement.parentNode.children) {
+      console.log(element)
+      let panelId = element.getAttribute("zen-sidebar-id");
+      newPos.push(panelId);
+    }
+    data.index = newPos;
+    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data));
+    this._currentPanel = this.__dragingElement.getAttribute("zen-sidebar-id");
+    this.open();
+    this.__dragingElement = undefined;
+  },
+  
   _createNewPanel(url) {
     let data = this.sidebarData;
     let newName = "p" + new Date().getTime();