root / trunk / web / dojo / dojox / fx / flip.js @ 10
History | View | Annotate | Download (7.01 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.fx.flip"]){ |
||
| 9 | dojo._hasResource["dojox.fx.flip"]=true; |
||
| 10 | dojo.provide("dojox.fx.flip");
|
||
| 11 | dojo.experimental("dojox.fx.flip");
|
||
| 12 | dojo.require("dojo.fx");
|
||
| 13 | (function(){
|
||
| 14 | var _1="border",_2="Width",_3="Height",_4="Top",_5="Right",_6="Left",_7="Bottom"; |
||
| 15 | dojox.fx.flip=function(_8){ |
||
| 16 | var _9=dojo.create("div"),_a=_8.node=dojo.byId(_8.node),s=_a.style,_b=null,hs=null,pn=null,_c=_8.lightColor||"#dddddd",_d=_8.darkColor||"#555555",_e=dojo.style(_a,"backgroundColor"),_f=_8.endColor||_e,_10={},_11=[],_12=_8.duration?_8.duration/2:250,dir=_8.dir||"left",_13=0.9,_14="transparent",_15=_8.whichAnim,_16=_8.axis||"center",_17=_8.depth; |
||
| 17 | var _18=function(_19){ |
||
| 18 | return ((new dojo.Color(_19)).toHex()==="#000000")?"#000001":_19; |
||
| 19 | }; |
||
| 20 | if(dojo.isIE<7){ |
||
| 21 | _f=_18(_f); |
||
| 22 | _c=_18(_c); |
||
| 23 | _d=_18(_d); |
||
| 24 | _e=_18(_e); |
||
| 25 | _14="black";
|
||
| 26 | _9.style.filter="chroma(color='#000000')";
|
||
| 27 | } |
||
| 28 | var _1a=(function(n){ |
||
| 29 | return function(){ |
||
| 30 | var ret=dojo.coords(n,true); |
||
| 31 | _b={top:ret.y,left:ret.x,width:ret.w,height:ret.h};
|
||
| 32 | }; |
||
| 33 | })(_a); |
||
| 34 | _1a(); |
||
| 35 | hs={position:"absolute",top:_b["top"]+"px",left:_b["left"]+"px",height:"0",width:"0",zIndex:_8.zIndex||(s.zIndex||0),border:"0 solid "+_14,fontSize:"0",visibility:"hidden"};
|
||
| 36 | var _1b=[{},{top:_b["top"],left:_b["left"]}]; |
||
| 37 | var _1c={left:[_6,_5,_4,_7,_2,_3,"end"+_3+"Min",_6,"end"+_3+"Max"],right:[_5,_6,_4,_7,_2,_3,"end"+_3+"Min",_6,"end"+_3+"Max"],top:[_4,_7,_6,_5,_3,_2,"end"+_2+"Min",_4,"end"+_2+"Max"],bottom:[_7,_4,_6,_5,_3,_2,"end"+_2+"Min",_4,"end"+_2+"Max"]}; |
||
| 38 | pn=_1c[dir]; |
||
| 39 | if(typeof _17!="undefined"){ |
||
| 40 | _17=Math.max(0,Math.min(1,_17))/2; |
||
| 41 | _13=0.4+(0.5-_17); |
||
| 42 | }else{
|
||
| 43 | _13=Math.min(0.9,Math.max(0.4,_b[pn[5].toLowerCase()]/_b[pn[4].toLowerCase()])); |
||
| 44 | } |
||
| 45 | var p0=_1b[0]; |
||
| 46 | for(var i=4;i<6;i++){ |
||
| 47 | if(_16=="center"||_16=="cube"){ |
||
| 48 | _b["end"+pn[i]+"Min"]=_b[pn[i].toLowerCase()]*_13; |
||
| 49 | _b["end"+pn[i]+"Max"]=_b[pn[i].toLowerCase()]/_13; |
||
| 50 | }else{
|
||
| 51 | if(_16=="shortside"){ |
||
| 52 | _b["end"+pn[i]+"Min"]=_b[pn[i].toLowerCase()]; |
||
| 53 | _b["end"+pn[i]+"Max"]=_b[pn[i].toLowerCase()]/_13; |
||
| 54 | }else{
|
||
| 55 | if(_16=="longside"){ |
||
| 56 | _b["end"+pn[i]+"Min"]=_b[pn[i].toLowerCase()]*_13; |
||
| 57 | _b["end"+pn[i]+"Max"]=_b[pn[i].toLowerCase()]; |
||
| 58 | } |
||
| 59 | } |
||
| 60 | } |
||
| 61 | } |
||
| 62 | if(_16=="center"){ |
||
| 63 | p0[pn[2].toLowerCase()]=_b[pn[2].toLowerCase()]-(_b[pn[8]]-_b[pn[6]])/4; |
||
| 64 | }else{
|
||
| 65 | if(_16=="shortside"){ |
||
| 66 | p0[pn[2].toLowerCase()]=_b[pn[2].toLowerCase()]-(_b[pn[8]]-_b[pn[6]])/2; |
||
| 67 | } |
||
| 68 | } |
||
| 69 | _10[pn[5].toLowerCase()]=_b[pn[5].toLowerCase()]+"px"; |
||
| 70 | _10[pn[4].toLowerCase()]="0"; |
||
| 71 | _10[_1+pn[1]+_2]=_b[pn[4].toLowerCase()]+"px"; |
||
| 72 | _10[_1+pn[1]+"Color"]=_e; |
||
| 73 | p0[_1+pn[1]+_2]=0; |
||
| 74 | p0[_1+pn[1]+"Color"]=_d; |
||
| 75 | p0[_1+pn[2]+_2]=p0[_1+pn[3]+_2]=_16!="cube"?(_b["end"+pn[5]+"Max"]-_b["end"+pn[5]+"Min"])/2:_b[pn[6]]/2; |
||
| 76 | p0[pn[7].toLowerCase()]=_b[pn[7].toLowerCase()]+_b[pn[4].toLowerCase()]/2+(_8.shift||0); |
||
| 77 | p0[pn[5].toLowerCase()]=_b[pn[6]]; |
||
| 78 | var p1=_1b[1]; |
||
| 79 | p1[_1+pn[0]+"Color"]={start:_c,end:_f}; |
||
| 80 | p1[_1+pn[0]+_2]=_b[pn[4].toLowerCase()]; |
||
| 81 | p1[_1+pn[2]+_2]=0; |
||
| 82 | p1[_1+pn[3]+_2]=0; |
||
| 83 | p1[pn[5].toLowerCase()]={start:_b[pn[6]],end:_b[pn[5].toLowerCase()]}; |
||
| 84 | dojo.mixin(hs,_10); |
||
| 85 | dojo.style(_9,hs); |
||
| 86 | dojo.body().appendChild(_9); |
||
| 87 | var _1d=function(){ |
||
| 88 | dojo.destroy(_9); |
||
| 89 | s.backgroundColor=_f; |
||
| 90 | s.visibility="visible";
|
||
| 91 | }; |
||
| 92 | if(_15=="last"){ |
||
| 93 | for(i in p0){ |
||
| 94 | p0[i]={start:p0[i]};
|
||
| 95 | } |
||
| 96 | p0[_1+pn[1]+"Color"]={start:_d,end:_f}; |
||
| 97 | p1=p0; |
||
| 98 | } |
||
| 99 | if(!_15||_15=="first"){ |
||
| 100 | _11.push(dojo.animateProperty({node:_9,duration:_12,properties:p0}));
|
||
| 101 | } |
||
| 102 | if(!_15||_15=="last"){ |
||
| 103 | _11.push(dojo.animateProperty({node:_9,duration:_12,properties:p1,onEnd:_1d}));
|
||
| 104 | } |
||
| 105 | dojo.connect(_11[0],"play",function(){ |
||
| 106 | _9.style.visibility="visible";
|
||
| 107 | s.visibility="hidden";
|
||
| 108 | }); |
||
| 109 | return dojo.fx.chain(_11);
|
||
| 110 | }; |
||
| 111 | dojox.fx.flipCube=function(_1e){ |
||
| 112 | var _1f=[],mb=dojo.marginBox(_1e.node),_20=mb.w/2,_21=mb.h/2,_22={top:{pName:"height",args:[{whichAnim:"first",dir:"top",shift:-_21},{whichAnim:"last",dir:"bottom",shift:_21}]},right:{pName:"width",args:[{whichAnim:"first",dir:"right",shift:_20},{whichAnim:"last",dir:"left",shift:-_20}]},bottom:{pName:"height",args:[{whichAnim:"first",dir:"bottom",shift:_21},{whichAnim:"last",dir:"top",shift:-_21}]},left:{pName:"width",args:[{whichAnim:"first",dir:"left",shift:-_20},{whichAnim:"last",dir:"right",shift:_20}]}}; |
||
| 113 | var d=_22[_1e.dir||"left"],p=d.args; |
||
| 114 | _1e.duration=_1e.duration?_1e.duration*2:500; |
||
| 115 | _1e.depth=0.8;
|
||
| 116 | _1e.axis="cube";
|
||
| 117 | for(var i=p.length-1;i>=0;i--){ |
||
| 118 | dojo.mixin(_1e,p[i]); |
||
| 119 | _1f.push(dojox.fx.flip(_1e)); |
||
| 120 | } |
||
| 121 | return dojo.fx.combine(_1f);
|
||
| 122 | }; |
||
| 123 | dojox.fx.flipPage=function(_23){ |
||
| 124 | var n=_23.node,_24=dojo.coords(n,true),x=_24.x,y=_24.y,w=_24.w,h=_24.h,_25=dojo.style(n,"backgroundColor"),_26=_23.lightColor||"#dddddd",_27=_23.darkColor,_28=dojo.create("div"),_29=[],hn=[],dir=_23.dir||"right",pn={left:["left","right","x","w"],top:["top","bottom","y","h"],right:["left","left","x","w"],bottom:["top","top","y","h"]},_2a={right:[1,-1],left:[-1,1],top:[-1,1],bottom:[1,-1]}; |
||
| 125 | dojo.style(_28,{position:"absolute",width:w+"px",height:h+"px",top:y+"px",left:x+"px",visibility:"hidden"});
|
||
| 126 | var hs=[];
|
||
| 127 | for(var i=0;i<2;i++){ |
||
| 128 | var r=i%2,d=r?pn[dir][1]:dir,wa=r?"last":"first",_2b=r?_25:_26,_2c=r?_2b:_23.startColor||n.style.backgroundColor; |
||
| 129 | hn[i]=dojo.clone(_28); |
||
| 130 | var _2d=function(x){ |
||
| 131 | return function(){ |
||
| 132 | dojo.destroy(hn[x]); |
||
| 133 | }; |
||
| 134 | }(i); |
||
| 135 | dojo.body().appendChild(hn[i]); |
||
| 136 | hs[i]={backgroundColor:r?_2c:_25};
|
||
| 137 | hs[i][pn[dir][0]]=_24[pn[dir][2]]+_2a[dir][0]*i*_24[pn[dir][3]]+"px"; |
||
| 138 | dojo.style(hn[i],hs[i]); |
||
| 139 | _29.push(dojox.fx.flip({node:hn[i],dir:d,axis:"shortside",depth:_23.depth,duration:_23.duration/2,shift:_2a[dir][i]*_24[pn[dir][3]]/2,darkColor:_27,lightColor:_26,whichAnim:wa,endColor:_2b}));
|
||
| 140 | dojo.connect(_29[i],"onEnd",_2d);
|
||
| 141 | } |
||
| 142 | return dojo.fx.chain(_29);
|
||
| 143 | }; |
||
| 144 | dojox.fx.flipGrid=function(_2e){ |
||
| 145 | var _2f=_2e.rows||4,_30=_2e.cols||4,_31=[],_32=dojo.create("div"),n=_2e.node,_33=dojo.coords(n,true),x=_33.x,y=_33.y,nw=_33.w,nh=_33.h,w=_33.w/_30,h=_33.h/_2f,_34=[]; |
||
| 146 | dojo.style(_32,{position:"absolute",width:w+"px",height:h+"px",backgroundColor:dojo.style(n,"backgroundColor")});
|
||
| 147 | for(var i=0;i<_2f;i++){ |
||
| 148 | var r=i%2,d=r?"right":"left",_35=r?1:-1; |
||
| 149 | var cn=dojo.clone(n);
|
||
| 150 | dojo.style(cn,{position:"absolute",width:nw+"px",height:nh+"px",top:y+"px",left:x+"px",clip:"rect("+i*h+"px,"+nw+"px,"+nh+"px,0)"});
|
||
| 151 | dojo.body().appendChild(cn); |
||
| 152 | _31[i]=[]; |
||
| 153 | for(var j=0;j<_30;j++){ |
||
| 154 | var hn=dojo.clone(_32),l=r?j:_30-(j+1); |
||
| 155 | var _36=function(xn,_37,_38){ |
||
| 156 | return function(){ |
||
| 157 | if(!(_37%2)){ |
||
| 158 | dojo.style(xn,{clip:"rect("+_37*h+"px,"+(nw-(_38+1)*w)+"px,"+((_37+1)*h)+"px,0px)"});
|
||
| 159 | }else{
|
||
| 160 | dojo.style(xn,{clip:"rect("+_37*h+"px,"+nw+"px,"+((_37+1)*h)+"px,"+((_38+1)*w)+"px)"});
|
||
| 161 | } |
||
| 162 | }; |
||
| 163 | }(cn,i,j); |
||
| 164 | dojo.body().appendChild(hn); |
||
| 165 | dojo.style(hn,{left:x+l*w+"px",top:y+i*h+"px",visibility:"hidden"});
|
||
| 166 | var a=dojox.fx.flipPage({node:hn,dir:d,duration:_2e.duration||900,shift:_35*w/2,depth:0.2,darkColor:_2e.darkColor,lightColor:_2e.lightColor,startColor:_2e.startColor||_2e.node.style.backgroundColor}),_39=function(xn){ |
||
| 167 | return function(){ |
||
| 168 | dojo.destroy(xn); |
||
| 169 | }; |
||
| 170 | }(hn); |
||
| 171 | dojo.connect(a,"play",this,_36); |
||
| 172 | dojo.connect(a,"play",this,_39); |
||
| 173 | _31[i].push(a); |
||
| 174 | } |
||
| 175 | _34.push(dojo.fx.chain(_31[i])); |
||
| 176 | } |
||
| 177 | dojo.connect(_34[0],"play",function(){ |
||
| 178 | dojo.style(n,{visibility:"hidden"});
|
||
| 179 | }); |
||
| 180 | return dojo.fx.combine(_34);
|
||
| 181 | }; |
||
| 182 | })(); |
||
| 183 | } |