root / trunk / web / dojo / dojox / image / Lightbox.js @ 11
History | View | Annotate | Download (8.25 KB)
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["dojox.image.Lightbox"]){ |
9 |
dojo._hasResource["dojox.image.Lightbox"]=true; |
10 |
dojo.provide("dojox.image.Lightbox");
|
11 |
dojo.experimental("dojox.image.Lightbox");
|
12 |
dojo.require("dojo.window");
|
13 |
dojo.require("dijit.Dialog");
|
14 |
dojo.require("dojox.fx._base");
|
15 |
dojo.declare("dojox.image.Lightbox",dijit._Widget,{group:"",title:"",href:"",duration:500,modal:false,_allowPassthru:false,_attachedDialog:null,startup:function(){ |
16 |
this.inherited(arguments); |
17 |
var _1=dijit.byId("dojoxLightboxDialog"); |
18 |
if(_1){
|
19 |
this._attachedDialog=_1;
|
20 |
}else{
|
21 |
this._attachedDialog=new dojox.image.LightboxDialog({id:"dojoxLightboxDialog"}); |
22 |
this._attachedDialog.startup();
|
23 |
} |
24 |
if(!this.store){ |
25 |
this._addSelf();
|
26 |
this.connect(this.domNode,"onclick","_handleClick"); |
27 |
} |
28 |
},_addSelf:function(){ |
29 |
this._attachedDialog.addImage({href:this.href,title:this.title},this.group||null); |
30 |
},_handleClick:function(e){ |
31 |
if(!this._allowPassthru){ |
32 |
e.preventDefault(); |
33 |
}else{
|
34 |
return;
|
35 |
} |
36 |
this.show();
|
37 |
},show:function(){ |
38 |
this._attachedDialog.show(this); |
39 |
},hide:function(){ |
40 |
this._attachedDialog.hide();
|
41 |
},disable:function(){ |
42 |
this._allowPassthru=true; |
43 |
},enable:function(){ |
44 |
this._allowPassthru=false; |
45 |
},onClick:function(){ |
46 |
},destroy:function(){ |
47 |
this._attachedDialog.removeImage(this); |
48 |
this.inherited(arguments); |
49 |
}}); |
50 |
dojo.declare("dojox.image.LightboxDialog",dijit.Dialog,{title:"",inGroup:null,imgUrl:dijit._Widget.prototype._blankGif,errorMessage:"Image not found.",adjust:true,modal:false,_groups:{XnoGroupX:[]},errorImg:dojo.moduleUrl("dojox.image","resources/images/warning.png"),templateString:dojo.cache("dojox.image","resources/Lightbox.html","<div class=\"dojoxLightbox\" dojoAttachPoint=\"containerNode\">\n\t<div style=\"position:relative\">\n\t\t<div dojoAttachPoint=\"imageContainer\" class=\"dojoxLightboxContainer\" dojoAttachEvent=\"onclick: _onImageClick\">\n\t\t\t<img dojoAttachPoint=\"imgNode\" src=\"${imgUrl}\" class=\"dojoxLightboxImage\" alt=\"${title}\">\n\t\t\t<div class=\"dojoxLightboxFooter\" dojoAttachPoint=\"titleNode\">\n\t\t\t\t<div class=\"dijitInline LightboxClose\" dojoAttachPoint=\"closeButtonNode\"></div>\n\t\t\t\t<div class=\"dijitInline LightboxNext\" dojoAttachPoint=\"nextButtonNode\"></div>\t\n\t\t\t\t<div class=\"dijitInline LightboxPrev\" dojoAttachPoint=\"prevButtonNode\"></div>\n\t\t\t\t<div class=\"dojoxLightboxText\" dojoAttachPoint=\"titleTextNode\"><span dojoAttachPoint=\"textNode\">${title}</span><span dojoAttachPoint=\"groupCount\" class=\"dojoxLightboxGroupText\"></span></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n"),startup:function(){ |
51 |
this.inherited(arguments); |
52 |
this._animConnects=[];
|
53 |
this.connect(this.nextButtonNode,"onclick","_nextImage"); |
54 |
this.connect(this.prevButtonNode,"onclick","_prevImage"); |
55 |
this.connect(this.closeButtonNode,"onclick","hide"); |
56 |
this._makeAnims();
|
57 |
this._vp=dojo.window.getBox();
|
58 |
return this; |
59 |
},show:function(_2){ |
60 |
var _3=this; |
61 |
this._lastGroup=_2;
|
62 |
if(!_3.open){
|
63 |
_3.inherited(arguments);
|
64 |
_3._modalconnects.push(dojo.connect(dojo.global,"onscroll",this,"_position"),dojo.connect(dojo.global,"onresize",this,"_position"),dojo.connect(dojo.body(),"onkeypress",this,"_handleKey")); |
65 |
if(!_2.modal){
|
66 |
_3._modalconnects.push(dojo.connect(dijit._underlay.domNode,"onclick",this,"onCancel")); |
67 |
} |
68 |
} |
69 |
if(this._wasStyled){ |
70 |
var _4=dojo.create("img",null,_3.imgNode,"after"); |
71 |
dojo.destroy(_3.imgNode); |
72 |
_3.imgNode=_4; |
73 |
_3._makeAnims(); |
74 |
_3._wasStyled=false;
|
75 |
} |
76 |
dojo.style(_3.imgNode,"opacity","0"); |
77 |
dojo.style(_3.titleNode,"opacity","0"); |
78 |
var _5=_2.href;
|
79 |
if((_2.group&&_2!=="XnoGroupX")||_3.inGroup){ |
80 |
if(!_3.inGroup){
|
81 |
_3.inGroup=_3._groups[(_2.group)]; |
82 |
dojo.forEach(_3.inGroup,function(g,i){
|
83 |
if(g.href==_2.href){
|
84 |
_3._index=i; |
85 |
} |
86 |
}); |
87 |
} |
88 |
if(!_3._index){
|
89 |
_3._index=0;
|
90 |
var sr=_3.inGroup[_3._index];
|
91 |
_5=(sr&&sr.href)||_3.errorImg; |
92 |
} |
93 |
_3.groupCount.innerHTML=" ("+(_3._index+1)+" of "+Math.max(1,_3.inGroup.length)+")"; |
94 |
_3.prevButtonNode.style.visibility="visible";
|
95 |
_3.nextButtonNode.style.visibility="visible";
|
96 |
}else{
|
97 |
_3.groupCount.innerHTML="";
|
98 |
_3.prevButtonNode.style.visibility="hidden";
|
99 |
_3.nextButtonNode.style.visibility="hidden";
|
100 |
} |
101 |
if(!_2.leaveTitle){
|
102 |
_3.textNode.innerHTML=_2.title; |
103 |
} |
104 |
_3._ready(_5); |
105 |
},_ready:function(_6){ |
106 |
var _7=this; |
107 |
_7._imgError=dojo.connect(_7.imgNode,"error",_7,function(){ |
108 |
dojo.disconnect(_7._imgError); |
109 |
_7.imgNode.src=_7.errorImg; |
110 |
_7.textNode.innerHTML=_7.errorMessage; |
111 |
}); |
112 |
_7._imgConnect=dojo.connect(_7.imgNode,"load",_7,function(e){ |
113 |
_7.resizeTo({w:_7.imgNode.width,h:_7.imgNode.height,duration:_7.duration}); |
114 |
dojo.disconnect(_7._imgConnect); |
115 |
if(_7._imgError){
|
116 |
dojo.disconnect(_7._imgError); |
117 |
} |
118 |
}); |
119 |
_7.imgNode.src=_6; |
120 |
},_nextImage:function(){ |
121 |
if(!this.inGroup){ |
122 |
return;
|
123 |
} |
124 |
if(this._index+1<this.inGroup.length){ |
125 |
this._index++;
|
126 |
}else{
|
127 |
this._index=0; |
128 |
} |
129 |
this._loadImage();
|
130 |
},_prevImage:function(){ |
131 |
if(this.inGroup){ |
132 |
if(this._index==0){ |
133 |
this._index=this.inGroup.length-1; |
134 |
}else{
|
135 |
this._index--;
|
136 |
} |
137 |
this._loadImage();
|
138 |
} |
139 |
},_loadImage:function(){ |
140 |
this._loadingAnim.play(1); |
141 |
},_prepNodes:function(){ |
142 |
this._imageReady=false; |
143 |
if(this.inGroup&&this.inGroup[this._index]){ |
144 |
this.show({href:this.inGroup[this._index].href,title:this.inGroup[this._index].title}); |
145 |
}else{
|
146 |
this.show({title:this.errorMessage,href:this.errorImg}); |
147 |
} |
148 |
},resizeTo:function(_8,_9){ |
149 |
var _a=dojo.boxModel=="border-box"?dojo._getBorderExtents(this.domNode).w:0,_b=_9||{h:30}; |
150 |
this._lastTitleSize=_b;
|
151 |
if(this.adjust&&(_8.h+_b.h+_a+80>this._vp.h||_8.w+_a+60>this._vp.w)){ |
152 |
this._lastSize=_8;
|
153 |
_8=this._scaleToFit(_8);
|
154 |
} |
155 |
this._currentSize=_8;
|
156 |
var _c=dojox.fx.sizeTo({node:this.containerNode,duration:_8.duration||this.duration,width:_8.w+_a,height:_8.h+_b.h+_a}); |
157 |
this.connect(_c,"onEnd","_showImage"); |
158 |
_c.play(15);
|
159 |
},_scaleToFit:function(_d){ |
160 |
var ns={};
|
161 |
if(this._vp.h>this._vp.w){ |
162 |
ns.w=this._vp.w-80; |
163 |
ns.h=ns.w*(_d.h/_d.w); |
164 |
}else{
|
165 |
ns.h=this._vp.h-60-this._lastTitleSize.h; |
166 |
ns.w=ns.h*(_d.w/_d.h); |
167 |
} |
168 |
this._wasStyled=true; |
169 |
this._setImageSize(ns);
|
170 |
ns.duration=_d.duration; |
171 |
return ns;
|
172 |
},_setImageSize:function(_e){ |
173 |
var s=this.imgNode; |
174 |
s.height=_e.h; |
175 |
s.width=_e.w; |
176 |
},_size:function(){ |
177 |
},_position:function(e){ |
178 |
this._vp=dojo.window.getBox();
|
179 |
this.inherited(arguments); |
180 |
if(e&&e.type=="resize"){ |
181 |
if(this._wasStyled){ |
182 |
this._setImageSize(this._lastSize); |
183 |
this.resizeTo(this._lastSize); |
184 |
}else{
|
185 |
if(this.imgNode.height+80>this._vp.h||this.imgNode.width+60>this._vp.h){ |
186 |
this.resizeTo({w:this.imgNode.width,h:this.imgNode.height}); |
187 |
} |
188 |
} |
189 |
} |
190 |
},_showImage:function(){ |
191 |
this._showImageAnim.play(1); |
192 |
},_showNav:function(){ |
193 |
var _f=dojo.marginBox(this.titleNode); |
194 |
if(_f.h>this._lastTitleSize.h){ |
195 |
this.resizeTo(this._wasStyled?this._lastSize:this._currentSize,_f); |
196 |
}else{
|
197 |
this._showNavAnim.play(1); |
198 |
} |
199 |
},hide:function(){ |
200 |
dojo.fadeOut({node:this.titleNode,duration:200,onEnd:dojo.hitch(this,function(){ |
201 |
this.imgNode.src=this._blankGif; |
202 |
})}).play(5);
|
203 |
this.inherited(arguments); |
204 |
this.inGroup=null; |
205 |
this._index=null; |
206 |
},addImage:function(_10,_11){ |
207 |
var g=_11;
|
208 |
if(!_10.href){
|
209 |
return;
|
210 |
} |
211 |
if(g){
|
212 |
if(!this._groups[g]){ |
213 |
this._groups[g]=[];
|
214 |
} |
215 |
this._groups[g].push(_10);
|
216 |
}else{
|
217 |
this._groups["XnoGroupX"].push(_10); |
218 |
} |
219 |
},removeImage:function(_12){ |
220 |
var g=_12.group||"XnoGroupX"; |
221 |
dojo.every(this._groups[g],function(_13,i,ar){ |
222 |
if(_13.href==_12.href){
|
223 |
ar.splice(i,1);
|
224 |
return false; |
225 |
} |
226 |
return true; |
227 |
}); |
228 |
},removeGroup:function(_14){ |
229 |
if(this._groups[_14]){ |
230 |
this._groups[_14]=[];
|
231 |
} |
232 |
},_handleKey:function(e){ |
233 |
if(!this.open){ |
234 |
return;
|
235 |
} |
236 |
var dk=dojo.keys;
|
237 |
switch(e.charOrCode){
|
238 |
case dk.ESCAPE:
|
239 |
this.hide();
|
240 |
break;
|
241 |
case dk.DOWN_ARROW:
|
242 |
case dk.RIGHT_ARROW:
|
243 |
case 78: |
244 |
this._nextImage();
|
245 |
break;
|
246 |
case dk.UP_ARROW:
|
247 |
case dk.LEFT_ARROW:
|
248 |
case 80: |
249 |
this._prevImage();
|
250 |
break;
|
251 |
} |
252 |
},_makeAnims:function(){ |
253 |
dojo.forEach(this._animConnects,dojo.disconnect);
|
254 |
this._animConnects=[];
|
255 |
this._showImageAnim=dojo.fadeIn({node:this.imgNode,duration:this.duration}); |
256 |
this._animConnects.push(dojo.connect(this._showImageAnim,"onEnd",this,"_showNav")); |
257 |
this._loadingAnim=dojo.fx.combine([dojo.fadeOut({node:this.imgNode,duration:175}),dojo.fadeOut({node:this.titleNode,duration:175})]); |
258 |
this._animConnects.push(dojo.connect(this._loadingAnim,"onEnd",this,"_prepNodes")); |
259 |
this._showNavAnim=dojo.fadeIn({node:this.titleNode,duration:225}); |
260 |
},onClick:function(_15){ |
261 |
},_onImageClick:function(e){ |
262 |
if(e&&e.target==this.imgNode){ |
263 |
this.onClick(this._lastGroup); |
264 |
if(this._lastGroup.declaredClass){ |
265 |
this._lastGroup.onClick(this._lastGroup); |
266 |
} |
267 |
} |
268 |
}}); |
269 |
} |