root / trunk / web / dojo / dojox / image / Lightbox.js
History | View | Annotate | Download (8.25 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.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 | } |