diff options
author | Valerio Virgillito | 2012-03-20 00:27:16 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-03-20 00:27:16 -0700 |
commit | efde3eab7a31070427142fa03f17985163a8d33b (patch) | |
tree | 04beb9394154c7f20b6e062170473ff180680848 /js/components/button.reel/button.js | |
parent | c28ba39e39e16e6c84f63c8564d1543f015ed0a9 (diff) | |
parent | 313354a8ff9ed21b826ab5f280bcf1095a64a7f4 (diff) | |
download | ninja-efde3eab7a31070427142fa03f17985163a8d33b.tar.gz |
Merge branch 'refs/heads/button-switch' into montage-integration
Diffstat (limited to 'js/components/button.reel/button.js')
-rwxr-xr-x | js/components/button.reel/button.js | 225 |
1 files changed, 0 insertions, 225 deletions
diff --git a/js/components/button.reel/button.js b/js/components/button.reel/button.js deleted file mode 100755 index 2d26c8b4..00000000 --- a/js/components/button.reel/button.js +++ /dev/null | |||
@@ -1,225 +0,0 @@ | |||
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 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component; | ||
9 | |||
10 | var Button = exports.Button = Montage.create(Component, { | ||
11 | // Button state | ||
12 | _focused: { | ||
13 | value: false | ||
14 | }, | ||
15 | |||
16 | _pressed: { | ||
17 | value: false | ||
18 | }, | ||
19 | |||
20 | _isToggleButton: { | ||
21 | value: false | ||
22 | }, | ||
23 | |||
24 | isToggleButton: { | ||
25 | serializable: true, | ||
26 | enumerable: true, | ||
27 | get: function() { | ||
28 | return this._isToggleButton; | ||
29 | }, | ||
30 | set: function(value) { | ||
31 | if (value !== this._isToggleButton) { | ||
32 | this._isToggleButton = value; | ||
33 | this.needsDraw = true; | ||
34 | } | ||
35 | } | ||
36 | }, | ||
37 | |||
38 | _value: { | ||
39 | value: false | ||
40 | }, | ||
41 | |||
42 | value: { | ||
43 | serializable: true, | ||
44 | enumerable: true, | ||
45 | get: function() { | ||
46 | return this._value; | ||
47 | }, | ||
48 | set: function(value) { | ||
49 | if ( (value !== null) && (value !== this._value) ) { | ||
50 | this._value = value; | ||
51 | this.needsDraw = true; | ||
52 | } | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | _label: { | ||
57 | value: "" | ||
58 | }, | ||
59 | |||
60 | label: { | ||
61 | serializable: true, | ||
62 | enumerable: true, | ||
63 | get: function() { | ||
64 | return this._label; | ||
65 | }, | ||
66 | set: function(value) { | ||
67 | if (value !== this._label) { | ||
68 | this._label = value; | ||
69 | this.needsDraw = true; | ||
70 | } | ||
71 | } | ||
72 | }, | ||
73 | |||
74 | // TODO - Allow user to specify up, over and down states | ||
75 | _onState: { | ||
76 | value: "on" | ||
77 | }, | ||
78 | |||
79 | onState: { | ||
80 | serializable: true, | ||
81 | enumerable: true, | ||
82 | get: function() { | ||
83 | return this._onState; | ||
84 | }, | ||
85 | set: function(value) { | ||
86 | if (value !== this._onState) { | ||
87 | this._onState = value; | ||
88 | this.needsDraw = true; | ||
89 | } | ||
90 | } | ||
91 | }, | ||
92 | |||
93 | _offState: { | ||
94 | value: "off" | ||
95 | }, | ||
96 | |||
97 | offState: { | ||
98 | serializable: true, | ||
99 | enumerable: true, | ||
100 | get: function() { | ||
101 | return this._offState; | ||
102 | }, | ||
103 | set: function(value) { | ||
104 | if (value !== this._offState) { | ||
105 | this._offState = value; | ||
106 | this.needsDraw = true; | ||
107 | } | ||
108 | } | ||
109 | }, | ||
110 | |||
111 | // Low-level event listeners | ||
112 | handleTouchstart: { | ||
113 | value: function(event) { | ||
114 | // TODO preventingDefault disables the magnifying class | ||
115 | // sadly it also disables double tapping on the button to zoom... | ||
116 | event.preventDefault(); | ||
117 | this._acknowledgeIntent(); | ||
118 | } | ||
119 | }, | ||
120 | |||
121 | handleMousedown: { | ||
122 | value: function(event) { | ||
123 | this._acknowledgeIntent(); | ||
124 | } | ||
125 | }, | ||
126 | |||
127 | handleTouchend: { | ||
128 | value: function(event) { | ||
129 | this._interpretInteraction(event); | ||
130 | } | ||
131 | }, | ||
132 | |||
133 | handleTouchcancel: { | ||
134 | value: function(event) { | ||
135 | console.log("cancel!") | ||
136 | // this._interpretInteraction(event); | ||
137 | } | ||
138 | }, | ||
139 | |||
140 | handleMouseup: { | ||
141 | value: function(event) { | ||
142 | this._interpretInteraction(event); | ||
143 | } | ||
144 | }, | ||
145 | |||
146 | // Internal state management | ||
147 | _acknowledgeIntent: { | ||
148 | value: function() { | ||
149 | this._pressed = true; | ||
150 | this.element.classList.add("pressed"); | ||
151 | } | ||
152 | }, | ||
153 | |||
154 | _interpretInteraction: { | ||
155 | value: function(event) { | ||
156 | |||
157 | if (!this._pressed) { | ||
158 | return; | ||
159 | } | ||
160 | |||
161 | this.value = !this.value; | ||
162 | |||
163 | this._pressed = false; | ||
164 | this._dispatchActionEvent(); | ||
165 | } | ||
166 | }, | ||
167 | |||
168 | _dispatchActionEvent: { | ||
169 | value: function() { | ||
170 | var actionEvent = document.createEvent("CustomEvent"); | ||
171 | actionEvent.initCustomEvent("action", true, true); | ||
172 | actionEvent.type = "action"; | ||
173 | this.dispatchEvent(actionEvent); | ||
174 | } | ||
175 | }, | ||
176 | |||
177 | draw: { | ||
178 | enumerable: false, | ||
179 | value: function() { | ||
180 | if(this.isToggleButton) | ||
181 | { | ||
182 | if(this._value === true) | ||
183 | { | ||
184 | this.element.classList.remove(this.offState); | ||
185 | this.element.classList.add(this.onState); | ||
186 | } | ||
187 | else | ||
188 | { | ||
189 | this.element.classList.remove(this.onState); | ||
190 | this.element.classList.add(this.offState); | ||
191 | } | ||
192 | } | ||
193 | |||
194 | if(this.label && this.label !== "") | ||
195 | { | ||
196 | this.element.textContent = this.label; | ||
197 | } | ||
198 | } | ||
199 | }, | ||
200 | |||
201 | prepareForDraw: { | ||
202 | value: function() { | ||
203 | |||
204 | // TODO only install low level event listeners for high level | ||
205 | // events others listen to us for | ||
206 | |||
207 | this.element.addEventListener("touchstart", this); | ||
208 | // TODO listen to mouseup anywhere within the app | ||
209 | document.addEventListener("touchend", this); | ||
210 | document.addEventListener("touchcancel", this); | ||
211 | |||
212 | |||
213 | this.element.addEventListener("mousedown", this); | ||
214 | |||
215 | // TODO listen to mouseup anywhere within the app | ||
216 | document.addEventListener("mouseup", this); | ||
217 | |||
218 | // TODO accept space or enter as a way to trigger action | ||
219 | // if element targeted; balancing demans of multitouch | ||
220 | // with traditional single focus model | ||
221 | document.addEventListener("keydown", this, true); | ||
222 | } | ||
223 | } | ||
224 | |||
225 | }); | ||