tabs (#822)

docs/_includes/programmingLanguageSelectScalaPython.html

@@ -1 +1 @@
-<div class="tabs-python-scala-head"><button class="tab-python-scala-li tabheader_active">Python</button><button class="tab-python-scala-li">Scala</button></div>
+<div class="tabs-model-aproach-head"><button class="tab-li-model-aproach tabheader_active">Python</button><button class="tab-li-model-aproach tab-li-jsl">JSL</button><button class="tab-li-model-aproach">Scala</button><button class="tab-li-model-aproach tab-li-nlu">NLU</button></div>

docs/_includes/programmingLanguageSelectScalaPythonNLU.html

@@ -1 +1 @@
-<div class="tabs-model-aproach-head"><button class="tab-li-model-aproach tabheader_active">Python</button><button class="tab-li-model-aproach">Scala</button><button class="tab-li-model-aproach">NLU</button></div>
+<div class="tabs-model-aproach-head"><button class="tab-li-model-aproach tabheader_active">Python</button><button class="tab-li-model-aproach tab-li-jsl">JSL</button><button class="tab-li-model-aproach">Scala</button><button class="tab-li-model-aproach tab-li-nlu">NLU</button></div>

docs/_includes/scripts/programmingLanguageSwitcherScalaPython.js

@@ -5,34 +5,78 @@ function tabs({tabsWrapperSelector, tabsParentSelector, tabsSelector, tabsConten
 
     const tabsWrapper = document.querySelectorAll(tabsWrapperSelector);
 
+
+
+
     //Detecting all tabs
     tabsWrapper.forEach(tab => {
         const tabsParent = tab.querySelector(tabsParentSelector),
                 tabsLi = tab.querySelectorAll(tabsSelector),
                 tabsContent = tab.querySelectorAll(tabsContentSelector);
 
+        let jslFlag = false,
+            nluFlag = false;
+
+
+        tabsContent.forEach(item => {
+            if(item.classList.contains('jsl-block')) {
+                jslFlag = true;
+                return;
+            }
+        })
+
+        tabsContent.forEach(item => {
+            if(item.classList.contains('nlu-block')) {
+                nluFlag = true;
+                return;
+            }
+        })
+
+        if(!nluFlag) {
+            tabsLi.forEach(item => {
+                if(item.classList.contains('tab-li-nlu')) {
+                    item.remove();
+                    return;
+                }
+            })
+        }
+
+
+        if(!jslFlag) {
+            tabsLi.forEach(item => {
+                if(item.classList.contains('tab-li-jsl')) {
+                    item.remove();
+                    return;
+                }
+            })
+        }
+
+        const   tabsLiAfter = tab.querySelectorAll(tabsSelector),
+                tabsContentAfter = tab.querySelectorAll(tabsContentSelector);
+
+
         //Hiding all tabs
         function hideTabsContent() {
-            if(Array.from(tabsLi).length != 0) {
-                tabsContent.forEach(item => {
-                    item.style.display = 'none';
+            if(Array.from(tabsLiAfter).length != 0) {
+                tabsContentAfter.forEach(item => {
+                    item.style.display = 'none';                    
                 }); 
             }
 
-            if(Array.from(tabsLi).length != 0) {
-                tabsLi.forEach(item => {
+            if(Array.from(tabsLiAfter).length != 0) {
+                tabsLiAfter.forEach(item => {
                     item.classList.remove(activeClass);
                 }); 
             }
         }
 
         //Show active tabs
         function showTabContent(i = 0) {
-            if(Array.from(tabsContent).length != 0) {
-                tabsContent[i].style.display = "block";
+            if(Array.from(tabsContentAfter).length != 0) {
+                tabsContentAfter[i].style.display = "block";
             }
-            if(Array.from(tabsLi).length != 0) {
-                tabsLi[i].classList.add(activeClass);            
+            if(Array.from(tabsLiAfter).length != 0) {
+                tabsLiAfter[i].classList.add(activeClass);            
             }
         }
 
@@ -42,7 +86,7 @@ function tabs({tabsWrapperSelector, tabsParentSelector, tabsSelector, tabsConten
                 const target = event.target;
 
                 if(target && target.classList.contains(tabsSelector.slice(1))) {
-                    tabsLi.forEach((item, i) => {
+                    tabsLiAfter.forEach((item, i) => {
                         if(target == item) {
                             hideTabsContent();
                             try{showTabContent(i);}catch(e){}
@@ -78,27 +122,15 @@ tabs({
     tabsContentSelector: '.tab-mfl-content', 
     activeClass: 'tabheader_active'
 });
-tabs({
-    tabsWrapperSelector: '.tabs-box', 
-    tabsParentSelector: '.tabs-python-scala-head', 
-    tabsSelector: '.tab-python-scala-li', 
-    tabsContentSelector: '.tabs-box .highlighter-rouge', 
-    activeClass: 'tabheader_active'
-});
-tabs({
-    tabsWrapperSelector: '.tabs-box', 
-    tabsParentSelector: '.tabs-model-aproach-head', 
-    tabsSelector: '.tab-li-model-aproach', 
-    tabsContentSelector: '.tabs-python-scala-box', 
-    activeClass: 'tabheader_active'
-});
+
 tabs({
     tabsWrapperSelector: '.tabs-box', 
     tabsParentSelector: '.tabs-model-aproach-head', 
     tabsSelector: '.tab-li-model-aproach', 
     tabsContentSelector: '.tabs-box .highlighter-rouge', 
     activeClass: 'tabheader_active'
 });
+
 tabs({
     tabsWrapperSelector: '.tabs-wrapper', 
     tabsParentSelector: '.tabs-python-scala-head',