extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 23:00:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Disable dragging toolbar items in mobile view since it interferes with scrolling the 3-dots more actions list

Browse Source
This commit is contained in:
nathan 2024-11-21 11:55:33 -07:00
parent a66eb56bde
commit 3e24641d6b
1 changed files with 78 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -463,29 +463,33 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
this.actionbox[0].classList.add(`et2_toolbar_dropzone_more${this.id}`); this.actionbox[0].classList.add(`et2_toolbar_dropzone_more${this.id}`);
this.actions = actions; this.actions = actions;
let dragPosition = {x:0,y:0};
let dragTranslate = {x:0, y:0}; if(!egwIsMobile())
{
let dragPosition = {x: 0, y: 0};
let dragTranslate = {x: 0, y: 0};
let draggables = this.getDOMNode().querySelectorAll(`.et2_toolbar_draggable${this.id}`); let draggables = this.getDOMNode().querySelectorAll(`.et2_toolbar_draggable${this.id}`);
draggables.forEach(_item => { draggables.forEach(_item =>
{
interact(_item).draggable({ interact(_item).draggable({
startAxis: 'xy', startAxis: 'xy',
listeners: { listeners: {
start: function(e) start: function(e)
{ {
dragPosition = {x:e.page.x, y:e.page.y}; dragPosition = {x: e.page.x, y: e.page.y};
e.target.setAttribute('style', `width:${e.target.clientWidth}px !important`); e.target.setAttribute('style', `width:${e.target.clientWidth}px !important`);
e.target.style.position = 'fixed'; e.target.style.position = 'fixed';
e.target.style.transform = e.target.style.transform =
`translate(${dragPosition.x}px, ${dragPosition.y}px)`; `translate(${dragPosition.x}px, ${dragPosition.y}px)`;
}, },
move : function(e) move: function(e)
{ {
dragTranslate.x += e.delta.x; dragTranslate.x += e.delta.x;
dragTranslate.y += e.delta.y; dragTranslate.y += e.delta.y;
e.target.style.transform = e.target.style.transform =
`translate(${dragTranslate.x}px, ${dragTranslate.y}px)`; `translate(${dragTranslate.x}px, ${dragTranslate.y}px)`;
}, },
end : function (e) end: function(e)
{ {
that._build_menu(that.actions); that._build_menu(that.actions);
} }
@ -494,7 +498,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
}); });
interact(`.et2_toolbar_dropzone_list${this.id}`).unset(); interact(`.et2_toolbar_dropzone_list${this.id}`).unset();
interact(`.et2_toolbar_dropzone_list${this.id}`).dropzone({ interact(`.et2_toolbar_dropzone_list${this.id}`).dropzone({
checker: function ( checker: function(
dragEvent, // related dragmove or dragend dragEvent, // related dragmove or dragend
event, // Touch, Pointer or Mouse Event event, // Touch, Pointer or Mouse Event
dropped, // bool default checker result dropped, // bool default checker result
@ -502,7 +506,8 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
dropzoneElement, // dropzone element dropzoneElement, // dropzone element
draggable, // draggable Interactable draggable, // draggable Interactable
draggableElement // draggable element draggableElement // draggable element
) { )
{
return dropped && !dropzoneElement.contains(draggableElement); return dropped && !dropzoneElement.contains(draggableElement);
}, },
accept: `.et2_toolbar_draggable${this.id}`, accept: `.et2_toolbar_draggable${this.id}`,
@ -521,10 +526,11 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
} }
}); });
const menulist = [`.et2_toolbar_dropzone_more${this.id}`, `#${this.id}-menulist`]; const menulist = [`.et2_toolbar_dropzone_more${this.id}`, `#${this.id}-menulist`];
menulist.forEach(_item => { menulist.forEach(_item =>
{
interact(_item).unset(); interact(_item).unset();
interact(_item).dropzone({ interact(_item).dropzone({
checker: function ( checker: function(
dragEvent, // related dragmove or dragend dragEvent, // related dragmove or dragend
event, // Touch, Pointer or Mouse Event event, // Touch, Pointer or Mouse Event
dropped, // bool default checker result dropped, // bool default checker result
@ -532,7 +538,8 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
dropzoneElement, // dropzone element dropzoneElement, // dropzone element
draggable, // draggable Interactable draggable, // draggable Interactable
draggableElement // draggable element draggableElement // draggable element
) { )
{
console.log(dragEvent); console.log(dragEvent);
return dropped && !dropzoneElement.contains(draggableElement); return dropped && !dropzoneElement.contains(draggableElement);
@ -541,10 +548,10 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
ondrop: function(e) ondrop: function(e)
{ {
that.set_prefered(e.draggable.target.id.replace(that.id + '-', ''), true); that.set_prefered(e.draggable.target.id.replace(that.id + '-', ''), true);
if (that.actionlist.find(`.et2_toolbar_draggable${that.id}`).length == 0) if(that.actionlist.find(`.et2_toolbar_draggable${that.id}`).length == 0)
{ {
that.preference = {}; that.preference = {};
egw.set_preference(that.options.preference_app,that.options.preference_id,that.preference); egw.set_preference(that.options.preference_app, that.options.preference_id, that.preference);
} }
that._build_menu(that.actions); that._build_menu(that.actions);
}, },
@ -558,6 +565,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
} }
}); });
}); });
}
toolbox.on('toggle', (e)=>{ toolbox.on('toggle', (e)=>{
const details = <HTMLDetailsElement>e.target; const details = <HTMLDetailsElement>e.target;