tabs.js (1309B)
1 /**
2 * Scripts which manages Code Toggle tabs.
3 */
4 var i;
5 // store tabs variable
6 var allTabs = document.querySelectorAll("[data-toggle-tab]");
7 var allPanes = document.querySelectorAll("[data-pane]");
8
9 function toggleTabs(event) {
10
11 if(event.target){
12 event.preventDefault();
13 var clickedTab = event.currentTarget;
14 var targetKey = clickedTab.getAttribute("data-toggle-tab")
15 }else {
16 var targetKey = event
17 }
18 // We store the config language selected in users' localStorage
19 if(window.localStorage){
20 window.localStorage.setItem("configLangPref", targetKey)
21 }
22 var selectedTabs = document.querySelectorAll("[data-toggle-tab='" + targetKey + "']");
23 var selectedPanes = document.querySelectorAll("[data-pane='" + targetKey + "']");
24
25 for (var i = 0; i < allTabs.length; i++) {
26 allTabs[i].classList.remove("active");
27 allPanes[i].classList.remove("active");
28 }
29
30 for (var i = 0; i < selectedTabs.length; i++) {
31 selectedTabs[i].classList.add("active");
32 selectedPanes[i].classList.add("active");
33 }
34
35 }
36
37 for (i = 0; i < allTabs.length; i++) {
38 allTabs[i].addEventListener("click", toggleTabs)
39 }
40 // Upon page load, if user has a preferred language in its localStorage, tabs are set to it.
41 if(window.localStorage.getItem('configLangPref')) {
42 toggleTabs(window.localStorage.getItem('configLangPref'))
43 }