mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 23:43:17 +01:00
added possibility to scroll Et2TreeDropdown on open to current selection.
-- set openAtSelection="true" attribute on the et2-tree-dropdown -- use for timezone selection in preferences -- regarding Ticket #97411
This commit is contained in:
parent
21aec1a93d
commit
66e222e035
@ -667,6 +667,59 @@ export class Et2Tree extends Et2WidgetWithSelectMixin(LitElement) implements Fin
|
|||||||
item.focused = true
|
item.focused = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* scroll to item with given id
|
||||||
|
* make sure all parents of the item are expanded else scroll will fail
|
||||||
|
* @param _id
|
||||||
|
*/
|
||||||
|
public scrollToItem(_id: string)
|
||||||
|
{
|
||||||
|
const item: SlTreeItem = this.getDomNode(_id);
|
||||||
|
if (item == null) return
|
||||||
|
item.scrollIntoView();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* scrolls to the (first) selected slTreeItem into view
|
||||||
|
* this function delays, if not all parents of the item are expanded
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public scrollToSelected()
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
const item: SlTreeItem = this.shadowRoot.querySelector('sl-tree-item[selected]');
|
||||||
|
if (item == null) return
|
||||||
|
|
||||||
|
|
||||||
|
//this might not work because item pant is not expanded
|
||||||
|
//in that case expand all parents and wait before trying to scroll again
|
||||||
|
let parent: SlTreeItem = item.parentElement?.tagName === "SL-TREE-ITEM" ? <SlTreeItem>item.parentElement : null;
|
||||||
|
//scroll and exit if parent does not need expansion
|
||||||
|
if (!parent || parent.expanded)
|
||||||
|
{
|
||||||
|
item.scrollIntoView()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//fallback
|
||||||
|
//expand all parent items
|
||||||
|
while (parent)
|
||||||
|
{
|
||||||
|
if (!parent.expanded) parent.expanded = true;
|
||||||
|
parent = parent.parentElement?.tagName === "SL-TREE-ITEM" ? <SlTreeItem>parent.parentElement : null;
|
||||||
|
}
|
||||||
|
// this.updateComplete.then(
|
||||||
|
// (bool: boolean) =>
|
||||||
|
// item.scrollIntoView()
|
||||||
|
// )
|
||||||
|
// waiting for update complete is not enough
|
||||||
|
setTimeout(()=> item.scrollIntoView(),500)
|
||||||
|
} catch (e)
|
||||||
|
{
|
||||||
|
console.log("Could not scroll to item");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Open an item, which might trigger lazy-loading
|
* Open an item, which might trigger lazy-loading
|
||||||
*
|
*
|
||||||
|
@ -118,6 +118,12 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
|
|||||||
return this._tree?.leafOnly;
|
return this._tree?.leafOnly;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* set the corresponding attribute if you want the tree to scroll to the selected item, when it is opened
|
||||||
|
* Please already supply the parents of the current selection in an open state from the server side if possible
|
||||||
|
*/
|
||||||
|
@property({type: Boolean}) openAtSelection = false
|
||||||
|
|
||||||
@state() currentTag: Et2Tag;
|
@state() currentTag: Et2Tag;
|
||||||
|
|
||||||
// We show search results in the same dropdown
|
// We show search results in the same dropdown
|
||||||
@ -289,9 +295,14 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
|
|||||||
this.requestUpdate("open", true);
|
this.requestUpdate("open", true);
|
||||||
return this.updateComplete;
|
return this.updateComplete;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.open = true;
|
this.open = true;
|
||||||
this.requestUpdate("open", false)
|
this.requestUpdate("open", false)
|
||||||
|
if (this.openAtSelection)
|
||||||
|
{
|
||||||
|
//TODO check what to wait on, waiting on updateComplete does not work
|
||||||
|
setTimeout(() =>
|
||||||
|
this._tree.scrollToSelected(),100)
|
||||||
|
}
|
||||||
return this.updateComplete
|
return this.updateComplete
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -381,6 +381,7 @@ class preferences_hooks
|
|||||||
'attributes' => array(
|
'attributes' => array(
|
||||||
'search' => true,
|
'search' => true,
|
||||||
'leafOnly' => true, // don't allow to select continents
|
'leafOnly' => true, // don't allow to select continents
|
||||||
|
'openAtSelection' => true, // scroll to selected item on open
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
'tz_selection' => array(
|
'tz_selection' => array(
|
||||||
|
Loading…
Reference in New Issue
Block a user