holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace dnd in toolbar

Browse Source
This commit is contained in:
Hadi Nategh 2022-06-01 16:46:44 +02:00
parent 0aa813a0ff
commit cbe097b2e3
1 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
api/js/etemplate/et2_widget_toolbar.ts
View File

@ -11,7 +11,6 @@
/*egw:uses /*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js; /vendor/bower-asset/jquery/dist/jquery.js;
/vendor/bower-asset/jquery-ui/jquery-ui.js;
et2_DOMWidget; et2_DOMWidget;
*/ */
@ -26,6 +25,8 @@ import {egwIsMobile} from "../egw_action/egw_action_common.js";
import {Et2Dialog} from "./Et2Dialog/Et2Dialog"; import {Et2Dialog} from "./Et2Dialog/Et2Dialog";
import {Et2DropdownButton} from "./Et2DropdownButton/Et2DropdownButton"; import {Et2DropdownButton} from "./Et2DropdownButton/Et2DropdownButton";
import {loadWebComponent} from "./Et2Widget/Et2Widget"; import {loadWebComponent} from "./Et2Widget/Et2Widget";
import interact from "@interactjs/interactjs";
import Sortable from "sortablejs/modular/sortable.complete.esm.js";
/** /**
* This toolbar gets its contents from its actions * This toolbar gets its contents from its actions
@ -393,7 +394,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
let dropdown = <Et2DropdownButton><unknown>loadWebComponent("et2-dropdown-button", { let dropdown = <Et2DropdownButton><unknown>loadWebComponent("et2-dropdown-button", {
id: this.id + "-" + action.id, id: this.id + "-" + action.id,
label: action.caption, label: action.caption,
class: this.preference[action.id] ? 'et2_toolbar-dropdown et2_toolbar-dropdown-menulist' : 'et2_toolbar-dropdown', class: this.preference[action.id] ? 'et2_toolbar-dropdown et2_toolbar_draggable et2_toolbar-dropdown-menulist' : 'et2_toolbar-dropdown et2_toolbar_draggable',
onchange: function(ev) onchange: function(ev)
{ {
let action = that._actionManager.getActionById(dropdown.value); let action = that._actionManager.getActionById(dropdown.value);
@ -448,63 +449,66 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
this.actionlist.appendTo(this.div); this.actionlist.appendTo(this.div);
this.actionbox.appendTo(this.div); this.actionbox.appendTo(this.div);
let toolbar = this.actionlist.find('span[data-group]').children(), let toolbar = this.actionlist.find('span[data-group]'),
toolbox = this.actionbox, toolbox = this.actionbox,
menulist = jQuery(this.actionbox.children()[1]); menulist = jQuery(this.actionbox.children()[1]);
this.actions = actions;
/* disabling DND in toolbar for now let sToolbar = new Sortable(this.actionlist[0], {
toolbar.draggable({ group: {
cancel:'', name: 'toolbar',
zIndex: 1000,
delay: 500,
//revert:"invalid",
containment: "document",
cursor: "move",
helper: "clone",
appendTo:'body',
stop: function(event, ui){
that._build_menu(actions);
}
});
menulist.children().draggable({
cancel:'',
containment:"document",
helper:"clone",
appendTo:'body',
zIndex: 1000,
cursor:"move",
start: function()
{
jQuery(that.actionlist).addClass('et2_toolbarDropArea');
}, },
stop: function() animation: 150,
sort: false,
swapThreshold: 0.1,
draggable: '.et2_toolbar_draggable',
//fallbackOnBody: true,
dataIdAttr: 'id',
onAdd: function(e)
{ {
jQuery(that.actionlist).removeClass('et2_toolbarDropArea'); that.set_prefered(e.item.id.replace(that.id + '-', ''), false);
that._build_menu(that.actions);
} }
}); });
toolbox.children().droppable({ toolbar.each((_index, _item) =>{
accept:toolbar, new Sortable(_item, {
drop:function (event, ui) { group: {
that.set_prefered(ui.draggable[0].id.replace(that.id + '-', ''), true); name: 'toolbar',
ui.draggable.appendTo(menulist); },
if (that.actionlist.find(".ui-draggable").length == 0) swapThreshold: 0.1,
animation: 150,
draggable: '.et2_toolbar_draggable',
sort: false
});
});
[this.actionbox[0], menulist[0]].forEach(_item => {
return new Sortable(_item, {
group: {
name: 'toolbar',
pull: 'clone'
},
animation: 150,
sort: false,
swapThreshold: 0.1,
draggable: '.et2_toolbar_draggable',
onAdd: function (e) {
that.set_prefered(e.item.id.replace(that.id + '-', ''), true);
if (that.actionlist.find(".et2_toolbar_draggable").length == 0)
{
that.preference = {};
egw.set_preference(that.options.preference_app,that.options.preference_id,that.preference);
}
that._build_menu(that.actions);
},
onStart: function(e) {
jQuery(that.actionlist).addClass('et2_toolbarDropArea');
},
onEnd: function()
{ {
that.preference = {}; jQuery(that.actionlist).removeClass('et2_toolbarDropArea');
egw.set_preference(that.options.preference_app,that.options.preference_id,that.preference);
} }
}, });
tolerance:"touch"
}); });
this.actionlist.droppable({
tolerance:"pointer",
drop:function (event,ui) {
that.set_prefered(ui.draggable[0].id.replace(that.id + '-', ''), false);
ui.draggable.appendTo(that.actionlist);
that._build_menu(actions);
}
});*/
toolbox.on('toggle', (e)=>{ toolbox.on('toggle', (e)=>{
const details = <HTMLDetailsElement>e.target; const details = <HTMLDetailsElement>e.target;
if (details.open) if (details.open)
@ -551,7 +555,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
let button_options = { let button_options = {
}; };
let button = jQuery(document.createElement('button')) let button = jQuery(document.createElement('button'))
.addClass("et2_button et2_button_text et2_button_with_image") .addClass("et2_toolbar_draggable et2_button et2_button_text et2_button_with_image")
.attr('id', this.id+'-'+action.id) .attr('id', this.id+'-'+action.id)
.attr('type', 'button') .attr('type', 'button')
.appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist)); .appendTo(this.preference[action.id]?this.actionbox.children()[1]:jQuery('[data-group='+action.group+']',this.actionlist));