diff options
Diffstat (limited to 'node_modules/montage/ui/toggle-button.reel/toggle-button.js')
-rw-r--r-- | node_modules/montage/ui/toggle-button.reel/toggle-button.js | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/node_modules/montage/ui/toggle-button.reel/toggle-button.js b/node_modules/montage/ui/toggle-button.reel/toggle-button.js new file mode 100644 index 00000000..f8f3c0fa --- /dev/null +++ b/node_modules/montage/ui/toggle-button.reel/toggle-button.js | |||
@@ -0,0 +1,171 @@ | |||
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 | var Montage = require("montage").Montage, | ||
7 | Component = require("ui/component").Component, | ||
8 | Button = require("ui/button.reel/button").Button; | ||
9 | /** | ||
10 | * The Text input | ||
11 | */ | ||
12 | var ToggleButton = exports.ToggleButton = Montage.create(Button, { | ||
13 | _pressed: { | ||
14 | enumerable: false, | ||
15 | value: false | ||
16 | }, | ||
17 | /** | ||
18 | Whether the toggle button is down/pressed or not. | ||
19 | @type {Property} | ||
20 | @default {Boolean} false | ||
21 | */ | ||
22 | pressed: { | ||
23 | get: function() { | ||
24 | return this._pressed; | ||
25 | }, | ||
26 | set: function(value) { | ||
27 | this._pressed = !!value; | ||
28 | this._label = (this._pressed) ? this._pressedLabel : this._unpressedLabel; | ||
29 | this.needsDraw = true; | ||
30 | } | ||
31 | }, | ||
32 | |||
33 | _unpressedLabel: { | ||
34 | enumerable: false, | ||
35 | value: null | ||
36 | }, | ||
37 | /** | ||
38 | The value the button should take when it is in the unpressed state. If | ||
39 | this is not set at initialization it will be set to the `value` of the | ||
40 | button. | ||
41 | @type {Property} | ||
42 | @default {String} null | ||
43 | */ | ||
44 | unpressedLabel: { | ||
45 | get: function() { | ||
46 | return this._unpressedLabel; | ||
47 | }, | ||
48 | set: function(value) { | ||
49 | this._unpressedLabel = value; | ||
50 | if (!this._pressed) { | ||
51 | this.label = this._unpressedLabel; | ||
52 | this.needsDraw = true; | ||
53 | } | ||
54 | } | ||
55 | }, | ||
56 | |||
57 | _pressedLabel: { | ||
58 | enumerable: false, | ||
59 | value: null | ||
60 | }, | ||
61 | /** | ||
62 | The value the button should take when it is in the pressed state. If | ||
63 | this is not set at initialization it will be set to the `value` of the | ||
64 | button. | ||
65 | @type {Property} | ||
66 | @default {String} null | ||
67 | */ | ||
68 | pressedLabel: { | ||
69 | get: function() { | ||
70 | return this._pressedLabel; | ||
71 | }, | ||
72 | set: function(value) { | ||
73 | this._pressedLabel = value; | ||
74 | if (this._pressed) { | ||
75 | this.label = this._pressedLabel; | ||
76 | this.needsDraw = true; | ||
77 | } | ||
78 | } | ||
79 | }, | ||
80 | |||
81 | _pressedClass: { | ||
82 | enumerable: false, | ||
83 | value: "pressed" | ||
84 | }, | ||
85 | /** | ||
86 | The class that should be added to the element when the button is in | ||
87 | the pressed state. It is removed when the button is unpressed. | ||
88 | @type {Property} | ||
89 | @default {String} "pressed" | ||
90 | */ | ||
91 | pressedClass: { | ||
92 | get: function() { | ||
93 | return this._pressedClass; | ||
94 | }, | ||
95 | set: function(value) { | ||
96 | this._pressedClass = value; | ||
97 | if (this._pressed) { | ||
98 | this.needsDraw = true; | ||
99 | } | ||
100 | } | ||
101 | }, | ||
102 | |||
103 | /** | ||
104 | The current value of the button. It will be set to unpressedLabel or | ||
105 | pressedLabel depending on state. | ||
106 | |||
107 | Setting this property equal to unpressedLabel or pressedLabel will | ||
108 | change the pressed state of the button to `false` and `true` respectively. | ||
109 | @type {Property} | ||
110 | @default {String} null, or the value of the element | ||
111 | */ | ||
112 | label: { | ||
113 | get: function() { | ||
114 | return Object.getOwnPropertyDescriptor(Object.getPrototypeOf(ToggleButton),"label").get.call(this); | ||
115 | }, | ||
116 | set: function(value) { | ||
117 | // Call super | ||
118 | Object.getOwnPropertyDescriptor(Object.getPrototypeOf(ToggleButton),"label").set.call(this, value); | ||
119 | if (this._pressed === true && this._label === this._unpressedLabel) { | ||
120 | this.pressed = false; | ||
121 | } else if (this._pressed === false && this._label === this._pressedLabel) { | ||
122 | this.pressed = true; | ||
123 | } | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | deserializedFromTemplate: { | ||
128 | value: function() { | ||
129 | Object.getPrototypeOf(ToggleButton).deserializedFromTemplate.call(this); | ||
130 | |||
131 | // If we haven't set the (un)pressedLabel of the initial state, | ||
132 | // then take it from the label | ||
133 | if (this._unpressedLabel === null && this._label !== null) { | ||
134 | this._unpressedLabel = this._label; | ||
135 | } | ||
136 | if (this._pressedLabel === null && this._label !== null) { | ||
137 | this._pressedLabel = this._label; | ||
138 | } | ||
139 | } | ||
140 | }, | ||
141 | |||
142 | draw: { | ||
143 | value: function() { | ||
144 | Object.getPrototypeOf(ToggleButton).draw.call(this); | ||
145 | if (this._pressed) { | ||
146 | this._element.classList.add(this._pressedClass); | ||
147 | this._element.setAttribute("aria-pressed", true); | ||
148 | } else { | ||
149 | this._element.classList.remove(this._pressedClass); | ||
150 | this._element.setAttribute("aria-pressed", false); | ||
151 | } | ||
152 | } | ||
153 | }, | ||
154 | |||
155 | _dispatchActionEvent: { | ||
156 | value: function() { | ||
157 | this.pressed = !this._pressed; | ||
158 | Object.getPrototypeOf(ToggleButton)._dispatchActionEvent.call(this); | ||
159 | } | ||
160 | }, | ||
161 | |||
162 | /** | ||
163 | Change the button to the inverse of its current state. | ||
164 | @type {Function} | ||
165 | */ | ||
166 | toggle: { | ||
167 | value: function() { | ||
168 | this.pressed = !this._pressed; | ||
169 | } | ||
170 | } | ||
171 | }); | ||