diff options
Diffstat (limited to 'js/components/layout/subtool-button.reel')
3 files changed, 121 insertions, 0 deletions
diff --git a/js/components/layout/subtool-button.reel/subtool-button.css b/js/components/layout/subtool-button.reel/subtool-button.css new file mode 100644 index 00000000..cda505b0 --- /dev/null +++ b/js/components/layout/subtool-button.reel/subtool-button.css | |||
@@ -0,0 +1,22 @@ | |||
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 | #topPanel .buttonBackground { | ||
8 | float:left; | ||
9 | } | ||
10 | |||
11 | .buttonSelected { | ||
12 | background: #B2B2B2; | ||
13 | } | ||
14 | |||
15 | #toolBarButton { | ||
16 | border: 3px; | ||
17 | float: left; | ||
18 | } | ||
19 | |||
20 | #toolBarButton:hover { | ||
21 | opacity: 1; | ||
22 | } | ||
diff --git a/js/components/layout/subtool-button.reel/subtool-button.html b/js/components/layout/subtool-button.reel/subtool-button.html new file mode 100644 index 00000000..9dad007d --- /dev/null +++ b/js/components/layout/subtool-button.reel/subtool-button.html | |||
@@ -0,0 +1,34 @@ | |||
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 | |||
11 | <link rel="stylesheet" type="text/css" href="subtool-button.css"> | ||
12 | |||
13 | <script type="text/montage-serialization"> | ||
14 | { | ||
15 | "owner": { | ||
16 | "module": "js/components/layout/subtool-button.reel", | ||
17 | "name": "SubToolButton", | ||
18 | "properties": { | ||
19 | "element": {"#": "buttonBackground"}, | ||
20 | "button": {"#": "toolBarButton"} | ||
21 | } | ||
22 | } | ||
23 | } | ||
24 | </script> | ||
25 | |||
26 | </head> | ||
27 | |||
28 | <body> | ||
29 | <div id="buttonBackground" class="buttonBackground"> | ||
30 | <div id="toolBarButton" class="buttonBackground"></div> | ||
31 | </div> | ||
32 | </body> | ||
33 | |||
34 | </html> | ||
diff --git a/js/components/layout/subtool-button.reel/subtool-button.js b/js/components/layout/subtool-button.reel/subtool-button.js new file mode 100644 index 00000000..d1adca43 --- /dev/null +++ b/js/components/layout/subtool-button.reel/subtool-button.js | |||
@@ -0,0 +1,65 @@ | |||
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 | var Component = require("montage/ui/component").Component; | ||
9 | |||
10 | exports.SubToolButton = Montage.create(Component, { | ||
11 | |||
12 | button: { value: null }, | ||
13 | |||
14 | data: { value: null }, | ||
15 | |||
16 | _selected: { value: null }, | ||
17 | |||
18 | selected: { | ||
19 | get: function() { return this._selected; }, | ||
20 | set: function(value) { | ||
21 | this._selected = value; | ||
22 | this.needsDraw = true; | ||
23 | } | ||
24 | }, | ||
25 | |||
26 | prepareForDraw: { | ||
27 | enumerable: false, | ||
28 | value: function() { | ||
29 | this.element.addEventListener("click", this, false); | ||
30 | |||
31 | this.element.title = this.data.toolTip; | ||
32 | |||
33 | Object.defineBinding(this, "selected", { | ||
34 | boundObject: this.data, | ||
35 | boundObjectPropertyPath: "selected", | ||
36 | oneway: false | ||
37 | }); | ||
38 | |||
39 | } | ||
40 | }, | ||
41 | |||
42 | draw: { | ||
43 | enumerable: false, | ||
44 | value: function() { | ||
45 | if(this._selected) { | ||
46 | this.element.classList.add( "buttonSelected" ); | ||
47 | this.button.classList.remove( this.data.id + "Unpressed" ); | ||
48 | this.button.classList.add( this.data.id + "Pressed" ); | ||
49 | } else { | ||
50 | this.element.classList.remove( "buttonSelected" ); | ||
51 | this.button.classList.remove( this.data.id + "Pressed" ); | ||
52 | this.button.classList.add( this.data.id + "Unpressed" ); | ||
53 | } | ||
54 | } | ||
55 | }, | ||
56 | |||
57 | handleClick: { | ||
58 | value: function(event) { | ||
59 | if(!this._selected) { | ||
60 | NJevent("selectSubTool", this.data); | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | |||
65 | }); | ||