|
1 /** |
|
2 * TextBox.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /** |
|
12 * Creates a new textbox. |
|
13 * |
|
14 * @-x-less TextBox.less |
|
15 * @class tinymce.ui.TextBox |
|
16 * @extends tinymce.ui.Widget |
|
17 */ |
|
18 define("tinymce/ui/TextBox", [ |
|
19 "tinymce/ui/Widget", |
|
20 "tinymce/ui/DomUtils" |
|
21 ], function(Widget, DomUtils) { |
|
22 "use strict"; |
|
23 |
|
24 return Widget.extend({ |
|
25 /** |
|
26 * Constructs a instance with the specified settings. |
|
27 * |
|
28 * @constructor |
|
29 * @param {Object} settings Name/value object with settings. |
|
30 * @setting {Boolean} multiline True if the textbox is a multiline control. |
|
31 * @setting {Number} maxLength Max length for the textbox. |
|
32 * @setting {Number} size Size of the textbox in characters. |
|
33 */ |
|
34 init: function(settings) { |
|
35 var self = this; |
|
36 |
|
37 self._super(settings); |
|
38 |
|
39 self._value = settings.value || ''; |
|
40 self.addClass('textbox'); |
|
41 |
|
42 if (settings.multiline) { |
|
43 self.addClass('multiline'); |
|
44 } else { |
|
45 // TODO: Rework this |
|
46 self.on('keydown', function(e) { |
|
47 if (e.keyCode == 13) { |
|
48 self.parents().reverse().each(function(ctrl) { |
|
49 e.preventDefault(); |
|
50 |
|
51 if (ctrl.hasEventListeners('submit') && ctrl.toJSON) { |
|
52 ctrl.fire('submit', {data: ctrl.toJSON()}); |
|
53 return false; |
|
54 } |
|
55 }); |
|
56 } |
|
57 }); |
|
58 } |
|
59 }, |
|
60 |
|
61 /** |
|
62 * Getter/setter function for the disabled state. |
|
63 * |
|
64 * @method value |
|
65 * @param {Boolean} [state] State to be set. |
|
66 * @return {Boolean|tinymce.ui.ComboBox} True/false or self if it's a set operation. |
|
67 */ |
|
68 disabled: function(state) { |
|
69 var self = this; |
|
70 |
|
71 if (self._rendered && typeof state != 'undefined') { |
|
72 self.getEl().disabled = state; |
|
73 } |
|
74 |
|
75 return self._super(state); |
|
76 }, |
|
77 |
|
78 /** |
|
79 * Getter/setter function for the control value. |
|
80 * |
|
81 * @method value |
|
82 * @param {String} [value] Value to be set. |
|
83 * @return {String|tinymce.ui.ComboBox} Value or self if it's a set operation. |
|
84 */ |
|
85 value: function(value) { |
|
86 var self = this; |
|
87 |
|
88 if (typeof value != "undefined") { |
|
89 self._value = value; |
|
90 |
|
91 if (self._rendered) { |
|
92 self.getEl().value = value; |
|
93 } |
|
94 |
|
95 return self; |
|
96 } |
|
97 |
|
98 if (self._rendered) { |
|
99 return self.getEl().value; |
|
100 } |
|
101 |
|
102 return self._value; |
|
103 }, |
|
104 |
|
105 /** |
|
106 * Repaints the control after a layout operation. |
|
107 * |
|
108 * @method repaint |
|
109 */ |
|
110 repaint: function() { |
|
111 var self = this, style, rect, borderBox, borderW = 0, borderH = 0, lastRepaintRect; |
|
112 |
|
113 style = self.getEl().style; |
|
114 rect = self._layoutRect; |
|
115 lastRepaintRect = self._lastRepaintRect || {}; |
|
116 |
|
117 // Detect old IE 7+8 add lineHeight to align caret vertically in the middle |
|
118 var doc = document; |
|
119 if (!self.settings.multiline && doc.all && (!doc.documentMode || doc.documentMode <= 8)) { |
|
120 style.lineHeight = (rect.h - borderH) + 'px'; |
|
121 } |
|
122 |
|
123 borderBox = self._borderBox; |
|
124 borderW = borderBox.left + borderBox.right + 8; |
|
125 borderH = borderBox.top + borderBox.bottom + (self.settings.multiline ? 8 : 0); |
|
126 |
|
127 if (rect.x !== lastRepaintRect.x) { |
|
128 style.left = rect.x + 'px'; |
|
129 lastRepaintRect.x = rect.x; |
|
130 } |
|
131 |
|
132 if (rect.y !== lastRepaintRect.y) { |
|
133 style.top = rect.y + 'px'; |
|
134 lastRepaintRect.y = rect.y; |
|
135 } |
|
136 |
|
137 if (rect.w !== lastRepaintRect.w) { |
|
138 style.width = (rect.w - borderW) + 'px'; |
|
139 lastRepaintRect.w = rect.w; |
|
140 } |
|
141 |
|
142 if (rect.h !== lastRepaintRect.h) { |
|
143 style.height = (rect.h - borderH) + 'px'; |
|
144 lastRepaintRect.h = rect.h; |
|
145 } |
|
146 |
|
147 self._lastRepaintRect = lastRepaintRect; |
|
148 self.fire('repaint', {}, false); |
|
149 |
|
150 return self; |
|
151 }, |
|
152 |
|
153 /** |
|
154 * Renders the control as a HTML string. |
|
155 * |
|
156 * @method renderHtml |
|
157 * @return {String} HTML representing the control. |
|
158 */ |
|
159 renderHtml: function() { |
|
160 var self = this, id = self._id, settings = self.settings, value = self.encode(self._value, false), extraAttrs = ''; |
|
161 |
|
162 if ("spellcheck" in settings) { |
|
163 extraAttrs += ' spellcheck="' + settings.spellcheck + '"'; |
|
164 } |
|
165 |
|
166 if (settings.maxLength) { |
|
167 extraAttrs += ' maxlength="' + settings.maxLength + '"'; |
|
168 } |
|
169 |
|
170 if (settings.size) { |
|
171 extraAttrs += ' size="' + settings.size + '"'; |
|
172 } |
|
173 |
|
174 if (settings.subtype) { |
|
175 extraAttrs += ' type="' + settings.subtype + '"'; |
|
176 } |
|
177 |
|
178 if (self.disabled()) { |
|
179 extraAttrs += ' disabled="disabled"'; |
|
180 } |
|
181 |
|
182 if (settings.multiline) { |
|
183 return ( |
|
184 '<textarea id="' + id + '" class="' + self.classes() + '" ' + |
|
185 (settings.rows ? ' rows="' + settings.rows + '"' : '') + |
|
186 ' hidefocus="1"' + extraAttrs + '>' + value + |
|
187 '</textarea>' |
|
188 ); |
|
189 } |
|
190 |
|
191 return '<input id="' + id + '" class="' + self.classes() + '" value="' + value + '" hidefocus="1"' + extraAttrs + ' />'; |
|
192 }, |
|
193 |
|
194 /** |
|
195 * Called after the control has been rendered. |
|
196 * |
|
197 * @method postRender |
|
198 */ |
|
199 postRender: function() { |
|
200 var self = this; |
|
201 |
|
202 DomUtils.on(self.getEl(), 'change', function(e) { |
|
203 self.fire('change', e); |
|
204 }); |
|
205 |
|
206 return self._super(); |
|
207 }, |
|
208 |
|
209 remove: function() { |
|
210 DomUtils.off(this.getEl()); |
|
211 this._super(); |
|
212 } |
|
213 }); |
|
214 }); |