feat(components): add possibility to set active tab at start of compo…

…nent feature/default-tab-bliptabs
takenet · Nov 13, 2019 · be98d9b · be98d9b
1 parent c1018d0
commit be98d9b
Showing 1 changed file with 27 additions and 5 deletions.
diff --git a/src/components/blipTabs/index.js b/src/components/blipTabs/index.js
@@ -1,31 +1,53 @@
 export class BlipTabs {
-  constructor(elementId) {
+  constructor(elementId, options = {}) {
     this.elementId = elementId
+    this.options = options
+
     this.init()
   }
+
   init() {
+    const activeTab = this.options.activeTab
     const tabsContainer = document.getElementById(this.elementId)
-    tabsContainer.classList.add('bp-tabs-container')
     const tabLinks = tabsContainer.querySelectorAll('.bp-tab-nav a')
     const tabContentDivs = tabsContainer.querySelectorAll('.bp-tab-content')
-    tabLinks[0].parentElement.classList.add('bp-tab-active')
-    tabContentDivs[0].classList.add('bp-tab-content-visible')
+    tabsContainer.classList.add('bp-tabs-container')
+
+    let activeTabLink
+    let activeTabContainer
+
+    if (!activeTab) {
+      activeTabLink = tabLinks[0].parentElement
+      activeTabContainer = tabContentDivs[0]
+    } else {
+      const tabLinkSelector = `.bp-tab-nav a[data-ref="${activeTab}"]`
+      activeTabLink = (tabsContainer.querySelector(tabLinkSelector) &&
+        tabsContainer.querySelector(tabLinkSelector).parentElement) || tabLinks[0].parentElement
+
+      activeTabContainer = tabsContainer.querySelector(`.bp-tab-content[data-ref="${activeTab}"]`) || tabContentDivs[0]
+    }
+
+    activeTabLink && activeTabLink.classList.add('bp-tab-active')
+    activeTabContainer && activeTabContainer.classList.add('bp-tab-content-visible')
+
     for (let i = 0; i < tabLinks.length; i++) {
       tabLinks[i].addEventListener('click', event => this.showTab(event, tabLinks, tabContentDivs))
     }
   }
 
-  showTab = (event, tabLinks, tabContentDivs) => {
+  showTab(event, tabLinks, tabContentDivs) {
     event.preventDefault()
     const link = event.target
     const reference = link.dataset.ref
+
     for (let i = 0; i < tabLinks.length; i++) {
       if (tabLinks[i].dataset.ref === reference) {
         tabLinks[i].parentElement.classList.add('bp-tab-active')
       } else {
         tabLinks[i].parentElement.classList.remove('bp-tab-active')
       }
     }
+
     for (let i = 0; i < tabContentDivs.length; i++) {
       if (tabContentDivs[i].dataset.ref === reference) {
         tabContentDivs[i].classList.add('bp-tab-content-visible')