From a63416f6d64d3165cf81f22adbbfd8ba9733adb4 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 2 Aug 2021 15:36:52 +0200
Subject: [PATCH] Get fw sidebox sortable items working with sortablejs and
 removes the jquery.sortable

---
 api/js/framework/fw_desktop.js | 57 +++++-----------------------------
 package-lock.json              | 16 +++++++++-
 package.json                   |  3 +-
 3 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/api/js/framework/fw_desktop.js b/api/js/framework/fw_desktop.js
index cbe4fbe234..0a4221d673 100644
--- a/api/js/framework/fw_desktop.js
+++ b/api/js/framework/fw_desktop.js
@@ -25,7 +25,7 @@ import './fw_browser.js';
 import './fw_ui.js';
 import './fw_classes.js';
 import '../jsapi/egw_inheritance.js';
-
+import "sortablejs/Sortable.min.js";
 /**
  *
  * @param {DOMWindow} window
@@ -48,31 +48,15 @@ import '../jsapi/egw_inheritance.js';
 		init: function()
 		{
 			this._super.apply(this,arguments);
-
+			let self = this;
 			this.setBottomLine(this.parent.entries);
-			//Make the base Div sortable. Set all elements with the style "egw_fw_ui_sidemenu_entry_header"
-			//as handle
-			if(jQuery(this.elemDiv).data('uiSortable'))
-			{
-				jQuery(this.elemDiv).sortable("destroy");
-			}
-			jQuery(this.elemDiv).sortable({
-				handle: ".egw_fw_ui_sidemenu_entry_header",
-				distance: 15,
-				start: function(event, ui)
-				{
-					var parent = ui.item.context._parent;
-					parent.isDraged = true;
-					parent.parent.startDrag.call(parent.parent);
+
+			Sortable.create(this.elemDiv,{
+				onSort: function (evt) {
+					self.parent.isDraged = true;
+					self.parent.refreshSort();
 				},
-				stop: function(event, ui)
-				{
-					var parent = ui.item.context._parent;
-					parent.parent.stopDrag.call(parent.parent);
-					parent.parent.refreshSort.call(parent.parent);
-				},
-				opacity: 0.7,
-				axis: 'y'
+				direction: 'vertical'
 			});
 		},
 
@@ -107,31 +91,6 @@ import '../jsapi/egw_inheritance.js';
 			this._super.apply(this,arguments);
 			this.sortCallback = _sortCallback;
 		},
-		/**
-		 *
-		 * @returns {undefined}
-		 */
-		startDrag: function()
-		{
-			if (this.activeEntry)
-			{
-				jQuery(this.activeEntry.marker).show();
-				jQuery(this.elemDiv).sortable("refresh");
-			}
-		},
-
-		/**
-		 *
-		 * @returns {undefined}
-		 */
-		stopDrag: function()
-		{
-			if (this.activeEntry)
-			{
-				jQuery(this.activeEntry.marker).hide();
-				jQuery(this.elemDiv).sortable("refresh");
-			}
-		},
 
 		/**
 		 * Called by the sidemenu elements whenever they were sorted. An array containing
diff --git a/package-lock.json b/package-lock.json
index c36d023484..bcfcdff54b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,8 @@
         "carbon-components": "^10.37.0",
         "carbon-web-components": "^1.14.1",
         "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1"
+        "lit-html": "^1.4.1",
+        "sortablejs": "^1.14.0"
       },
       "devDependencies": {
         "@babel/core": "^7.14.6",
@@ -31,6 +32,9 @@
         "rollup-plugin-terser": "^7.0.2",
         "terser": "^4.8.0",
         "typescript": "^3.9.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -2994,6 +2998,11 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -5704,6 +5713,11 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
diff --git a/package.json b/package.json
index 56ddc5b4d5..468845934b 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,8 @@
     "carbon-components": "^10.37.0",
     "carbon-web-components": "^1.14.1",
     "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1"
+    "lit-html": "^1.4.1",
+    "sortablejs": "^1.14.0"
   },
   "engines": {
     "node": ">=14.0.0"