From 1afcc3ebceb3cacf08d7352ca54637b00b60a8e8 Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 23 May 2022 17:45:56 +0200
Subject: [PATCH] Replace all jquery-ui sortable used in fw

---
 api/js/framework/fw_base.js    | 22 +++++++++++++---------
 api/js/framework/fw_desktop.js |  1 -
 api/js/jsapi/app_base.js       | 33 +++++++++++++--------------------
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/api/js/framework/fw_base.js b/api/js/framework/fw_base.js
index 9424f27459..0a94198402 100644
--- a/api/js/framework/fw_base.js
+++ b/api/js/framework/fw_base.js
@@ -13,6 +13,7 @@
 */
 import '../jsapi/egw_inheritance.js';
 import {et2_IPrint} from "../etemplate/et2_core_interfaces";
+import "sortablejs/Sortable.min.js";
 
 window.fw_base = (function(){ "use strict"; return Class.extend(
 {
@@ -387,21 +388,24 @@ window.fw_base = (function(){ "use strict"; return Class.extend(
 				// reliable init sidebox, as app.js might initialise earlier
 				if (typeof app[_app.appName] == 'object')
 				{
-					var sidebox = jQuery('#favorite_sidebox_'+_app.appName, this.sidemenuDiv);
+					var sidebox = jQuery('#favorite_sidebox_'+_app.appName, this.sidemenuDiv).getElementsByTagName('ul')[0];
 					var self = this;
 					var currentAppName = _app.appName;
-					// make sidebox
-					sidebox.children().sortable({
 
-						items:'li:not([data-id$="add"])',
-						placeholder:'ui-fav-sortable-placeholder',
-						update: function (event, ui)
+
+					let sortablejs = Sortable.create(sidebox, {
+						ghostClass: 'ui-fav-sortable-placeholder',
+						draggable: 'li:not([data-id$="add"])',
+						delay: 25,
+						dataIdAttr: 'data-id',
+						onSort: function(event)
 						{
-							var favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'});
-
-							egw().set_preference(currentAppName,'fav_sort_pref',favSortedList);
+							let favSortedList = sortablejs.toArray();
+							self.egw.set_preference(currentAppName, 'fav_sort_pref', favSortedList);
+							self._refresh_fav_nm();
 						}
 					});
+
 					if (sidebox.length) app[_app.appName]._init_sidebox.call(app[_app.appName], sidebox);
 				}
 			}
diff --git a/api/js/framework/fw_desktop.js b/api/js/framework/fw_desktop.js
index ee1bc87aee..dacf85db4e 100644
--- a/api/js/framework/fw_desktop.js
+++ b/api/js/framework/fw_desktop.js
@@ -19,7 +19,6 @@
 
 import "../../../vendor/bower-asset/jquery/dist/jquery.min.js";
 import "../jquery/jquery.noconflict.js";
-//import "../../../vendor/bower-asset/jquery-ui/jquery-ui.js";
 import './fw_base.js';
 import './fw_browser.js';
 import './fw_ui.js';
diff --git a/api/js/jsapi/app_base.js b/api/js/jsapi/app_base.js
index 095f27f19e..cf53a281dd 100644
--- a/api/js/jsapi/app_base.js
+++ b/api/js/jsapi/app_base.js
@@ -20,6 +20,7 @@ import {Et2Dialog} from "../etemplate/Et2Dialog/Et2Dialog";
 import {et2_nextmatch} from "../etemplate/et2_extension_nextmatch";
 import {et2_favorites} from "../etemplate/et2_widget_favorites";
 import {EGW_KEY_ENTER} from "../egw_action/egw_action_constants";
+import "sortablejs/Sortable.min.js";
 
 /**
  * Common base class for application javascript
@@ -613,30 +614,22 @@ export const AppJS = (function(){ "use strict"; return Class.extend(
 				})
 				.addClass("ui-helper-clearfix");
 
-			//Add Sortable handler to sideBox fav. menu
-			jQuery('ul','#favorite_sidebox_'+this.appname).sortable({
-					items:'li:not([data-id$="add"])',
-					placeholder:'ui-fav-sortable-placeholder',
-					delay:250, //(millisecond) delay before the sorting should start
-					helper: function(event, item) {
-						// We'll need to know which app this is for
-						item.attr('data-appname',self.appname);
-						// Create custom helper so it can be dragged to Home
-						var h_parent = item.parent().parent().clone();
-						h_parent.find('li').not('[data-id="'+item.attr('data-id')+'"]').remove();
-						h_parent.appendTo('body');
-						return h_parent;
-					},
-					refreshPositions: true,
-					update: function (event, ui)
+			let el = document.getElementById('favorite_sidebox_' + this.appname)?.getElementsByTagName('ul')[0];
+			if(el && el instanceof HTMLElement)
+			{
+				let sortablejs = Sortable.create(el, {
+					ghostClass: 'ui-fav-sortable-placeholder',
+					draggable: 'li:not([data-id$="add"])',
+					delay: 25,
+					dataIdAttr: 'data-id',
+					onSort: function(event)
 					{
-						var favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'});
-
-						self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList);
-
+						let favSortedList = sortablejs.toArray();
+						self.egw.set_preference(self.appname, 'fav_sort_pref', favSortedList);
 						self._refresh_fav_nm();
 					}
 				});
+			}
 
 			// Bind favorite de-select
 			var egw_fw = egw_getFramework();