root / trunk / web / dojo / dojox / form / ListInput.js
History | View | Annotate | Download (13.7 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.form.ListInput"]){ |
9 |
dojo._hasResource["dojox.form.ListInput"]=true; |
10 |
dojo.experimental("dojox.form.ListInput");
|
11 |
dojo.provide("dojox.form.ListInput");
|
12 |
dojo.require("dijit.form._FormWidget");
|
13 |
dojo.require("dijit.form.ValidationTextBox");
|
14 |
dojo.require("dijit.InlineEditBox");
|
15 |
dojo.requireLocalization("dijit","common",null,"ROOT,ar,ca,cs,da,de,el,es,fi,fr,he,hu,it,ja,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw"); |
16 |
dojo.declare("dojox.form.ListInput",[dijit.form._FormValueWidget],{constructor:function(){ |
17 |
this._items=[];
|
18 |
if(!dojo.isArray(this.delimiter)){ |
19 |
this.delimiter=[this.delimiter]; |
20 |
} |
21 |
var r="("+this.delimiter.join("|")+")?"; |
22 |
this.regExp="^"+this.regExp+r+"$"; |
23 |
},inputClass:"dojox.form._ListInputInputBox",inputHandler:"onChange",inputProperties:{minWidth:50},submitOnlyValidValue:true,useOnBlur:true,readOnlyInput:false,maxItems:null,showCloseButtonWhenValid:true,showCloseButtonWhenInvalid:true,regExp:".*",delimiter:",",constraints:{},baseClass:"dojoxListInput",type:"select",value:"",templateString:"<div dojoAttachPoint=\"focusNode\" class=\"dijit dijitReset dijitLeft dojoxListInput\"><select dojoAttachpoint=\"_selectNode\" multiple=\"multiple\" class=\"dijitHidden\" ${!nameAttrSetting}></select><ul dojoAttachPoint=\"_listInput\"><li dojoAttachEvent=\"onclick: _onClick\" class=\"dijitInputField dojoxListInputNode dijitHidden\" dojoAttachPoint=\"_inputNode\"></li></ul></div>",useAnim:true,duration:500,easingIn:null,easingOut:null,readOnlyItem:false,useArrowForEdit:true,_items:null,_lastAddedItem:null,_currentItem:null,_input:null,_count:0,postCreate:function(){ |
24 |
this.inherited(arguments); |
25 |
this._createInputBox();
|
26 |
},_setReadOnlyInputAttr:function(_1){ |
27 |
console.warn("_setReadOnlyInputAttr",this.id,_1); |
28 |
if(!this._started){ |
29 |
return this._createInputBox(); |
30 |
} |
31 |
this.readOnlyInput=_1;
|
32 |
this._createInputBox();
|
33 |
},_setReadOnlyItemAttr:function(_2){ |
34 |
if(!this._started){ |
35 |
return;
|
36 |
} |
37 |
for(var i in this._items){ |
38 |
this._items[i].attr("readOnlyItem",_2); |
39 |
} |
40 |
},_createInputBox:function(){ |
41 |
console.warn("_createInputBox",this.id,this.readOnlyInput); |
42 |
dojo[(this.readOnlyInput?"add":"remove")+"Class"](this._inputNode,"dijitHidden"); |
43 |
if(this.readOnlyInput){ |
44 |
return;
|
45 |
} |
46 |
if(this._input){ |
47 |
return;
|
48 |
} |
49 |
if(this.inputHandler===null){ |
50 |
return !console.warn("you must add some handler to connect to input field"); |
51 |
} |
52 |
if(dojo.isString(this.inputHandler)){ |
53 |
this.inputHandler=this.inputHandler.split(","); |
54 |
} |
55 |
if(dojo.isString(this.inputProperties)){ |
56 |
this.inputProperties=dojo.fromJson(this.inputProperties); |
57 |
} |
58 |
var _3=dojo.getObject(this.inputClass,false); |
59 |
this.inputProperties.regExp=this.regExpGen(this.constraints); |
60 |
this._input=new _3(this.inputProperties); |
61 |
this._input.startup();
|
62 |
this._inputNode.appendChild(this._input.domNode); |
63 |
dojo.forEach(this.inputHandler,function(_4){ |
64 |
this.connect(this._input,dojo.string.trim(_4),"_onHandler"); |
65 |
},this);
|
66 |
this.connect(this._input,"onKeyDown","_inputOnKeyDown"); |
67 |
this.connect(this._input,"onBlur","_inputOnBlur"); |
68 |
},compare:function(_5,_6){ |
69 |
_5=_5.join(",");
|
70 |
_6=_6.join(",");
|
71 |
if(_5>_6){
|
72 |
return 1; |
73 |
}else{
|
74 |
if(_5<_6){
|
75 |
return -1; |
76 |
}else{
|
77 |
return 0; |
78 |
} |
79 |
} |
80 |
},add:function(_7){ |
81 |
if(this._count>=this.maxItems&&this.maxItems!==null){ |
82 |
return;
|
83 |
} |
84 |
this._lastValueReported=this._getValues(); |
85 |
if(!dojo.isArray(_7)){
|
86 |
_7=[_7]; |
87 |
} |
88 |
for(var i in _7){ |
89 |
var _8=_7[i];
|
90 |
if(_8===""||typeof _8!="string"){ |
91 |
continue;
|
92 |
} |
93 |
this._count++;
|
94 |
var re=new RegExp(this.regExpGen(this.constraints)); |
95 |
this._lastAddedItem=new dojox.form._ListInputInputItem({"index":this._items.length,readOnlyItem:this.readOnlyItem,value:_8,regExp:this.regExpGen(this.constraints)}); |
96 |
this._lastAddedItem.startup();
|
97 |
this._testItem(this._lastAddedItem,_8); |
98 |
this._lastAddedItem.onClose=dojo.hitch(this,"_onItemClose",this._lastAddedItem); |
99 |
this._lastAddedItem.onChange=dojo.hitch(this,"_onItemChange",this._lastAddedItem); |
100 |
this._lastAddedItem.onEdit=dojo.hitch(this,"_onItemEdit",this._lastAddedItem); |
101 |
this._lastAddedItem.onKeyDown=dojo.hitch(this,"_onItemKeyDown",this._lastAddedItem); |
102 |
if(this.useAnim){ |
103 |
dojo.style(this._lastAddedItem.domNode,{opacity:0,display:""}); |
104 |
} |
105 |
this._placeItem(this._lastAddedItem.domNode); |
106 |
if(this.useAnim){ |
107 |
var _9=dojo.fadeIn({node:this._lastAddedItem.domNode,duration:this.duration,easing:this.easingIn}).play(); |
108 |
} |
109 |
this._items[this._lastAddedItem.index]=this._lastAddedItem; |
110 |
if(this._onChangeActive&&this.intermediateChanges){ |
111 |
this.onChange(_8);
|
112 |
} |
113 |
if(this._count>=this.maxItems&&this.maxItems!==null){ |
114 |
break;
|
115 |
} |
116 |
} |
117 |
this._updateValues();
|
118 |
if(this._lastValueReported.length==0){ |
119 |
this._lastValueReported=this.value; |
120 |
} |
121 |
if(!this.readOnlyInput){ |
122 |
this._input.attr("value",""); |
123 |
} |
124 |
if(this._onChangeActive){ |
125 |
this.onChange(this.value); |
126 |
} |
127 |
this._setReadOnlyWhenMaxItemsReached();
|
128 |
},_setReadOnlyWhenMaxItemsReached:function(){ |
129 |
this.set("readOnlyInput",(this._count>=this.maxItems&&this.maxItems!==null)); |
130 |
},_setSelectNode:function(){ |
131 |
this._selectNode.options.length=0; |
132 |
var _a=this.submitOnlyValidValue?this.get("MatchedValue"):this.value; |
133 |
if(!dojo.isArray(_a)){
|
134 |
return;
|
135 |
} |
136 |
dojo.forEach(_a,function(_b){
|
137 |
this._selectNode.options[this._selectNode.options.length]=new Option(_b,_b,true,true); |
138 |
},this);
|
139 |
},_placeItem:function(_c){ |
140 |
dojo.place(_c,this._inputNode,"before"); |
141 |
},_getCursorPos:function(_d){ |
142 |
if(typeof _d.selectionStart!="undefined"){ |
143 |
return _d.selectionStart;
|
144 |
} |
145 |
try{
|
146 |
_d.focus(); |
147 |
} |
148 |
catch(e){
|
149 |
} |
150 |
var _e=_d.createTextRange();
|
151 |
_e.moveToBookmark(dojo.doc.selection.createRange().getBookmark()); |
152 |
_e.moveEnd("character",_d.value.length);
|
153 |
try{
|
154 |
return _d.value.length-_e.text.length;
|
155 |
} |
156 |
finally{
|
157 |
_e=null;
|
158 |
} |
159 |
},_onItemClose:function(_f){ |
160 |
if(this.disabled){ |
161 |
return;
|
162 |
} |
163 |
if(this.useAnim){ |
164 |
var _10=dojo.fadeOut({node:_f.domNode,duration:this.duration,easing:this.easingOut,onEnd:dojo.hitch(this,"_destroyItem",_f)}).play(); |
165 |
}else{
|
166 |
this._destroyItem(_f);
|
167 |
} |
168 |
},_onItemKeyDown:function(_11,e){ |
169 |
if(this.readOnlyItem||!this.useArrowForEdit){ |
170 |
return;
|
171 |
} |
172 |
if(e.keyCode==dojo.keys.LEFT_ARROW&&this._getCursorPos(e.target)==0){ |
173 |
this._editBefore(_11);
|
174 |
}else{
|
175 |
if(e.keyCode==dojo.keys.RIGHT_ARROW&&this._getCursorPos(e.target)==e.target.value.length){ |
176 |
this._editAfter(_11);
|
177 |
} |
178 |
} |
179 |
},_editBefore:function(_12){ |
180 |
this._currentItem=this._getPreviousItem(_12); |
181 |
if(this._currentItem!==null){ |
182 |
this._currentItem.edit();
|
183 |
} |
184 |
},_editAfter:function(_13){ |
185 |
this._currentItem=this._getNextItem(_13); |
186 |
if(this._currentItem!==null){ |
187 |
this._currentItem.edit();
|
188 |
} |
189 |
if(!this.readOnlyInput){ |
190 |
if(this._currentItem===null){ |
191 |
this._focusInput();
|
192 |
} |
193 |
} |
194 |
},_onItemChange:function(_14,_15){ |
195 |
if(!_15){
|
196 |
_15=_14.attr("value");
|
197 |
} |
198 |
this._testItem(_14,_15);
|
199 |
this._updateValues();
|
200 |
},_onItemEdit:function(_16){ |
201 |
dojo.removeClass(_16.domNode,"dijitError");
|
202 |
dojo.removeClass(_16.domNode,this.baseClass+"Match"); |
203 |
dojo.removeClass(_16.domNode,this.baseClass+"Mismatch"); |
204 |
},_testItem:function(_17,_18){ |
205 |
var re=new RegExp(this.regExpGen(this.constraints)); |
206 |
var _19=_18.match(re);
|
207 |
dojo.removeClass(_17.domNode,this.baseClass+(!_19?"Match":"Mismatch")); |
208 |
dojo.addClass(_17.domNode,this.baseClass+(_19?"Match":"Mismatch")); |
209 |
dojo[(!_19?"add":"remove")+"Class"](_17.domNode,"dijitError"); |
210 |
if((this.showCloseButtonWhenValid&&_19)||(this.showCloseButtonWhenInvalid&&!_19)){ |
211 |
dojo.addClass(_17.domNode,this.baseClass+"Closable"); |
212 |
}else{
|
213 |
dojo.removeClass(_17.domNode,this.baseClass+"Closable"); |
214 |
} |
215 |
},_getValueAttr:function(){ |
216 |
return this.value; |
217 |
},_setValueAttr:function(_1a){ |
218 |
this._destroyAllItems();
|
219 |
this.add(this._parseValue(_1a)); |
220 |
},_parseValue:function(_1b){ |
221 |
if(typeof _1b=="string"){ |
222 |
if(dojo.isString(this.delimiter)){ |
223 |
this.delimiter=[this.delimiter]; |
224 |
} |
225 |
var re=new RegExp("^.*("+this.delimiter.join("|")+").*"); |
226 |
if(_1b.match(re)){
|
227 |
re=new RegExp(this.delimiter.join("|")); |
228 |
return _1b.split(re);
|
229 |
} |
230 |
} |
231 |
return _1b;
|
232 |
},regExpGen:function(_1c){ |
233 |
return this.regExp; |
234 |
},_setDisabledAttr:function(_1d){ |
235 |
if(!this.readOnlyItem){ |
236 |
for(var i in this._items){ |
237 |
this._items[i].attr("disabled",_1d); |
238 |
} |
239 |
} |
240 |
if(!this.readOnlyInput){ |
241 |
this._input.attr("disabled",_1d); |
242 |
} |
243 |
this.inherited(arguments); |
244 |
},_onHandler:function(_1e){ |
245 |
var _1f=this._parseValue(_1e); |
246 |
if(dojo.isArray(_1f)){
|
247 |
this.add(_1f);
|
248 |
} |
249 |
},_onClick:function(e){ |
250 |
this._focusInput();
|
251 |
},_focusInput:function(){ |
252 |
if(!this.readOnlyInput&&this._input.focus){ |
253 |
this._input.focus();
|
254 |
} |
255 |
},_inputOnKeyDown:function(e){ |
256 |
this._currentItem=null; |
257 |
if(e.keyCode==dojo.keys.BACKSPACE&&this._input.attr("value")==""&&this.get("lastItem")){ |
258 |
this._destroyItem(this.get("lastItem")); |
259 |
}else{
|
260 |
if(e.keyCode==dojo.keys.ENTER&&this._input.attr("value")!=""){ |
261 |
this.add(this._input.attr("value")); |
262 |
}else{
|
263 |
if(e.keyCode==dojo.keys.LEFT_ARROW&&this._getCursorPos(this._input.focusNode)==0&&!this.readOnlyItem&&this.useArrowForEdit){ |
264 |
this._editBefore();
|
265 |
} |
266 |
} |
267 |
} |
268 |
},_inputOnBlur:function(){ |
269 |
if(this.useOnBlur&&this._input.attr("value")!=""){ |
270 |
this.add(this._input.attr("value")); |
271 |
} |
272 |
},_getMatchedValueAttr:function(){ |
273 |
return this._getValues(dojo.hitch(this,this._matchValidator)); |
274 |
},_getMismatchedValueAttr:function(){ |
275 |
return this._getValues(dojo.hitch(this,this._mismatchValidator)); |
276 |
},_getValues:function(_20){ |
277 |
var _21=[];
|
278 |
_20=_20||this._nullValidator;
|
279 |
for(var i in this._items){ |
280 |
var _22=this._items[i]; |
281 |
if(_22===null){ |
282 |
continue;
|
283 |
} |
284 |
var _23=_22.attr("value"); |
285 |
if(_20(_23)){
|
286 |
_21.push(_23); |
287 |
} |
288 |
} |
289 |
return _21;
|
290 |
},_nullValidator:function(_24){ |
291 |
return true; |
292 |
},_matchValidator:function(_25){ |
293 |
var re=new RegExp(this.regExpGen(this.constraints)); |
294 |
return _25.match(re);
|
295 |
},_mismatchValidator:function(_26){ |
296 |
var re=new RegExp(this.regExpGen(this.constraints)); |
297 |
return !(_26.match(re));
|
298 |
},_getLastItemAttr:function(){ |
299 |
return this._getSomeItem(); |
300 |
},_getSomeItem:function(_27,_28){ |
301 |
_27=_27||false;
|
302 |
_28=_28||"last";
|
303 |
var _29=null; |
304 |
var _2a=-1; |
305 |
for(var i in this._items){ |
306 |
if(this._items[i]===null){ |
307 |
continue;
|
308 |
} |
309 |
if(_28=="before"&&this._items[i]===_27){ |
310 |
break;
|
311 |
} |
312 |
_29=this._items[i];
|
313 |
if(_28=="first"||_2a==0){ |
314 |
_2a=1;
|
315 |
break;
|
316 |
} |
317 |
if(_28=="after"&&this._items[i]===_27){ |
318 |
_2a=0;
|
319 |
} |
320 |
} |
321 |
if(_28=="after"&&_2a==0){ |
322 |
_29=null;
|
323 |
} |
324 |
return _29;
|
325 |
},_getPreviousItem:function(_2b){ |
326 |
return this._getSomeItem(_2b,"before"); |
327 |
},_getNextItem:function(_2c){ |
328 |
return this._getSomeItem(_2c,"after"); |
329 |
},_destroyItem:function(_2d,_2e){ |
330 |
this._items[_2d.index]=null; |
331 |
_2d.destroy(); |
332 |
this._count--;
|
333 |
if(_2e!==false){ |
334 |
this._updateValues();
|
335 |
this._setReadOnlyWhenMaxItemsReached();
|
336 |
} |
337 |
},_updateValues:function(){ |
338 |
this.value=this._getValues(); |
339 |
this._setSelectNode();
|
340 |
},_destroyAllItems:function(){ |
341 |
for(var i in this._items){ |
342 |
if(this._items[i]==null){ |
343 |
continue;
|
344 |
} |
345 |
this._destroyItem(this._items[i],false); |
346 |
} |
347 |
this._items=[];
|
348 |
this._count=0; |
349 |
this.value=null; |
350 |
this._setSelectNode();
|
351 |
this._setReadOnlyWhenMaxItemsReached();
|
352 |
},destroy:function(){ |
353 |
this._destroyAllItems();
|
354 |
this._lastAddedItem=null; |
355 |
if(!this._input){ |
356 |
this._input.destroy();
|
357 |
} |
358 |
this.inherited(arguments); |
359 |
}}); |
360 |
dojo.declare("dojox.form._ListInputInputItem",[dijit._Widget,dijit._Templated],{templateString:"<li class=\"dijit dijitReset dijitLeft dojoxListInputItem\" dojoAttachEvent=\"onclick: onClick\" ><span dojoAttachPoint=\"labelNode\"></span></li>",closeButtonNode:null,readOnlyItem:true,baseClass:"dojoxListInputItem",value:"",regExp:".*",_editBox:null,_handleKeyDown:null,attributeMap:{value:{node:"labelNode",type:"innerHTML"}},postMixInProperties:function(){ |
361 |
var _2f=dojo.i18n.getLocalization("dijit","common"); |
362 |
dojo.mixin(this,_2f);
|
363 |
this.inherited(arguments); |
364 |
},postCreate:function(){ |
365 |
this.inherited(arguments); |
366 |
this.closeButtonNode=dojo.create("span",{"class":"dijitButtonNode dijitDialogCloseIcon",title:this.itemClose,onclick:dojo.hitch(this,"onClose"),onmouseenter:dojo.hitch(this,"_onCloseEnter"),onmouseleave:dojo.hitch(this,"_onCloseLeave")},this.domNode); |
367 |
dojo.create("span",{"class":"closeText",title:this.itemClose,innerHTML:"x"},this.closeButtonNode); |
368 |
},startup:function(){ |
369 |
this.inherited(arguments); |
370 |
this._createInlineEditBox();
|
371 |
},_setReadOnlyItemAttr:function(_30){ |
372 |
this.readOnlyItem=_30;
|
373 |
if(!_30){
|
374 |
this._createInlineEditBox();
|
375 |
}else{
|
376 |
if(this._editBox){ |
377 |
this._editBox.attr("disabled",true); |
378 |
} |
379 |
} |
380 |
},_createInlineEditBox:function(){ |
381 |
if(this.readOnlyItem){ |
382 |
return;
|
383 |
} |
384 |
if(!this._started){ |
385 |
return;
|
386 |
} |
387 |
if(this._editBox){ |
388 |
this._editBox.attr("disabled",false); |
389 |
return;
|
390 |
} |
391 |
this._editBox=new dijit.InlineEditBox({value:this.value,editor:"dijit.form.ValidationTextBox",editorParams:{regExp:this.regExp}},this.labelNode); |
392 |
this.connect(this._editBox,"edit","_onEdit"); |
393 |
this.connect(this._editBox,"onChange","_onCloseEdit"); |
394 |
this.connect(this._editBox,"onCancel","_onCloseEdit"); |
395 |
},edit:function(){ |
396 |
if(!this.readOnlyItem){ |
397 |
this._editBox.edit();
|
398 |
} |
399 |
},_onCloseEdit:function(_31){ |
400 |
dojo.removeClass(this.closeButtonNode,this.baseClass+"Edited"); |
401 |
dojo.disconnect(this._handleKeyDown);
|
402 |
this.onChange(_31);
|
403 |
},_onEdit:function(){ |
404 |
dojo.addClass(this.closeButtonNode,this.baseClass+"Edited"); |
405 |
this._handleKeyDown=dojo.connect(this._editBox.editWidget,"_onKeyPress",this,"onKeyDown"); |
406 |
this.onEdit();
|
407 |
},_setDisabledAttr:function(_32){ |
408 |
if(!this.readOnlyItem){ |
409 |
this._editBox.attr("disabled",_32); |
410 |
} |
411 |
},_getValueAttr:function(){ |
412 |
return (!this.readOnlyItem&&this._started?this._editBox.attr("value"):this.value); |
413 |
},destroy:function(){ |
414 |
if(this._editBox){ |
415 |
this._editBox.destroy();
|
416 |
} |
417 |
this.inherited(arguments); |
418 |
},_onCloseEnter:function(){ |
419 |
dojo.addClass(this.closeButtonNode,"dijitDialogCloseIcon-hover"); |
420 |
},_onCloseLeave:function(){ |
421 |
dojo.removeClass(this.closeButtonNode,"dijitDialogCloseIcon-hover"); |
422 |
},onClose:function(){ |
423 |
},onEdit:function(){ |
424 |
},onClick:function(){ |
425 |
},onChange:function(_33){ |
426 |
},onKeyDown:function(_34){ |
427 |
}}); |
428 |
dojo.declare("dojox.form._ListInputInputBox",[dijit.form.ValidationTextBox],{minWidth:50,intermediateChanges:true,regExp:".*",_sizer:null,onChange:function(_35){ |
429 |
this.inherited(arguments); |
430 |
if(this._sizer===null){ |
431 |
this._sizer=dojo.create("div",{style:{position:"absolute",left:"-10000px",top:"-10000px"}},dojo.body()); |
432 |
} |
433 |
this._sizer.innerHTML=_35;
|
434 |
var w=dojo.contentBox(this._sizer).w+this.minWidth; |
435 |
dojo.contentBox(this.domNode,{w:w}); |
436 |
},destroy:function(){ |
437 |
dojo.destroy(this._sizer);
|
438 |
this.inherited(arguments); |
439 |
}}); |
440 |
} |