mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-12 09:40:45 +01:00
105 lines
2.6 KiB
TypeScript
105 lines
2.6 KiB
TypeScript
/**
|
|
* EGroupware egw_dragdrop_shoelaceTree - egw action framework
|
|
*
|
|
* @link https://www.egroupware.org
|
|
* @author Andreas Stöckel <as@stylite.de>
|
|
* @copyright 2011 by Andreas Stöckel
|
|
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
|
|
* @package egw_action
|
|
*/
|
|
import {egwActionObjectInterface} from "./egw_action";
|
|
import {Et2Tree} from "../etemplate/Et2Tree/Et2Tree";
|
|
import {EGW_AI_DRAG_ENTER, EGW_AI_DRAG_OUT, EGW_AO_STATE_FOCUSED, EGW_AO_STATE_SELECTED} from "./egw_action_constants";
|
|
import {egwBitIsSet} from "./egw_action_common";
|
|
import {SlTreeItem} from "@shoelace-style/shoelace";
|
|
import {EgwActionObject} from "./EgwActionObject";
|
|
|
|
|
|
export const EXPAND_FOLDER_ON_DRAG_DROP_TIMEOUT = 1000
|
|
|
|
export class EgwDragDropShoelaceTree extends egwActionObjectInterface{
|
|
node: SlTreeItem;
|
|
id: string;
|
|
tree: Et2Tree;
|
|
|
|
// Reference to the widget that's handling actions for us
|
|
public findActionTargetHandler : EgwActionObject;
|
|
|
|
private timeout : ReturnType<typeof setTimeout>;
|
|
|
|
constructor(_tree : Et2Tree)
|
|
{
|
|
|
|
super();
|
|
this.tree = _tree
|
|
this.findActionTargetHandler = _tree.widget_object;
|
|
}
|
|
|
|
public doTriggerEvent(egw_event : number, dom_event : Event)
|
|
{
|
|
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
|
|
}
|
|
|
|
public doSetState(_state)
|
|
{
|
|
if(!this.tree || !this.tree.focusItem)
|
|
{
|
|
return;
|
|
}
|
|
if(this.stateChangeContext)
|
|
{
|
|
const target = this.tree.shadowRoot.querySelector("[id='" + this.stateChangeContext.id + "']");
|
|
|
|
// Just set the attribute, we're not changing the tree value
|
|
// The selected attribute will be reset by the tree next render()
|
|
if(target && egwBitIsSet(_state, EGW_AO_STATE_SELECTED))
|
|
{
|
|
target.setAttribute("selected", "");
|
|
}
|
|
else if(target)
|
|
{
|
|
target.removeAttribute("selected");
|
|
}
|
|
if(target && egwBitIsSet(_state, EGW_AO_STATE_FOCUSED))
|
|
{
|
|
target.focus();
|
|
}
|
|
}
|
|
|
|
// Update the "focused" flag
|
|
if(egwBitIsSet(_state, EGW_AO_STATE_FOCUSED))
|
|
{
|
|
this.tree.focus();
|
|
}
|
|
if(egwBitIsSet(_state, EGW_AO_STATE_SELECTED))
|
|
{
|
|
// _tree.selectItem(this.id, false); // false = do not trigger onSelect
|
|
}
|
|
}
|
|
|
|
doGetDOMNode()
|
|
{
|
|
return this.tree;
|
|
}
|
|
} |