diff options
Diffstat (limited to 'js/components/menu/menu-entry.reel')
-rw-r--r-- | js/components/menu/menu-entry.reel/menu-entry.css | 64 | ||||
-rw-r--r-- | js/components/menu/menu-entry.reel/menu-entry.html | 81 | ||||
-rw-r--r-- | js/components/menu/menu-entry.reel/menu-entry.js | 79 |
3 files changed, 224 insertions, 0 deletions
diff --git a/js/components/menu/menu-entry.reel/menu-entry.css b/js/components/menu/menu-entry.reel/menu-entry.css new file mode 100644 index 00000000..ea0fa6d1 --- /dev/null +++ b/js/components/menu/menu-entry.reel/menu-entry.css | |||
@@ -0,0 +1,64 @@ | |||
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 | .topMenuItem { | ||
8 | float: left; | ||
9 | display: inline; | ||
10 | } | ||
11 | |||
12 | .topMenuItem .menubg{ | ||
13 | color: #f7f7f7; | ||
14 | } | ||
15 | |||
16 | .topMenuItem .menuName { | ||
17 | font-family: 'Droid Sans', sans-serif; | ||
18 | font-size: 10pt; | ||
19 | padding: 3px 12px 3px 8px; | ||
20 | text-shadow : 1px 1px 1px #000000; | ||
21 | } | ||
22 | |||
23 | .menubg{ | ||
24 | display: inline; | ||
25 | } | ||
26 | |||
27 | .menubg.checked .check { | ||
28 | opacity: 1; | ||
29 | } | ||
30 | |||
31 | .selected { | ||
32 | background-color: #7F7F7F; | ||
33 | } | ||
34 | |||
35 | .menu-label { | ||
36 | font-family: 'Droid Sans', sans-serif; | ||
37 | font-size: 10pt; | ||
38 | padding: 3px 12px 3px 8px; | ||
39 | text-shadow: 1px 1px 1px black; | ||
40 | } | ||
41 | |||
42 | .subEntries{ | ||
43 | position: absolute; | ||
44 | z-index: 100000; | ||
45 | float:left; | ||
46 | font-family: 'Droid Sans', sans-serif !important; | ||
47 | color: #ffffff; | ||
48 | background: #494949; | ||
49 | border: 1px solid #292929; | ||
50 | border-radius: 8px; | ||
51 | padding: 8px 0px 8px 0px; | ||
52 | box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); | ||
53 | white-space:nowrap; | ||
54 | } | ||
55 | |||
56 | .menuItem { | ||
57 | font-size: 9pt; | ||
58 | padding: 4px 8px; | ||
59 | display: block; | ||
60 | float: none; | ||
61 | position: relative; | ||
62 | background: #474747; | ||
63 | color: white; | ||
64 | } | ||
diff --git a/js/components/menu/menu-entry.reel/menu-entry.html b/js/components/menu/menu-entry.reel/menu-entry.html new file mode 100644 index 00000000..bba5e65d --- /dev/null +++ b/js/components/menu/menu-entry.reel/menu-entry.html | |||
@@ -0,0 +1,81 @@ | |||
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="menu-entry.css"> | ||
11 | |||
12 | <script type="text/montage-serialization"> | ||
13 | { | ||
14 | "entriesController": { | ||
15 | "name": "ArrayController", | ||
16 | "module": "montage/ui/controller/array-controller", | ||
17 | "properties": { | ||
18 | "automaticallyOrganizeObjects": false | ||
19 | }, | ||
20 | "bindings": { | ||
21 | "content": { | ||
22 | "boundObject": {"@": "owner"}, | ||
23 | "boundObjectPropertyPath": "data.entries", | ||
24 | "oneway": true | ||
25 | } | ||
26 | } | ||
27 | }, | ||
28 | |||
29 | "repetition": { | ||
30 | "module": "montage/ui/repetition.reel", | ||
31 | "name": "Repetition", | ||
32 | "properties": { | ||
33 | "element": { "#": "subEntries" }, | ||
34 | "contentController": {"@": "entriesController"} | ||
35 | } | ||
36 | }, | ||
37 | |||
38 | "menuItem": { | ||
39 | "module": "js/components/menu/menu-item.reel", | ||
40 | "name": "MenuItem", | ||
41 | "properties": { | ||
42 | "element": { "#": "menuEntryItem" } | ||
43 | }, | ||
44 | "bindings": { | ||
45 | "data": { | ||
46 | "boundObject": {"@": "repetition"}, | ||
47 | "boundObjectPropertyPath": "objectAtCurrentIteration", | ||
48 | "oneway": true | ||
49 | } | ||
50 | } | ||
51 | }, | ||
52 | |||
53 | "owner": { | ||
54 | "module": "js/components/menu/menu-entry.reel", | ||
55 | "name": "MenuEntry", | ||
56 | "properties": { | ||
57 | "element": {"#": "menuItem"}, | ||
58 | "topHeader": {"#": "topHeaderBackground"}, | ||
59 | "topHeaderText": {"#": "topHeaderText"}, | ||
60 | "subEntries": {"#": "subEntries"} | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | </script> | ||
65 | |||
66 | </head> | ||
67 | <body> | ||
68 | |||
69 | <li id="menuItem" class="topMenuItem"> | ||
70 | <div id="topHeaderBackground" class="menubg"> | ||
71 | <span id="topHeaderText" class="menu-label"></span> | ||
72 | </div> | ||
73 | |||
74 | <ul id="subEntries" class="subEntries" style="z-index: 9991;"> | ||
75 | <li id="menuEntryItem"></li> | ||
76 | </ul> | ||
77 | |||
78 | </li> | ||
79 | |||
80 | </body> | ||
81 | </html> | ||
diff --git a/js/components/menu/menu-entry.reel/menu-entry.js b/js/components/menu/menu-entry.reel/menu-entry.js new file mode 100644 index 00000000..57e6ec87 --- /dev/null +++ b/js/components/menu/menu-entry.reel/menu-entry.js | |||
@@ -0,0 +1,79 @@ | |||
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.MenuEntry = Montage.create(Component, { | ||
11 | topHeader: { value: null }, | ||
12 | topHeaderText: { value: null }, | ||
13 | |||
14 | // Reference to the parent Menu component | ||
15 | _menu: { | ||
16 | value: null | ||
17 | }, | ||
18 | |||
19 | data: { | ||
20 | value: null | ||
21 | }, | ||
22 | |||
23 | select: { | ||
24 | value: function() { | ||
25 | this.element.classList.add("selected"); | ||
26 | this.subEntries.style.display = "block"; | ||
27 | } | ||
28 | }, | ||
29 | |||
30 | deselect: { | ||
31 | value: function() { | ||
32 | this.element.classList.remove("selected"); | ||
33 | this.subEntries.style.display = "none"; | ||
34 | } | ||
35 | }, | ||
36 | |||
37 | _menuIsActive: { | ||
38 | value: false | ||
39 | }, | ||
40 | |||
41 | menuIsActive: { | ||
42 | get: function() { | ||
43 | return this._menuIsActive; | ||
44 | }, | ||
45 | set: function(value) { | ||
46 | if(value) this.topHeader.addEventListener("mouseover", this, false); | ||
47 | } | ||
48 | }, | ||
49 | |||
50 | handleClick: { | ||
51 | value: function(event) { | ||
52 | this._menu.toggleActivation(this); | ||
53 | } | ||
54 | }, | ||
55 | |||
56 | handleMouseover: { | ||
57 | value: function(event) { | ||
58 | this._menu.activeEntry = this; | ||
59 | } | ||
60 | }, | ||
61 | |||
62 | prepareForDraw: { | ||
63 | value: function() { | ||
64 | |||
65 | this.subEntries.style.display = "none"; | ||
66 | |||
67 | this.topHeaderText.innerHTML = this.data.header; | ||
68 | |||
69 | this.element.addEventListener("click", this, false); | ||
70 | |||
71 | Object.defineBinding(this, "menuIsActive", { | ||
72 | boundObject: this._menu, | ||
73 | boundObjectPropertyPath: "active", | ||