diff options
Diffstat (limited to 'node_modules/montage/ui/select-input.reel/select-input.js')
-rw-r--r-- | node_modules/montage/ui/select-input.reel/select-input.js | 115 |
1 files changed, 104 insertions, 11 deletions
diff --git a/node_modules/montage/ui/select-input.reel/select-input.js b/node_modules/montage/ui/select-input.reel/select-input.js index 09a064d4..98902cfb 100644 --- a/node_modules/montage/ui/select-input.reel/select-input.js +++ b/node_modules/montage/ui/select-input.reel/select-input.js | |||
@@ -10,19 +10,18 @@ var Montage = require("montage").Montage, | |||
10 | NativeControl = require("ui/native-control").NativeControl, | 10 | NativeControl = require("ui/native-control").NativeControl, |
11 | PressComposer = require("ui/composer/press-composer").PressComposer; | 11 | PressComposer = require("ui/composer/press-composer").PressComposer; |
12 | 12 | ||
13 | |||
13 | var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | 14 | var SelectInput = exports.SelectInput = Montage.create(NativeControl, { |
14 | 15 | ||
15 | _fromInput: {value: null}, | 16 | _fromInput: {value: null}, |
17 | _synching: {value: null}, | ||
18 | //_internalSet: {value: null}, | ||
16 | 19 | ||
17 | __selectedIndexes: {value: null, enumerable: false}, | 20 | __selectedIndexes: {value: null, enumerable: false}, |
18 | _selectedIndexes: { | 21 | _selectedIndexes: { |
19 | set: function(value) { | 22 | set: function(value) { |
20 | this.__selectedIndexes = value; | 23 | this.__selectedIndexes = value; |
21 | if(!this._fromInput) { | 24 | this.needsDraw = this._synching || !this._fromInput; |
22 | this.needsDraw = true; | ||
23 | } else { | ||
24 | this._fromInput = false; | ||
25 | } | ||
26 | }, | 25 | }, |
27 | get: function() { | 26 | get: function() { |
28 | return this.__selectedIndexes; | 27 | return this.__selectedIndexes; |
@@ -101,6 +100,85 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
101 | } | 100 | } |
102 | }, | 101 | }, |
103 | 102 | ||
103 | _getSelectedValuesFromIndexes: { | ||
104 | value: function() { | ||
105 | var selectedObjects = this.contentController ? this.contentController.selectedObjects : null; | ||
106 | var arr = []; | ||
107 | if(selectedObjects && selectedObjects.length > 0) { | ||
108 | var i=0, len = selectedObjects.length, valuePath; | ||
109 | for(; i<len; i++) { | ||
110 | valuePath = this.valuePropertyPath || 'value'; | ||
111 | if(selectedObjects[i][valuePath]) { | ||
112 | arr.push(selectedObjects[i][valuePath]); | ||
113 | } | ||
114 | } | ||
115 | } | ||
116 | return arr; | ||
117 | |||
118 | } | ||
119 | }, | ||
120 | |||
121 | _synchValues: { | ||
122 | value: function() { | ||
123 | if(!this._synching) { | ||
124 | this._synching = true; | ||
125 | this.values = this._getSelectedValuesFromIndexes(); | ||
126 | this.value = ((this.values && this.values.length > 0) ? this.values[0] : null); | ||
127 | this._synching = false; | ||
128 | } | ||
129 | } | ||
130 | }, | ||
131 | |||
132 | |||
133 | _values: {value: null}, | ||
134 | values: { | ||
135 | get: function() { | ||
136 | return this._values; | ||
137 | }, | ||
138 | set: function(valuesArray) { | ||
139 | var content = this.contentController ? this.contentController.content : null; | ||
140 | if(valuesArray && content) { | ||
141 | this._values = valuesArray; | ||
142 | |||
143 | if(!this._synching) { | ||
144 | var selectedIndexes = []; | ||
145 | var i=0, len = this._values.length, index; | ||
146 | for(; i<len; i++) { | ||
147 | index = this._indexOf(this._values[i]); | ||
148 | if(index >= 0) { | ||
149 | selectedIndexes.push(index); | ||
150 | } | ||
151 | } | ||
152 | this._synching = true; | ||
153 | this.contentController.selectedIndexes = selectedIndexes; | ||
154 | this._synching = false; | ||
155 | } | ||
156 | } | ||
157 | } | ||
158 | //dependencies: ["_selectedIndexes"] | ||
159 | }, | ||
160 | |||
161 | _value: {value: null}, | ||
162 | value: { | ||
163 | get: function() { | ||
164 | return this._value; | ||
165 | }, | ||
166 | set: function(value) { | ||
167 | this._value = value; | ||
168 | |||
169 | if(!this._synching) { | ||
170 | if(value == null) { | ||
171 | this.values = []; | ||
172 | } else { | ||
173 | this.values = [value]; | ||
174 | } | ||
175 | } | ||
176 | |||
177 | |||
178 | } | ||
179 | //dependencies: ["_selectedIndexes"] | ||
180 | }, | ||
181 | |||
104 | // ------------------- | 182 | // ------------------- |
105 | // Montage Callbacks | 183 | // Montage Callbacks |
106 | // -------------------- | 184 | // -------------------- |
@@ -134,11 +212,13 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
134 | } | 212 | } |
135 | 213 | ||
136 | this.contentController = contentController; | 214 | this.contentController = contentController; |
137 | 215 | if(selectedIndexes.length === 0 && len > 0) { | |
138 | if(selectedIndexes.length > 0) { | 216 | // nothing was marked as selected by default. Select the first one (gh-122) |
139 | this._fromInput = true; | 217 | selectedIndexes = [0]; |
140 | this.contentController.selectedIndexes = selectedIndexes; | ||
141 | } | 218 | } |
219 | this._fromInput = true; | ||
220 | this.contentController.selectedIndexes = selectedIndexes; | ||
221 | |||
142 | } | 222 | } |
143 | } | 223 | } |
144 | 224 | ||
@@ -222,9 +302,11 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
222 | draw: { | 302 | draw: { |
223 | enumerable: false, | 303 | enumerable: false, |
224 | value: function() { | 304 | value: function() { |
225 | |||
226 | var elem = this.element; | 305 | var elem = this.element; |
227 | 306 | ||
307 | this._fromInput = false; | ||
308 | this._synching = false; | ||
309 | |||
228 | this._removeAll(elem); | 310 | this._removeAll(elem); |
229 | this._refreshOptions(); | 311 | this._refreshOptions(); |
230 | 312 | ||
@@ -234,6 +316,14 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
234 | } | 316 | } |
235 | }, | 317 | }, |
236 | 318 | ||
319 | didDraw: { | ||
320 | value: function() { | ||
321 | this._synchValues(); | ||
322 | } | ||
323 | }, | ||
324 | |||
325 | |||
326 | |||
237 | // find the index of the object with the specified value in the _content array | 327 | // find the index of the object with the specified value in the _content array |
238 | _indexOf: { | 328 | _indexOf: { |
239 | value: function(val) { | 329 | value: function(val) { |
@@ -293,8 +383,11 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
293 | 383 | ||
294 | if(arr.length > 0) { | 384 | if(arr.length > 0) { |
295 | this._fromInput = true; | 385 | this._fromInput = true; |
386 | this._synching = false; | ||
296 | this.contentController.selectedIndexes = arr; | 387 | this.contentController.selectedIndexes = arr; |
388 | this._synchValues(); | ||
297 | } | 389 | } |
390 | |||
298 | } | 391 | } |
299 | } | 392 | } |
300 | 393 | ||
@@ -304,7 +397,7 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
304 | //http://www.w3.org/TR/html5/the-button-element.html#the-select-element | 397 | //http://www.w3.org/TR/html5/the-button-element.html#the-select-element |
305 | 398 | ||
306 | SelectInput.addAttributes({ | 399 | SelectInput.addAttributes({ |
307 | autofocus: null, | 400 | autofocus: {dataType: 'boolean'}, |
308 | disabled: {dataType: 'boolean'}, | 401 | disabled: {dataType: 'boolean'}, |
309 | form: null, | 402 | form: null, |
310 | multiple: {dataType: 'boolean'}, | 403 | multiple: {dataType: 'boolean'}, |