root / trunk / web / dojo / dojox / image / Lightbox.js @ 12
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 | } |