// responsive select list YUI.add('ah-responsiveSelectTabs',function(Y){ Y.AHResponsiveSelectTabs = Y.Base.create('ah-ResponsiveSelectTabs', Y.Widget, [],{ tabView: null, history:null, backButtonHistory:null, initializer: function(config){ //check back button functionality is required? if(config.backButtonHistory) { this.backButtonHistory=config.backButtonHistory; } this._containerNodeID=config.srcNode; this._containerNode = Y.one(config.srcNode); this._listNode= this._containerNode.one(' ul'); //build tabs using tab view }, renderUI: function(){ //build select menu //render select menu to screen this._containerNode.prepend('
'); this._containerNode.one('p').addClass('ah-select-tab-select-element '); //.addClass('aui-field-input aui-field-input-select'); //build YUI tabview this.tabView = new Y.TabView({srcNode: this._containerNodeID}); this.tabView.render(); this._renderSelect(); this._screenSize(); if(this.backButtonHistory) { //calling back button functionality this.initBackButtonHistory(); } }, bindUI : function() { var TAB_NODE=this._containerNode; var currentSelectList = null; /*holder for selected list item to remove when a list item is clicked */ //binds an action to the select list so that if an item is selected in shows the right tab and passes the info to the list //this._bindSelectEvent(); //when a list item is clicked pass it's select status to the options menu TAB_NODE.all('li a').each(function(){ this.on('click', function(){ var relLink=this.getAttribute('href'); TAB_NODE.all('select option').each(function(){ if(this.get('value') == relLink){ this.set('selected',true); } }); if(currentSelectList != null && currentSelectList.hasClass('yui3-tab-selected')) { currentSelectList.removeClass('yui3-tab-selected'); currentSelectList=null; } }); }); //adding event to the tabs var tabs = Y.all('#ah-tab li'); tabs.each(function(taskNode, i) { this.addClass('ah-tab-'+i); }); //end event to the tabs }, syncUI: function(){ }, _bindSelectEvent : function(){ var TAB_NODE=this._containerNode; TAB_NODE.one('select').on("change", function(){ var selValue= this.get('selectedIndex'); //var optionValue= this.all('option').item(selValue).get('value'); //remove yui classes TAB_NODE.all('.yui3-tab-panel').removeClass('yui3-tab-panel-selected'); TAB_NODE.all('.yui3-tab').removeClass('yui3-tab-selected'); //Triggering click event of native tab TAB_NODE.one('ul.yui3-tabview-list').all('li a').item(selValue).simulate("click"); //add selected to current /*TAB_NODE.one('ul').all('li').each(function(){ if(this.one('a').getAttribute('href') == optionValue){ currentSelectList=this; this.addClass('yui3-tab-selected'); }else if(this.hasClass('yui3-tab-selected')){ this.removeClass('yui3-tab-selected'); } }); TAB_NODE.one(optionValue).addClass('yui3-tab-panel-selected');*/ }); }, /*Make P to hide and show on responsive*/ /*_getSelectClasses : function(){ var windowSize=Y.one("body").get("winWidth"); if(windowSize<= return ''; }else{ return 'aui-helper-hidden'; } },*/ _screenSize: function () { var windowSize=Y.one("body").get("winWidth"); if(windowSize<720){ this._containerNode.one('p.ah-select-tab-select-element').show(); this._containerNode.one('ul').hide(); }else{ this._containerNode.one('p.ah-select-tab-select-element').hide(); this._containerNode.one('ul').show(); } }, _renderSelect: function(){ var html = ""; /*set html to empty */ this._listNode.all('li').each(function(){ /* Loop though all the Lis and build html for options*/ var href = this.one('a').getAttribute('href'); var text = this.one('a').get('text'); html += ''; }); html=""; this._containerNode.one('.ah-select-tab-select-element').set('innerHTML', html); this._bindSelectEvent(); this._listNode.all('li a').setAttribute("tabindex","0"); }, _updateSelect: function(){ var html = ""; /*set html to empty */ var optionNode = this._containerNode.one('.ah-select-tab-select-element select').all('option'); this._listNode.all('li').each(function(o,i){ /* Loop though all the Lis and build html for options*/ var href = this.one('a').getAttribute('href'); var text = this.one('a').get('text'); //html += ''; optionNode.item(i).val(href).text(text); }); //html=""; //this._containerNode.one('.ah-select-tab-select-element select').set('innerHTML', html); //this._bindSelectEvent(); }, _selectTab:function(index){ var instance=this; var windowSize=Y.one("body").get("winWidth"); if(windowSize<720) { var optionNode = instance._containerNode.one('.ah-select-tab-select-element select').all('option'); optionNode.item(index).set("selected",true); instance.tabView.selectChild(index); //this._containerNode.one('p.ah-select-tab-select-element').one('select').all('options'); } else{ instance.tabView.selectChild(index); } }, initBackButtonHistory:function(){ var instance=this; var tabID=instance.get('id')+"tab"; instance.history = new Y.HistoryHash(); instance.tabView.selectChild(instance.history.get(tabID) || 0); // Store a new history state when the user selects a tab. instance.tabView.after('selectionChange', function (e) { instance.history.addValue(tabID, e.newVal.get('index') || null); }); // Listen for history changes from back/forward navigation or // URL changes, and update the tab selection when necessary. Y.Global.on('history:change', function (e) { if (e.src === Y.HistoryHash.SRC_HASH) { if (e.changed[tabID]) { // The new state contains a different tab selection, so // change the selected tab. instance._selectTab(e.changed[tabID].newVal); } else if (e.removed[tabID]) { // The tab selection was removed in the new state, so // select the first tab by default. instance._selectTab(0); } } }); } }); }, '0.0.1', { requires: ['history','widget', 'tabview','node', 'event']});