mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 08:34:29 +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
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
*
|
||||
|
@ -118,6 +118,12 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
|
||||
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;
|
||||
|
||||
// We show search results in the same dropdown
|
||||
@ -289,9 +295,14 @@ export class Et2TreeDropdown extends SearchMixin<Constructor<any> & Et2InputWidg
|
||||
this.requestUpdate("open", true);
|
||||
return this.updateComplete;
|
||||
}
|
||||
|
||||
this.open = true;
|
||||
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
|
||||
}
|
||||
|
||||
|
@ -381,6 +381,7 @@ class preferences_hooks
|
||||
'attributes' => array(
|
||||
'search' => true,
|
||||
'leafOnly' => true, // don't allow to select continents
|
||||
'openAtSelection' => true, // scroll to selected item on open
|
||||
)
|
||||
),
|
||||
'tz_selection' => array(
|
||||
|
Loading…
Reference in New Issue
Block a user