1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
|
if(!dojo._hasResource["dijit.form.Textarea"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.form.Textarea"] = true;
dojo.provide("dijit.form.Textarea");
dojo.require("dijit.form._FormWidget");
dojo.require("dojo.i18n");
dojo.requireLocalization("dijit.form", "Textarea", null, "zh,pt,da,tr,ru,de,ROOT,sv,ja,he,fi,nb,el,ar,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu");
dojo.declare(
"dijit.form.Textarea",
dijit.form._FormValueWidget,
{
// summary: A resizing textarea widget
//
// description:
// A textarea that resizes vertically to contain the data.
// Takes nearly all the parameters (name, value, etc.) that a vanilla textarea takes.
// Cols is not supported and the width should be specified with style width.
// Rows is not supported since this widget adjusts the height.
//
// example:
// | <textarea dojoType="dijit.form.TextArea">...</textarea>
//
attributeMap: dojo.mixin(dojo.clone(dijit.form._FormValueWidget.prototype.attributeMap),
{style:"styleNode", 'class':"styleNode"}),
templateString: (dojo.isIE || dojo.isSafari || dojo.isFF) ?
((dojo.isIE || dojo.isSafari || dojo.isFF >= 3) ? '<fieldset id="${id}" class="dijitInline dijitInputField dijitTextArea" dojoAttachPoint="styleNode" waiRole="presentation"><div dojoAttachPoint="editNode,focusNode,eventNode" dojoAttachEvent="onpaste:_changing,oncut:_changing" waiRole="textarea" style="text-decoration:none;display:block;overflow:auto;" contentEditable="true"></div>'
: '<span id="${id}" class="dijitReset">'+
'<iframe src="javascript:<html><head><title>${_iframeEditTitle}</title></head><body><script>var _postCreate=window.frameElement?window.frameElement.postCreate:null;if(_postCreate)_postCreate();</script></body></html>"'+
' dojoAttachPoint="iframe,styleNode" dojoAttachEvent="onblur:_onIframeBlur" class="dijitInline dijitInputField dijitTextArea"></iframe>')
+ '<textarea name="${name}" value="${value}" dojoAttachPoint="formValueNode" style="display:none;"></textarea>'
+ ((dojo.isIE || dojo.isSafari || dojo.isFF >= 3) ? '</fieldset>':'</span>')
: '<textarea id="${id}" name="${name}" value="${value}" dojoAttachPoint="formValueNode,editNode,focusNode,styleNode" class="dijitInputField dijitTextArea">'+dojo.isFF+'</textarea>',
setAttribute: function(/*String*/ attr, /*anything*/ value){
this.inherited(arguments);
switch(attr){
case "disabled":
this.formValueNode.disabled = this.disabled;
case "readOnly":
if(dojo.isIE || dojo.isSafari || dojo.isFF >= 3){
this.editNode.contentEditable = (!this.disabled && !this.readOnly);
}else if(dojo.isFF){
this.iframe.contentDocument.designMode = (this.disabled || this.readOnly)? "off" : "on";
}
}
},
focus: function(){
// summary: Received focus, needed for the InlineEditBox widget
if(!this.disabled && !this.readOnly){
this._changing(); // set initial height
}
dijit.focus(this.iframe || this.focusNode);
},
setValue: function(/*String*/ value, /*Boolean, optional*/ priorityChange){
var editNode = this.editNode;
if(typeof value == "string"){
editNode.innerHTML = ""; // wipe out old nodes
if(value.split){
var _this=this;
var isFirst = true;
dojo.forEach(value.split("\n"), function(line){
if(isFirst){ isFirst = false; }
else{
editNode.appendChild(dojo.doc.createElement("BR")); // preserve line breaks
}
if(line){
editNode.appendChild(dojo.doc.createTextNode(line)); // use text nodes so that imbedded tags can be edited
}
});
}else if(value){
editNode.appendChild(dojo.doc.createTextNode(value));
}
if(!dojo.isIE){
editNode.appendChild(dojo.doc.createElement("BR")); // so that you see a cursor
}
}else{
// blah<BR>blah --> blah\nblah
// <P>blah</P><P>blah</P> --> blah\nblah
// <DIV>blah</DIV><DIV>blah</DIV> --> blah\nblah
// &<> -->&< >
value = editNode.innerHTML;
if(this.iframe){ // strip sizeNode
value = value.replace(/<div><\/div>\r?\n?$/i,"");
}
value = value.replace(/\s*\r?\n|^\s+|\s+$| /g,"").replace(/>\s+</g,"><").replace(/<\/(p|div)>$|^<(p|div)[^>]*>/gi,"").replace(/([^>])<div>/g,"$1\n").replace(/<\/p>\s*<p[^>]*>|<br[^>]*>|<\/div>\s*<div[^>]*>/gi,"\n").replace(/<[^>]*>/g,"").replace(/&/gi,"\&").replace(/</gi,"<").replace(/>/gi,">");
if(!dojo.isIE){
value = value.replace(/\n$/,""); // remove added <br>
}
}
this.value = this.formValueNode.value = value;
if(this.iframe){
var sizeNode = dojo.doc.createElement('div');
editNode.appendChild(sizeNode);
var newHeight = sizeNode.offsetTop;
if(editNode.scrollWidth > editNode.clientWidth){ newHeight+=16; } // scrollbar space needed?
if(this.lastHeight != newHeight){ // cache size so that we don't get a resize event because of a resize event
if(newHeight == 0){ newHeight = 16; } // height = 0 causes the browser to not set scrollHeight
dojo.contentBox(this.iframe, {h: newHeight});
this.lastHeight = newHeight;
}
editNode.removeChild(sizeNode);
}
dijit.form.Textarea.superclass.setValue.call(this, this.getValue(), priorityChange);
},
getValue: function(){
return this.value.replace(/\r/g,"");
},
postMixInProperties: function(){
this.inherited(arguments);
// don't let the source text be converted to a DOM structure since we just want raw text
if(this.srcNodeRef && this.srcNodeRef.innerHTML != ""){
this.value = this.srcNodeRef.innerHTML;
this.srcNodeRef.innerHTML = "";
}
if((!this.value || this.value == "") && this.srcNodeRef && this.srcNodeRef.value){
this.value = this.srcNodeRef.value;
}
if(!this.value){ this.value = ""; }
this.value = this.value.replace(/\r\n/g,"\n").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");
if(dojo.isFF == 2){
// In the case of Firefox an iframe is used and when the text gets focus,
// focus is fired from the document object. There isn't a way to put a
// waiRole on the document object and as a result screen readers don't
// announce the role. As a result screen reader users are lost.
//
// An additional problem is that the browser gives the document object a
// very cryptic accessible name, e.g.
// wysiwyg://13/http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_InlineEditBox.html
// When focus is fired from the document object, the screen reader speaks
// the accessible name. The cyptic accessile name is confusing.
//
// A workaround for both of these problems is to give the iframe's
// document a title, the name of which is similar to a role name, i.e.
// "edit area". This will be used as the accessible name which will replace
// the cryptic name and will also convey the role information to the user.
// Because it is read directly to the user, the string must be localized.
// In addition, since a <label> element can not be associated with an iframe, if
// this control has a label, insert the label text into the title as well.
var _nlsResources = dojo.i18n.getLocalization("dijit.form", "Textarea");
this._iframeEditTitle = _nlsResources.iframeEditTitle;
this._iframeFocusTitle = _nlsResources.iframeFocusTitle;
var label=dojo.query('label[for="'+this.id+'"]');
if(label.length){
this._iframeEditTitle = label[0].innerHTML + " " + this._iframeEditTitle;
}
var body = this.focusNode = this.editNode = dojo.doc.createElement('BODY');
body.style.margin="0px";
body.style.padding="0px";
body.style.border="0px";
}
},
postCreate: function(){
if(dojo.isIE || dojo.isSafari || dojo.isFF >= 3){
this.domNode.style.overflowY = 'hidden';
}else if(dojo.isFF){
var w = this.iframe.contentWindow;
var title = '';
try { // #4715: peeking at the title can throw a security exception during iframe setup
title = this.iframe.contentDocument.title;
} catch(e) {}
if(!w || !title){
this.iframe.postCreate = dojo.hitch(this, this.postCreate);
return;
}
var d = w.document;
d.getElementsByTagName('HTML')[0].replaceChild(this.editNode, d.getElementsByTagName('BODY')[0]);
if(!this.isLeftToRight()){
d.getElementsByTagName('HTML')[0].dir = "rtl";
}
this.iframe.style.overflowY = 'hidden';
this.eventNode = d;
// this.connect won't destroy this handler cleanly since its on the iframe's window object
// resize is a method of window, not document
w.addEventListener("resize", dojo.hitch(this, this._changed), false); // resize is only on the window object
}else{
this.focusNode = this.domNode;
}
if(this.eventNode){
this.connect(this.eventNode, "keypress", this._onKeyPress);
this.connect(this.eventNode, "mousemove", this._changed);
this.connect(this.eventNode, "focus", this._focused);
this.connect(this.eventNode, "blur", this._blurred);
}
if(this.editNode){
this.connect(this.editNode, "change", this._changed); // needed for mouse paste events per #3479
}
this.inherited('postCreate', arguments);
},
// event handlers, you can over-ride these in your own subclasses
_focused: function(e){
dojo.addClass(this.iframe||this.domNode, "dijitInputFieldFocused");
this._changed(e);
},
_blurred: function(e){
dojo.removeClass(this.iframe||this.domNode, "dijitInputFieldFocused");
this._changed(e, true);
},
_onIframeBlur: function(){
// Reset the title back to "edit area".
this.iframe.contentDocument.title = this._iframeEditTitle;
},
_onKeyPress: function(e){
if(e.keyCode == dojo.keys.TAB && !e.shiftKey && !e.ctrlKey && !e.altKey && this.iframe){
// Pressing the tab key in the iframe (with designMode on) will cause the
// entry of a tab character so we have to trap that here. Since we don't
// know the next focusable object we put focus on the iframe and then the
// user has to press tab again (which then does the expected thing).
// A problem with that is that the screen reader user hears "edit area"
// announced twice which causes confusion. By setting the
// contentDocument's title to "edit area frame" the confusion should be
// eliminated.
this.iframe.contentDocument.title = this._iframeFocusTitle;
// Place focus on the iframe. A subsequent tab or shift tab will put focus
// on the correct control.
// Note: Can't use this.focus() because that results in a call to
// dijit.focus and if that receives an iframe target it will set focus
// on the iframe's contentWindow.
this.iframe.focus(); // this.focus(); won't work
dojo.stopEvent(e);
}else if(e.keyCode == dojo.keys.ENTER){
e.stopPropagation();
}else if(this.inherited("_onKeyPress", arguments) && this.iframe){
// #3752:
// The key press will not make it past the iframe.
// If a widget is listening outside of the iframe, (like InlineEditBox)
// it will not hear anything.
// Create an equivalent event so everyone else knows what is going on.
var te = dojo.doc.createEvent("KeyEvents");
te.initKeyEvent("keypress", true, true, null, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.keyCode, e.charCode);
this.iframe.dispatchEvent(te);
}
this._changing();
},
_changing: function(e){
// summary: event handler for when a change is imminent
setTimeout(dojo.hitch(this, "_changed", e, false), 1);
},
_changed: function(e, priorityChange){
// summary: event handler for when a change has already happened
if(this.iframe && this.iframe.contentDocument.designMode != "on" && !this.disabled && !this.readOnly){
this.iframe.contentDocument.designMode="on"; // in case this failed on init due to being hidden
}
this.setValue(null, priorityChange || false);
}
});
}
|
