javascript-automatic-tab-module/tabsModule.js at master · yanivdror/javascript-automatic-tab-module · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
(function(parent){

	var document = parent.document;
	var autoTabsModule = document.querySelector('.autoTabsModule');
	var containerObj = {};

	if(autoTabsModule){

		var ifTabsContent = autoTabsModule.children[0].classList.contains("tabsContent");
		var tabsContent = autoTabsModule.children[0];

		if(ifTabsContent){

		    containerObj.tabsContentChildren = tabsContent.children;
		    var len = containerObj.tabsContentChildren.length;

		    if(len){

		        //create container UL for tabs with title
		        createTabsUl(tabsContent);

		        for(var i=0; i<len; i++){

		            var theTabTitle = containerObj.tabsContentChildren[i].dataset.tabsTitle;

		            if(theTabTitle){
		                createTabsWithTitle(theTabTitle);

		            }else{

		                throw new Error('please check your data-tabs-title attributes');
		                break;
		            }

		        }

		        activeClassInit();

		        containerObj.tabsControlUl.addEventListener('click',function(event){

		            if(!event.target.classList.contains("active")){

		                removeAllActiveClass(containerObj.tabsControlUl.children);
		                removeAllActiveClass(containerObj.tabsContentChildren);
		                findIndex(event.target);
		            }else{
		                console.log("contains active no need to do anything");
		            }

		        });
		    }
		}


	}

	function findIndex(elem){

		for(var i=0; i < containerObj.tabsControlUl.children.length;i++){

			if(containerObj.tabsControlUl.children[i] === elem){
			  addActive(i);
			}
		}
	}

	function addActive(index){

		containerObj.tabsControlUl.children[index].classList.add("active");
		containerObj.tabsContentChildren[index].classList.add("active");

	}


	function activeClassInit(){

		containerObj.tabsControlUl.children[0].setAttribute("class","active");
		containerObj.tabsContentChildren[0].setAttribute("class","active");
	}

	function createTabsWithTitle(str){

		var tabsWithName = document.createElement("LI");
		tabsWithName.setAttribute("class","autoTab");
		tabsWithName.innerHTML = str;
		containerObj.tabsControlUl.appendChild(tabsWithName);

	}

	function createTabsUl(tabsContent){

		var tabsControll = document.createElement("UL");
		tabsControll.setAttribute("class","tabsControl");
		autoTabsModule.insertBefore(tabsControll,tabsContent);

		//catch the UL newly created element
		containerObj.tabsControlUl = document.querySelector('.tabsControl');
	}

	function removeAllActiveClass(childsArr){

		for(var i = 0; i<childsArr.length; i++){

			if(childsArr[i].classList.contains("active")){
				childsArr[i].classList.remove("active");
			}
		}

	}


})(window);