diff options
Diffstat (limited to 'node_modules/montage/ui/native/select.reel/select.js')
-rw-r--r-- | node_modules/montage/ui/native/select.reel/select.js | 496 |
1 files changed, 496 insertions, 0 deletions
diff --git a/node_modules/montage/ui/native/select.reel/select.js b/node_modules/montage/ui/native/select.reel/select.js new file mode 100644 index 00000000..ae86c541 --- /dev/null +++ b/node_modules/montage/ui/native/select.reel/select.js | |||
@@ -0,0 +1,496 @@ | |||
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 | /** | ||
8 | @module "montage/ui/select.reel" | ||
9 | @requires montage/ui/component | ||
10 | @requires montage/ui/controller/array-controller | ||
11 | @requires montage/ui/native-control | ||
12 | @requires montage/ui/composer/press-composer | ||
13 | */ | ||
14 | |||
15 | var Montage = require("montage").Montage, | ||
16 | Component = require("ui/component").Component, | ||
17 | ArrayController = require("ui/controller/array-controller").ArrayController, | ||
18 | NativeControl = require("ui/native-control").NativeControl, | ||
19 | PressComposer = require("ui/composer/press-composer").PressComposer; | ||
20 | |||
21 | /** | ||
22 | * Wraps the a <select> element with binding support for the element's standard attributes. Uses an ArrayController instance to manage the element's contents and selection. | ||
23 | @class module:"montage/ui/select.reel".Select | ||
24 | @extends module:montage/ui/native-control.NativeControl | ||
25 | @summary | ||
26 | If the <select> markup contains <option> is provided in the markup and <code>contentController</code> is not, the <code>contentController</code> collection is populated with the options from the markup. If <code>contentController</code> is present, any options in the markup are overwritten by the values from the <code>contentController</code> when they are available. | ||
27 | */ | ||
28 | var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"montage/ui/select.reel".Select */ { | ||
29 | |||
30 | _fromInput: {value: null}, | ||
31 | _synching: {value: null}, | ||
32 | //_internalSet: {value: null}, | ||
33 | |||
34 | __selectedIndexes: {value: null, enumerable: false}, | ||
35 | _selectedIndexes: { | ||
36 | set: function(value) { | ||
37 | this.__selectedIndexes = value; | ||
38 | if(this.needsDraw === false) { | ||
39 | this.needsDraw = this._synching || !this._fromInput; | ||
40 | } | ||
41 | |||
42 | }, | ||
43 | get: function() { | ||
44 | return this.__selectedIndexes; | ||
45 | } | ||
46 | }, | ||
47 | |||
48 | //----------------------- | ||
49 | // Public API | ||
50 | //----------------------- | ||
51 | |||
52 | _content: {value: null, enumerable: false}, | ||
53 | /** | ||
54 | An array of items to to assign to the component's <code>contentController</code> property, which is an ArrayController. | ||
55 | */ | ||
56 | content: { | ||
57 | set: function(value) { | ||
58 | if(!Array.isArray(value)) { | ||
59 | value = [value]; | ||
60 | } | ||
61 | this._content = value; | ||
62 | |||
63 | if(!this.contentController) { | ||
64 | var contentController = ArrayController.create(); | ||
65 | contentController.content = value; | ||
66 | this.contentController = contentController; | ||
67 | } | ||
68 | |||
69 | this.needsDraw = true; | ||
70 | }, | ||
71 | get: function() { | ||
72 | return this._content; | ||
73 | }, | ||
74 | serializable: true | ||
75 | }, | ||
76 | |||
77 | // If a <code>contentController</code> is provided, this allows the developer to specify | ||
78 | // which property in each element provides the "value" part of <option> | ||
79 | /** | ||
80 | Specifies the property belonging to the component's <code>contentController</code> to use as the "value" part of the <option>. | ||
81 | */ | ||
82 | valuePropertyPath: { | ||
83 | value: null, | ||
84 | serializable: true | ||
85 | }, | ||
86 | |||
87 | /** | ||
88 | Specifies the property belonging to the component's <code>contentController</code> to use as the text content of the <option>. | ||
89 | */ | ||
90 | textPropertyPath: { | ||
91 | value: null, | ||
92 | serializable: true | ||
93 | }, | ||
94 | |||
95 | |||
96 | _contentController: { | ||
97 | value: null | ||
98 | }, | ||
99 | |||
100 | /** | ||
101 | An ArrayController instance used to manage the content and selection of the select input control. | ||
102 | @type {module:montage/ui/controller/array-controller.ArrayController} | ||
103 | @default null | ||
104 | */ | ||
105 | contentController: { | ||
106 | get: function() { | ||
107 | return this._contentController; | ||
108 | }, | ||
109 | set: function(value) { | ||
110 | if (this._contentController === value) { | ||
111 | return; | ||
112 | } | ||
113 | |||
114 | if (this._contentController) { | ||
115 | Object.deleteBinding(this, "_selectedIndexes"); | ||
116 | } | ||
117 | |||
118 | this._contentController = value; | ||
119 | |||
120 | if (this._contentController) { | ||
121 | |||
122 | // If we're already getting contentController related values from other bindings...stop that | ||
123 | if (this._bindingDescriptors) { | ||
124 | Object.deleteBinding(this, "content"); | ||
125 | } | ||
126 | |||
127 | Object.defineBinding(this, "content", { | ||
128 | boundObject: this._contentController, | ||
129 | boundObjectPropertyPath: "organizedObjects", | ||
130 | oneway: true | ||
131 | }); | ||
132 | |||
133 | |||
134 | Object.defineBinding(this, "_selectedIndexes", { | ||
135 | boundObject: this._contentController, | ||
136 | boundObjectPropertyPath: "selectedIndexes" | ||
137 | }); | ||
138 | } | ||
139 | |||
140 | }, | ||
141 | serializable: true | ||
142 | }, | ||
143 | |||
144 | _getSelectedValuesFromIndexes: { | ||
145 | value: function() { | ||
146 | var selectedObjects = this.contentController ? this.contentController.selectedObjects : null; | ||
147 | var arr = []; | ||
148 | if(selectedObjects && selectedObjects.length > 0) { | ||
149 | var i=0, len = selectedObjects.length, valuePath; | ||
150 | for(; i<len; i++) { | ||
151 | valuePath = this.valuePropertyPath || 'value'; | ||
152 | if(selectedObjects[i][valuePath]) { | ||
153 | arr.push(selectedObjects[i][valuePath]); | ||
154 | } | ||
155 | } | ||
156 | } | ||
157 | return arr; | ||
158 | |||
159 | } | ||
160 | }, | ||
161 | |||
162 | _synchValues: { | ||
163 | value: function() { | ||
164 | if(!this._synching) { | ||
165 | this._synching = true; | ||
166 | this.values = this._getSelectedValuesFromIndexes(); | ||
167 | this.value = ((this.values && this.values.length > 0) ? this.values[0] : null); | ||
168 | this._synching = false; | ||
169 | } | ||
170 | } | ||
171 | }, | ||
172 | |||
173 | |||
174 | _values: {value: null}, | ||
175 | values: { | ||
176 | get: function() { | ||
177 | return this._values; | ||
178 | }, | ||
179 | set: function(valuesArray) { | ||
180 | var content = this.contentController ? this.contentController.content : null; | ||
181 | if(valuesArray && content) { | ||
182 | this._values = valuesArray; | ||
183 | |||
184 | if(!this._synching) { | ||
185 | var selectedIndexes = []; | ||
186 | var i=0, len = this._values.length, index; | ||
187 | for(; i<len; i++) { | ||
188 | index = this._indexOf(this._values[i]); | ||
189 | if(index >= 0) { | ||
190 | selectedIndexes.push(index); | ||
191 | } | ||
192 | } | ||
193 | this._synching = true; | ||
194 | this.contentController.selectedIndexes = selectedIndexes; | ||
195 | this._synching = false; | ||
196 | } | ||
197 | } | ||
198 | }, | ||
199 | serializable: true | ||
200 | //dependencies: ["_selectedIndexes"] | ||
201 | }, | ||
202 | |||
203 | _value: {value: null}, | ||
204 | value: { | ||
205 | get: function() { | ||
206 | return this._value; | ||
207 | }, | ||
208 | set: function(value) { | ||
209 | this._value = value; | ||
210 | |||
211 | if(!this._synching) { | ||
212 | if(value == null) { | ||
213 | this.values = []; | ||
214 | } else { | ||
215 | this.values = [value]; | ||
216 | } | ||
217 | } | ||
218 | |||
219 | |||
< |