diff options
Diffstat (limited to 'node_modules/montage-user/ui/editable-text.js')
-rwxr-xr-x | node_modules/montage-user/ui/editable-text.js | 324 |
1 files changed, 324 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/editable-text.js b/node_modules/montage-user/ui/editable-text.js new file mode 100755 index 00000000..28349e6b --- /dev/null +++ b/node_modules/montage-user/ui/editable-text.js | |||
@@ -0,0 +1,324 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | /** | ||
7 | @module montage/ui/editable-text | ||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage").Montage, | ||
12 | Component = require("ui/component").Component; | ||
13 | /** | ||
14 | * Common base class for textfield/textarea and other components that have editable components | ||
15 | @class module:montage/ui/editable-text.EditableText | ||
16 | @extends module:montage/ui/component.Component | ||
17 | */ | ||
18 | var EditableText = exports.EditableText = Montage.create(Component, /** @lends module:montage/ui/editable-text.EditableText# */ { | ||
19 | |||
20 | hasTemplate: { | ||
21 | value: true | ||
22 | }, | ||
23 | /** | ||
24 | Description TODO | ||
25 | @private | ||
26 | */ | ||
27 | _hasFocus: { | ||
28 | enumerable: false, | ||
29 | value: false | ||
30 | }, | ||
31 | /** | ||
32 | Description TODO | ||
33 | @private | ||
34 | */ | ||
35 | _value: { | ||
36 | enumerable: false, | ||
37 | value: null | ||
38 | }, | ||
39 | /** | ||
40 | Description TODO | ||
41 | @private | ||
42 | */ | ||
43 | _valueSyncedWithInputField: { | ||
44 | enumerable: false, | ||
45 | value: false | ||
46 | }, | ||
47 | /** | ||
48 | Description TODO | ||
49 | @type {Function} | ||
50 | @default null | ||
51 | */ | ||
52 | value: { | ||
53 | enumerable: true, | ||
54 | serializable: true, | ||
55 | get: function() { | ||
56 | return this._value; | ||
57 | }, | ||
58 | set: function(value, fromInput) { | ||
59 | this._value = value; | ||
60 | if(fromInput) { | ||
61 | this._valueSyncedWithInputField = true; | ||
62 | } else { | ||
63 | this._valueSyncedWithInputField = false; | ||
64 | this.needsDraw = true; | ||
65 | } | ||
66 | } | ||
67 | }, | ||
68 | |||
69 | // set value from user input | ||
70 | /** | ||
71 | @private | ||
72 | */ | ||
73 | _setValue: { | ||
74 | value: function() { | ||
75 | var newValue = this.element.value; | ||
76 | if (newValue && newValue.length > 0 && this.converter) { | ||
77 | var convertedValue; | ||
78 | try { | ||
79 | convertedValue = this.converter.revert(newValue); | ||
80 | if (this.error) { | ||
81 | this.error = null; | ||
82 | } | ||
83 | // kishore: this is required bcos we need to pass the 2nd parameter to the setter | ||
84 | Object.getPropertyDescriptor(this, "value").set.call(this, convertedValue, true); | ||
85 | |||
86 | } catch(e) { | ||
87 | // unable to convert - maybe error | ||
88 | this.error = e; | ||
89 | //this._valueSyncedWithInputField = false; | ||
90 | } | ||
91 | } else { | ||
92 | Object.getPropertyDescriptor(this, "value").set.call(this, newValue, true); | ||
93 | } | ||
94 | } | ||
95 | }, | ||
96 | /** | ||
97 | Description TODO | ||
98 | @type {Property} | ||
99 | @default null | ||
100 | */ | ||
101 | converter:{ | ||
102 | value: null | ||
103 | }, | ||
104 | /** | ||
105 | Description TODO | ||
106 | @private | ||
107 | */ | ||
108 | _error: { | ||
109 | value: false | ||
110 | }, | ||
111 | /** | ||
112 | Description TODO | ||
113 | @type {Function} | ||
114 | @default {Boolean} false | ||
115 | */ | ||
116 | error: { | ||
117 | get: function() { | ||
118 | return this._error; | ||
119 | }, | ||
120 | set: function(v) { | ||
121 | this._error = v; | ||
122 | this.needsDraw = true; | ||
123 | } | ||
124 | }, | ||
125 | /** | ||
126 | Description TODO | ||
127 | @private | ||
128 | */ | ||
129 | _readOnly: { | ||
130 | enumerable: true, | ||
131 | value: false | ||
132 | }, | ||
133 | /** | ||
134 | Description TODO | ||
135 | @type {Function} | ||
136 | @default {Boolean} false | ||
137 | */ | ||
138 | readOnly: { | ||
139 | get: function() { | ||
140 | return this._readOnly; | ||
141 | }, | ||
142 | set: function(value) { | ||
143 | this._readOnly = value; | ||
144 | this.needsDraw = true; | ||
145 | } | ||
146 | }, | ||
147 | /** | ||
148 | Description TODO | ||
149 | @private | ||
150 | */ | ||
151 | _updateOnInput: { | ||
152 | value: true | ||
153 | }, | ||
154 | |||
155 | // switch to turn off auto update upon keypress overriding the Converter flag | ||
156 | /** | ||
157 | Description TODO | ||
158 | @type {Function} | ||
159 | @default {Boolean} true | ||
160 | */ | ||
161 | updateOnInput: { | ||
162 | get: function() { | ||
163 | return !!this._updateOnInput; | ||
164 | }, | ||
165 | set: function(v) { | ||
166 | this._updateOnInput = v; | ||
167 | } | ||
168 | }, | ||
169 | |||
170 | |||
171 | // If true, the field value will be validated 1 ms after the user changes the value | ||
172 | /* | ||
173 | // future properties - to allow partial validation (as the user types in the value) | ||
174 | _validatePartial: { | ||
175 | value: false | ||
176 | }, | ||
177 | validatePartial: { | ||
178 | get: function() { | ||
179 | return !!this._validatePartial; | ||
180 | }, | ||
181 | set: function(v) { | ||
182 | this._validatePartial = v; | ||
183 | } | ||
184 | }, | ||
185 | |||
186 | // If true, the field will block invalid characters upon change | ||
187 | _blockInvalid: { | ||
188 | value: false | ||
189 | }, | ||
190 | |||
191 | blockInvalid: { | ||
192 | get: function() { | ||
193 | return !!this._blockInvalid; | ||
194 | }, | ||
195 | set: function(v) { | ||
196 | this._blockInvalid = v; | ||
197 | } | ||
198 | }, | ||
199 | */ | ||
200 | |||
201 | |||
202 | |||
203 | // Callbacks | ||
204 | /** | ||
205 | Description TODO | ||
206 | @function | ||
207 | */ | ||
208 | prepareForDraw: { | ||
209 | enumerable: false, | ||
210 | value: function() { | ||
211 | var el = this.element; | ||
212 | el.value = this._inputValue; | ||
213 | el.addEventListener("focus", this); | ||
214 | el.addEventListener('input', this); | ||
215 | el.addEventListener('change', this); | ||
216 | el.addEventListener('blur', this); | ||
217 | } | ||
218 | }, | ||
219 | /** | ||
220 | Description TODO | ||
221 | @private | ||
222 | */ | ||
223 | _setElementValue: { | ||
224 | value: function(v) { | ||
225 | this.element.value = v; | ||
226 | } | ||
227 | }, | ||
228 | /** | ||
229 | Description TODO | ||
230 | @function | ||
231 | */ | ||
232 | draw: { | ||
233 | enumerable: false, | ||
234 | value: function() { | ||
235 | var t = this.element; | ||
236 | |||