aboutsummaryrefslogtreecommitdiff
path: root/js/components/menu/menu-entry.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/menu/menu-entry.reel')
-rw-r--r--js/components/menu/menu-entry.reel/menu-entry.css64
-rw-r--r--js/components/menu/menu-entry.reel/menu-entry.html81
-rw-r--r--js/components/menu/menu-entry.reel/menu-entry.js79
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>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No 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
7var Montage = require("montage/core/core").Montage;
8var Component = require("montage/ui/component").Component;
9
10exports.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",
74 oneway: true
75 });
76
77</