Get favorites list sorting working with Sortablejs

This commit is contained in:
Hadi Nategh 2021-08-04 11:26:57 +02:00
parent 5777ebeb75
commit 572908e300
2 changed files with 30 additions and 37 deletions

View File

@ -177,21 +177,25 @@ export class et2_favorites extends et2_dropdown_button implements et2_INextmatch
}
};
//Add Sortable handler to nm fav. menu
jQuery(this.menu).sortable({
items:'li:not([data-id$="add"])',
placeholder:'ui-fav-sortable-placeholder',
delay: 250, //(millisecond) delay before the sorting should start
update: function ()
{
self.favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'});
self.egw().set_preference(self.options.app,'fav_sort_pref',self.favSortedList);
//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));
// Add a listener on the delete to remove
this.menu.on("click","div.ui-icon-trash", app[self.options.app], function() {

View File

@ -781,32 +781,21 @@ export abstract class EgwApp
})
.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 : any) {
// 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;
},
// @ts-ignore
refreshPositions: true,
update: function (event, ui)
{
// @ts-ignore
var favSortedList = jQuery(this).sortable('toArray', {attribute:'data-id'});
//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));
// Bind favorite de-select
var egw_fw = egw_getFramework();