123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- /**
- * TabbedPane.js
- *
- * @author realor
- */
- import { I18N } from '../i18n/I18N.js'
- class TabbedPane {
- constructor(element) {
- this.tabs = new Map()
- this.paneElem = document.createElement('div')
- element.appendChild(this.paneElem)
- this.paneElem.className = 'tabbed_pane'
- this.headerElem = document.createElement('div')
- this.headerElem.className = 'header'
- this.paneElem.appendChild(this.headerElem)
- this.bodyElem = document.createElement('div')
- this.bodyElem.className = 'body'
- this.paneElem.appendChild(this.bodyElem)
- }
- addTab(name, label) {
- if (!this.tabs.has(name)) {
- const tabSelectorElem = document.createElement('a')
- tabSelectorElem.href = '#'
- I18N.set(tabSelectorElem, 'innerHTML', label || name)
- tabSelectorElem.addEventListener('click', () => this.showTab(name))
- tabSelectorElem.addEventListener('pointerdown', () => this.showTab(name))
- tabSelectorElem.className = 'selector'
- this.headerElem.appendChild(tabSelectorElem)
- const tabPanelElem = document.createElement('div')
- this.bodyElem.appendChild(tabPanelElem)
- tabPanelElem.className = 'tab_panel'
- const tabElems = {
- selector: tabSelectorElem,
- panel: tabPanelElem
- }
- this.tabs.set(name, tabElems)
- if (this.tabs.size === 1) {
- // first tab
- this.selectTab(tabElems)
- }
- return tabElems.panel
- }
- return null
- }
- removeTab(name) {
- let tabElems = this.tabs.get(name)
- if (tabElems) {
- this.headerElem.removeChild(tabElems.selector)
- this.bodyElem.removeChild(tabElems.panel)
- this.tabs.delete(name)
- if (this.tabs.size > 0) {
- // not empty
- tabElems = this.tabs.values().next().value
- this.selectTab(tabElems)
- }
- }
- }
- showTab(name) {
- let tabElems
- for (tabElems of this.tabs.values()) {
- this.unselectTab(tabElems)
- }
- tabElems = this.tabs.get(name)
- if (tabElems) {
- this.selectTab(tabElems)
- }
- }
- getTab(name) {
- return this.tabs.get(name)
- }
- setLabel(name, label) {
- let tabElems = this.tabs.get(name)
- if (tabElems) {
- tabElems.selector.innerHTML = label
- }
- }
- getLabel(name) {
- let tabElems = this.tabs.get(name)
- if (tabElems) {
- return tabElems.selector.innerHTML
- }
- return null
- }
- selectTab(tabElems) {
- tabElems.selector.classList.add('selected')
- tabElems.panel.classList.add('selected')
- }
- unselectTab(tabElems) {
- tabElems.selector.classList.remove('selected')
- tabElems.panel.classList.remove('selected')
- }
- }
- export { TabbedPane }
|