aboutsummaryrefslogtreecommitdiff
path: root/js/ui/menu/menu-item.reel/menu-item.js
diff options
context:
space:
mode:
authorValerio Virgillito2012-07-17 23:34:57 -0700
committerValerio Virgillito2012-07-17 23:34:57 -0700
commit8f78cb1377009dabde95f4a81d5090b79b9de0da (patch)
tree4b984909acba691eac8376e3b60412f632e3cdc3 /js/ui/menu/menu-item.reel/menu-item.js
parent4f737b24c19ddc02d20f9783b8b080fc6ef11142 (diff)
downloadninja-8f78cb1377009dabde95f4a81d5090b79b9de0da.tar.gz
menu design update and bug fixes - Moved Preview to the document bar
- Redesigned the menu and improved DOM structure. - Removed un-used entires - Fixed layout and snap entries - Moved the preview button to the document bar. - Fixes for bugs: #1750, #1867, #1876, #1895 Signed-off-by: Valerio Virgillito <valerio@motorola.com>
Diffstat (limited to 'js/ui/menu/menu-item.reel/menu-item.js')
-rwxr-xr-xjs/ui/menu/menu-item.reel/menu-item.js208
1 files changed, 208 insertions, 0 deletions
diff --git a/js/ui/menu/menu-item.reel/menu-item.js b/js/ui/menu/menu-item.reel/menu-item.js
new file mode 100755
index 00000000..97f13d13
--- /dev/null
+++ b/js/ui/menu/menu-item.reel/menu-item.js
@@ -0,0 +1,208 @@
1/* <copyright>
2Copyright (c) 2012, Motorola Mobility LLC.
3All Rights Reserved.
4
5Redistribution and use in source and binary forms, with or without
6modification, are permitted provided that the following conditions are met:
7
8* Redistributions of source code must retain the above copyright notice,
9 this list of conditions and the following disclaimer.
10
11* Redistributions in binary form must reproduce the above copyright notice,
12 this list of conditions and the following disclaimer in the documentation
13 and/or other materials provided with the distribution.
14
15* Neither the name of Motorola Mobility LLC nor the names of its
16 contributors may be used to endorse or promote products derived from this
17 software without specific prior written permission.
18
19THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
20AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
21IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
22ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
23LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
24CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
25SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
26INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
27CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
28ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
29POSSIBILITY OF SUCH DAMAGE.
30</copyright> */
31
32var Montage = require("montage/core/core").Montage;
33var Component = require("montage/ui/component").Component;
34
35exports.MenuItem = Montage.create(Component, {
36
37 _enabled: {
38 value: false
39 },
40
41 enabled: {
42 get: function() {
43 return this._enabled;
44 },
45 set: function(value) {
46 if(value !== this._enabled) {
47 this._enabled = value;
48 this.needsDraw = true;
49 }
50 }
51 },
52
53 _label: {
54 value: null
55 },
56
57 label: {
58 get: function() {
59 return this._label;
60 },
61 set: function(value) {
62 if(this._label !== value) {
63 this._label = value;
64 }
65 }
66 },
67
68 _submenu: {
69 value: false
70 },
71
72 submenu: {
73 get: function() {
74 return this._submenu;
75 },
76 set: function(value) {
77 if(this._submenu !== value) {
78 this._submenu = value;
79 }
80 }
81 },
82
83 _entries: {
84 value: null
85 },
86
87 entries: {
88 get: function() {
89 return this._entries;
90 },
91 set: function(value) {
92 if(this._entries !== value) {
93 this._entries = value;
94 }
95 }
96 },
97
98 submenuElement: {
99 value: null
100 },
101
102 checkMark: {
103 value: null
104 },
105
106 _checked: {
107 value: null
108 },
109
110 checked: {
111 get: function() {
112 return this._checked;
113 },
114 set: function(value) {
115 if(this._checked !== value) {
116 this._checked = value;
117 this.needsDraw = true;
118 }
119 }
120 },
121
122 _action: {
123 value: ""
124 },
125
126 action: {
127 get: function() {
128 return this._action;
129 },
130 set: function(value) {
131 if(this._action !== value) {
132 this._action = value;
133 }
134 }
135 },
136
137 prepareForDraw: {
138 value: function() {
139 // Don't add mouse event if this is a separator
140 if(this.label === "" ) {
141 return;
142 }
143
144 this.element.addEventListener("mouseover", this, false);
145 this.element.addEventListener("mouseout", this, false);
146 this.element.addEventListener("mouseup", this, true);
147 }
148 },
149
150 draw: {
151 value: function() {
152 if(this.label === "") {
153 this.element.classList.add("separatorContainer");
154 this.element.innerHTML = "<div class='separator'></div>";
155 }
156
157 if(this.enabled) {
158 this.element.classList.remove("disabled");
159 } else {
160 this.element.classList.add("disabled");
161 }
162
163
164 if(this.checked) {
165 this.checkMark.classList.add("checked");
166 } else {
167 this.checkMark.classList.remove("checked");
168 }
169
170 }
171 },
172
173 captureMouseup: {
174 value: function(event) {
175 if( this.enabled === true && this.submenu === false ) {
176 if(this.action !== "") {
177
178 var menuItemClick = document.createEvent("CustomEvent");
179 menuItemClick.initCustomEvent("menuItemClick", true, true, this.action);
180 this.dispatchEvent(menuItemClick);
181
182 }
183 }
184 }
185 },
186
187 handleMouseover: {
188 value: function() {
189 if(this.enabled){
190 this.element.style.backgroundColor = "#7f7f7f";
191 if(this.submenu) {
192 this.submenuElement.classList.add("show");
193 }
194 }
195 }
196 },
197
198 handleMouseout: {
199 value: function() {
200 this.element.style.backgroundColor = "#474747";
201
202 if(this.submenu) {
203 this.submenuElement.classList.remove("show");
204 }
205 }
206 }
207
208});