root / trunk / web / dojo / dijit / layout / ScrollingTabController.js @ 11
History | View | Annotate | Download (8.65 KB)
| 1 | 9 | andrej.cim | /*
|
|---|---|---|---|
| 2 | Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
|
||
| 3 | Available via Academic Free License >= 2.1 OR the modified BSD license.
|
||
| 4 | see: http://dojotoolkit.org/license for details
|
||
| 5 | */
|
||
| 6 | |||
| 7 | |||
| 8 | if(!dojo._hasResource["dijit.layout.ScrollingTabController"]){ |
||
| 9 | dojo._hasResource["dijit.layout.ScrollingTabController"]=true; |
||
| 10 | dojo.provide("dijit.layout.ScrollingTabController");
|
||
| 11 | dojo.require("dijit.layout.TabController");
|
||
| 12 | dojo.require("dijit.Menu");
|
||
| 13 | 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(){ |
||
| 14 | this.inherited(arguments); |
||
| 15 | var n=this.domNode; |
||
| 16 | this.scrollNode=this.tablistWrapper; |
||
| 17 | this._initButtons();
|
||
| 18 | if(!this.tabStripClass){ |
||
| 19 | this.tabStripClass="dijitTabContainer"+this.tabPosition.charAt(0).toUpperCase()+this.tabPosition.substr(1).replace(/-.*/,"")+"None"; |
||
| 20 | dojo.addClass(n,"tabStrip-disabled");
|
||
| 21 | } |
||
| 22 | dojo.addClass(this.tablistWrapper,this.tabStripClass); |
||
| 23 | },onStartup:function(){ |
||
| 24 | this.inherited(arguments); |
||
| 25 | dojo.style(this.domNode,"visibility","visible"); |
||
| 26 | this._postStartup=true; |
||
| 27 | },onAddChild:function(_1,_2){ |
||
| 28 | this.inherited(arguments); |
||
| 29 | var _3;
|
||
| 30 | if(this.useMenu){ |
||
| 31 | var _4=this.containerId; |
||
| 32 | _3=new dijit.MenuItem({id:_1.id+"_stcMi",label:_1.title,dir:_1.dir,lang:_1.lang,onClick:dojo.hitch(this,function(){ |
||
| 33 | var _5=dijit.byId(_4);
|
||
| 34 | _5.selectChild(_1); |
||
| 35 | })}); |
||
| 36 | this._menuChildren[_1.id]=_3;
|
||
| 37 | this._menu.addChild(_3,_2);
|
||
| 38 | } |
||
| 39 | this.pane2handles[_1.id].push(this.connect(this.pane2button[_1.id],"set",function(_6,_7){ |
||
| 40 | if(this._postStartup){ |
||
| 41 | if(_6=="label"){ |
||
| 42 | if(_3){
|
||
| 43 | _3.set(_6,_7); |
||
| 44 | } |
||
| 45 | if(this._dim){ |
||
| 46 | this.resize(this._dim); |
||
| 47 | } |
||
| 48 | } |
||
| 49 | } |
||
| 50 | })); |
||
| 51 | dojo.style(this.containerNode,"width",(dojo.style(this.containerNode,"width")+200)+"px"); |
||
| 52 | },onRemoveChild:function(_8,_9){ |
||
| 53 | var _a=this.pane2button[_8.id]; |
||
| 54 | if(this._selectedTab===_a.domNode){ |
||
| 55 | this._selectedTab=null; |
||
| 56 | } |
||
| 57 | if(this.useMenu&&_8&&_8.id&&this._menuChildren[_8.id]){ |
||
| 58 | this._menu.removeChild(this._menuChildren[_8.id]); |
||
| 59 | this._menuChildren[_8.id].destroy();
|
||
| 60 | delete this._menuChildren[_8.id]; |
||
| 61 | } |
||
| 62 | this.inherited(arguments); |
||
| 63 | },_initButtons:function(){ |
||
| 64 | this._menuChildren={};
|
||
| 65 | this._btnWidth=0; |
||
| 66 | this._buttons=dojo.query("> .tabStripButton",this.domNode).filter(function(_b){ |
||
| 67 | if((this.useMenu&&_b==this._menuBtn.domNode)||(this.useSlider&&(_b==this._rightBtn.domNode||_b==this._leftBtn.domNode))){ |
||
| 68 | this._btnWidth+=dojo.marginBox(_b).w;
|
||
| 69 | return true; |
||
| 70 | }else{
|
||
| 71 | dojo.style(_b,"display","none"); |
||
| 72 | return false; |
||
| 73 | } |
||
| 74 | },this);
|
||
| 75 | if(this.useMenu){ |
||
| 76 | this._menu=new dijit.Menu({id:this.id+"_menu",dir:this.dir,lang:this.lang,targetNodeIds:[this._menuBtn.domNode],leftClickToOpen:true,refocus:false}); |
||
| 77 | this._supportingWidgets.push(this._menu); |
||
| 78 | } |
||
| 79 | },_getTabsWidth:function(){ |
||
| 80 | var _c=this.getChildren(); |
||
| 81 | if(_c.length){
|
||
| 82 | var _d=_c[this.isLeftToRight()?0:_c.length-1].domNode,_e=_c[this.isLeftToRight()?_c.length-1:0].domNode; |
||
| 83 | return _e.offsetLeft+dojo.style(_e,"width")-_d.offsetLeft; |
||
| 84 | }else{
|
||
| 85 | return 0; |
||
| 86 | } |
||
| 87 | },_enableBtn:function(_f){ |
||
| 88 | var _10=this._getTabsWidth(); |
||
| 89 | _f=_f||dojo.style(this.scrollNode,"width"); |
||
| 90 | return _10>0&&_f<_10; |
||
| 91 | },resize:function(dim){ |
||
| 92 | if(this.domNode.offsetWidth==0){ |
||
| 93 | return;
|
||
| 94 | } |
||
| 95 | this._dim=dim;
|
||
| 96 | this.scrollNode.style.height="auto"; |
||
| 97 | this._contentBox=dijit.layout.marginBox2contentBox(this.domNode,{h:0,w:dim.w}); |
||
| 98 | this._contentBox.h=this.scrollNode.offsetHeight; |
||
| 99 | dojo.contentBox(this.domNode,this._contentBox); |
||
| 100 | var _11=this._enableBtn(this._contentBox.w); |
||
| 101 | this._buttons.style("display",_11?"":"none"); |
||
| 102 | this._leftBtn.layoutAlign="left"; |
||
| 103 | this._rightBtn.layoutAlign="right"; |
||
| 104 | this._menuBtn.layoutAlign=this.isLeftToRight()?"right":"left"; |
||
| 105 | dijit.layout.layoutChildren(this.domNode,this._contentBox,[this._menuBtn,this._leftBtn,this._rightBtn,{domNode:this.scrollNode,layoutAlign:"client"}]); |
||
| 106 | if(this._selectedTab){ |
||
| 107 | if(this._anim&&this._anim.status()=="playing"){ |
||
| 108 | this._anim.stop();
|
||
| 109 | } |
||
| 110 | var w=this.scrollNode,sl=this._convertToScrollLeft(this._getScrollForSelectedTab()); |
||
| 111 | w.scrollLeft=sl; |
||
| 112 | } |
||
| 113 | this._setButtonClass(this._getScroll()); |
||
| 114 | this._postResize=true; |
||
| 115 | },_getScroll:function(){ |
||
| 116 | 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; |
||
| 117 | return sl;
|
||
| 118 | },_convertToScrollLeft:function(val){ |
||
| 119 | if(this.isLeftToRight()||dojo.isIE<8||(dojo.isIE&&dojo.isQuirks)||dojo.isWebKit){ |
||
| 120 | return val;
|
||
| 121 | }else{
|
||
| 122 | var _12=dojo.style(this.containerNode,"width")-dojo.style(this.scrollNode,"width"); |
||
| 123 | return (dojo.isIE==8?-1:1)*(val-_12); |
||
| 124 | } |
||
| 125 | },onSelectChild:function(_13){ |
||
| 126 | var tab=this.pane2button[_13.id]; |
||
| 127 | if(!tab||!_13){
|
||
| 128 | return;
|
||
| 129 | } |
||
| 130 | var _14=tab.domNode;
|
||
| 131 | if(this._postResize&&_14!=this._selectedTab){ |
||
| 132 | this._selectedTab=_14;
|
||
| 133 | var sl=this._getScroll(); |
||
| 134 | if(sl>_14.offsetLeft||sl+dojo.style(this.scrollNode,"width")<_14.offsetLeft+dojo.style(_14,"width")){ |
||
| 135 | this.createSmoothScroll().play();
|
||
| 136 | } |
||
| 137 | } |
||
| 138 | this.inherited(arguments); |
||
| 139 | },_getScrollBounds:function(){ |
||
| 140 | var _15=this.getChildren(),_16=dojo.style(this.scrollNode,"width"),_17=dojo.style(this.containerNode,"width"),_18=_17-_16,_19=this._getTabsWidth(); |
||
| 141 | if(_15.length&&_19>_16){
|
||
| 142 | 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}; |
||
| 143 | }else{
|
||
| 144 | var _1a=this.isLeftToRight()?0:_18; |
||
| 145 | return {min:_1a,max:_1a}; |
||
| 146 | } |
||
| 147 | },_getScrollForSelectedTab:function(){ |
||
| 148 | var w=this.scrollNode,n=this._selectedTab,_1b=dojo.style(this.scrollNode,"width"),_1c=this._getScrollBounds(); |
||
| 149 | var pos=(n.offsetLeft+dojo.style(n,"width")/2)-_1b/2; |
||
| 150 | pos=Math.min(Math.max(pos,_1c.min),_1c.max); |
||
| 151 | return pos;
|
||
| 152 | },createSmoothScroll:function(x){ |
||
| 153 | if(arguments.length>0){ |
||
| 154 | var _1d=this._getScrollBounds(); |
||
| 155 | x=Math.min(Math.max(x,_1d.min),_1d.max); |
||
| 156 | }else{
|
||
| 157 | x=this._getScrollForSelectedTab();
|
||
| 158 | } |
||
| 159 | if(this._anim&&this._anim.status()=="playing"){ |
||
| 160 | this._anim.stop();
|
||
| 161 | } |
||
| 162 | var _1e=this,w=this.scrollNode,_1f=new dojo._Animation({beforeBegin:function(){ |
||
| 163 | if(this.curve){ |
||
| 164 | delete this.curve; |
||
| 165 | } |
||
| 166 | var _20=w.scrollLeft,_21=_1e._convertToScrollLeft(x);
|
||
| 167 | _1f.curve=new dojo._Line(_20,_21);
|
||
| 168 | },onAnimate:function(val){ |
||
| 169 | w.scrollLeft=val; |
||
| 170 | }}); |
||
| 171 | this._anim=_1f;
|
||
| 172 | this._setButtonClass(x);
|
||
| 173 | return _1f;
|
||
| 174 | },_getBtnNode:function(e){ |
||
| 175 | var n=e.target;
|
||
| 176 | while(n&&!dojo.hasClass(n,"tabStripButton")){ |
||
| 177 | n=n.parentNode; |
||
| 178 | } |
||
| 179 | return n;
|
||
| 180 | },doSlideRight:function(e){ |
||
| 181 | this.doSlide(1,this._getBtnNode(e)); |
||
| 182 | },doSlideLeft:function(e){ |
||
| 183 | this.doSlide(-1,this._getBtnNode(e)); |
||
| 184 | },doSlide:function(_22,_23){ |
||
| 185 | if(_23&&dojo.hasClass(_23,"dijitTabDisabled")){ |
||
| 186 | return;
|
||
| 187 | } |
||
| 188 | var _24=dojo.style(this.scrollNode,"width"); |
||
| 189 | var d=(_24*0.75)*_22; |
||
| 190 | var to=this._getScroll()+d; |
||
| 191 | this._setButtonClass(to);
|
||
| 192 | this.createSmoothScroll(to).play();
|
||
| 193 | },_setButtonClass:function(_25){ |
||
| 194 | var _26=this._getScrollBounds(); |
||
| 195 | this._leftBtn.set("disabled",_25<=_26.min); |
||
| 196 | this._rightBtn.set("disabled",_25>=_26.max); |
||
| 197 | }}); |
||
| 198 | 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"}); |
||
| 199 | } |