simplifying menu

build/css/ox.ui.css

@@ -58,14 +58,6 @@ Dialog
 ================================================================================
 */
 
-.OxLayer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 10;
-}
-
 .OxDialog {
     position: absolute;
     -moz-border-radius: 8px;
@@ -328,6 +320,27 @@ OxSelect
 .OxSelect.OxMedium > .OxSymbol {
     margin: -16px 8px 0 8px;
 }
+
+/*
+================================================================================
+Layers
+================================================================================
+*/
+.OxLayer {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 10;
+}
+.OxMainMenuLayer {
+    position: absolute;
+    width: 100%;
+    top: 24px;
+    bottom: 0px;
+    overflow: hidden;
+    z-index: 10;
+}
 /*
 ================================================================================
 Menus
@@ -335,7 +348,7 @@ Menus
 */
 
 .OxMainMenu {
-    z-index: 10;
+    z-index: 9;
     -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
     -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
 }
@@ -383,6 +396,8 @@ Menus
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48)));
 }
 
+
+
 .OxMenu {
     position: absolute;
     display: none;

build/js/ox.ui.js

@@ -842,12 +842,14 @@ requires
             };
             that.gainFocus = function() {
                 Ox.Focus.focus(that.id);
+                return that;
             };
             that.hasFocus = function() {
                 return Ox.Focus.focused() == that.id;
             };
             that.loseFocus = function() {
                 Ox.Focus.blur(that.id);
+                return that;
             };
             that.options = function() { // fixme: use Ox.getset
                 /*
@@ -1237,7 +1239,10 @@ requires
                 });
             })
             .appendTo(that);
-        that.$title = new Ox.Element().addClass("OxTitle").html(options.title).appendTo(that.$titlebar);
+        that.$title = new Ox.Element()
+            .addClass("OxTitle")
+            .html(options.title)
+            .appendTo(that.$titlebar);
         that.$content = new Ox.Container()
             .addClass("OxContent")
             .css({
@@ -1279,7 +1284,7 @@ requires
             if (!that.$layer.length) {
                 that.$layer = new Ox.Element()
                     .addClass("OxLayer")
-                    .appendTo($("body"));
+                    .appendTo($body);
             }
             that.css({
                 opacity: 0
@@ -1843,8 +1848,9 @@ requires
 
         self.focused = false;
         self.selected = -1;
-        that.titles = [];
         that.menus = [];
+        that.titles = [];
+        that.layer = $("<div>").addClass("OxLayer");
 
         $.each(options.menus, function(position, menu) {
             var event = 
@@ -1858,63 +1864,54 @@ requires
                 mainmenu: that,
                 size: self.options.size
             }));
-            that.bindEvent("click_" + that.menus[position].options("id"), clickMenu);
+            that.bindEvent("hide_" + that.menus[position].options("id"), onHideMenu);
         });
 
         function click(event) {
             var $target = $(event.target),
-                position = $target.data("position");
+                position = typeof $target.data("position") != "undefined" ?
-            if ($target.is(".OxTitle")) {
+                        $target.data("position") : -1;
             clickTitle(position);
-            } else {
+        }
-                self.focused = false;
+
+        function clickTitle(position) {
+            var selected = self.selected;
+            if (self.selected > -1) {
+                that.menus[self.selected].hideMenu();
+            }
+            if (position > -1) {
+                Ox.print("position", position, "self.selected", self.selected)
+                if (position != selected) {
+                    self.focused = true;
+                    self.selected = position;
+                    Ox.print("position", position, "setting self.selected", self.selected)
+                    that.titles[self.selected].addClass("OxSelected");
+                    that.menus[self.selected].showMenu();
+                }
             }
         }
 
         function mousemove(event) {
             var $target = $(event.target),
-                position = typeof $target.data("position") != "undefined" ? $target.data("position") : -1;
+                focused,
-            if (self.focused) {
+                position = typeof $target.data("position") != "undefined" ?
+                        $target.data("position") : -1;
             if (self.focused && position != self.selected) {
+                if (position > -1) {
                     clickTitle(position);                        
+                } else {
+                    focused = self.focused;
+                    that.menus[self.selected].hideMenu();
+                    self.focused = focused;
                 }
             }
         }
 
-        function clickMenu() {
+        function onHideMenu() {
-            Ox.print("self.selected", self.selected)
+            Ox.print("hideMenu self.selected", self.selected)
             that.titles[self.selected].removeClass("OxSelected");
-            self.selected = -1;
-            self.focused = false;
-        }
-
-        function clickTitle(position) {
-            var menu, title;
-            if (position == -1) {
-                if (self.selected > -1) {
-                    that.menus[self.selected].hideMenu();
-                    that.titles[self.selected].removeClass("OxSelected");
-                    self.selected = -1;
-                }
-            } else {
-                title = that.titles[position],
-                menu = that.menus[position];
-                if (self.selected > -1) {
-                    that.menus[self.selected].hideMenu();
-                    that.titles[self.selected].removeClass("OxSelected");
-                }
-                if (self.selected == position) {
             self.focused = false;
             self.selected = -1;
-                } else {
-                    Ox.print("pos", position)
-                    self.focused = true;
-                    self.selected = position;
-                    Ox.print("s.s", self.selected)
-                    that.titles[self.selected].addClass("OxSelected");
-                    that.menus[self.selected].showMenu();
-                }
-            }
         }
 
         self.onChange = function(key, value) {
@@ -2029,24 +2026,21 @@ requires
         that.$bottom = $("<div>")
             .addClass("OxBottom")
             .appendTo(that.$element);
+        that.$layer = $("<div>")
+            .addClass(self.options.mainmenu ? "OxMainMenuLayer" : "OxLayer");
 
         function click(event) {
             var item,
                 position,
                 $target = $(event.target);
-            that.hideMenu();
             if ($target.is(".OxCell")) {
                 position = $target.parent().data("position");
                 item = that.items[position];
-                Ox.print("...", position, item)
                 if (!item.options("disabled")) {
                     clickItem(position);
-                } else {
-                    that.triggerEvent("click");
                 }
-            } else {
-                that.triggerEvent("click");
             }
+            that.hideMenu();
         }
 
         function clickItem(position) {
@@ -2068,10 +2062,10 @@ requires
                     item.toggleTitle();
                 }
             }
-            closeMenu();
         }
 
         function clickSelectedItem() {
+            // called on key.enter
             if (self.options.selected > -1) {
                 clickItem(self.options.selected);
             } else {
@@ -2079,11 +2073,6 @@ requires
             }
         }
 
-        function closeMenu() {
-            that.triggerEvent("click");
-            that.hideMenu();
-        }
-
         function constructLine() {
             return $("<tr>").append(
                 $("<td>", {
@@ -2371,19 +2360,21 @@ requires
             });
             selectItem(-1);
             scrollMenuUp();
-            that.hide();
             if (self.options.parent) {
                 self.options.element.removeClass("OxSelected");
             }
-            that.loseFocus();
+            that.hide()
-            that.unbindEvent({
+                .loseFocus()
+                .unbindEvent({
                     key_up: selectPreviousItem,
                     key_down: selectNextItem,
                     key_left: selectSupermenu,
                     key_right: selectSubmenu,
                     key_escape: that.hideMenu,
                     key_enter: clickItem
-            });
+                })
+                .triggerEvent("hide");
+            that.$layer.hide();
             $document.unbind("click", click);
             return that;
             //that.triggerEvent("hide");
@@ -2399,6 +2390,9 @@ requires
 
         that.showMenu = function() {
             Ox.print("showMenu")
+            if (!self.options.parent && !that.$layer.parent().length) {
+                that.$layer.appendTo($body);
+            }
             that.parent().length || that.appendTo($body);
             var offset = self.options.element.offset(),
                 width = self.options.element.outerWidth(),
@@ -2431,7 +2425,7 @@ requires
                 key_down: selectNextItem,
                 key_left: selectSupermenu,
                 key_right: selectSubmenu,
-                key_escape: closeMenu,
+                key_escape: that.hideMenu,
                 key_enter: clickSelectedItem
             });
             setTimeout(function() {