TabbedPane.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. /**
  2. * TabbedPane.js
  3. *
  4. * @author realor
  5. */
  6. import { I18N } from '../i18n/I18N.js'
  7. class TabbedPane {
  8. constructor(element) {
  9. this.tabs = new Map()
  10. this.paneElem = document.createElement('div')
  11. element.appendChild(this.paneElem)
  12. this.paneElem.className = 'tabbed_pane'
  13. this.headerElem = document.createElement('div')
  14. this.headerElem.className = 'header'
  15. this.paneElem.appendChild(this.headerElem)
  16. this.bodyElem = document.createElement('div')
  17. this.bodyElem.className = 'body'
  18. this.paneElem.appendChild(this.bodyElem)
  19. }
  20. addTab(name, label) {
  21. if (!this.tabs.has(name)) {
  22. const tabSelectorElem = document.createElement('a')
  23. tabSelectorElem.href = '#'
  24. I18N.set(tabSelectorElem, 'innerHTML', label || name)
  25. tabSelectorElem.addEventListener('click', () => this.showTab(name))
  26. tabSelectorElem.addEventListener('pointerdown', () => this.showTab(name))
  27. tabSelectorElem.className = 'selector'
  28. this.headerElem.appendChild(tabSelectorElem)
  29. const tabPanelElem = document.createElement('div')
  30. this.bodyElem.appendChild(tabPanelElem)
  31. tabPanelElem.className = 'tab_panel'
  32. const tabElems = {
  33. selector: tabSelectorElem,
  34. panel: tabPanelElem
  35. }
  36. this.tabs.set(name, tabElems)
  37. if (this.tabs.size === 1) {
  38. // first tab
  39. this.selectTab(tabElems)
  40. }
  41. return tabElems.panel
  42. }
  43. return null
  44. }
  45. removeTab(name) {
  46. let tabElems = this.tabs.get(name)
  47. if (tabElems) {
  48. this.headerElem.removeChild(tabElems.selector)
  49. this.bodyElem.removeChild(tabElems.panel)
  50. this.tabs.delete(name)
  51. if (this.tabs.size > 0) {
  52. // not empty
  53. tabElems = this.tabs.values().next().value
  54. this.selectTab(tabElems)
  55. }
  56. }
  57. }
  58. showTab(name) {
  59. let tabElems
  60. for (tabElems of this.tabs.values()) {
  61. this.unselectTab(tabElems)
  62. }
  63. tabElems = this.tabs.get(name)
  64. if (tabElems) {
  65. this.selectTab(tabElems)
  66. }
  67. }
  68. getTab(name) {
  69. return this.tabs.get(name)
  70. }
  71. setLabel(name, label) {
  72. let tabElems = this.tabs.get(name)
  73. if (tabElems) {
  74. tabElems.selector.innerHTML = label
  75. }
  76. }
  77. getLabel(name) {
  78. let tabElems = this.tabs.get(name)
  79. if (tabElems) {
  80. return tabElems.selector.innerHTML
  81. }
  82. return null
  83. }
  84. selectTab(tabElems) {
  85. tabElems.selector.classList.add('selected')
  86. tabElems.panel.classList.add('selected')
  87. }
  88. unselectTab(tabElems) {
  89. tabElems.selector.classList.remove('selected')
  90. tabElems.panel.classList.remove('selected')
  91. }
  92. }
  93. export { TabbedPane }