root / trunk / web / dojo / dijit / InlineEditBox.js
History | View | Annotate | Download (8.88 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["dijit.InlineEditBox"]){ |
||
9 | dojo._hasResource["dijit.InlineEditBox"]=true; |
||
10 | dojo.provide("dijit.InlineEditBox");
|
||
11 | dojo.require("dojo.i18n");
|
||
12 | dojo.require("dijit._Widget");
|
||
13 | dojo.require("dijit._Container");
|
||
14 | dojo.require("dijit.form.Button");
|
||
15 | dojo.require("dijit.form.TextBox");
|
||
16 | 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"); |
||
17 | dojo.declare("dijit.InlineEditBox",dijit._Widget,{editing:false,autoSave:true,buttonSave:"",buttonCancel:"",renderAsHtml:false,editor:"dijit.form.TextBox",editorWrapper:"dijit._InlineEditor",editorParams:{},onChange:function(_1){ |
||
18 | },onCancel:function(){ |
||
19 | },width:"100%",value:"",noValueIndicator:dojo.isIE<=6?"<span style='font-family: wingdings; text-decoration: underline;'> ✍ </span>":"<span style='text-decoration: underline;'> ✍ </span>",constructor:function(){ |
||
20 | this.editorParams={};
|
||
21 | },postMixInProperties:function(){ |
||
22 | this.inherited(arguments); |
||
23 | this.displayNode=this.srcNodeRef; |
||
24 | var _2={ondijitclick:"_onClick",onmouseover:"_onMouseOver",onmouseout:"_onMouseOut",onfocus:"_onMouseOver",onblur:"_onMouseOut"}; |
||
25 | for(var _3 in _2){ |
||
26 | this.connect(this.displayNode,_3,_2[_3]); |
||
27 | } |
||
28 | dijit.setWaiRole(this.displayNode,"button"); |
||
29 | if(!this.displayNode.getAttribute("tabIndex")){ |
||
30 | this.displayNode.setAttribute("tabIndex",0); |
||
31 | } |
||
32 | if(!this.value&&!("value" in this.params)){ |
||
33 | this.value=dojo.trim(this.renderAsHtml?this.displayNode.innerHTML:(this.displayNode.innerText||this.displayNode.textContent||"")); |
||
34 | } |
||
35 | if(!this.value){ |
||
36 | this.displayNode.innerHTML=this.noValueIndicator; |
||
37 | } |
||
38 | dojo.addClass(this.displayNode,"dijitInlineEditBoxDisplayMode"); |
||
39 | },setDisabled:function(_4){ |
||
40 | dojo.deprecated("dijit.InlineEditBox.setDisabled() is deprecated. Use set('disabled', bool) instead.","","2.0"); |
||
41 | this.set("disabled",_4); |
||
42 | },_setDisabledAttr:function(_5){ |
||
43 | this.disabled=_5;
|
||
44 | dijit.setWaiState(this.domNode,"disabled",_5); |
||
45 | if(_5){
|
||
46 | this.displayNode.removeAttribute("tabIndex"); |
||
47 | }else{
|
||
48 | this.displayNode.setAttribute("tabIndex",0); |
||
49 | } |
||
50 | dojo.toggleClass(this.displayNode,"dijitInlineEditBoxDisplayModeDisabled",_5); |
||
51 | },_onMouseOver:function(){ |
||
52 | if(!this.disabled){ |
||
53 | dojo.addClass(this.displayNode,"dijitInlineEditBoxDisplayModeHover"); |
||
54 | } |
||
55 | },_onMouseOut:function(){ |
||
56 | dojo.removeClass(this.displayNode,"dijitInlineEditBoxDisplayModeHover"); |
||
57 | },_onClick:function(e){ |
||
58 | if(this.disabled){ |
||
59 | return;
|
||
60 | } |
||
61 | if(e){
|
||
62 | dojo.stopEvent(e); |
||
63 | } |
||
64 | this._onMouseOut();
|
||
65 | setTimeout(dojo.hitch(this,"edit"),0); |
||
66 | },edit:function(){ |
||
67 | if(this.disabled||this.editing){ |
||
68 | return;
|
||
69 | } |
||
70 | this.editing=true; |
||
71 | this._savedPosition=dojo.style(this.displayNode,"position")||"static"; |
||
72 | this._savedOpacity=dojo.style(this.displayNode,"opacity")||"1"; |
||
73 | this._savedTabIndex=dojo.attr(this.displayNode,"tabIndex")||"0"; |
||
74 | if(this.wrapperWidget){ |
||
75 | var ew=this.wrapperWidget.editWidget; |
||
76 | ew.set("displayedValue" in ew?"displayedValue":"value",this.value); |
||
77 | }else{
|
||
78 | var _6=dojo.create("span",null,this.domNode,"before"); |
||
79 | var _7=dojo.getObject(this.editorWrapper); |
||
80 | this.wrapperWidget=new _7({value:this.value,buttonSave:this.buttonSave,buttonCancel:this.buttonCancel,dir:this.dir,lang:this.lang,tabIndex:this._savedTabIndex,editor:this.editor,inlineEditBox:this,sourceStyle:dojo.getComputedStyle(this.displayNode),save:dojo.hitch(this,"save"),cancel:dojo.hitch(this,"cancel")},_6); |
||
81 | } |
||
82 | var ww=this.wrapperWidget; |
||
83 | if(dojo.isIE){
|
||
84 | dijit.focus(dijit.getFocus()); |
||
85 | } |
||
86 | dojo.style(this.displayNode,{position:"absolute",opacity:"0",display:"none"}); |
||
87 | dojo.style(ww.domNode,{position:this._savedPosition,visibility:"visible",opacity:"1"}); |
||
88 | dojo.attr(this.displayNode,"tabIndex","-1"); |
||
89 | setTimeout(dojo.hitch(this,function(){ |
||
90 | ww.focus(); |
||
91 | ww._resetValue=ww.getValue(); |
||
92 | }),0);
|
||
93 | },_onBlur:function(){ |
||
94 | this.inherited(arguments); |
||
95 | if(!this.editing){ |
||
96 | } |
||
97 | },destroy:function(){ |
||
98 | if(this.wrapperWidget){ |
||
99 | this.wrapperWidget.destroy();
|
||
100 | delete this.wrapperWidget; |
||
101 | } |
||
102 | this.inherited(arguments); |
||
103 | },_showText:function(_8){ |
||
104 | var ww=this.wrapperWidget; |
||
105 | dojo.style(ww.domNode,{position:"absolute",visibility:"hidden",opacity:"0"}); |
||
106 | dojo.style(this.displayNode,{position:this._savedPosition,opacity:this._savedOpacity,display:""}); |
||
107 | dojo.attr(this.displayNode,"tabIndex",this._savedTabIndex); |
||
108 | if(_8){
|
||
109 | dijit.focus(this.displayNode);
|
||
110 | } |
||
111 | },save:function(_9){ |
||
112 | if(this.disabled||!this.editing){ |
||
113 | return;
|
||
114 | } |
||
115 | this.editing=false; |
||
116 | var ww=this.wrapperWidget; |
||
117 | var _a=ww.getValue();
|
||
118 | this.set("value",_a); |
||
119 | setTimeout(dojo.hitch(this,"onChange",_a),0); |
||
120 | this._showText(_9);
|
||
121 | },setValue:function(_b){ |
||
122 | dojo.deprecated("dijit.InlineEditBox.setValue() is deprecated. Use set('value', ...) instead.","","2.0"); |
||
123 | return this.set("value",_b); |
||
124 | },_setValueAttr:function(_c){ |
||
125 | this.value=_c=dojo.trim(_c);
|
||
126 | if(!this.renderAsHtml){ |
||
127 | _c=_c.replace(/&/gm,"&").replace(/</gm,"<").replace(/>/gm,">").replace(/"/gm,""").replace(/\n/g,"<br>"); |
||
128 | } |
||
129 | this.displayNode.innerHTML=_c||this.noValueIndicator; |
||
130 | },getValue:function(){ |
||
131 | dojo.deprecated("dijit.InlineEditBox.getValue() is deprecated. Use get('value') instead.","","2.0"); |
||
132 | return this.get("value"); |
||
133 | },cancel:function(_d){ |
||
134 | if(this.disabled||!this.editing){ |
||
135 | return;
|
||
136 | } |
||
137 | this.editing=false; |
||
138 | setTimeout(dojo.hitch(this,"onCancel"),0); |
||
139 | this._showText(_d);
|
||
140 | }}); |
||
141 | dojo.declare("dijit._InlineEditor",[dijit._Widget,dijit._Templated],{templateString:dojo.cache("dijit","templates/InlineEditBox.html","<span dojoAttachPoint=\"editNode\" waiRole=\"presentation\" style=\"position: absolute; visibility:hidden\" class=\"dijitReset dijitInline\"\n\tdojoAttachEvent=\"onkeypress: _onKeyPress\"\n\t><span dojoAttachPoint=\"editorPlaceholder\"></span\n\t><span dojoAttachPoint=\"buttonContainer\"\n\t\t><button class='saveButton' dojoAttachPoint=\"saveButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:save\" label=\"${buttonSave}\"></button\n\t\t><button class='cancelButton' dojoAttachPoint=\"cancelButton\" dojoType=\"dijit.form.Button\" dojoAttachEvent=\"onClick:cancel\" label=\"${buttonCancel}\"></button\n\t></span\n></span>\n"),widgetsInTemplate:true,postMixInProperties:function(){ |
||
142 | this.inherited(arguments); |
||
143 | this.messages=dojo.i18n.getLocalization("dijit","common",this.lang); |
||
144 | dojo.forEach(["buttonSave","buttonCancel"],function(_e){ |
||
145 | if(!this[_e]){ |
||
146 | this[_e]=this.messages[_e]; |
||
147 | } |
||
148 | },this);
|
||
149 | },postCreate:function(){ |
||
150 | var _f=dojo.getObject(this.editor); |
||
151 | var _10=this.sourceStyle,_11="line-height:"+_10.lineHeight+";",_12=dojo.getComputedStyle(this.domNode); |
||
152 | dojo.forEach(["Weight","Family","Size","Style"],function(_13){ |
||
153 | var _14=_10["font"+_13],_15=_12["font"+_13]; |
||
154 | if(_15!=_14){
|
||
155 | _11+="font-"+_13+":"+_10["font"+_13]+";"; |
||
156 | } |
||
157 | },this);
|
||
158 | dojo.forEach(["marginTop","marginBottom","marginLeft","marginRight"],function(_16){ |
||
159 | this.domNode.style[_16]=_10[_16];
|
||
160 | },this);
|
||
161 | var _17=this.inlineEditBox.width; |
||
162 | if(_17=="100%"){ |
||
163 | _11+="width:100%;";
|
||
164 | this.domNode.style.display="block"; |
||
165 | }else{
|
||
166 | _11+="width:"+(_17+(Number(_17)==_17?"px":""))+";"; |
||
167 | } |
||
168 | var _18=dojo.delegate(this.inlineEditBox.editorParams,{style:_11,dir:this.dir,lang:this.lang}); |
||
169 | _18["displayedValue" in _f.prototype?"displayedValue":"value"]=this.value; |
||
170 | var ew=(this.editWidget=new _f(_18,this.editorPlaceholder)); |
||
171 | if(this.inlineEditBox.autoSave){ |
||
172 | dojo.destroy(this.buttonContainer);
|
||
173 | this.connect(ew,"onChange","_onChange"); |
||
174 | this.connect(ew,"onKeyPress","_onKeyPress"); |
||
175 | }else{
|
||
176 | if("intermediateChanges" in _f.prototype){ |
||
177 | ew.set("intermediateChanges",true); |
||
178 | this.connect(ew,"onChange","_onIntermediateChange"); |
||
179 | this.saveButton.set("disabled",true); |
||
180 | } |
||
181 | } |
||
182 | },_onIntermediateChange:function(val){ |
||
183 | this.saveButton.set("disabled",(this.getValue()==this._resetValue)||!this.enableSave()); |
||
184 | },destroy:function(){ |
||
185 | this.editWidget.destroy(true); |
||
186 | this.inherited(arguments); |
||
187 | },getValue:function(){ |
||
188 | var ew=this.editWidget; |
||
189 | return String(ew.get("displayedValue" in ew?"displayedValue":"value")); |
||
190 | },_onKeyPress:function(e){ |
||
191 | if(this.inlineEditBox.autoSave&&this.inlineEditBox.editing){ |
||
192 | if(e.altKey||e.ctrlKey){
|
||
193 | return;
|
||
194 | } |
||
195 | if(e.charOrCode==dojo.keys.ESCAPE){
|
||
196 | dojo.stopEvent(e); |
||
197 | this.cancel(true); |
||
198 | }else{
|
||
199 | if(e.charOrCode==dojo.keys.ENTER&&e.target.tagName=="INPUT"){ |
||
200 | dojo.stopEvent(e); |
||
201 | this._onChange();
|
||
202 | } |
||
203 | } |
||
204 | } |
||
205 | },_onBlur:function(){ |
||
206 | this.inherited(arguments); |
||
207 | if(this.inlineEditBox.autoSave&&this.inlineEditBox.editing){ |
||
208 | if(this.getValue()==this._resetValue){ |
||
209 | this.cancel(false); |
||
210 | }else{
|
||
211 | if(this.enableSave()){ |
||
212 | this.save(false); |
||
213 | } |
||
214 | } |
||
215 | } |
||
216 | },_onChange:function(){ |
||
217 | if(this.inlineEditBox.autoSave&&this.inlineEditBox.editing&&this.enableSave()){ |
||
218 | dojo.style(this.inlineEditBox.displayNode,{display:""}); |
||
219 | dijit.focus(this.inlineEditBox.displayNode);
|
||
220 | } |
||
221 | },enableSave:function(){ |
||
222 | return (this.editWidget.isValid?this.editWidget.isValid():true); |
||
223 | },focus:function(){ |
||
224 | this.editWidget.focus();
|
||
225 | setTimeout(dojo.hitch(this,function(){ |
||
226 | if(this.editWidget.focusNode&&this.editWidget.focusNode.tagName=="INPUT"){ |
||
227 | dijit.selectInputText(this.editWidget.focusNode);
|
||
228 | } |
||
229 | }),0);
|
||
230 | }}); |
||
231 | } |