diff options
Diffstat (limited to 'node_modules/montage/ui/native/input-radio.reel/input-radio.js')
-rw-r--r-- | node_modules/montage/ui/native/input-radio.reel/input-radio.js | 174 |
1 files changed, 174 insertions, 0 deletions
diff --git a/node_modules/montage/ui/native/input-radio.reel/input-radio.js b/node_modules/montage/ui/native/input-radio.reel/input-radio.js new file mode 100644 index 00000000..6c8b7e42 --- /dev/null +++ b/node_modules/montage/ui/native/input-radio.reel/input-radio.js | |||
@@ -0,0 +1,174 @@ | |||
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/input-radio.reel" | ||
9 | @requires montage/ui/component | ||
10 | @requires montage/ui/check-input | ||
11 | */ | ||
12 | var Montage = require("montage").Montage, | ||
13 | Component = require("ui/component").Component, | ||
14 | CheckInput = require("ui/check-input").CheckInput; | ||
15 | /** | ||
16 | * Wraps the a <input type="radio"> element with binding support for the element's standard attributes. | ||
17 | @class module:"montage/ui/input-radio.reel".InputRadio | ||
18 | @extends module:montage/ui/check-input.CheckInput | ||
19 | */ | ||
20 | var InputRadio = exports.InputRadio = Montage.create(CheckInput, { | ||
21 | _fakeCheck: { | ||
22 | enumerable: false, | ||
23 | value: function() { | ||
24 | var changeEvent; | ||
25 | // NOTE: this may be BAD, modifying the element outside of | ||
26 | // the draw loop, but it's what a click/touch would | ||
27 | // actually have done | ||
28 | |||
29 | if (!this._element.checked) { | ||
30 | this._element.checked = true; | ||
31 | changeEvent = document.createEvent("HTMLEvents"); | ||
32 | changeEvent.initEvent("change", true, true); | ||
33 | this._element.dispatchEvent(changeEvent); | ||
34 | } | ||
35 | } | ||
36 | }, | ||
37 | |||
38 | _checkedSyncedWithInputField: { | ||
39 | enumerable: false, | ||
40 | value: false | ||
41 | }, | ||
42 | |||
43 | _checked: { | ||
44 | enumerable: false, | ||
45 | value: null | ||
46 | }, | ||
47 | |||
48 | /** | ||
49 | Specifies if the InputRadio is in its checked state or not. | ||
50 | @type {boolean} | ||
51 | @default false | ||
52 | */ | ||
53 | checked: { | ||
54 | get: function() { | ||
55 | // If we haven't synced with the input field then our value is | ||
56 | // more up to date than the element and so we don't get it from the | ||
57 | // element. If we have synced then the user could have changed | ||
58 | // the focus to another radio button, so we *do* retrieve it from | ||
59 | // the element. | ||
60 | if (this._checkedSyncedWithInputField === true) { | ||
61 | this._checked = this._element.checked; | ||
62 | } | ||
63 | |||
64 | return this._checked; | ||
65 | }, | ||
66 | set: function(value, fromInput) { | ||
67 | this._checked = value; | ||
68 | if (fromInput) { | ||
69 | this._valueSyncedWithInputField = true; | ||
70 | } else { | ||
71 | this._valueSyncedWithInputField = false; | ||
72 | this.needsDraw = true; | ||
73 | } | ||
74 | |||
75 | if(this._checked === true) { | ||
76 | if(this.name && this.name !== null) { | ||
77 | // dispatch an event to all other radiobuttons with the same name | ||
78 | var anEvent = document.createEvent("CustomEvent"); | ||
79 | anEvent.initCustomEvent("checked", true, true, { | ||
80 | name: this.name | ||
81 | }); | ||
82 | InputRadio.dispatchEvent(anEvent); | ||
83 | InputRadio.addEventListener('checked', this); | ||
84 | } | ||
85 | } | ||
86 | } | ||
87 | }, | ||
88 | |||
89 | |||
90 | handleChecked:{ | ||
91 | value: function(evt) { | ||
92 | // if we receive this event, it means that some other radiobutton with the same name | ||
93 | // has been checked. So, mark this as unchecked. | ||
94 | if(this.name === evt.detail.name) { | ||
95 | this.checked = false; | ||
96 | InputRadio.removeEventListener('checked', this); | ||
97 | } | ||
98 | } | ||
99 | }, | ||
100 | |||
101 | draw: { | ||
102 | value: function() { | ||
103 | if (!this._valueSyncedWithInputField) { | ||
104 | this._element.checked = this._checked; | ||
105 | } | ||
106 | |||
107 | // Call super | ||
108 | Object.getPrototypeOf(InputRadio).draw.call(this); | ||
109 | } | ||
110 | } | ||
111 | }); | ||
112 | InputRadio.addAttributes(/** @lends module:"montage/ui/input-radio.reel".InputRadio */ { | ||
113 | |||
114 | /** | ||
115 | Specifies whether the radio button should be focused as soon as the page is loaded. | ||
116 | @type {boolean} | ||
117 | @default false | ||
118 | */ | ||
119 | autofocus: {value: false, dataType: 'boolean'}, | ||
120 | |||
121 | /** | ||
122 | When true, the radio button is disabled to user input and "disabled" is added to the element's CSS class list, allowing you to style the disabled control. | ||
123 | @type {boolean} | ||
124 | @default false | ||
125 | */ | ||
126 | disabled: {value: false, dataType: 'boolean'}, | ||
127 | |||
128 | /** | ||
129 | Specifies if the radio button is checked or not. | ||
130 | @type {boolean} | ||
131 | @default false | ||
132 | */ | ||
133 | checked: {value: false, dataType: 'boolean'}, | ||
134 | |||
135 | /** | ||
136 | The value of the id attribute on the form with which to associate the radio button element. | ||
137 | @type string} | ||
138 | @default null | ||
139 | */ | ||
140 | form: null, | ||
141 | |||
142 | /** | ||
143 | The name associated with the radio button's element. | ||
144 | @type {string} | ||
145 | @default null | ||
146 | */ | ||
147 | name: null, | ||
148 | |||
149 | /** | ||
150 | Specifies whether or not the user can edit the radio button. | ||
151 | @type {boolean} | ||
152 | @default false | ||
153 | */ | ||
154 | readonly: {value: false, dataType: 'boolean'}, | ||
155 | |||
156 | /** | ||
157 | Advisory information for the element, rendered as the element's tooltip. | ||
158 | @type {string}, | ||
159 | @default null | ||
160 | */ | ||
161 | title: null, | ||
162 | /* | ||
163 | "On getting, if the element has a value attribute, it must return that | ||
164 | attribute's value; otherwise, it must return the string "on". On setting, | ||
165 | it must set the element's value attribute to the new value." | ||
166 | http://www.w3.org/TR/html5/common-input-element-attributes.html#dom-input-value-default-on | ||
167 | */ | ||
168 | /** | ||
169 | The value associated with the element. | ||
170 | @type {string} | ||
171 | @default "on" | ||
172 | */ | ||
173 | value: {value: 'on'} | ||
174 | }); | ||