diff options
Diffstat (limited to 'js/components')
8 files changed, 53 insertions, 316 deletions
diff --git a/js/components/button.reel/button.css b/js/components/button.reel/button.css deleted file mode 100755 index f50a9873..00000000 --- a/js/components/button.reel/button.css +++ /dev/null | |||
@@ -1,40 +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 | .button { | ||
8 | border:none; | ||
9 | cursor:default; | ||
10 | text-align:center; | ||
11 | -webkit-user-select:none; | ||
12 | opacity:0.8; | ||
13 | display:table-cell; | ||
14 | vertical-align:middle; | ||
15 | width:100%; | ||
16 | height:100%; | ||
17 | background-color:#333333; | ||
18 | color:white; | ||
19 | } | ||
20 | |||
21 | .button:hover | ||
22 | { | ||
23 | opacity:1; | ||
24 | } | ||
25 | |||
26 | .button:active | ||
27 | { | ||
28 | outline:solid 1px black; | ||
29 | } | ||
30 | |||
31 | .button.on | ||
32 | { | ||
33 | background-color: #333333; | ||
34 | } | ||
35 | |||
36 | .button.off | ||
37 | { | ||
38 | background-color: #cccccc; | ||
39 | color:black; | ||
40 | } \ No newline at end of file | ||
diff --git a/js/components/button.reel/button.html b/js/components/button.reel/button.html deleted file mode 100755 index d0398a6a..00000000 --- a/js/components/button.reel/button.html +++ /dev/null | |||
@@ -1,26 +0,0 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | <head> | ||
9 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | ||
10 | <link rel="stylesheet" type="text/css" href="button.css"> | ||
11 | <script type="text/montage-serialization"> | ||
12 | { | ||
13 | "owner": { | ||
14 | "module": "js/components/button.reel", | ||
15 | "name": "Button", | ||
16 | "properties": { | ||
17 | "element": {"#": "button"} | ||
18 | } | ||
19 | } | ||
20 | } | ||
21 | </script> | ||
22 | </head> | ||
23 | <body> | ||
24 | <button id="button" class="button"></button> | ||
25 | </body> | ||
26 | </html> \ No newline at end of file | ||
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; |