Project

General

Profile

Statistics
| Revision:

root / trunk / web / dojo / dojox / image / Lightbox.js @ 10

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
}