diff --git a/api/js/etemplate/et2_extension_nextmatch.ts b/api/js/etemplate/et2_extension_nextmatch.ts index a69622ff3d..66acfc7be1 100644 --- a/api/js/etemplate/et2_extension_nextmatch.ts +++ b/api/js/etemplate/et2_extension_nextmatch.ts @@ -67,6 +67,7 @@ import {et2_template} from "./et2_widget_template"; import {egw} from "../jsapi/egw_global"; import {et2_compileLegacyJS} from "./et2_core_legacyJSFunctions"; import {egwIsMobile} from "../egw_action/egw_action_common.js"; +import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; //import {et2_selectAccount} from "./et2_widget_SelectAccount"; @@ -2079,17 +2080,13 @@ export class et2_nextmatch extends et2_DOMWidget implements et2_IResizeable, et2 }; const $select = jQuery(select.getDOMNode()); - //todo (todo-jquery-ui): fix the sortable import statement - import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){ - let sortablejs = Sortable.create(select.getDOMNode().getElementsByClassName('ui-multiselect-checkboxes')[0], { - ghostClass: 'ui-fav-sortable-placeholder', - draggable: 'li[class^="selcolumn_sortable_col"]', - filter: 'li[class^="selcolumn_sortable_#"]', - direction: 'vertical', - delay: 25, - - }); - }.bind(this)); + let sortablejs = Sortable.create(select.getDOMNode().getElementsByClassName('ui-multiselect-checkboxes')[0], { + ghostClass: 'ui-fav-sortable-placeholder', + draggable: 'li[class^="selcolumn_sortable_col"]', + filter: 'li[class^="selcolumn_sortable_#"]', + direction: 'vertical', + delay: 25, + }); $select.disableSelection(); $select.find('li[class^="selcolumn_sortable_"]').each(function(i,v){ diff --git a/api/js/etemplate/et2_widget_favorites.ts b/api/js/etemplate/et2_widget_favorites.ts index 844a148138..2a993e65d8 100644 --- a/api/js/etemplate/et2_widget_favorites.ts +++ b/api/js/etemplate/et2_widget_favorites.ts @@ -19,6 +19,7 @@ import {et2_INextmatchHeader} from "./et2_extension_nextmatch"; import {et2_dropdown_button} from "./et2_widget_dropdown_button"; import {ClassWithAttributes} from "./et2_core_inheritance"; import {egw, egw_getFramework} from "../jsapi/egw_global"; +import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; /** * Favorites widget, designed for use with a nextmatch widget @@ -177,25 +178,22 @@ export class et2_favorites extends et2_dropdown_button implements et2_INextmatch } }; - //todo (@todo-jquery-ui): replace the import statement /** * todo (@todo-jquery-ui): the sorting does not work at the moment becuase of jquery-ui menu being used in order to create dropdown * buttons menu. Once we replace the et2_widget_dropdown_button with web component this should be adapted * and working again. **/ - import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){ - let sortablejs = Sortable.create(this.menu[0], { - ghostClass: 'ui-fav-sortable-placeholder', - draggable: 'li:not([data-id$="add"])', - delay: 25, - dataIdAttr:'data-id', - onSort: function(event){ - self.favSortedList = sortablejs.toArray(); - self.egw.set_preference(self.options.app,'fav_sort_pref', self.favSortedList ); - sideBoxDOMNodeSort(self.favSortedList); - } - }); - }.bind(this)); + let sortablejs = Sortable.create(this.menu[0], { + ghostClass: 'ui-fav-sortable-placeholder', + draggable: 'li:not([data-id$="add"])', + delay: 25, + dataIdAttr:'data-id', + onSort: function(event){ + self.favSortedList = sortablejs.toArray(); + self.egw.set_preference(self.options.app,'fav_sort_pref', self.favSortedList ); + sideBoxDOMNodeSort(self.favSortedList); + } + }); // Add a listener on the delete to remove this.menu.on("click","div.ui-icon-trash", app[self.options.app], function() { diff --git a/api/js/etemplate/et2_widget_grid.ts b/api/js/etemplate/et2_widget_grid.ts index 0ef49a4b9d..7c15e5f2c1 100644 --- a/api/js/etemplate/et2_widget_grid.ts +++ b/api/js/etemplate/et2_widget_grid.ts @@ -23,6 +23,7 @@ import {et2_action_object_impl, et2_DOMWidget} from "./et2_core_DOMWidget"; import {egw_getAppObjectManager, egwActionObject} from '../egw_action/egw_action.js'; import {et2_directChildrenByTagName, et2_filteredNodeIterator, et2_readAttrWithDefault} from "./et2_core_xml"; import {egw} from "../jsapi/egw_global"; +import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; /** @@ -961,37 +962,33 @@ export class et2_grid extends et2_DOMWidget implements et2_IDetachedDOM, et2_IAl } } - - //todo (todo-jquery-ui): fix the sortable import statement - import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){ - this.sortablejs = new Sortable(tbody,{ - group: this.options.sortable_connectWith, - draggable: "tr:not(.th)", - filter: this.options.sortable_cancel, - ghostClass: this.options.sortable_placeholder, - dataIdAttr: 'id', - onAdd:function (event) { - if (typeof self.options.sortable_recieveCallback == 'function') { - self.options.sortable_recieveCallback.call(self, event, this, self.id); - } - }, - onStart: function (event, ui) { - if (typeof self.options.sortable_startCallback == 'function') { - self.options.sortable_startCallback.call(self, event, this, self.id); - } - }, - onSort: function (event) { - self.egw().json(sortable,[ - self.getInstanceManager().etemplate_exec_id, - self.sortablejs.toArray(), - self.id], - null, - self, - true - ).sendRequest(); - }, - }); - }.bind(this)); + this.sortablejs = new Sortable(tbody,{ + group: this.options.sortable_connectWith, + draggable: "tr:not(.th)", + filter: this.options.sortable_cancel, + ghostClass: this.options.sortable_placeholder, + dataIdAttr: 'id', + onAdd:function (event) { + if (typeof self.options.sortable_recieveCallback == 'function') { + self.options.sortable_recieveCallback.call(self, event, this, self.id); + } + }, + onStart: function (event, ui) { + if (typeof self.options.sortable_startCallback == 'function') { + self.options.sortable_startCallback.call(self, event, this, self.id); + } + }, + onSort: function (event) { + self.egw().json(sortable,[ + self.getInstanceManager().etemplate_exec_id, + self.sortablejs.toArray(), + self.id], + null, + self, + true + ).sendRequest(); + }, + }); } /** diff --git a/api/js/jsapi/egw_app.ts b/api/js/jsapi/egw_app.ts index ff796750c3..b3f0836375 100644 --- a/api/js/jsapi/egw_app.ts +++ b/api/js/jsapi/egw_app.ts @@ -17,6 +17,7 @@ import {et2_dialog} from "../etemplate/et2_widget_dialog"; import {et2_createWidget} from "../etemplate/et2_core_widget"; import {et2_favorites} from "../etemplate/et2_widget_favorites"; import type {IegwAppLocal} from "./egw_global"; +import Sortable from 'sortablejs/modular/sortable.complete.esm.js'; /** * Type for push-message @@ -781,21 +782,18 @@ export abstract class EgwApp }) .addClass("ui-helper-clearfix"); - //todo (@todo-jquery-ui): replace the import statement - import('../../../node_modules/sortablejs/Sortable.min.js').then(function(){ - let el = document.getElementById('favorite_sidebox_'+this.appname).getElementsByTagName('ul')[0]; - let sortablejs = Sortable.create(el, { - ghostClass: 'ui-fav-sortable-placeholder', - draggable: 'li:not([data-id$="add"])', - delay: 25, - dataIdAttr:'data-id', - onSort: function(event){ - let favSortedList = sortablejs.toArray(); - self.egw.set_preference(self.appname,'fav_sort_pref',favSortedList); - self._refresh_fav_nm(); - } - }); - }.bind(this)); + let el = document.getElementById('favorite_sidebox_'+this.appname).getElementsByTagName('ul')[0]; + let sortablejs = Sortable.create(el, { + ghostClass: 'ui-fav-sortable-placeholder', + draggable: 'li:not([data-id$="add"])', + delay: 25, + dataIdAttr:'data-id', + onSort: function(event){ + 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();