ui/Tabview
The Tabview module exports the Tabview decorator method.
- Source
Methods
(inner) Tabview(tabview) → {tabview}
The Tabview decorator method will deocrate the tabview parameter argument as typedef:tabview and return the decorated tabview.
The tabview object has an addTab() method which can be called with through the addTab event listener added to the tabview.node HTMLElement.
| Name | Type | Description |
|---|---|---|
tabview | Object | Object to decorate. |
| Name | Type | Description |
|---|---|---|
tabview.node | HTMLElement | Required HTML element to hold the tabview tabs and panel elements. |
- Source
Decorated tabview typedef object.
- Type:
- tabview
(inner) activateTab()
The activateTab method is debounced for tabs being shown/added to a tabview. A tab may be a dataview object which requires to be created/updated within the context of the tab.
The dataview may have an associated toolbar [btnRow element] which must be displayed.
- Source
(inner) addTab(entry)
The addTab() method is bound to the tabview [this] object in the decorator.
The tabview.addTab() will decorate an entry object as a tabview tab. The method will return if the entry has already been decorated preventing the method to be accidentaly called twice with same param argument.
The tab element itself will be assigned as tab property to the entry.
The tab decorator will add callbacks for the entry location or layer to trigger the display of the tabview when the associated mapp object status is toggled.
The decorator method will add show() and hide() methods for the tab.
| Name | Type | Description |
|---|---|---|
entry | Object | The entry object will be decorated as a tabview tab. |
| Name | Type | Attributes | Description |
|---|---|---|---|
entry.tab | HTMLElement | The entry object already has been added as a tab. | |
entry.location | location | <optional> | A location associated with the entry. |
entry.layer | layer | <optional> | A layer associated with the entry. |
entry.label | string | <optional> | The title to be displayed in the tab element. |
entry.panel | HTMLElement | <optional> | The node element which will be displayed if the tab is active. |
- Source
(inner) removeTab()
The removeTab() method will be assigned as entry.remove() as well as entry.hide() methods to a decorated tabview tab.
A tab may be a dataview which has it's own show method, but not a remove method.
The method iterates through all sibling tab elements to activate the next tab if a tab is removed.
The removeLastTab() method of the tabview will be executed if the last tab object is removed from a tabview.
- Source
(inner) showTab()
The showTab() method will be assigned as entry.show() method to a decorated tabview tab. The method is associated with the tab element click event which activates a tab. The '.active` class will be added to the tab element classList.
The showTab method is debounced by 500ms to execute only for the last tab to be added when multiple tabs are added in quick succession.
- Source