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

Fix drag & drop between email selects

Browse Source
This commit is contained in:
nathan 2023-11-24 14:40:59 -07:00
parent db639a3453
commit cef7c12469
2 changed files with 58 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Select/Et2Select.ts
View File

@ -726,7 +726,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
*/ */
protected _handleMouseEnter(e : MouseEvent) protected _handleMouseEnter(e : MouseEvent)
{ {
if(this.rows == 1 && this.multiple == true && this.value.length > 1) if(this.rows == "1" && this.multiple == true && this.value.length > 1)
{ {
e.stopPropagation(); e.stopPropagation();

77
api/js/etemplate/Et2Select/Select/Et2SelectEmail.ts
View File

@ -43,6 +43,16 @@ export class Et2SelectEmail extends Et2Select
{ {
display: none; display: none;
} }
/*** Drag & Drop ***/
.et2-select-draggable {
touch-action: none;
}
:host(.et2_dropZone)::part(combobox) {
background-color: transparent;
}
` `
]; ];
} }
@ -99,6 +109,8 @@ export class Et2SelectEmail extends Et2Select
this.fullEmail = false; this.fullEmail = false;
this.onlyEmail = false; this.onlyEmail = false;
this.defaultValidators.push(new IsEmail(this.allowPlaceholder)); this.defaultValidators.push(new IsEmail(this.allowPlaceholder));
this.handleMouseDown = this.handleMouseDown.bind(this);
} }
@ -114,6 +126,11 @@ export class Et2SelectEmail extends Et2Select
} }
} }
firstUpdated()
{
this.select.addEventListener("mousedown", this.handleMouseDown);
}
updated(changedProperties : Map<string, any>) updated(changedProperties : Map<string, any>)
{ {
super.updated(changedProperties); super.updated(changedProperties);
@ -135,11 +152,12 @@ export class Et2SelectEmail extends Et2Select
{ {
let dragTranslate = {x: 0, y: 0}; let dragTranslate = {x: 0, y: 0};
const tags = Array.from(this.select.shadowRoot.querySelectorAll(".select__tags et2-email-tag")); const tags = Array.from(this.select.shadowRoot.querySelectorAll(".select__tags et2-email-tag"));
let draggable = interact(tags).draggable({ let draggable = interact(".et2-select-draggable").draggable({
startAxis: 'xy', startAxis: 'xy',
listeners: { listeners: {
start: function(e) start: function(e)
{ {
this.hide();
let dragPosition = {x: e.page.x, y: e.page.y}; let dragPosition = {x: e.page.x, y: e.page.y};
dragTranslate = {x: 0, y: 0}; dragTranslate = {x: 0, y: 0};
e.target.setAttribute('style', `width:${e.target.clientWidth}px !important`); e.target.setAttribute('style', `width:${e.target.clientWidth}px !important`);
@ -147,13 +165,18 @@ export class Et2SelectEmail extends Et2Select
e.target.style.zIndex = 10; e.target.style.zIndex = 10;
e.target.style.transform = e.target.style.transform =
`translate(${dragPosition.x}px, ${dragPosition.y}px)`; `translate(${dragPosition.x}px, ${dragPosition.y}px)`;
}, }.bind(this),
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)
{
// Restore dragged tag to where it came from
e.target.removeAttribute("style");
} }
} }
}); });
@ -169,28 +192,40 @@ export class Et2SelectEmail extends Et2Select
{ {
return; return;
} }
interact(this).dropzone({ this.updateComplete.then(() =>
accept: `.et2-select-draggable`, {
ondrop: function(e) interact(this).dropzone({
{ accept: `.et2-select-draggable`,
// Add in as free entry ondrop: function(e)
e.target.createFreeEntry(e.draggable.target.value); {
e.target.classList.remove('et2_dropZone'); // Restore dragged tag
e.relatedTarget.removeAttribute("style");
// remove the dragged value from its origin source const source = e.relatedTarget.getRootNode().host // Containing sl-select
e.draggable.parent_node.value = e.draggable.parent_node.value.filter(_item => {return e.draggable.target.value !== _item;}) .getRootNode().host // Containing et2-select-email
}, // remove the dragged value from its origin source
ondragenter: function(e) source.value = source.value.filter(_item => {return e.relatedTarget.value !== _item;})
{
e.target.classList.add('et2_dropZone'); // Add in as free entry
}, e.target.createFreeEntry(e.relatedTarget.value);
ondragleave: function(e) e.target.classList.remove('et2_dropZone');
{ },
e.target.classList.remove('et2_dropZone'); ondragenter: function(e)
} {
this.hide();
this.classList.add('et2_dropZone');
}.bind(this),
ondragleave: function(e)
{
this.classList.remove('et2_dropZone');
}.bind(this)
});
}); });
} }
protected handleMouseDown(e : MouseEvent)
{
}
/** /**
* Actually query the server. * Actually query the server.
* *
@ -236,7 +271,7 @@ export class Et2SelectEmail extends Et2Select
<et2-email-tag <et2-email-tag
class=${classMap({ class=${classMap({
...option.classList, ...option.classList,
"et2-select-draggable": !this.readonly && this.allowFreeEntries && this.allowDragAndDrop "et2-select-draggable": !this.readonly && this.allowFreeEntries && this.allowDragAndDrop,
})} })}
.fullEmail=${this.fullEmail} .fullEmail=${this.fullEmail}
.onlyEmail=${this.onlyEmail} .onlyEmail=${this.onlyEmail}