root / trunk / web / dojo / dojox / layout / RotatorContainer.js @ 9
History | View | Annotate | Download (5.94 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["dojox.layout.RotatorContainer"]){ |
||
| 9 | dojo._hasResource["dojox.layout.RotatorContainer"]=true; |
||
| 10 | dojo.provide("dojox.layout.RotatorContainer");
|
||
| 11 | dojo.require("dojo.fx");
|
||
| 12 | dojo.require("dijit.layout.StackContainer");
|
||
| 13 | dojo.require("dijit.layout.StackController");
|
||
| 14 | dojo.require("dijit._Widget");
|
||
| 15 | dojo.require("dijit._Templated");
|
||
| 16 | dojo.require("dijit._Contained");
|
||
| 17 | dojo.declare("dojox.layout.RotatorContainer",[dijit.layout.StackContainer,dijit._Templated],{templateString:"<div class=\"dojoxRotatorContainer\"><div dojoAttachPoint=\"tabNode\"></div><div class=\"dojoxRotatorPager\" dojoAttachPoint=\"pagerNode\"></div><div class=\"dojoxRotatorContent\" dojoAttachPoint=\"containerNode\"></div></div>",showTabs:true,transitionDelay:5000,transition:"fade",transitionDuration:1000,autoStart:true,suspendOnHover:false,pauseOnManualChange:null,reverse:false,pagerId:"",cycles:-1,pagerClass:"dojox.layout.RotatorPager",postCreate:function(){ |
||
| 18 | this.inherited(arguments); |
||
| 19 | dojo.style(this.domNode,"position","relative"); |
||
| 20 | if(this.cycles-0==this.cycles&&this.cycles!=-1){ |
||
| 21 | this.cycles++;
|
||
| 22 | }else{
|
||
| 23 | this.cycles=-1; |
||
| 24 | } |
||
| 25 | if(this.pauseOnManualChange===null){ |
||
| 26 | this.pauseOnManualChange=!this.suspendOnHover; |
||
| 27 | } |
||
| 28 | var id=this.id||"rotator"+(new Date()).getTime(),sc=new dijit.layout.StackController({containerId:id},this.tabNode); |
||
| 29 | this.tabNode=sc.domNode;
|
||
| 30 | this._stackController=sc;
|
||
| 31 | dojo.style(this.tabNode,"display",this.showTabs?"":"none"); |
||
| 32 | this.connect(sc,"onButtonClick","_manualChange"); |
||
| 33 | this._subscriptions=[dojo.subscribe(this.id+"-cycle",this,"_cycle"),dojo.subscribe(this.id+"-state",this,"_state")]; |
||
| 34 | var d=Math.round(this.transitionDelay*0.75); |
||
| 35 | if(d<this.transitionDuration){ |
||
| 36 | this.transitionDuration=d;
|
||
| 37 | } |
||
| 38 | if(this.suspendOnHover){ |
||
| 39 | this.connect(this.domNode,"onmouseover","_onMouseOver"); |
||
| 40 | this.connect(this.domNode,"onmouseout","_onMouseOut"); |
||
| 41 | } |
||
| 42 | },startup:function(){ |
||
| 43 | if(this._started){ |
||
| 44 | return;
|
||
| 45 | } |
||
| 46 | var c=this.getChildren(); |
||
| 47 | for(var i=0,_1=c.length;i<_1;i++){ |
||
| 48 | if(c[i].declaredClass==this.pagerClass){ |
||
| 49 | this.pagerNode.appendChild(c[i].domNode);
|
||
| 50 | break;
|
||
| 51 | } |
||
| 52 | } |
||
| 53 | this.inherited(arguments); |
||
| 54 | if(this.autoStart){ |
||
| 55 | setTimeout(dojo.hitch(this,"_play"),10); |
||
| 56 | }else{
|
||
| 57 | this._updatePager();
|
||
| 58 | } |
||
| 59 | },destroy:function(){ |
||
| 60 | dojo.forEach(this._subscriptions,dojo.unsubscribe);
|
||
| 61 | this.inherited(arguments); |
||
| 62 | },_setShowTabsAttr:function(_2){ |
||
| 63 | this.showTabs=_2;
|
||
| 64 | dojo.style(this.tabNode,"display",_2?"":"none"); |
||
| 65 | },_updatePager:function(){ |
||
| 66 | var c=this.getChildren(); |
||
| 67 | dojo.publish(this.id+"-update",[this._playing,dojo.indexOf(c,this.selectedChildWidget)+1,c.length]); |
||
| 68 | },_onMouseOver:function(){ |
||
| 69 | this._resetTimer();
|
||
| 70 | this._over=true; |
||
| 71 | },_onMouseOut:function(){ |
||
| 72 | this._over=false; |
||
| 73 | if(this._playing){ |
||
| 74 | clearTimeout(this._timer);
|
||
| 75 | this._timer=setTimeout(dojo.hitch(this,"_play",true),200); |
||
| 76 | } |
||
| 77 | },_resetTimer:function(){ |
||
| 78 | clearTimeout(this._timer);
|
||
| 79 | this._timer=null; |
||
| 80 | },_cycle:function(_3){ |
||
| 81 | if(_3 instanceof Boolean||typeof _3=="boolean"){ |
||
| 82 | this._manualChange();
|
||
| 83 | } |
||
| 84 | var c=this.getChildren(),_4=c.length,i=dojo.indexOf(c,this.selectedChildWidget)+(_3===false||(_3!==true&&this.reverse)?-1:1); |
||
| 85 | this.selectChild(c[(i<_4?(i<0?_4-1:i):0)]); |
||
| 86 | this._updatePager();
|
||
| 87 | },_manualChange:function(){ |
||
| 88 | if(this.pauseOnManualChange){ |
||
| 89 | this._playing=false; |
||
| 90 | } |
||
| 91 | this.cycles=-1; |
||
| 92 | },_play:function(_5){ |
||
| 93 | this._playing=true; |
||
| 94 | this._resetTimer();
|
||
| 95 | if(_5!==true&&this.cycles>0){ |
||
| 96 | this.cycles--;
|
||
| 97 | } |
||
| 98 | if(this.cycles==0){ |
||
| 99 | this._pause();
|
||
| 100 | }else{
|
||
| 101 | if((!this.suspendOnHover||!this._over)&&this.transitionDelay){ |
||
| 102 | this._timer=setTimeout(dojo.hitch(this,"_cycle"),this.selectedChildWidget.domNode.getAttribute("transitionDelay")||this.transitionDelay); |
||
| 103 | } |
||
| 104 | } |
||
| 105 | this._updatePager();
|
||
| 106 | },_pause:function(){ |
||
| 107 | this._playing=false; |
||
| 108 | this._resetTimer();
|
||
| 109 | },_state:function(_6){ |
||
| 110 | if(_6){
|
||
| 111 | this.cycles=-1; |
||
| 112 | this._play();
|
||
| 113 | }else{
|
||
| 114 | this._pause();
|
||
| 115 | } |
||
| 116 | },_transition:function(_7,_8){ |
||
| 117 | this._resetTimer();
|
||
| 118 | if(_8&&this.transitionDuration){ |
||
| 119 | switch(this.transition){ |
||
| 120 | case "fade": |
||
| 121 | this._fade(_7,_8);
|
||
| 122 | return;
|
||
| 123 | } |
||
| 124 | } |
||
| 125 | this._transitionEnd();
|
||
| 126 | this.inherited(arguments); |
||
| 127 | },_transitionEnd:function(){ |
||
| 128 | if(this._playing){ |
||
| 129 | this._play();
|
||
| 130 | }else{
|
||
| 131 | this._updatePager();
|
||
| 132 | } |
||
| 133 | },_fade:function(_9,_a){ |
||
| 134 | this._styleNode(_a.domNode,1,1); |
||
| 135 | this._styleNode(_9.domNode,0,2); |
||
| 136 | this._showChild(_9);
|
||
| 137 | if(this.doLayout&&_9.resize){ |
||
| 138 | _9.resize(this._containerContentBox||this._contentBox); |
||
| 139 | } |
||
| 140 | var _b={duration:this.transitionDuration},_c=dojo.fx.combine([dojo["fadeOut"](dojo.mixin({node:_a.domNode},_b)),dojo["fadeIn"](dojo.mixin({node:_9.domNode},_b))]); |
||
| 141 | this.connect(_c,"onEnd",dojo.hitch(this,function(){ |
||
| 142 | this._hideChild(_a);
|
||
| 143 | this._transitionEnd();
|
||
| 144 | })); |
||
| 145 | _c.play(); |
||
| 146 | },_styleNode:function(_d,_e,_f){ |
||
| 147 | dojo.style(_d,"opacity",_e);
|
||
| 148 | dojo.style(_d,"zIndex",_f);
|
||
| 149 | dojo.style(_d,"position","absolute"); |
||
| 150 | }}); |
||
| 151 | dojo.declare("dojox.layout.RotatorPager",[dijit._Widget,dijit._Templated,dijit._Contained],{widgetsInTemplate:true,rotatorId:"",postMixInProperties:function(){ |
||
| 152 | this.templateString="<div>"+this.srcNodeRef.innerHTML+"</div>"; |
||
| 153 | },postCreate:function(){ |
||
| 154 | var p=dijit.byId(this.rotatorId)||this.getParent(); |
||
| 155 | if(p&&p.declaredClass=="dojox.layout.RotatorContainer"){ |
||
| 156 | if(this.previous){ |
||
| 157 | dojo.connect(this.previous,"onClick",function(){ |
||
| 158 | dojo.publish(p.id+"-cycle",[false]); |
||
| 159 | }); |
||
| 160 | } |
||
| 161 | if(this.next){ |
||
| 162 | dojo.connect(this.next,"onClick",function(){ |
||
| 163 | dojo.publish(p.id+"-cycle",[true]); |
||
| 164 | }); |
||
| 165 | } |
||
| 166 | if(this.playPause){ |
||
| 167 | dojo.connect(this.playPause,"onClick",function(){ |
||
| 168 | this.set("label",this.checked?"Pause":"Play"); |
||
| 169 | dojo.publish(p.id+"-state",[this.checked]); |
||
| 170 | }); |
||
| 171 | } |
||
| 172 | this._subscriptions=[dojo.subscribe(p.id+"-state",this,"_state"),dojo.subscribe(p.id+"-update",this,"_update")]; |
||
| 173 | } |
||
| 174 | },destroy:function(){ |
||
| 175 | dojo.forEach(this._subscriptions,dojo.unsubscribe);
|
||
| 176 | this.inherited(arguments); |
||
| 177 | },_state:function(_10){ |
||
| 178 | if(this.playPause&&this.playPause.checked!=_10){ |
||
| 179 | this.playPause.attr("label",_10?"Pause":"Play"); |
||
| 180 | this.playPause.attr("checked",_10); |
||
| 181 | } |
||
| 182 | },_update:function(_11,_12,_13){ |
||
| 183 | this._state(_11);
|
||
| 184 | if(this.current&&_12){ |
||
| 185 | this.current.innerHTML=_12;
|
||
| 186 | } |
||
| 187 | if(this.total&&_13){ |
||
| 188 | this.total.innerHTML=_13;
|
||
| 189 | } |
||
| 190 | }}); |
||
| 191 | } |