root / trunk / web / dojo / dojox / mobile / app / ImageThumbView.js @ 12
History | View | Annotate | Download (4.04 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.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 | } |