lib/dijit/layout/ScrollingTabController.js

   1 /*
   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>&#9660;</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>&#9664;</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>&#9654;</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 }