diff options
Diffstat (limited to 'lib/dijit/layout/ScrollingTabController.js')
| -rw-r--r-- | lib/dijit/layout/ScrollingTabController.js | 662 |
1 files changed, 473 insertions, 189 deletions
diff --git a/lib/dijit/layout/ScrollingTabController.js b/lib/dijit/layout/ScrollingTabController.js index 4ee0bd16e..a91c526de 100644 --- a/lib/dijit/layout/ScrollingTabController.js +++ b/lib/dijit/layout/ScrollingTabController.js @@ -1,199 +1,483 @@ /* - Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved. + Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see: http://dojotoolkit.org/license for details */ -if(!dojo._hasResource["dijit.layout.ScrollingTabController"]){ -dojo._hasResource["dijit.layout.ScrollingTabController"]=true; +if(!dojo._hasResource["dijit.layout.ScrollingTabController"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.layout.ScrollingTabController"] = true; dojo.provide("dijit.layout.ScrollingTabController"); dojo.require("dijit.layout.TabController"); dojo.require("dijit.Menu"); -dojo.declare("dijit.layout.ScrollingTabController",dijit.layout.TabController,{templateString:dojo.cache("dijit.layout","templates/ScrollingTabController.html","<div class=\"dijitTabListContainer-${tabPosition}\" style=\"visibility:hidden\">\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_menuBtn\" iconClass=\"dijitTabStripMenuIcon\"\n\t\t\tdojoAttachPoint=\"_menuBtn\" showLabel=false>▼</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_leftBtn\" iconClass=\"dijitTabStripSlideLeftIcon\"\n\t\t\tdojoAttachPoint=\"_leftBtn\" dojoAttachEvent=\"onClick: doSlideLeft\" showLabel=false>◀</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_rightBtn\" iconClass=\"dijitTabStripSlideRightIcon\"\n\t\t\tdojoAttachPoint=\"_rightBtn\" dojoAttachEvent=\"onClick: doSlideRight\" showLabel=false>▶</div>\n\t<div class='dijitTabListWrapper' dojoAttachPoint='tablistWrapper'>\n\t\t<div wairole='tablist' dojoAttachEvent='onkeypress:onkeypress'\n\t\t\t\tdojoAttachPoint='containerNode' class='nowrapTabStrip'></div>\n\t</div>\n</div>\n"),useMenu:true,useSlider:true,tabStripClass:"",widgetsInTemplate:true,_minScroll:5,attributeMap:dojo.delegate(dijit._Widget.prototype.attributeMap,{"class":"containerNode"}),postCreate:function(){ -this.inherited(arguments); -var n=this.domNode; -this.scrollNode=this.tablistWrapper; -this._initButtons(); -if(!this.tabStripClass){ -this.tabStripClass="dijitTabContainer"+this.tabPosition.charAt(0).toUpperCase()+this.tabPosition.substr(1).replace(/-.*/,"")+"None"; -dojo.addClass(n,"tabStrip-disabled"); -} -dojo.addClass(this.tablistWrapper,this.tabStripClass); -},onStartup:function(){ -this.inherited(arguments); -dojo.style(this.domNode,"visibility","visible"); -this._postStartup=true; -},onAddChild:function(_1,_2){ -this.inherited(arguments); -var _3; -if(this.useMenu){ -var _4=this.containerId; -_3=new dijit.MenuItem({id:_1.id+"_stcMi",label:_1.title,dir:_1.dir,lang:_1.lang,onClick:dojo.hitch(this,function(){ -var _5=dijit.byId(_4); -_5.selectChild(_1); -})}); -this._menuChildren[_1.id]=_3; -this._menu.addChild(_3,_2); -} -this.pane2handles[_1.id].push(this.connect(this.pane2button[_1.id],"set",function(_6,_7){ -if(this._postStartup){ -if(_6=="label"){ -if(_3){ -_3.set(_6,_7); -} -if(this._dim){ -this.resize(this._dim); -} -} -} -})); -dojo.style(this.containerNode,"width",(dojo.style(this.containerNode,"width")+200)+"px"); -},onRemoveChild:function(_8,_9){ -var _a=this.pane2button[_8.id]; -if(this._selectedTab===_a.domNode){ -this._selectedTab=null; -} -if(this.useMenu&&_8&&_8.id&&this._menuChildren[_8.id]){ -this._menu.removeChild(this._menuChildren[_8.id]); -this._menuChildren[_8.id].destroy(); -delete this._menuChildren[_8.id]; -} -this.inherited(arguments); -},_initButtons:function(){ -this._menuChildren={}; -this._btnWidth=0; -this._buttons=dojo.query("> .tabStripButton",this.domNode).filter(function(_b){ -if((this.useMenu&&_b==this._menuBtn.domNode)||(this.useSlider&&(_b==this._rightBtn.domNode||_b==this._leftBtn.domNode))){ -this._btnWidth+=dojo.marginBox(_b).w; -return true; -}else{ -dojo.style(_b,"display","none"); -return false; -} -},this); -if(this.useMenu){ -this._menu=new dijit.Menu({id:this.id+"_menu",dir:this.dir,lang:this.lang,targetNodeIds:[this._menuBtn.domNode],leftClickToOpen:true,refocus:false}); -this._supportingWidgets.push(this._menu); -} -},_getTabsWidth:function(){ -var _c=this.getChildren(); -if(_c.length){ -var _d=_c[this.isLeftToRight()?0:_c.length-1].domNode,_e=_c[this.isLeftToRight()?_c.length-1:0].domNode; -return _e.offsetLeft+dojo.style(_e,"width")-_d.offsetLeft; -}else{ -return 0; -} -},_enableBtn:function(_f){ -var _10=this._getTabsWidth(); -_f=_f||dojo.style(this.scrollNode,"width"); -return _10>0&&_f<_10; -},resize:function(dim){ -if(this.domNode.offsetWidth==0){ -return; -} -this._dim=dim; -this.scrollNode.style.height="auto"; -this._contentBox=dijit.layout.marginBox2contentBox(this.domNode,{h:0,w:dim.w}); -this._contentBox.h=this.scrollNode.offsetHeight; -dojo.contentBox(this.domNode,this._contentBox); -var _11=this._enableBtn(this._contentBox.w); -this._buttons.style("display",_11?"":"none"); -this._leftBtn.layoutAlign="left"; -this._rightBtn.layoutAlign="right"; -this._menuBtn.layoutAlign=this.isLeftToRight()?"right":"left"; -dijit.layout.layoutChildren(this.domNode,this._contentBox,[this._menuBtn,this._leftBtn,this._rightBtn,{domNode:this.scrollNode,layoutAlign:"client"}]); -if(this._selectedTab){ -if(this._anim&&this._anim.status()=="playing"){ -this._anim.stop(); -} -var w=this.scrollNode,sl=this._convertToScrollLeft(this._getScrollForSelectedTab()); -w.scrollLeft=sl; -} -this._setButtonClass(this._getScroll()); -this._postResize=true; -},_getScroll:function(){ -var sl=(this.isLeftToRight()||dojo.isIE<8||(dojo.isIE&&dojo.isQuirks)||dojo.isWebKit)?this.scrollNode.scrollLeft:dojo.style(this.containerNode,"width")-dojo.style(this.scrollNode,"width")+(dojo.isIE==8?-1:1)*this.scrollNode.scrollLeft; -return sl; -},_convertToScrollLeft:function(val){ -if(this.isLeftToRight()||dojo.isIE<8||(dojo.isIE&&dojo.isQuirks)||dojo.isWebKit){ -return val; -}else{ -var _12=dojo.style(this.containerNode,"width")-dojo.style(this.scrollNode,"width"); -return (dojo.isIE==8?-1:1)*(val-_12); -} -},onSelectChild:function(_13){ -var tab=this.pane2button[_13.id]; -if(!tab||!_13){ -return; -} -var _14=tab.domNode; -if(this._postResize&&_14!=this._selectedTab){ -this._selectedTab=_14; -var sl=this._getScroll(); -if(sl>_14.offsetLeft||sl+dojo.style(this.scrollNode,"width")<_14.offsetLeft+dojo.style(_14,"width")){ -this.createSmoothScroll().play(); -} -} -this.inherited(arguments); -},_getScrollBounds:function(){ -var _15=this.getChildren(),_16=dojo.style(this.scrollNode,"width"),_17=dojo.style(this.containerNode,"width"),_18=_17-_16,_19=this._getTabsWidth(); -if(_15.length&&_19>_16){ -return {min:this.isLeftToRight()?0:_15[_15.length-1].domNode.offsetLeft,max:this.isLeftToRight()?(_15[_15.length-1].domNode.offsetLeft+dojo.style(_15[_15.length-1].domNode,"width"))-_16:_18}; -}else{ -var _1a=this.isLeftToRight()?0:_18; -return {min:_1a,max:_1a}; -} -},_getScrollForSelectedTab:function(){ -var w=this.scrollNode,n=this._selectedTab,_1b=dojo.style(this.scrollNode,"width"),_1c=this._getScrollBounds(); -var pos=(n.offsetLeft+dojo.style(n,"width")/2)-_1b/2; -pos=Math.min(Math.max(pos,_1c.min),_1c.max); -return pos; -},createSmoothScroll:function(x){ -if(arguments.length>0){ -var _1d=this._getScrollBounds(); -x=Math.min(Math.max(x,_1d.min),_1d.max); -}else{ -x=this._getScrollForSelectedTab(); -} -if(this._anim&&this._anim.status()=="playing"){ -this._anim.stop(); -} -var _1e=this,w=this.scrollNode,_1f=new dojo._Animation({beforeBegin:function(){ -if(this.curve){ -delete this.curve; -} -var _20=w.scrollLeft,_21=_1e._convertToScrollLeft(x); -_1f.curve=new dojo._Line(_20,_21); -},onAnimate:function(val){ -w.scrollLeft=val; -}}); -this._anim=_1f; -this._setButtonClass(x); -return _1f; -},_getBtnNode:function(e){ -var n=e.target; -while(n&&!dojo.hasClass(n,"tabStripButton")){ -n=n.parentNode; -} -return n; -},doSlideRight:function(e){ -this.doSlide(1,this._getBtnNode(e)); -},doSlideLeft:function(e){ -this.doSlide(-1,this._getBtnNode(e)); -},doSlide:function(_22,_23){ -if(_23&&dojo.hasClass(_23,"dijitTabDisabled")){ -return; -} -var _24=dojo.style(this.scrollNode,"width"); -var d=(_24*0.75)*_22; -var to=this._getScroll()+d; -this._setButtonClass(to); -this.createSmoothScroll(to).play(); -},_setButtonClass:function(_25){ -var _26=this._getScrollBounds(); -this._leftBtn.set("disabled",_25<=_26.min); -this._rightBtn.set("disabled",_25>=_26.max); -}}); -dojo.declare("dijit.layout._ScrollingTabControllerButton",dijit.form.Button,{baseClass:"dijitTab tabStripButton",templateString:dojo.cache("dijit.layout","templates/_ScrollingTabControllerButton.html","<div dojoAttachEvent=\"onclick:_onButtonClick\">\n\t<div waiRole=\"presentation\" class=\"dijitTabInnerDiv\" dojoattachpoint=\"innerDiv,focusNode\">\n\t\t<div waiRole=\"presentation\" class=\"dijitTabContent dijitButtonContents\" dojoattachpoint=\"tabContent\">\n\t\t\t<img waiRole=\"presentation\" alt=\"\" src=\"${_blankGif}\" class=\"dijitTabStripIcon\" dojoAttachPoint=\"iconNode\"/>\n\t\t\t<span dojoAttachPoint=\"containerNode,titleNode\" class=\"dijitButtonText\"></span>\n\t\t</div>\n\t</div>\n</div>\n"),tabIndex:"-1"}); +dojo.require("dijit.form.Button"); +dojo.require("dijit._HasDropDown"); + + +dojo.declare("dijit.layout.ScrollingTabController", + dijit.layout.TabController, + { + // summary: + // Set of tabs with left/right arrow keys and a menu to switch between tabs not + // all fitting on a single row. + // Works only for horizontal tabs (either above or below the content, not to the left + // or right). + // tags: + // private + + templateString: dojo.cache("dijit.layout", "templates/ScrollingTabController.html", "<div class=\"dijitTabListContainer-${tabPosition}\" style=\"visibility:hidden\">\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerMenuButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_menuBtn\" containerId=\"${containerId}\" iconClass=\"dijitTabStripMenuIcon\"\n\t\t\tdropDownPosition=\"below-alt, above-alt\"\n\t\t\tdojoAttachPoint=\"_menuBtn\" showLabel=\"false\">▼</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_leftBtn\" iconClass=\"dijitTabStripSlideLeftIcon\"\n\t\t\tdojoAttachPoint=\"_leftBtn\" dojoAttachEvent=\"onClick: doSlideLeft\" showLabel=\"false\">◀</div>\n\t<div dojoType=\"dijit.layout._ScrollingTabControllerButton\"\n\t\t\tclass=\"tabStripButton-${tabPosition}\"\n\t\t\tid=\"${id}_rightBtn\" iconClass=\"dijitTabStripSlideRightIcon\"\n\t\t\tdojoAttachPoint=\"_rightBtn\" dojoAttachEvent=\"onClick: doSlideRight\" showLabel=\"false\">▶</div>\n\t<div class='dijitTabListWrapper' dojoAttachPoint='tablistWrapper'>\n\t\t<div role='tablist' dojoAttachEvent='onkeypress:onkeypress'\n\t\t\t\tdojoAttachPoint='containerNode' class='nowrapTabStrip'></div>\n\t</div>\n</div>\n"), + + // useMenu: [const] Boolean + // True if a menu should be used to select tabs when they are too + // wide to fit the TabContainer, false otherwise. + useMenu: true, + + // useSlider: [const] Boolean + // True if a slider should be used to select tabs when they are too + // wide to fit the TabContainer, false otherwise. + useSlider: true, + + // tabStripClass: [const] String + // The css class to apply to the tab strip, if it is visible. + tabStripClass: "", + + widgetsInTemplate: true, + + // _minScroll: Number + // The distance in pixels from the edge of the tab strip which, + // if a scroll animation is less than, forces the scroll to + // go all the way to the left/right. + _minScroll: 5, + + attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { + "class": "containerNode" + }), + + buildRendering: function(){ + this.inherited(arguments); + var n = this.domNode; + + this.scrollNode = this.tablistWrapper; + this._initButtons(); + + if(!this.tabStripClass){ + this.tabStripClass = "dijitTabContainer" + + this.tabPosition.charAt(0).toUpperCase() + + this.tabPosition.substr(1).replace(/-.*/, "") + + "None"; + dojo.addClass(n, "tabStrip-disabled") + } + + dojo.addClass(this.tablistWrapper, this.tabStripClass); + }, + + onStartup: function(){ + this.inherited(arguments); + + // Do not show the TabController until the related + // StackController has added it's children. This gives + // a less visually jumpy instantiation. + dojo.style(this.domNode, "visibility", "visible"); + this._postStartup = true; + }, + + onAddChild: function(page, insertIndex){ + this.inherited(arguments); + + // changes to the tab button label or iconClass will have changed the width of the + // buttons, so do a resize + dojo.forEach(["label", "iconClass"], function(attr){ + this.pane2watches[page.id].push( + this.pane2button[page.id].watch(attr, dojo.hitch(this, function(name, oldValue, newValue){ + if(this._postStartup && this._dim){ + this.resize(this._dim); + } + })) + ); + }, this); + + // Increment the width of the wrapper when a tab is added + // This makes sure that the buttons never wrap. + // The value 200 is chosen as it should be bigger than most + // Tab button widths. + dojo.style(this.containerNode, "width", + (dojo.style(this.containerNode, "width") + 200) + "px"); + }, + + onRemoveChild: function(page, insertIndex){ + // null out _selectedTab because we are about to delete that dom node + var button = this.pane2button[page.id]; + if(this._selectedTab === button.domNode){ + this._selectedTab = null; + } + + this.inherited(arguments); + }, + + _initButtons: function(){ + // summary: + // Creates the buttons used to scroll to view tabs that + // may not be visible if the TabContainer is too narrow. + + // Make a list of the buttons to display when the tab labels become + // wider than the TabContainer, and hide the other buttons. + // Also gets the total width of the displayed buttons. + this._btnWidth = 0; + this._buttons = dojo.query("> .tabStripButton", this.domNode).filter(function(btn){ + if((this.useMenu && btn == this._menuBtn.domNode) || + (this.useSlider && (btn == this._rightBtn.domNode || btn == this._leftBtn.domNode))){ + this._btnWidth += dojo._getMarginSize(btn).w; + return true; + }else{ + dojo.style(btn, "display", "none"); + return false; + } + }, this); + }, + + _getTabsWidth: function(){ + var children = this.getChildren(); + if(children.length){ + var leftTab = children[this.isLeftToRight() ? 0 : children.length - 1].domNode, + rightTab = children[this.isLeftToRight() ? children.length - 1 : 0].domNode; + return rightTab.offsetLeft + dojo.style(rightTab, "width") - leftTab.offsetLeft; + }else{ + return 0; + } + }, + + _enableBtn: function(width){ + // summary: + // Determines if the tabs are wider than the width of the TabContainer, and + // thus that we need to display left/right/menu navigation buttons. + var tabsWidth = this._getTabsWidth(); + width = width || dojo.style(this.scrollNode, "width"); + return tabsWidth > 0 && width < tabsWidth; + }, + + resize: function(dim){ + // summary: + // Hides or displays the buttons used to scroll the tab list and launch the menu + // that selects tabs. + + if(this.domNode.offsetWidth == 0){ + return; + } + + // Save the dimensions to be used when a child is renamed. + this._dim = dim; + + // Set my height to be my natural height (tall enough for one row of tab labels), + // and my content-box width based on margin-box width specified in dim parameter. + // But first reset scrollNode.height in case it was set by layoutChildren() call + // in a previous run of this method. + this.scrollNode.style.height = "auto"; + this._contentBox = dijit.layout.marginBox2contentBox(this.domNode, {h: 0, w: dim.w}); + this._contentBox.h = this.scrollNode.offsetHeight; + dojo.contentBox(this.domNode, this._contentBox); + + // Show/hide the left/right/menu navigation buttons depending on whether or not they + // are needed. + var enable = this._enableBtn(this._contentBox.w); + this._buttons.style("display", enable ? "" : "none"); + + // Position and size the navigation buttons and the tablist + this._leftBtn.layoutAlign = "left"; + this._rightBtn.layoutAlign = "right"; + this._menuBtn.layoutAlign = this.isLeftToRight() ? "right" : "left"; + dijit.layout.layoutChildren(this.domNode, this._contentBox, + [this._menuBtn, this._leftBtn, this._rightBtn, {domNode: this.scrollNode, layoutAlign: "client"}]); + + // set proper scroll so that selected tab is visible + if(this._selectedTab){ + if(this._anim && this._anim.status() == "playing"){ + this._anim.stop(); + } + var w = this.scrollNode, + sl = this._convertToScrollLeft(this._getScrollForSelectedTab()); + w.scrollLeft = sl; + } + + // Enable/disabled left right buttons depending on whether or not user can scroll to left or right + this._setButtonClass(this._getScroll()); + + this._postResize = true; + + // Return my size so layoutChildren() can use it. + // Also avoids IE9 layout glitch on browser resize when scroll buttons present + return {h: this._contentBox.h, w: dim.w}; + }, + + _getScroll: function(){ + // summary: + // Returns the current scroll of the tabs where 0 means + // "scrolled all the way to the left" and some positive number, based on # + // of pixels of possible scroll (ex: 1000) means "scrolled all the way to the right" + var sl = (this.isLeftToRight() || dojo.isIE < 8 || (dojo.isIE && dojo.isQuirks) || dojo.isWebKit) ? this.scrollNode.scrollLeft : + dojo.style(this.containerNode, "width") - dojo.style(this.scrollNode, "width") + + (dojo.isIE == 8 ? -1 : 1) * this.scrollNode.scrollLeft; + return sl; + }, + + _convertToScrollLeft: function(val){ + // summary: + // Given a scroll value where 0 means "scrolled all the way to the left" + // and some positive number, based on # of pixels of possible scroll (ex: 1000) + // means "scrolled all the way to the right", return value to set this.scrollNode.scrollLeft + // to achieve that scroll. + // + // This method is to adjust for RTL funniness in various browsers and versions. + if(this.isLeftToRight() || dojo.isIE < 8 || (dojo.isIE && dojo.isQuirks) || dojo.isWebKit){ + return val; + }else{ + var maxScroll = dojo.style(this.containerNode, "width") - dojo.style(this.scrollNode, "width"); + return (dojo.isIE == 8 ? -1 : 1) * (val - maxScroll); + } + }, + + onSelectChild: function(/*dijit._Widget*/ page){ + // summary: + // Smoothly scrolls to a tab when it is selected. + + var tab = this.pane2button[page.id]; + if(!tab || !page){return;} + + // Scroll to the selected tab, except on startup, when scrolling is handled in resize() + var node = tab.domNode; + if(this._postResize && node != this._selectedTab){ + this._selectedTab = node; + + var sl = this._getScroll(); + + if(sl > node.offsetLeft || + sl + dojo.style(this.scrollNode, "width") < + node.offsetLeft + dojo.style(node, "width")){ + this.createSmoothScroll().play(); + } + } + + this.inherited(arguments); + }, + + _getScrollBounds: function(){ + // summary: + // Returns the minimum and maximum scroll setting to show the leftmost and rightmost + // tabs (respectively) + var children = this.getChildren(), + scrollNodeWidth = dojo.style(this.scrollNode, "width"), // about 500px + containerWidth = dojo.style(this.containerNode, "width"), // 50,000px + maxPossibleScroll = containerWidth - scrollNodeWidth, // scrolling until right edge of containerNode visible + tabsWidth = this._getTabsWidth(); + + if(children.length && tabsWidth > scrollNodeWidth){ + // Scrolling should happen + return { + min: this.isLeftToRight() ? 0 : children[children.length-1].domNode.offsetLeft, + max: this.isLeftToRight() ? + (children[children.length-1].domNode.offsetLeft + dojo.style(children[children.length-1].domNode, "width")) - scrollNodeWidth : + maxPossibleScroll + }; + }else{ + // No scrolling needed, all tabs visible, we stay either scrolled to far left or far right (depending on dir) + var onlyScrollPosition = this.isLeftToRight() ? 0 : maxPossibleScroll; + return { + min: onlyScrollPosition, + max: onlyScrollPosition + }; + } + }, + + _getScrollForSelectedTab: function(){ + // summary: + // Returns the scroll value setting so that the selected tab + // will appear in the center + var w = this.scrollNode, + n = this._selectedTab, + scrollNodeWidth = dojo.style(this.scrollNode, "width"), + scrollBounds = this._getScrollBounds(); + + // TODO: scroll minimal amount (to either right or left) so that + // selected tab is fully visible, and just return if it's already visible? + var pos = (n.offsetLeft + dojo.style(n, "width")/2) - scrollNodeWidth/2; + pos = Math.min(Math.max(pos, scrollBounds.min), scrollBounds.max); + + // TODO: + // If scrolling close to the left side or right side, scroll + // all the way to the left or right. See this._minScroll. + // (But need to make sure that doesn't scroll the tab out of view...) + return pos; + }, + + createSmoothScroll: function(x){ + // summary: + // Creates a dojo._Animation object that smoothly scrolls the tab list + // either to a fixed horizontal pixel value, or to the selected tab. + // description: + // If an number argument is passed to the function, that horizontal + // pixel position is scrolled to. Otherwise the currently selected + // tab is scrolled to. + // x: Integer? + // An optional pixel value to scroll to, indicating distance from left. + + // Calculate position to scroll to + if(arguments.length > 0){ + // position specified by caller, just make sure it's within bounds + var scrollBounds = this._getScrollBounds(); + x = Math.min(Math.max(x, scrollBounds.min), scrollBounds.max); + }else{ + // scroll to center the current tab + x = this._getScrollForSelectedTab(); + } + + if(this._anim && this._anim.status() == "playing"){ + this._anim.stop(); + } + + var self = this, + w = this.scrollNode, + anim = new dojo._Animation({ + beforeBegin: function(){ + if(this.curve){ delete this.curve; } + var oldS = w.scrollLeft, + newS = self._convertToScrollLeft(x); + anim.curve = new dojo._Line(oldS, newS); + }, + onAnimate: function(val){ + w.scrollLeft = val; + } + }); + this._anim = anim; + + // Disable/enable left/right buttons according to new scroll position + this._setButtonClass(x); + + return anim; // dojo._Animation + }, + + _getBtnNode: function(/*Event*/ e){ + // summary: + // Gets a button DOM node from a mouse click event. + // e: + // The mouse click event. + var n = e.target; + while(n && !dojo.hasClass(n, "tabStripButton")){ + n = n.parentNode; + } + return n; + }, + + doSlideRight: function(/*Event*/ e){ + // summary: + // Scrolls the menu to the right. + // e: + // The mouse click event. + this.doSlide(1, this._getBtnNode(e)); + }, + + doSlideLeft: function(/*Event*/ e){ + // summary: + // Scrolls the menu to the left. + // e: + // The mouse click event. + this.doSlide(-1,this._getBtnNode(e)); + }, + + doSlide: function(/*Number*/ direction, /*DomNode*/ node){ + // summary: + // Scrolls the tab list to the left or right by 75% of the widget width. + // direction: + // If the direction is 1, the widget scrolls to the right, if it is + // -1, it scrolls to the left. + + if(node && dojo.hasClass(node, "dijitTabDisabled")){return;} + + var sWidth = dojo.style(this.scrollNode, "width"); + var d = (sWidth * 0.75) * direction; + + var to = this._getScroll() + d; + + this._setButtonClass(to); + + this.createSmoothScroll(to).play(); + }, + + _setButtonClass: function(/*Number*/ scroll){ + // summary: + // Disables the left scroll button if the tabs are scrolled all the way to the left, + // or the right scroll button in the opposite case. + // scroll: Integer + // amount of horizontal scroll + + var scrollBounds = this._getScrollBounds(); + this._leftBtn.set("disabled", scroll <= scrollBounds.min); + this._rightBtn.set("disabled", scroll >= scrollBounds.max); + } +}); + + +dojo.declare("dijit.layout._ScrollingTabControllerButtonMixin", null, { + baseClass: "dijitTab tabStripButton", + + templateString: dojo.cache("dijit.layout", "templates/_ScrollingTabControllerButton.html", "<div dojoAttachEvent=\"onclick:_onButtonClick\">\n\t<div role=\"presentation\" class=\"dijitTabInnerDiv\" dojoattachpoint=\"innerDiv,focusNode\">\n\t\t<div role=\"presentation\" class=\"dijitTabContent dijitButtonContents\" dojoattachpoint=\"tabContent\">\n\t\t\t<img role=\"presentation\" alt=\"\" src=\"${_blankGif}\" class=\"dijitTabStripIcon\" dojoAttachPoint=\"iconNode\"/>\n\t\t\t<span dojoAttachPoint=\"containerNode,titleNode\" class=\"dijitButtonText\"></span>\n\t\t</div>\n\t</div>\n</div>\n"), + + // Override inherited tabIndex: 0 from dijit.form.Button, because user shouldn't be + // able to tab to the left/right/menu buttons + tabIndex: "", + + // Similarly, override FormWidget.isFocusable() because clicking a button shouldn't focus it + // either (this override avoids focus() call in FormWidget.js) + isFocusable: function(){ return false; } +}); + +dojo.declare("dijit.layout._ScrollingTabControllerButton", + [dijit.form.Button, dijit.layout._ScrollingTabControllerButtonMixin]); + +dojo.declare( + "dijit.layout._ScrollingTabControllerMenuButton", + [dijit.form.Button, dijit._HasDropDown, dijit.layout._ScrollingTabControllerButtonMixin], +{ + // id of the TabContainer itself + containerId: "", + + // -1 so user can't tab into the button, but so that button can still be focused programatically. + // Because need to move focus to the button (or somewhere) before the menu is hidden or IE6 will crash. + tabIndex: "-1", + + isLoaded: function(){ + // recreate menu every time, in case the TabContainer's list of children (or their icons/labels) have changed + return false; + }, + + loadDropDown: function(callback){ + this.dropDown = new dijit.Menu({ + id: this.containerId + "_menu", + dir: this.dir, + lang: this.lang + }); + var container = dijit.byId(this.containerId); + dojo.forEach(container.getChildren(), function(page){ + var menuItem = new dijit.MenuItem({ + id: page.id + "_stcMi", + label: page.title, + iconClass: page.iconClass, + dir: page.dir, + lang: page.lang, + onClick: function(){ + container.selectChild(page); + } + }); + this.dropDown.addChild(menuItem); + }, this); + callback(); + }, + + closeDropDown: function(/*Boolean*/ focus){ + this.inherited(arguments); + if(this.dropDown){ + this.dropDown.destroyRecursive(); + delete this.dropDown; + } + } +}); + } |