root / trunk / web / dojo / dojox / mobile / app / ImageThumbView.js
History | View | Annotate | Download (4.04 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.mobile.app.ImageThumbView"]){ |
9 |
dojo._hasResource["dojox.mobile.app.ImageThumbView"]=true; |
10 |
dojo.provide("dojox.mobile.app.ImageThumbView");
|
11 |
dojo.experimental("dojox.mobile.app.ImageThumbView");
|
12 |
dojo.require("dijit._Widget");
|
13 |
dojo.require("dojo.string");
|
14 |
dojo.declare("dojox.mobile.app.ImageThumbView",dijit._Widget,{items:null,urlParam:"url",itemTemplate:"<div class=\"mblThumbInner\">"+"<div class=\"mblThumbOverlay\"></div>"+"<div class=\"mblThumbMask\">"+"<div class=\"mblThumbSrc\" style=\"background-image:url(${url})\"></div>"+"</div>"+"</div>",minPadding:5,maxPerRow:3,baseClass:"mblImageThumbView",selectedIndex:-1,cache:null,postCreate:function(){ |
15 |
this.inherited(arguments); |
16 |
var _1=this; |
17 |
var _2="mblThumbHover"; |
18 |
this.addThumb=dojo.hitch(this,this.addThumb); |
19 |
this.handleImgLoad=dojo.hitch(this,this.handleImgLoad); |
20 |
this._onLoadImages={};
|
21 |
this.cache=[];
|
22 |
this.visibleImages=[];
|
23 |
this.connect(this.domNode,"onclick",function(_3){ |
24 |
var _4=_1._getItemNodeFromEvent(_3);
|
25 |
if(_4){
|
26 |
_1.onSelect(_4._item,_4._index,_1.items); |
27 |
dojo.query(".selected",this.domNode).removeClass("selected"); |
28 |
dojo.addClass(_4,"selected");
|
29 |
} |
30 |
}); |
31 |
this.resize();
|
32 |
this.render();
|
33 |
},onSelect:function(_5,_6,_7){ |
34 |
},_setItemsAttr:function(_8){ |
35 |
this.items=_8||[];
|
36 |
this.render();
|
37 |
},_getItemNode:function(_9){ |
38 |
while(_9&&!dojo.hasClass(_9,"mblThumb")&&_9!=this.domNode){ |
39 |
_9=_9.parentNode; |
40 |
} |
41 |
return (_9==this.domNode)?null:_9; |
42 |
},_getItemNodeFromEvent:function(_a){ |
43 |
if(_a.touches&&_a.touches.length>0){ |
44 |
_a=_a.touches[0];
|
45 |
} |
46 |
return this._getItemNode(_a.target); |
47 |
},resize:function(){ |
48 |
this._thumbSize=null; |
49 |
this._size=dojo.marginBox(this.domNode); |
50 |
this.render();
|
51 |
},render:function(){ |
52 |
var i;
|
53 |
var _b;
|
54 |
var _c;
|
55 |
var _d;
|
56 |
while(this.visibleImages.length>0){ |
57 |
_d=this.visibleImages.pop();
|
58 |
this.cache.push(_d);
|
59 |
dojo.addClass(_d,"hidden");
|
60 |
_d._cached=true;
|
61 |
} |
62 |
if(!this.items||this.items.length==0){ |
63 |
return;
|
64 |
} |
65 |
for(i=0;i<this.items.length;i++){ |
66 |
_c=this.items[i];
|
67 |
_b=(dojo.isString(_c)?_c:_c[this.urlParam]);
|
68 |
this.addThumb(_c,_b,i);
|
69 |
} |
70 |
if(!this._thumbSize){ |
71 |
return;
|
72 |
} |
73 |
var _e=0; |
74 |
var _f=-1; |
75 |
var _10=this._thumbSize.w+(this.padding*2); |
76 |
var _11=this._thumbSize.h+(this.padding*2); |
77 |
var _12=this.thumbNodes=dojo.query(".mblThumb",this.domNode); |
78 |
var pos=0; |
79 |
for(i=0;i<_12.length;i++){ |
80 |
if(_12[i]._cached){
|
81 |
continue;
|
82 |
} |
83 |
if(pos%this.maxPerRow==0){ |
84 |
_f++; |
85 |
} |
86 |
_e=pos%this.maxPerRow;
|
87 |
this.place(_12[i],(_e*_10)+this.padding,(_f*_11)+this.padding); |
88 |
if(!_12[i]._loading){
|
89 |
dojo.removeClass(_12[i],"hidden");
|
90 |
} |
91 |
if(pos==this.selectedIndex){ |
92 |
dojo[pos==this.selectedIndex?"addClass":"removeClass"](_12[i],"selected"); |
93 |
} |
94 |
pos++; |
95 |
} |
96 |
var _13=Math.ceil(pos/this.maxPerRow); |
97 |
if(this._numRows!=_13){ |
98 |
this._numRows=_13;
|
99 |
dojo.style(this.domNode,"height",(_13*(this._thumbSize.h+this.padding*2))+"px"); |
100 |
} |
101 |
},addThumb:function(_14,url,_15){ |
102 |
var _16;
|
103 |
if(this.cache.length>0){ |
104 |
_16=this.cache.pop();
|
105 |
}else{
|
106 |
_16=dojo.create("div",{"class":"mblThumb hidden",innerHTML:dojo.string.substitute(this.itemTemplate,{url:url},null,this)},this.domNode); |
107 |
} |
108 |
dojo.addClass(_16,"hidden");
|
109 |
var _17=dojo.create("img",{}); |
110 |
_17._thumbDiv=_16; |
111 |
_17._conn=dojo.connect(_17,"onload",this.handleImgLoad); |
112 |
_17._url=url; |
113 |
_16._loading=true;
|
114 |
this._onLoadImages[url]=_17;
|
115 |
_17.src=url; |
116 |
this.visibleImages.push(_16);
|
117 |
_16._index=_15; |
118 |
_16._item=_14; |
119 |
_16._url=url; |
120 |
_16._cached=false;
|
121 |
if(!this._thumbSize){ |
122 |
this._thumbSize=dojo.marginBox(_16);
|
123 |
this.calcPadding();
|
124 |
} |
125 |
},handleImgLoad:function(_18){ |
126 |
var img=_18.target;
|
127 |
dojo.disconnect(img._conn); |
128 |
dojo.removeClass(img._thumbDiv,"hidden");
|
129 |
img._thumbDiv._loading=false;
|
130 |
dojo.query(".mblThumbSrc",img._thumbDiv).style("backgroundImage","url("+img._url+")"); |
131 |
delete this._onLoadImages[img._url]; |
132 |
},calcPadding:function(){ |
133 |
var _19=this._size.w; |
134 |
var _1a=this._thumbSize.w; |
135 |
var _1b=_1a+this.minPadding; |
136 |
this.maxPerRow=Math.floor(_19/_1b);
|
137 |
this.padding=(_19-(_1a*this.maxPerRow))/(this.maxPerRow*2); |
138 |
},place:function(_1c,x,y){ |
139 |
dojo.style(_1c,{"-webkit-transform":"translate("+x+"px,"+y+"px)"}); |
140 |
}}); |
141 |
} |