root / trunk / web / dojo / dojox / form / ListInput.js
History | View | Annotate | Download (13.7 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.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 | } |