Move from dragula to sortablejs

dist/electron-tabs.js

@@ -50,18 +50,16 @@ class $4fa36e821943b400$var$TabGroup extends HTMLElement {
         $4fa36e821943b400$var$TabGroupPrivate.initVisibility.bind(this)();
         // Init draggable tabs
         if (this.options.draggable) {
-            const initDragula = ()=>{
+            const initSortable = ()=>{
-                // FIXME: dragula doesnt support shadow dom :-(
+                const options = Object.assign({
-                console.log(this.tabContainer);
+                    direction: "horizontal",
-                const d = window.dragula([
+                    animation: 150,
-                    this.tabContainer
+                    swapThreshold: 0.20
-                ], {
+                }, this.options.draggableOptions);
-                    direction: "horizontal"
+                new window.Sortable(this.tabContainer, options);
-                });
-                console.log(d);
             };
-            if (window.dragula) initDragula();
+            if (window.Sortable) initSortable();
-            else document.addEventListener("DOMContentLoaded", initDragula);
+            else document.addEventListener("DOMContentLoaded", initSortable);
         }
     }
     setDefaultTab(tab) {

package-lock.json

@@ -1057,12 +1057,6 @@
         "color-convert": "^2.0.1"
       }
     },
-    "atoa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/atoa/-/atoa-1.0.0.tgz",
-      "integrity": "sha512-VVE1H6cc4ai+ZXo/CRWoJiHXrA1qfA31DPnx6D20+kSI547hQN5Greh51LQ1baMRMfxO5K5M4ImMtZbZt2DODQ==",
-      "dev": true
-    },
     "base-x": {
       "version": "3.0.9",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.9.tgz",
@@ -1247,16 +1241,6 @@
         "proto-list": "~1.2.1"
       }
     },
-    "contra": {
-      "version": "1.9.4",
-      "resolved": "https://registry.npmjs.org/contra/-/contra-1.9.4.tgz",
-      "integrity": "sha1-9TveQtfltZhcrk2ZqNYQUm3o8o0=",
-      "dev": true,
-      "requires": {
-        "atoa": "1.0.0",
-        "ticky": "1.0.1"
-      }
-    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -1276,15 +1260,6 @@
         "yaml": "^1.10.0"
       }
     },
-    "crossvent": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/crossvent/-/crossvent-1.5.5.tgz",
-      "integrity": "sha1-rSCHjkkh6b5z2daXb4suzQ9xoLE=",
-      "dev": true,
-      "requires": {
-        "custom-event": "^1.0.0"
-      }
-    },
     "css-declaration-sorter": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz",
@@ -1389,12 +1364,6 @@
         "css-tree": "^1.1.2"
       }
     },
-    "custom-event": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
-      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
-      "dev": true
-    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1499,16 +1468,6 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
-    "dragula": {
-      "version": "3.7.3",
-      "resolved": "https://registry.npmjs.org/dragula/-/dragula-3.7.3.tgz",
-      "integrity": "sha512-/rRg4zRhcpf81TyDhaHLtXt6sEywdfpv1cRUMeFFy7DuypH2U0WUL0GTdyAQvXegviT4PJK4KuMmOaIDpICseQ==",
-      "dev": true,
-      "requires": {
-        "contra": "1.9.4",
-        "crossvent": "1.5.5"
-      }
-    },
     "duplexer3": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
@@ -2626,6 +2585,12 @@
         "type-fest": "^0.13.1"
       }
     },
+    "sortablejs": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz",
+      "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==",
+      "dev": true
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2748,12 +2713,6 @@
         }
       }
     },
-    "ticky": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz",
-      "integrity": "sha1-t8+nHnaPHJAAxJe5FRswlHxQ5G0=",
-      "dev": true
-    },
     "timsort": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",

package.json

@@ -31,10 +31,10 @@
   "license": "MIT",
   "devDependencies": {
     "cssnano": "^5.1.9",
-    "dragula": "^3.7.3",
     "electron": "^17.1.2",
     "parcel": "^2.5.0",
     "parcel-transformer-css-to-string": "^0.9.1",
-    "postcss": "^8.4.14"
+    "postcss": "^8.4.14",
+    "sortablejs": "^1.15.0"
   }
 }

src/draggable.js

@@ -1,12 +1,4 @@
-import dragula from "dragula";
+import Sortable from "sortablejs";
 import "./index.js";
-import styles from "dragula/dist/dragula.css";
 
-window.dragula = dragula;
+window.Sortable = Sortable;
-
-// Inject styles
-(function () {
-  let styleTag = document.createElement("style");
-  styleTag.innerHTML = styles;
-  document.getElementsByTagName("head")[0].appendChild(styleTag);
-})();

src/index.js

@@ -60,19 +60,19 @@ class TabGroup extends HTMLElement {
 
     // Init draggable tabs
     if (this.options.draggable) {
-      const initDragula = () => {
+      const initSortable = () => {
-        // FIXME: dragula doesnt support shadow dom :-(
+        const options = Object.assign({
-        console.log(this.tabContainer);
+          direction: "horizontal",
-        const d =window.dragula([this.tabContainer], {
+          animation: 150,
-          direction: "horizontal"
+          swapThreshold: 0.20
-        });
+        }, this.options.draggableOptions);
-        console.log(d);
+        new window.Sortable(this.tabContainer, options);
       };
 
-      if (window.dragula) {
+      if (window.Sortable) {
-        initDragula();
+        initSortable();
       } else {
-        document.addEventListener("DOMContentLoaded", initDragula);
+        document.addEventListener("DOMContentLoaded", initSortable);
       }
     }
   }