diff options
Diffstat (limited to 'node_modules/montage/ui/text-input.js')
-rw-r--r-- | node_modules/montage/ui/text-input.js | 148 |
1 files changed, 77 insertions, 71 deletions
diff --git a/node_modules/montage/ui/text-input.js b/node_modules/montage/ui/text-input.js index 3049c383..ef8beb5d 100644 --- a/node_modules/montage/ui/text-input.js +++ b/node_modules/montage/ui/text-input.js | |||
@@ -4,55 +4,65 @@ | |||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | 4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. |
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | /** | ||
8 | @module montage/ui/text-input | ||
9 | @requires montage/ui/component | ||
10 | @requires montage/ui/native-control | ||
11 | @requires montage/core/core | ||
12 | */ | ||
7 | var Montage = require("montage").Montage, | 13 | var Montage = require("montage").Montage, |
8 | Component = require("ui/component").Component, | 14 | Component = require("ui/component").Component, |
9 | NativeControl = require("ui/native-control").NativeControl; | 15 | NativeControl = require("ui/native-control").NativeControl; |
10 | 16 | ||
11 | |||
12 | var TextInput = exports.TextInput = Montage.create(NativeControl, { | ||
13 | |||
14 | /** | 17 | /** |
15 | Description TODO | 18 | The base class for all text-based input components. You typically won't create instances of this prototype. |
16 | @private | 19 | @class module:montage/ui/text-input.TextInput |
20 | @extends module:montage/ui/native-control.NativeControl | ||
21 | @see module:"montage/ui/date-input.reel".DateInput | ||
22 | @see module:"montage/ui/textfield.reel".Textfield | ||
23 | @see module:"montage/ui/number-input.reel".NumberInput | ||
24 | @see module:"montage/ui/range-input.reel".RangeInput | ||
25 | @see module:"montage/ui/textarea.reel".TextArea | ||
26 | |||
17 | */ | 27 | */ |
28 | var TextInput = exports.TextInput = Montage.create(NativeControl, /** @lends module:montage/ui/text-input.TextInput# */ { | ||
29 | |||
18 | _hasFocus: { | 30 | _hasFocus: { |
19 | enumerable: false, | 31 | enumerable: false, |
20 | value: false | 32 | value: false |
21 | }, | 33 | }, |
22 | /** | 34 | |
23 | Description TODO | ||
24 | @private | ||
25 | */ | ||
26 | _value: { | 35 | _value: { |
27 | enumerable: false, | 36 | enumerable: false, |
28 | value: null | 37 | value: null |
29 | }, | 38 | }, |
30 | /** | 39 | |
31 | Description TODO | ||
32 | @private | ||
33 | */ | ||
34 | _valueSyncedWithInputField: { | 40 | _valueSyncedWithInputField: { |
35 | enumerable: false, | 41 | enumerable: false, |
36 | value: false | 42 | value: false |
37 | }, | 43 | }, |
44 | |||
38 | /** | 45 | /** |
39 | Description TODO | 46 | The "typed" data value associated with the input element. When this property is set, if the component's <code>converter</code> property is non-null then its <code>revert()</code> method is invoked, passing it the newly assigned value. The <code>revert()</code> function is responsible for validating and converting the user-supplied value to its typed format. For example, in the case of a DateInput component (which extends TextInput) a user enters a string for the date (for example, "10-12-2005"). A <code>DateConverter</code> object is assigned to the component's <code>converter</code> property. |
40 | @type {Function} | ||
41 | @default null | ||
42 | */ | ||
43 | value: { | ||
44 | enumerable: true, | ||
45 | serializable: true, | ||
46 | get: function() { | ||
47 | return this._value; | ||
48 | }, | ||
49 | set: function(value, fromInput) { | ||
50 | 47 | ||
51 | if(value !== this._value) { | 48 | If the comopnent doesn't specify a converter object then the raw value is assigned to <code>value</code>. |
52 | if(this.converter) { | 49 | |
53 | var convertedValue; | 50 | @type {string} |
54 | try { | 51 | @default null |
55 | convertedValue = this.converter.revert(value); | 52 | */ |
53 | value: { | ||
54 | enumerable: true, | ||
55 | serializable: true, | ||
56 | get: function() { | ||
57 | return this._value; | ||
58 | }, | ||
59 | set: function(value, fromInput) { | ||
60 | |||
61 | if(value !== this._value) { | ||
62 | if(this.converter) { | ||
63 | var convertedValue; | ||
64 | try { | ||
65 | convertedValue = this.converter.revert(value); | ||
56 | if (this.error) { | 66 | if (this.error) { |
57 | this.error = null; | 67 | this.error = null; |
58 | } | 68 | } |
@@ -89,26 +99,26 @@ var TextInput = exports.TextInput = Montage.create(NativeControl, { | |||
89 | Object.getPropertyDescriptor(this, "value").set.call(this, newValue, true); | 99 | Object.getPropertyDescriptor(this, "value").set.call(this, newValue, true); |
90 | } | 100 | } |
91 | }, | 101 | }, |
102 | |||
92 | /** | 103 | /** |
93 | Description TODO | 104 | A reference to a Converter object whose <code>revert()</code> function is invoked when a new value is assigned to the TextInput object's <code>value</code> property. The revert() function attempts to transform the newly assigned value into a "typed" data property. For instance, a DateInput component could assign a DateConverter object to this property to convert a user-supplied date string into a standard date format. |
94 | @type {Property} | 105 | @type {Converter} |
95 | @default null | 106 | @default null |
96 | */ | 107 | @see {@link module:montage/core/converter.Converter} |
108 | */ | ||
97 | converter:{ | 109 | converter:{ |
98 | value: null | 110 | value: null |
99 | }, | 111 | }, |
100 | /** | 112 | |
101 | Description TODO | ||
102 | @private | ||
103 | */ | ||
104 | _error: { | 113 | _error: { |
105 | value: false | 114 | value: false |
106 | }, | 115 | }, |
107 | /** | 116 | |
108 | Description TODO | 117 | /** |
109 | @type {Function} | 118 | If an error is thrown by the converter object during a new value assignment, this property is set to <code>true</code>, and schedules a new draw cycle so the the UI can be updated to indicate the error state. the <code>montage-text-invalid</code> CSS class is assigned to the component's DOM element during the next draw cycle. |
110 | @default {Boolean} false | 119 | @type {boolean} |
111 | */ | 120 | @default false |
121 | */ | ||
112 | error: { | 122 | error: { |
113 | get: function() { | 123 | get: function() { |
114 | return this._error; | 124 | return this._error; |
@@ -121,6 +131,12 @@ var TextInput = exports.TextInput = Montage.create(NativeControl, { | |||
121 | }, | 131 | }, |
122 | 132 | ||
123 | _errorMessage: {value: null}, | 133 | _errorMessage: {value: null}, |
134 | |||
135 | /** | ||
136 | The message to display when the component is in an error state. | ||
137 | @type {string} | ||
138 | @default null | ||
139 | */ | ||
124 | errorMessage: { | 140 | errorMessage: { |
125 | get: function() { | 141 | get: function() { |
126 | return this._errorMessage; | 142 | return this._errorMessage; |
@@ -130,20 +146,16 @@ var TextInput = exports.TextInput = Montage.create(NativeControl, { | |||
130 | } | 146 | } |
131 | }, | 147 | }, |
132 | 148 | ||
133 | /** | ||
134 | Description TODO | ||
135 | @private | ||
136 | */ | ||
137 | _updateOnInput: { | 149 | _updateOnInput: { |
138 | value: true | 150 | value: true |
139 | }, | 151 | }, |
140 | 152 | ||
141 | // switch to turn off auto update upon keypress overriding the Converter flag | ||
142 | /** | 153 | /** |
143 | Description TODO | 154 | When this property and the converter's <code>allowPartialConversion</code> are both true, as the user enters text in the input element each new character is added to the component's <code>value</code> property, which triggers the conversion. Depending on the type of input element being used, this behavior may not be desirable. For instance, you likely would not want to convert a date string as a user is entering it, only when they've completed their input. |
144 | @type {Function} | 155 | Specifies whether |
145 | @default {Boolean} true | 156 | @type {boolean} |
146 | */ | 157 | @default true |
158 | */ | ||
147 | updateOnInput: { | 159 | updateOnInput: { |
148 | get: function() { | 160 | get: function() { |
149 | return !!this._updateOnInput; | 161 | return !!this._updateOnInput; |
@@ -153,11 +165,15 @@ var TextInput = exports.TextInput = Montage.create(NativeControl, { | |||
153 | } | 165 | } |
154 | }, | 166 | }, |
155 | 167 | ||
168 | // HTMLInputElement methods | ||
169 | |||
170 | blur: { value: function() { this._element.blur(); } }, | ||
171 | focus: { value: function() { this._element.focus(); } }, | ||
172 | // select() defined where it's allowed | ||
173 | // click() deliberately omitted, use focus() instead | ||
174 | |||
156 | // Callbacks | 175 | // Callbacks |
157 | /** | 176 | |
158 | Description TODO | ||
159 | @function | ||
160 | */ | ||
161 | prepareForDraw: { | 177 | prepareForDraw: { |
162 | enumerable: false, | 178 | enumerable: false, |
163 | value: function() { | 179 | value: function() { |
@@ -168,19 +184,13 @@ var TextInput = exports.TextInput = Montage.create(NativeControl, { | |||
168 | el.addEventListener('blur', this); | 184 | el.addEventListener('blur', this); |
169 | } | 185 | } |
170 | }, | 186 | }, |
171 | /** | 187 | |
172 | Description TODO | ||
173 | @private | ||
174 | */ | ||
175 | _setElementValue: { | 188 | _setElementValue: { |
176 | value: function(value) { | 189 | value: function(value) { |
177 | this.element.value = (value == null ? '' : value); | 190 | this.element.value = (value == null ? '' : value); |
178 | } | 191 | } |
179 | }, | 192 | }, |
180 | /** | 193 | |
181 | Description TODO | ||
182 | @function | ||