root / trunk / web / dojo / dojox / mobile / app / List.js
History | View | Annotate | Download (7.92 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.List"]){ |
||
| 9 | dojo._hasResource["dojox.mobile.app.List"]=true; |
||
| 10 | dojo.provide("dojox.mobile.app.List");
|
||
| 11 | dojo.experimental("dojox.mobile.app.List");
|
||
| 12 | dojo.require("dojo.string");
|
||
| 13 | dojo.require("dijit._Widget");
|
||
| 14 | (function(){
|
||
| 15 | var _1={};
|
||
| 16 | dojo.declare("dojox.mobile.app.List",dijit._Widget,{items:null,itemTemplate:"",emptyTemplate:"",labelDelete:"Delete",labelCancel:"Cancel",controller:null,autoDelete:true,enableDelete:true,_templateLoadCount:0,_mouseDownPos:null,constructor:function(){ |
||
| 17 | this._checkLoadComplete=dojo.hitch(this,this._checkLoadComplete); |
||
| 18 | this._replaceToken=dojo.hitch(this,this._replaceToken); |
||
| 19 | this._postDeleteAnim=dojo.hitch(this,this._postDeleteAnim); |
||
| 20 | },postCreate:function(){ |
||
| 21 | var _2=this; |
||
| 22 | if(this.emptyTemplate){ |
||
| 23 | this._templateLoadCount++;
|
||
| 24 | } |
||
| 25 | if(this.itemTemplate){ |
||
| 26 | this._templateLoadCount++;
|
||
| 27 | } |
||
| 28 | dojo.addClass(this.domNode,"list"); |
||
| 29 | var _3;
|
||
| 30 | this.connect(this.domNode,"onmousedown",function(_4){ |
||
| 31 | var _5=_4;
|
||
| 32 | if(_4.targetTouches&&_4.targetTouches.length>0){ |
||
| 33 | _5=_4.targetTouches[0];
|
||
| 34 | } |
||
| 35 | var _6=_2._getRowNode(_4.target);
|
||
| 36 | if(_6){
|
||
| 37 | _2._setDataInfo(_6,_4); |
||
| 38 | _2._selectRow(_6); |
||
| 39 | _2._mouseDownPos={x:_5.pageX,y:_5.pageY};
|
||
| 40 | _2._dragThreshold=null;
|
||
| 41 | }else{
|
||
| 42 | } |
||
| 43 | }); |
||
| 44 | this.connect(this.domNode,"onmouseup",function(_7){ |
||
| 45 | if(_7.targetTouches&&_7.targetTouches.length>0){ |
||
| 46 | _7=_7.targetTouches[0];
|
||
| 47 | } |
||
| 48 | var _8=_2._getRowNode(_7.target);
|
||
| 49 | if(_8){
|
||
| 50 | _2._setDataInfo(_8,_7); |
||
| 51 | if(_2._selectedRow){
|
||
| 52 | _2.onSelect(_8._data,_8._idx,_8); |
||
| 53 | } |
||
| 54 | this._deselectRow();
|
||
| 55 | } |
||
| 56 | }); |
||
| 57 | if(this.enableDelete){ |
||
| 58 | this.connect(this.domNode,"mousemove",function(_9){ |
||
| 59 | dojo.stopEvent(_9); |
||
| 60 | if(!_2._selectedRow){
|
||
| 61 | return;
|
||
| 62 | } |
||
| 63 | var _a=_2._getRowNode(_9.target);
|
||
| 64 | if(_2.enableDelete&&_a&&!_2._deleting){
|
||
| 65 | _2.handleDrag(_9); |
||
| 66 | } |
||
| 67 | }); |
||
| 68 | } |
||
| 69 | this.connect(this.domNode,"onclick",function(_b){ |
||
| 70 | if(_b.touches&&_b.touches.length>0){ |
||
| 71 | _b=_b.touches[0];
|
||
| 72 | } |
||
| 73 | var _c=_2._getRowNode(_b.target,true); |
||
| 74 | if(_c){
|
||
| 75 | _2._setDataInfo(_c,_b); |
||
| 76 | } |
||
| 77 | }); |
||
| 78 | this.connect(this.domNode,"mouseout",function(_d){ |
||
| 79 | if(_d.touches&&_d.touches.length>0){ |
||
| 80 | _d=_d.touches[0];
|
||
| 81 | } |
||
| 82 | if(_d.target==_2._selectedRow){
|
||
| 83 | _2._deselectRow(); |
||
| 84 | } |
||
| 85 | }); |
||
| 86 | if(!this.itemTemplate){ |
||
| 87 | throw Error("An item template must be provided to "+this.declaredClass); |
||
| 88 | } |
||
| 89 | this._loadTemplate(this.itemTemplate,"itemTemplate",this._checkLoadComplete); |
||
| 90 | if(this.emptyTemplate){ |
||
| 91 | this._loadTemplate(this.emptyTemplate,"emptyTemplate",this._checkLoadComplete); |
||
| 92 | } |
||
| 93 | },handleDrag:function(_e){ |
||
| 94 | var _f=_e;
|
||
| 95 | if(_e.targetTouches&&_e.targetTouches.length>0){ |
||
| 96 | _f=_e.targetTouches[0];
|
||
| 97 | } |
||
| 98 | var _10=_f.pageX-this._mouseDownPos.x; |
||
| 99 | var _11=Math.abs(_10);
|
||
| 100 | if(_11>10&&!this._dragThreshold){ |
||
| 101 | this._dragThreshold=dojo.marginBox(this._selectedRow).w*0.6; |
||
| 102 | if(!this.autoDelete){ |
||
| 103 | this.createDeleteButtons(this._selectedRow); |
||
| 104 | } |
||
| 105 | } |
||
| 106 | this._selectedRow.style.left=(_11>10?_10:0)+"px"; |
||
| 107 | if(this._dragThreshold&&this._dragThreshold<_11){ |
||
| 108 | this.preDelete(_10);
|
||
| 109 | } |
||
| 110 | },handleDragCancel:function(){ |
||
| 111 | if(this._deleting){ |
||
| 112 | return;
|
||
| 113 | } |
||
| 114 | dojo.removeClass(this._selectedRow,"hold"); |
||
| 115 | this._selectedRow.style.left=0; |
||
| 116 | this._mouseDownPos=null; |
||
| 117 | this._dragThreshold=null; |
||
| 118 | this._deleteBtns&&dojo.style(this._deleteBtns,"display","none"); |
||
| 119 | },preDelete:function(_12){ |
||
| 120 | var _13=this; |
||
| 121 | this._deleting=true; |
||
| 122 | dojo.animateProperty({node:this._selectedRow,duration:400,properties:{left:{end:_12+((_12>0?1:-1)*this._dragThreshold*0.8)}},onEnd:dojo.hitch(this,function(){
|
||
| 123 | if(this.autoDelete){ |
||
| 124 | this.deleteRow(this._selectedRow); |
||
| 125 | } |
||
| 126 | })}).play(); |
||
| 127 | },deleteRow:function(row){ |
||
| 128 | dojo.style(row,{visibility:"hidden",minHeight:"0px"});
|
||
| 129 | dojo.removeClass(row,"hold");
|
||
| 130 | this._deleteAnimConn=this.connect(row,"webkitAnimationEnd",this._postDeleteAnim); |
||
| 131 | dojo.addClass(row,"collapsed");
|
||
| 132 | },_postDeleteAnim:function(_14){ |
||
| 133 | if(this._deleteAnimConn){ |
||
| 134 | this.disconnect(this._deleteAnimConn); |
||
| 135 | this._deleteAnimConn=null; |
||
| 136 | } |
||
| 137 | var row=this._selectedRow; |
||
| 138 | var _15=row.nextSibling;
|
||
| 139 | row.parentNode.removeChild(row); |
||
| 140 | this.onDelete(row._data,row._idx,this.items); |
||
| 141 | while(_15){
|
||
| 142 | if(_15._idx){
|
||
| 143 | _15._idx--; |
||
| 144 | } |
||
| 145 | _15=_15.nextSibling; |
||
| 146 | } |
||
| 147 | dojo.destroy(row); |
||
| 148 | dojo.query("> *:not(.buttons)",this.domNode).forEach(this.applyClass); |
||
| 149 | this._deleting=false; |
||
| 150 | this._deselectRow();
|
||
| 151 | },createDeleteButtons:function(_16){ |
||
| 152 | var mb=dojo.marginBox(_16);
|
||
| 153 | var pos=dojo._abs(_16,true); |
||
| 154 | if(!this._deleteBtns){ |
||
| 155 | this._deleteBtns=dojo.create("div",{"class":"buttons"},this.domNode); |
||
| 156 | this.buttons=[];
|
||
| 157 | this.buttons.push(new dojox.mobile.Button({btnClass:"mblRedButton",label:this.labelDelete})); |
||
| 158 | this.buttons.push(new dojox.mobile.Button({btnClass:"mblBlueButton",label:this.labelCancel})); |
||
| 159 | dojo.place(this.buttons[0].domNode,this._deleteBtns); |
||
| 160 | dojo.place(this.buttons[1].domNode,this._deleteBtns); |
||
| 161 | dojo.addClass(this.buttons[0].domNode,"deleteBtn"); |
||
| 162 | dojo.addClass(this.buttons[1].domNode,"cancelBtn"); |
||
| 163 | this._handleButtonClick=dojo.hitch(this._handleButtonClick); |
||
| 164 | this.connect(this._deleteBtns,"onclick",this._handleButtonClick); |
||
| 165 | } |
||
| 166 | dojo.removeClass(this._deleteBtns,"fade out fast"); |
||
| 167 | dojo.style(this._deleteBtns,{display:"",width:mb.w+"px",height:mb.h+"px",top:(_16.offsetTop)+"px",left:"0px"}); |
||
| 168 | },onDelete:function(_17,_18,_19){ |
||
| 169 | _19.splice(_18,1);
|
||
| 170 | if(_19.length<1){ |
||
| 171 | this.render();
|
||
| 172 | } |
||
| 173 | },cancelDelete:function(){ |
||
| 174 | this._deleting=false; |
||
| 175 | this.handleDragCancel();
|
||
| 176 | },_handleButtonClick:function(_1a){ |
||
| 177 | if(_1a.touches&&_1a.touches.length>0){ |
||
| 178 | _1a=_1a.touches[0];
|
||
| 179 | } |
||
| 180 | var _1b=_1a.target;
|
||
| 181 | if(dojo.hasClass(_1b,"deleteBtn")){ |
||
| 182 | this.deleteRow(this._selectedRow); |
||
| 183 | }else{
|
||
| 184 | if(dojo.hasClass(_1b,"cancelBtn")){ |
||
| 185 | this.cancelDelete();
|
||
| 186 | }else{
|
||
| 187 | return;
|
||
| 188 | } |
||
| 189 | } |
||
| 190 | dojo.addClass(this._deleteBtns,"fade out"); |
||
| 191 | },applyClass:function(_1c,idx,_1d){ |
||
| 192 | dojo.removeClass(_1c,"first last");
|
||
| 193 | if(idx==0){ |
||
| 194 | dojo.addClass(_1c,"first");
|
||
| 195 | } |
||
| 196 | if(idx==_1d.length-1){ |
||
| 197 | dojo.addClass(_1c,"last");
|
||
| 198 | } |
||
| 199 | },_setDataInfo:function(_1e,_1f){ |
||
| 200 | _1f.item=_1e._data; |
||
| 201 | _1f.index=_1e._idx; |
||
| 202 | },onSelect:function(_20,_21,_22){ |
||
| 203 | },_selectRow:function(row){ |
||
| 204 | if(this._deleting&&this._selectedRow&&row!=this._selectedRow){ |
||
| 205 | this.cancelDelete();
|
||
| 206 | } |
||
| 207 | if(!dojo.hasClass(row,"row")){ |
||
| 208 | return;
|
||
| 209 | } |
||
| 210 | dojo.addClass(row,"hold");
|
||
| 211 | this._selectedRow=row;
|
||
| 212 | },_deselectRow:function(){ |
||
| 213 | if(!this._selectedRow||this._deleting){ |
||
| 214 | return;
|
||
| 215 | } |
||
| 216 | this.handleDragCancel();
|
||
| 217 | dojo.removeClass(this._selectedRow,"hold"); |
||
| 218 | this._selectedRow=null; |
||
| 219 | },_getRowNode:function(_23,_24){ |
||
| 220 | while(_23&&!_23._data&&_23!=this.domNode){ |
||
| 221 | if(!_24&&dojo.hasClass(_23,"noclick")){ |
||
| 222 | return null; |
||
| 223 | } |
||
| 224 | _23=_23.parentNode; |
||
| 225 | } |
||
| 226 | return _23;
|
||
| 227 | },render:function(){ |
||
| 228 | dojo.query("> *:not(.buttons)",this.domNode).forEach(dojo.destroy); |
||
| 229 | var _25=[];
|
||
| 230 | var row,i;
|
||
| 231 | dojo.addClass(this.domNode,"list"); |
||
| 232 | for(i=0;i<this.items.length;i++){ |
||
| 233 | row=dojo._toDom(dojo.string.substitute(this.itemTemplate,this.items[i],this._replaceToken,this)); |
||
| 234 | _25.push(row); |
||
| 235 | } |
||
| 236 | for(i=0;i<this.items.length;i++){ |
||
| 237 | _25[i]._data=this.items[i];
|
||
| 238 | _25[i]._idx=i; |
||
| 239 | this.domNode.appendChild(_25[i]);
|
||
| 240 | } |
||
| 241 | if(this.items.length<1&&this.emptyTemplate){ |
||
| 242 | dojo.place(dojo._toDom(this.emptyTemplate),this.domNode,"first"); |
||
| 243 | } |
||
| 244 | if(dojo.hasClass(this.domNode.parentNode,"mblRoundRect")){ |
||
| 245 | dojo.addClass(this.domNode.parentNode,"mblRoundRectList"); |
||
| 246 | } |
||
| 247 | var _26=dojo.query("> div:not(.buttons)",this.domNode); |
||
| 248 | _26.addClass("row");
|
||
| 249 | if(_26.length>0){ |
||
| 250 | dojo.addClass(_26[0],"first"); |
||
| 251 | dojo.addClass(_26[_26.length-1],"last"); |
||
| 252 | } |
||
| 253 | },_replaceToken:function(_27,key){ |
||
| 254 | if(key.charAt(0)=="!"){ |
||
| 255 | _27=dojo.getObject(key.substr(1),false,_this); |
||
| 256 | } |
||
| 257 | if(typeof _27=="undefined"){ |
||
| 258 | return ""; |
||
| 259 | } |
||
| 260 | if(_27==null){ |
||
| 261 | return ""; |
||
| 262 | } |
||
| 263 | return key.charAt(0)=="!"?_27:_27.toString().replace(/"/g,"""); |
||
| 264 | },_checkLoadComplete:function(){ |
||
| 265 | this._templateLoadCount--;
|
||
| 266 | if(this._templateLoadCount<1&&this.get("items")){ |
||
| 267 | this.render();
|
||
| 268 | } |
||
| 269 | },_loadTemplate:function(url,_28,_29){ |
||
| 270 | if(!url){
|
||
| 271 | _29(); |
||
| 272 | return;
|
||
| 273 | } |
||
| 274 | if(_1[url]){
|
||
| 275 | this.set(_28,_1[url]);
|
||
| 276 | _29(); |
||
| 277 | }else{
|
||
| 278 | var _2a=this; |
||
| 279 | dojo.xhrGet({url:url,sync:false,handleAs:"text",load:function(_2b){
|
||
| 280 | _1[url]=dojo.trim(_2b); |
||
| 281 | _2a.set(_28,_1[url]); |
||
| 282 | _29(); |
||
| 283 | }}); |
||
| 284 | } |
||
| 285 | },_setItemsAttr:function(_2c){ |
||
| 286 | this.items=_2c||[];
|
||
| 287 | if(this._templateLoadCount<1&&_2c){ |
||
| 288 | this.render();
|
||
| 289 | } |
||
| 290 | },destroy:function(){ |
||
| 291 | if(this.buttons){ |
||
| 292 | dojo.forEach(this.buttons,function(_2d){ |
||
| 293 | _2d.destroy(); |
||
| 294 | }); |
||
| 295 | this.buttons=null; |
||
| 296 | } |
||
| 297 | this.inherited(arguments); |
||
| 298 | }}); |
||
| 299 | })(); |
||
| 300 | } |