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 | 86 |
1 files changed, 80 insertions, 6 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 220c3814..10847569 100644 --- a/node_modules/montage/ui/select-input.reel/select-input.js +++ b/node_modules/montage/ui/select-input.reel/select-input.js | |||
@@ -4,14 +4,28 @@ | |||
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/select-input.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 | |||
7 | var Montage = require("montage").Montage, | 15 | var Montage = require("montage").Montage, |
8 | Component = require("ui/component").Component, | 16 | Component = require("ui/component").Component, |
9 | ArrayController = require("ui/controller/array-controller").ArrayController, | 17 | ArrayController = require("ui/controller/array-controller").ArrayController, |
10 | NativeControl = require("ui/native-control").NativeControl, | 18 | NativeControl = require("ui/native-control").NativeControl, |
11 | PressComposer = require("ui/composer/press-composer").PressComposer; | 19 | PressComposer = require("ui/composer/press-composer").PressComposer; |
12 | 20 | ||
13 | 21 | /** | |
14 | var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | 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-input.reel".SelectInput | ||
24 | @extends module:montage/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 SelectInput = exports.SelectInput = Montage.create(NativeControl, /** @lends module:"montage/ui/select-input.reel".SelectInput */ { | ||
15 | 29 | ||
16 | _fromInput: {value: null}, | 30 | _fromInput: {value: null}, |
17 | _synching: {value: null}, | 31 | _synching: {value: null}, |
@@ -36,6 +50,9 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
36 | //----------------------- | 50 | //----------------------- |
37 | 51 | ||
38 | _content: {value: null, enumerable: false}, | 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 | */ | ||
39 | content: { | 56 | content: { |
40 | set: function(value) { | 57 | set: function(value) { |
41 | if(!Array.isArray(value)) { | 58 | if(!Array.isArray(value)) { |
@@ -56,15 +73,26 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
56 | } | 73 | } |
57 | }, | 74 | }, |
58 | 75 | ||
59 | // If contentController is provided, this allows the developer to specify | 76 | // If a <code>contentController</code> is provided, this allows the developer to specify |
60 | // which property in each element provides the "value" part of <option> | 77 | // which property in each element provides the "value" part of <option> |
78 | /** | ||
79 | Specifies the property belonging to the component's <code>contentController</code> to use as the "value" part of the <option>. | ||
80 | */ | ||
61 | valuePropertyPath: {value: null}, | 81 | valuePropertyPath: {value: null}, |
62 | // Property on iterated object from which textContent of the <option> | 82 | |
63 | // is received | 83 | /** |
84 | Specifies the property belonging to the component's <code>contentController</code> to use as the text content of the <option>. | ||
85 | */ | ||
64 | textPropertyPath: {value: null}, | 86 | textPropertyPath: {value: null}, |
65 | 87 | ||
66 | 88 | ||
67 | _contentController: {value: null, enumerable: false}, | 89 | _contentController: {value: null, enumerable: false}, |
90 | |||
91 | /** | ||
92 | An ArrayController instance used to manage the content and selection of the select input control. | ||
93 | @type {module:montage/ui/controller/array-controller.ArrayController} | ||
94 | @default null | ||
95 | */ | ||
68 | contentController: { | 96 | contentController: { |
69 | get: function() { | 97 | get: function() { |
70 | return this._contentController; | 98 | return this._contentController; |
@@ -182,6 +210,12 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
182 | //dependencies: ["_selectedIndexes"] | 210 | //dependencies: ["_selectedIndexes"] |
183 | }, | 211 | }, |
184 | 212 | ||
213 | // HTMLSelectElement methods | ||
214 | |||
215 | // add() and remove() deliberately omitted. Use the contentController instead | ||
216 | blur: { value: function() { this._element.blur(); } }, | ||
217 | focus: { value: function() { this._element.focus(); } }, | ||
218 | |||
185 | // ------------------- | 219 | // ------------------- |
186 | // Montage Callbacks | 220 | // Montage Callbacks |
187 | // -------------------- | 221 | // -------------------- |
@@ -399,13 +433,53 @@ var SelectInput = exports.SelectInput = Montage.create(NativeControl, { | |||
399 | 433 | ||
400 | //http://www.w3.org/TR/html5/the-button-element.html#the-select-element | 434 | //http://www.w3.org/TR/html5/the-button-element.html#the-select-element |
401 | 435 | ||
402 | SelectInput.addAttributes({ | 436 | SelectInput.addAttributes( /** @lends module:"montage/ui/select-input.reel".SelectInput */ { |
437 | /** | ||
438 | Specifies whether the element should be focused as soon as the page is loaded. | ||
439 | @type {boolean} | ||
440 | @default false | ||
441 | */ | ||
403 | autofocus: {dataType: 'boolean'}, | 442 | autofocus: {dataType: 'boolean'}, |
443 | |||
444 | /** | ||
445 | When true, the select control is disabled to user input and "disabled" is added to its CSS class list. | ||
446 | @type {boolean} | ||
447 | @default false | ||
448 | */ | ||
404 | disabled: {dataType: 'boolean'}, | 449 | disabled: {dataType: 'boolean'}, |
450 | |||
451 | /** | ||
452 | The value of the <code>id</code> attribute of the form with which to associate the component's element. | ||
453 | @type string} | ||
454 | @default null | ||
455 | */ | ||
405 | form: null, | 456 | form: null, |
457 | /** | ||
458 | Specifies if multiple selections are enabled on the select element. | ||
459 | @type {boolean} | ||
460 | @default false | ||
461 | */ | ||
406 | multiple: {dataType: 'boolean'}, | 462 | multiple: {dataType: 'boolean'}, |
463 | |||
464 | /** | ||
465 | The name associated with the select input element. | ||
466 | @type {string} | ||
467 | @default null | ||
468 | */ | ||
407 | name: null, | 469 | name: null, |
470 | |||
471 | /** | ||
472 | When true, the user will be required to select a value from the control before submitting the form. | ||
473 | @type {string} | ||
474 | @default false | ||
475 | */ | ||
408 | required: {dataType: 'boolean'}, | 476 | required: {dataType: 'boolean'}, |
477 | |||
478 | /** | ||
479 | The number of options from the select element to display to the user. | ||
480 | @type {number} | ||
481 | @default 1 | ||
482 | */ | ||
409 | size: {dataType: 'number', value: '1'} | 483 | size: {dataType: 'number', value: '1'} |
410 | }); | 484 | }); |
411 | 485 | ||