diff options
Diffstat (limited to 'node_modules/montage-user/ui/text-input.js')
-rw-r--r-- | node_modules/montage-user/ui/text-input.js | 304 |
1 files changed, 304 insertions, 0 deletions
diff --git a/node_modules/montage-user/ui/text-input.js b/node_modules/montage-user/ui/text-input.js new file mode 100644 index 00000000..5b8025a2 --- /dev/null +++ b/node_modules/montage-user/ui/text-input.js | |||
@@ -0,0 +1,304 @@ | |||
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 | var Montage = require("montage").Montage, | ||
8 | Component = require("ui/component").Component, | ||
9 | NativeControl = require("ui/native-control").NativeControl; | ||
10 | |||
11 | // Standard <input> tag attributes - http://www.w3.org/TR/html5/the-input-element.html#the-input-element | ||
12 | |||
13 | exports.StandardInputAttributes = { | ||
14 | accept: null, | ||
15 | alt: null, | ||
16 | autocomplete: null, | ||
17 | autofocus: {dataType: "boolean"}, | ||
18 | checked: {dataType: "boolean"}, | ||
19 | dirname: null, | ||
20 | disabled: {dataType: 'boolean'}, | ||
21 | form: null, | ||
22 | formaction: null, | ||
23 | formenctype: null, | ||
24 | formmethod: null, | ||
25 | formnovalidate: null, | ||
26 | formtarget: null, | ||
27 | height: null, | ||
28 | list: null, | ||
29 | max: null, | ||
30 | maxlength: null, | ||
31 | min: null, | ||
32 | multiple: {dataType: 'boolean'}, | ||
33 | name: null, | ||
34 | pattern: null, | ||
35 | placeholder: null, | ||
36 | readonly: {dataType: 'boolean'}, | ||
37 | required: {dataType: 'boolean'}, | ||
38 | size: null, | ||
39 | src: null, | ||
40 | step: null, | ||
41 | width: null | ||
42 | // "type" is not bindable and "value" is handled as a special attribute | ||
43 | }; | ||
44 | |||
45 | var TextInput = exports.TextInput = Montage.create(NativeControl, { | ||
46 | |||
47 | /** | ||
48 | Description TODO | ||
49 | @private | ||
50 | */ | ||
51 | _hasFocus: { | ||
52 | enumerable: false, | ||
53 | value: false | ||
54 | }, | ||
55 | /** | ||
56 | Description TODO | ||
57 | @private | ||
58 | */ | ||
59 | _value: { | ||
60 | enumerable: false, | ||
61 | value: null | ||
62 | }, | ||
63 | /** | ||
64 | Description TODO | ||
65 | @private | ||
66 | */ | ||
67 | _valueSyncedWithInputField: { | ||
68 | enumerable: false, | ||
69 | value: false | ||
70 | }, | ||
71 | /** | ||
72 | Description TODO | ||
73 | @type {Function} | ||
74 | @default null | ||
75 | */ | ||
76 | value: { | ||
77 | enumerable: true, | ||
78 | serializable: true, | ||
79 | get: function() { | ||
80 | return this._value; | ||
81 | }, | ||
82 | set: function(value, fromInput) { | ||
83 | |||
84 | if (value && value.length > 0 && this.converter) { | ||
85 | var convertedValue; | ||
86 | try { | ||
87 | convertedValue = this.converter.revert(value); | ||
88 | if (this.error) { | ||
89 | this.error = null; | ||
90 | } | ||
91 | this._value = convertedValue; | ||
92 | |||
93 | } catch(e) { | ||
94 | // unable to convert - maybe error | ||
95 | this.error = e; | ||
96 | this._valueSyncedWithInputField = false; | ||
97 | } | ||
98 | } else { | ||
99 | this._value = value; | ||
100 | } | ||
101 | if(fromInput) { | ||
102 | this._valueSyncedWithInputField = true; | ||
103 | //this.needsDraw = true; | ||
104 | } else { | ||
105 | this._valueSyncedWithInputField = false; | ||
106 | this.needsDraw = true; | ||
107 | } | ||
108 | } | ||
109 | }, | ||
110 | |||
111 | // set value from user input | ||
112 | /** | ||
113 | @private | ||
114 | */ | ||
115 | _setValue: { | ||
116 | value: function() { | ||
117 | var newValue = this.element.value; | ||
118 | Object.getPropertyDescriptor(this, "value").set.call(this, newValue, true); | ||
119 | } | ||
120 | }, | ||
121 | /** | ||
122 | Description TODO | ||
123 | @type {Property} | ||
124 | @default null | ||
125 | */ | ||
126 | converter:{ | ||
127 | value: null | ||
128 | }, | ||
129 | /** | ||
130 | Description TODO | ||
131 | @private | ||
132 | */ | ||
133 | _error: { | ||
134 | value: false | ||
135 | }, | ||
136 | /** | ||
137 | Description TODO | ||
138 | @type {Function} | ||
139 | @default {Boolean} false | ||
140 | */ | ||
141 | error: { | ||
142 | get: function() { | ||
143 | return this._error; | ||
144 | }, | ||
145 | set: function(v) { | ||
146 | this._error = v; | ||
147 | this.errorMessage = this._error ? this._error.message : null; | ||
148 | this.needsDraw = true; | ||
149 | } | ||
150 | }, | ||
151 | |||
152 | _errorMessage: {value: null}, | ||
153 | errorMessage: { | ||
154 | get: function() { | ||
155 | return this._errorMessage; | ||
156 | }, | ||
157 | set: function(v) { | ||
158 | this._errorMessage = v; | ||
159 | } | ||
160 | }, | ||
161 | |||
162 | /** | ||
163 | Description TODO | ||
164 | @private | ||
165 | */ | ||
166 | _updateOnInput: { | ||
167 | value: true | ||
168 | }, | ||
169 | |||
170 | // switch to turn off auto update upon keypress overriding the Converter flag | ||
171 | /** | ||
172 | Description TODO | ||
173 | @type {Function} | ||
174 | @default {Boolean} true | ||
175 | */ | ||
176 | updateOnInput: { | ||
177 | get: function() { | ||
178 | return !!this._updateOnInput; | ||
179 | }, | ||
180 | set: function(v) { | ||
181 | this._updateOnInput = v; | ||
182 | } | ||
183 | }, | ||
184 | |||
185 | // Callbacks | ||
186 | /** | ||
187 | Description TODO | ||
188 | @function | ||
189 | */ | ||
190 | prepareForDraw: { | ||
191 | enumerable: false, | ||
192 | value: function() { | ||
193 | var el = this.element; | ||
194 | el.addEventListener("focus", this); | ||
195 | el.addEventListener('input', this); | ||
196 | el.addEventListener('change', this); | ||
197 | el.addEventListener('blur', this); | ||
198 | } | ||
199 | }, | ||
200 | /** | ||
201 | Description TODO | ||
202 | @private | ||
203 | */ | ||
204 | _setElementValue: { | ||
205 | value: function(v) { | ||
206 | this.element.value = v; | ||
207 | } | ||
208 | }, | ||
209 | /** | ||
210 | Description TODO | ||
211 | @function | ||
212 | */ | ||
213 | draw: { | ||
214 | enumerable: false, | ||
215 | value: function() { | ||
216 | |||
217 | var t = this.element; | ||
218 | |||
219 | if (!this._valueSyncedWithInputField) { | ||
220 | this._setElementValue(this.converter ? this.converter.convert(this._value) : this._value); | ||
221 | } | ||
222 | |||
223 | |||
224 | if (this.error) { | ||
225 | t.classList.add('montage-text-invalid'); | ||
226 | t.title = this.error.message || ''; | ||
227 | } else { | ||
228 | t.classList.remove("montage-text-invalid"); | ||
229 | t.title = ''; | ||
230 | } | ||
231 | |||
232 | var fn = Object.getPrototypeOf(TextInput).draw; | ||
233 | fn.call(this); | ||
234 | |||
235 | } | ||
236 | }, | ||
237 | /** | ||
238 | Description TODO | ||
239 | @function | ||
240 | */ | ||