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

Fix default drag & drop helper did not work well with webcomponents

Browse Source 
It doesn't let us do async, so was not waiting for widgets to be updated
This commit is contained in:
nathan 2023-11-03 16:13:45 -06:00
parent d89646df27
commit 1bc26101cd
2 changed files with 72 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
api/js/egw_action/egwDragActionImplementation.ts
View File

@ -44,12 +44,47 @@ export class EgwDragActionImplementation implements EgwActionImplementation {
const pseudoNumRows = (_selected[0]?._context?._selectionMgr?._selectAll) ?
_selected[0]._context?._selectionMgr?._total : _selected.length;
for (const egwActionObject of _selected) {
const row: Node = (egwActionObject.iface.getDOMNode()).cloneNode(true);
if (row) {
rows.push(row);
table.append(row);
}
// Clone nodes but use copy webComponent properties
const carefulClone = (node) =>
{
// Don't clone text nodes, it causes duplication in et2-description
if(node.nodeType == node.TEXT_NODE)
{
return;
}
let clone = node.cloneNode();
let widget_class = window.customElements.get(clone.localName);
let properties = widget_class ? widget_class.properties : [];
for(let key in properties)
{
clone[key] = node[key];
}
// Children
node.childNodes.forEach(c =>
{
const child = carefulClone(c)
if(child)
{
clone.appendChild(child);
}
})
if(widget_class)
{
clone.requestUpdate();
}
return clone;
}
for(const egwActionObject of _selected)
{
const row : Node = carefulClone(egwActionObject.iface.getDOMNode());
if(row)
{
rows.push(row);
table.append(row);
}
index++;
if (index == maxRows) {
// Label to show number of items
@ -195,9 +230,33 @@ export class EgwDragActionImplementation implements EgwActionImplementation {
event.dataTransfer.setData('application/json', JSON.stringify(data))
event.dataTransfer.setDragImage(ai.helper, 12, 12);
// Wait for any webComponents to finish
let wait = [];
const webComponents = [];
const check = (element) =>
{
if(typeof element.updateComplete !== "undefined")
{
webComponents.push(element)
element.requestUpdate();
wait.push(element.updateComplete);
}
element.childNodes.forEach(child => check(child));
}
check(ai.helper);
// Clumsily force widget update, since we can't do it async
Promise.all(wait).then(() =>
{
wait = [];
webComponents.forEach(e => wait.push(e.updateComplete));
Promise.all(wait).then(() =>
{
event.dataTransfer.setDragImage(ai.helper, 12, 12);
debugger;
});
});
this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected));
this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected));
};
const dragend = (_) => {

8
api/templates/default/etemplate2.css
View File

@ -3469,6 +3469,7 @@ div.et2_image_tooltipPopup {
div.et2_egw_action_ddHelper {
z-index: -100;
position: relative;
max-width: fit-content;
}
/* The last div which shows Ctrl tip to user*/
@ -3489,6 +3490,7 @@ div.et2_egw_action_ddHelper table.et2_egw_action_ddHelper_row {
background-color: rgba(255, 194, 0, 0.70);
box-shadow: 6px 6px 8px gray;
border: 1px solid black;
max-width: 400px;
}
table.et2_egw_action_ddHelper_row tr {
@ -3496,10 +3498,10 @@ table.et2_egw_action_ddHelper_row tr {
max-height: 20px;
}
/* Apply to all displaied rows in order to get same result*/
table.et2_egw_action_ddHelper_row * {
/* Apply to all displayed rows in order to get same result*/
table.et2_egw_action_ddHelper_row > *, table.et2_egw_action_ddHelper_row .innerContainer {
white-space: nowrap !important;
max-height: 15px;
max-height: 2em;
overflow: hidden;
text-overflow: ellipsis;
max-width: 400px;