1/** 2 * Javascript TabInterface (New) 3 * code Felix Schürmeyer 4 * version 0.3 5 */ 6 7 8function TabsInterface() { 9 10 this.options = function () { 11 this.opts = []; 12 this.opts['group'] = 'ih-tabs'; // By Class 13 this.opts['groupTab'] = 'article'; // By Tag 14 this.opts['groupTabData'] = 'data-tab-name'; // By Tag >> Data Attribute Name 15 16 /* Change here if your Nav, Main or Next Button has a other Class */ 17 18 this.opts['nextBtn'] = 'next-btn'; // By Class 19 this.opts['navTag'] = 'nav'; // By Tag 20 this.opts['main'] = 'main'; // By Tag 21 22 23 } 24 25 this.options() // inital Options 26 27 28 this.getTabsGroups = function (x) { 29 return document.getElementsByClassName(x); 30 } 31 32 this.getTabs = function () { 33 var group = this.getTabsGroups(this.opts['group']); 34 var tabs = []; 35 36 for (var index = 0; index < group.length; index++) { 37 var element = group[index]; 38 tabs[index] = element.getElementsByTagName(this.opts['groupTab']); 39 } 40 41 42 return tabs; 43 } 44 45 this.getTabsN = function (n) { 46 return this.getTabsGroups(this.opts['group'])[n];
47 } 48 49 this.generateTabsNavigationWrapper = function (tabs) { 50 for (var index = 0; index < tabs.length; index++) { 51 var tab = tabs[index]; 52 var dom_nav = this.generateTabsNavigation(tab); 53 this.wrapElement(dom_nav, this.getTabsGroups(this.opts['group'])[index]) 54 } 55 return true; 56 } 57 58 this.generateTabsNavigation = function (group) { 59 var dom = '<ul class="ih-tabs-nav">'; 60 61 for (let index = 0; index < group.length; index++) { 62 var e = group[index]; 63 var n = e.getAttribute(this.opts['groupTabData']); 64 65 if (index !== 0) { 66 dom += '<li data-click="' + n + '">' + n + '</li>'; 67 } else { 68 dom += '<li class="active" data-click="' + n + '">' + n + '</li>'; 69 e.classList.add('active'); 70 } 71 72 } 73 74 dom += '</ul>'; 75 return dom; 76 } 77 78 this.wrapElement = function (nav, elm) { 79 var container = document.createElement('div'); 80 var att = document.createAttribute("class"); // Create a "class" attribute 81 att.value = "ih-group"; // Set the value of the class attribute 82 83 container.setAttributeNode(att); 84 85 this.wrap(elm, container); 86 87 elm.insertAdjacentHTML('beforeBegin', nav); // SET Navigation Before 88 } 89 90 this.wrap = function (el, wrapper) { 91 el.parentNode.insertBefore(wrapper, el); 92 wrapper.appendChild(el); 93 } 94 95 this.clickHandlerNav = function (group) { 96 for (var index = 0; index < group.length; index++) { 97 var nav = group[index]; 98 for (var i = 0; i < nav.getElementsByTagName('li').length; i++) { 99 var element = nav.getElementsByTagName('li')[i]; 100 this.clickItem(element, index, nav) 101 } 102 } 103 } 104 105 106 this.clickItem = function (li, index, nav) { 107 var methode = this; 108 li.addEventListener("click", function () { 109 var elm = methode.getTabsGroups(methode.opts['group'])[index]; 110 111 var click = this.getAttribute('data-click'); 112 var open = elm.querySelector('[data-tab-name="' + click + '"]'); 113 open.classList.add('active'); 114 this.classList.add('active'); 115 116 methode.removeActiveFromOther(nav, methode.getTabsGroups(methode.opts['group'])[index], click, index); 117 118 }); // END CLICK 119 } 120 121 this.attackItem = function (li, index, nav) { 122 var methode = this; 123 124 var elm = methode.getTabsGroups(methode.opts['group'])[index]; 125 126 var click = li.getAttribute('data-click'); 127 var open = elm.querySelector('[data-tab-name="' + click + '"]'); 128 open.classList.add('active'); 129 li.classList.add('active'); 130 131 methode.removeActiveFromOther(nav, methode.getTabsGroups(methode.opts['group'])[index], click, index); 132 133 } 134 135 this.removeActiveFromOther = function (nav, group, click, index) { 136 137 138 139 var article = group.getElementsByTagName('article'); 140 141 for (var c = 0; c < article.length; ++c) { 142 var article_attr = article[c]; 143 if (article_attr.getAttribute('data-tab-name') !== click) { 144 145 article_attr.classList.remove('active'); 146 } 147 } 148 149 150 nav = this.getNavs()[index].getElementsByTagName('li'); 151 152 for (var b = 0; b < nav.length; ++b) { 153 var lisi_remove = nav[b]; 154 if (lisi_remove.getAttribute('data-click') !== click) { 155 lisi_remove.classList.remove('active'); 156 } 157 }; 158 159 } 160 161 this.getNavs = function () { 162 163 var item = document.getElementsByClassName('ih-group'); 164 var navs = []; 165 166 for (var index = 0; index < item.length; index++) { 167 var element = item[index]; 168 navs[index] = element.getElementsByClassName('ih-tabs-nav')[0]; 169 } 170 171 return navs; 172 } 173 174 this.createButtonHandler = function (tabs) { 175 var methode = this; 176 for (var i = 0; i < tabs.length; i++) { 177 var element = tabs[i]; 178 179 for (var e = 0; e < element.length; e++) { 180 var item = element[e]; 181 var attributeFromItem = item.getAttribute(this.opts['groupTabData']) 182 var nextAttribute = this.findNextAttribute(attributeFromItem, element); 183 var btn = this.findButton(item); 184 185 if (typeof btn !== 'undefined') { 186 this.addButtonAttribute(btn, nextAttribute, i); 187 188 btn.addEventListener('click', function () { 189 190 var next = this.getAttribute(methode.opts['groupTabData'] + '-next'); 191 var count = this.getAttribute('data-c') 192 193 for (var c = 0; c < methode.getNavs()[count].getElementsByTagName('li').length; c++) { 194 var blub = methode.getNavs()[count].getElementsByTagName('li')[c]; 195 if (blub.getAttribute('data-click') === next) { 196 var li = blub; 197 var nav = methode.getNavs()[count]; 198 var index = count; 199 methode.scroll(index); 200 methode.attackItem(li, index, nav); 201 202 } 203 } 204 205 }) 206 207 } 208 } 209 210 } 211 } 212 213 this.findNextAttribute = function (currentAttribute, e) { 214 for (var i = 0; i < e.length; i++) { 215 var c = e[i]; 216 if (c.getAttribute(this.opts['groupTabData']) == currentAttribute && typeof e[i + 1] !== 'undefined') { 217 return e[i + 1].getAttribute(this.opts['groupTabData']); 218 } 219 } 220 } 221 222 this.findButton = function (elm) { 223 return elm.getElementsByClassName(this.opts['nextBtn'])[0]; 224 } 225 226 this.addButtonAttribute = function (btn, attribute, i) { 227 btn.setAttribute('data-c', i); 228 btn.setAttribute(this.opts['groupTabData'] + '-next', attribute); 229 } 230 231 this.init = function () { 232 233 var tabs = this.getTabs();
234 if (this.generateTabsNavigationWrapper(tabs)) { 235 this.clickHandlerNav(this.getNavs()); 236 this.createButtonHandler(tabs); 237 } 238 } 239 240 this.scroll = function (index) { 241 242 if (window.matchMedia('(max-width: 800px)').matches) { 243 this.height = 0; 244 } else { 245 this.height = document.getElementsByTagName(this.opts['navTag'])[0].offsetHeight; 246 } 247 248 249 window.i = window.pageYOffset; 250 251 var item = document.getElementsByTagName(this.opts['main'])[0].offsetTop; 252 var height = this.getTabsGroups('ih-group')[index].offsetTop + item; 253 254 var methode = this; 255 256 if (window.i >= height - this.height) { 257 var int = setInterval(function () { 258 259 window.scroll(0, window.i); 260 window.i -= 20; 261 262 if (window.i <= height - methode.height) clearInterval(int); 263 264 }, 10); 265 } else { 266 var int = setInterval(function () { 267 268 window.scroll(0, window.i); 269 window.i += 20; 270 271 if (window.i >= height - methode.height) clearInterval(int); 272 273 }, 10); 274 } 275 276 } 277 278} 279 280var tab = new TabsInterface().init()
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.