Fix drag & drop onto tree items loaded via ajax did not hightlight on drag enter

This commit is contained in:
nathan 2024-09-30 13:58:31 -06:00
parent 792e289234
commit 2c196d3419
3 changed files with 60 additions and 41 deletions

View File

@ -24,50 +24,63 @@ export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
// Reference to the widget that's handling actions for us // Reference to the widget that's handling actions for us
public findActionTargetHandler : EgwActionObject; public findActionTargetHandler : EgwActionObject;
constructor(_tree:Et2Tree, _itemId: string) {
super(); private timeout : ReturnType<typeof setTimeout>;
this.node = _tree.getDomNode(_itemId);
this.id = _itemId constructor(_tree : Et2Tree)
this.tree = _tree {
super();
this.tree = _tree
this.findActionTargetHandler = _tree.widget_object; this.findActionTargetHandler = _tree.widget_object;
this.doGetDOMNode = function () { }
return this.node;
}
let timeout: NodeJS.Timeout;
this.doTriggerEvent = function (_event) { public doTriggerEvent(egw_event : number, dom_event : Event)
if (_event == EGW_AI_DRAG_ENTER) {
{ const target = this.tree.findActionTarget(dom_event);
if(egw_event == EGW_AI_DRAG_ENTER)
{
target.target.classList.add("draggedOver", "drop-hover");
this.timeout = setTimeout(() =>
{
if(target.target.classList.contains("draggedOver"))
{
(<SlTreeItem>target.target).expanded = true
}
}, EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT)
}
else if(egw_event == EGW_AI_DRAG_OUT)
{
target.target.classList.remove("draggedOver", "drop-hover");
clearTimeout(this.timeout)
}
else
{
debugger;
}
return true
}
this.node.classList.add("draggedOver", "drop-hover"); public doSetState(_state)
timeout = setTimeout(() => { {
if (this.node.classList.contains("draggedOver")) if(!this.tree || !this.tree.focusItem)
{ {
this.node.expanded = true return;
} }
}, EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT)
}
if (_event == EGW_AI_DRAG_OUT)
{
(this.node).classList.remove("draggedOver", "drop-hover");
clearTimeout(timeout)
}
return true
}
this.doSetState = function (_state) { // Update the "focused" flag
if (!_tree || !_tree.focusItem) return; if(egwBitIsSet(_state, EGW_AO_STATE_FOCUSED))
{
this.tree.focusItem(this.id);
}
if(egwBitIsSet(_state, EGW_AO_STATE_SELECTED))
{
// _tree.selectItem(this.id, false); // false = do not trigger onSelect
}
}
// Update the "focused" flag doGetDOMNode()
if (egwBitIsSet(_state, EGW_AO_STATE_FOCUSED)) {
{ return this.tree;
_tree.focusItem(this.id); }
}
if (egwBitIsSet(_state, EGW_AO_STATE_SELECTED))
{
// _tree.selectItem(this.id, false); // false = do not trigger onSelect
}
}
}
} }

View File

@ -1291,6 +1291,12 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
return element.tagName == "SL-TREE-ITEM" return element.tagName == "SL-TREE-ITEM"
}); });
let action : EgwActionObject = this.widget_object.getObjectById(target.id); let action : EgwActionObject = this.widget_object.getObjectById(target.id);
// Create on the fly if not there?
if(!action)
{
debugger;
}
return {target: target, action: action}; return {target: target, action: action};
} }
} }

View File

@ -3693,7 +3693,7 @@ app.classes.mail = AppJS.extend(
* @param _allMessagesChecked * @param _allMessagesChecked
*/ */
mail_callMove: function(_action,_senders,_target,_allMessagesChecked) { mail_callMove: function(_action,_senders,_target,_allMessagesChecked) {
var target = _action.id == 'drop_move_mail' ? _target.iface.id : _action.id.substr(5); var target = _action.id == 'drop_move_mail' ? _target.id : _action.id.substr(5);
var messages = this.mail_getFormData(_senders); var messages = this.mail_getFormData(_senders);
if (typeof _allMessagesChecked=='undefined') _allMessagesChecked=false; if (typeof _allMessagesChecked=='undefined') _allMessagesChecked=false;