tabbar.min.js

var AppTabBar={};AppTabBar.Tabbar=function(nodeId,options){var self=this;this.obj_ID=nodeId;this.obj=null;this.options=options;this.tabbar_spacer=null;this.tabs={tabs_current_uuid:"",tabs_objects:[],tab_selected:null,tab_prev_selected:null,tab_selected_classes:"",tab_unselected_classes:"",active:null};this.init=function(){var tabbarObj=document.getElementById(self.obj_ID);self.tabbar_spacer=document.createElement("div");var div_tabbar=document.createElement("div");tabbarObj.appendChild(self.tabbar_spacer);tabbarObj.appendChild(div_tabbar);self.obj=div_tabbar};this.calculation={};this.calculation.id=0;this.calculation.columnsCalculated=null;this.calculation.uniqueId=function(){self.calculation.id++;return Number(self.calculation.id.toString())};this.calculation.calculateColumns=function(){var numTabs=self.tabs.tabs_objects.length;var columns=12/numTabs;var validColumns=[2,3,4,6,12];if(validColumns.indexOf(columns)==-1){throw"calculateColumns invalid_columns"}self.calculation.columnsCalculated=columns};this.findTab=function(tabId){var foundTab=false;var tabIndex=0;var tab=null;for(var i=0;i<self.tabs.tabs_objects.length;i++){var tempTab=self.tabs.tabs_objects[i];if(tempTab.id==tabId){tabIndex=i;foundTab=true;tab=tempTab;break}}if(!foundTab)return false;return{tab:tab,tabIndex:tabIndex}};this.addTab=function(name,icon,options){var tabId=self.calculation.uniqueId();var tab=new AppTabBar.Tab(tabId,name,icon,options,self);self.tabs.tabs_objects.push(tab);return tabId};this.removeTab=function(tabId){var tabObj=self.findTab(tabId);if(tabObj===false)return;tabObj.tab.obj.parentElement.removeChild(tabObj.tab.obj);self.tabs.tabs_objects.splice(tabObj.tabIndex,1);return true};this.selectTab=function(tabId){var tabObj=self.findTab(tabId);if(tabObj===false)return;if(tabObj.tab.rendered==false){throw"selectTab\trender_before_selecting";return false}if(self.tabs.tab_selected!==null){self.tabs.tab_selected.obj.setAttribute("class",self.tabs.tab_unselected_classes);self.tabs.tab_prev_selected=self.tabs.tab_selected}self.tabs.tab_selected=tabObj.tab;if(self.tabs.tab_selected==self.tabs.tab_prev_selected)self.tabs.tab_prev_selected=null;self.tabs.tab_selected.obj.style.display="none";self.tabs.tab_selected.obj.setAttribute("class",self.tabs.tab_selected_classes);if("tab_selected_style"in self.options){var style=self.options.tab_selected_style;if("color"in self.options.tab_selected_style){self.tabs.tab_selected.obj.children[0].style.color=style.color;if(self.tabs.tab_prev_selected!=null)self.tabs.tab_prev_selected.obj.children[0].style.color=""}if("background_color"in self.options.tab_selected_style){self.tabs.tab_selected.obj.children[0].style.backgroundColor=style.background_color;if(self.tabs.tab_prev_selected!=null)self.tabs.tab_prev_selected.obj.children[0].style.backgroundColor=""}}self.tabs.tab_selected.obj.style.display="block";tabObj.tab.events.selected();return true};this.render=function(){self.calculation.calculateColumns();var cols=self.calculation.columnsCalculated;self.tabs.tab_selected_classes="navBtnCtn active tb-col-"+cols;self.tabs.tab_unselected_classes="navBtnCtn tb-col-"+cols;self.obj.innerHTML="";self.obj.innerHTML=""+'<div data-tab-bar-controller="container" class="navigationBarContainer container-fluid" style="display: block;">'+'\t<div data-tab-bar-controller="bar" class="navigationBar row">'+"\t</div>"+"</div>";var bar_obj=self.obj.children[0].children[0];for(var i=0;i<self.tabs.tabs_objects.length;i++){var tab=self.tabs.tabs_objects[i];var tabCode=tab.renderCode();bar_obj.appendChild(tabCode);tab.rendered=true}self.tabbar_spacer.style.marginBottom=self.obj.children[0].scrollHeight};this.bind=function(){}};AppTabBar.Tab=function(id,name,icon,options,tabbar){var self=this;this.tabbar=tabbar;this.id=id;this.name=name;this.icon=icon;this.obj=null;this.rendered=false;this.events={};this.events.click=function(e){e.stopPropagation();e.preventDefault();if(self.options.click.preventDefault==true){self.options.click.callback();return}self.tabbar.selectTab(self.id)};this.events.selected=function(){console.log("Tab events.selected not implemented")};this.options={click:{preventDefault:false,callback:null},events:{selected:self.events.selected}};this.init=function(){if(options!=undefined)self.initSetupOptions()};this.initSetupOptions=function(){if("click"in options){if("preventDefault"in options.click)self.options.click.preventDefault=options.click.preventDefault;if("callback"in options.click)self.options.click.callback=options.click.callback}if("events"in options){if("selected"in options.events)self.events.selected=options.events.selected}};this.init();this.renderCode=function(){var tabCode=document.createElement("div");tabCode.setAttribute("class",self.tabbar.tabs.tab_unselected_classes);var btnContent=""+'<button data-tab="'+self.id+'" type="button" class="navBtn btn btn-default">'+'\t<span style="display: block;">'+self.icon+"</span> "+""+self.name+"</button>";tabCode.innerHTML=btnContent;var button=tabCode.children[0];if("button_height"in self.tabbar.options)button.style.height=self.tabbar.options.button_height;if("font_size"in self.tabbar.options)button.style.fontSize=self.tabbar.options.font_size;button.addEventListener("click",self.events.click);button.addEventListener("touchstart",self.events.click);self.obj=tabCode;return tabCode}};