/* Copyright (c) 2010, ePages GmbH All Rights Reserved. epages.widget.TabBanner $Revision: 1.3 $ usage: <div dojoType="epages.widget.TabBanner" containerWidth="600px" containerHeight="400px" class="MyCSSClass" enableFade="1" > <ul class="Tabs"> <li>tab 1</li> <li>tab 2</li> </ul> <div class="TabPage"> <h2>TabPage 1</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p> </div> <div class="TabPage"> <h2>TabPage 2</h2> <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> */ dojo.provide("epages.widget.TabBanner"); dojo.require("epages.widget"); dojo.require("epages.string"); dojo.declare("epages.widget.TabBanner", [dijit._Widget], { containerWidth : '400px', // string - width of display container e.g. 400px containerHeight : '300px', // string - height of display container e.g. 300px enableFade : '0', // string/boolean - if set to 1 triggers slow fade effect _tabArray : undefined, // array - array with all tab nodes _tabPageArray : undefined, // array - array with all tabpage nodes _selectedTabNode: undefined, // domNode - currently selected tab _ep_connects : undefined, // array - saved event connections /** * widget life cycle */ postMixInProperties : function() { this.inherited("postMixInProperties", arguments); this.enableFade = epages.string.toBoolean(this.enableFade); }, postCreate: function() { this.inherited("postCreate", arguments); dojo.addClass(this.domNode, "TabBanner"); this._ep_connects = []; var containerWidth = this.containerWidth; var containerHeight = this.containerHeight; dojo.style(this.domNode, "width", containerWidth); dojo.style(this.domNode, "height", containerHeight); this._tabArray = dojo.query('ul.Tabs li', this.domNode); if(this._tabArray === undefined) { console.warn("tabs not found in "+ this.declaredClass); } this._tabPageArray = dojo.query('.TabPage', this.domNode); if(this._tabPageArray === undefined) { console.warn("tabpages not found in "+ this.declaredClass); } if(this._tabPageArray.length != this._tabArray.length) { console.warn("tabs and tabpage count differs "+ this.declaredClass); } dojo.forEach(this._tabArray, function(el, i) { el.setAttribute("ep_tabindex", i); this._ep_connects.push(dojo.connect(el, 'onclick', this, this.onclick)); }, this); dojo.forEach(this._tabPageArray, function(el) { el.style.display="none"; }); this.selectNode(this._tabArray[0]); }, destroy : function() { // disconnect events for(var el in this._ep_connects) { dojo.disconnect( this._ep_connects[el] ); } }, /** * events */ onclick : function(/* event object */ evt) { //summary: event function - tab clicked var tabNode = evt.currentTarget; this.selectNode(tabNode); }, /** * public functions */ selectNode : function(/* dom node*/ _newSelected) { // summary: controller for currently visible tabs if(_newSelected !== this._selectedTabNode) { if(this._selectedTabNode !== undefined) { dojo.removeClass( this._selectedTabNode, "Selected"); var oldIndex = this._selectedTabNode.getAttribute("ep_tabindex"); if (this.enableFade) { this.fadeOutTab(this._tabPageArray[oldIndex]); } else { this._tabPageArray[oldIndex].style.display = 'none'; } } var newIndex = _newSelected.getAttribute("ep_tabindex"); if (this.enableFade) { this.fadeInTab(this._tabPageArray[newIndex]); } else { this._tabPageArray[newIndex].style.display ='' } // change currently selected node this._selectedTabNode = _newSelected; dojo.addClass( this._selectedTabNode, "Selected"); } }, fadeOutTab : function(node) { // summary: function for slow fade out dojo.fadeOut( { node:node, duration: 500, onEnd: function(){ this.node.style.display ='none'; } }).play(); }, fadeInTab : function(node) { // summary: function for slow fade in dojo.fadeIn( { node:node, duration: 500, onEnd: function(){ this.node.style.display =''; } }).play(); } });