From c4124aa30d6698d2a03fa1bb043c7e93a58b743d Mon Sep 17 00:00:00 2001 From: Rolux Date: Tue, 9 Feb 2010 11:13:36 +0530 Subject: [PATCH] simplifying menu --- build/css/ox.ui.css | 33 ++++++++--- build/js/ox.ui.js | 136 +++++++++++++++++++++----------------------- demos/.DS_Store | Bin 6148 -> 6148 bytes 3 files changed, 89 insertions(+), 80 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index f296630..7f512bc 100644 --- a/build/css/ox.ui.css +++ b/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; diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 47ba5fe..29c7135 100644 --- a/build/js/ox.ui.js +++ b/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 = $("
").addClass("OxLayer"); $.each(options.menus, function(position, menu) { var event = @@ -1858,65 +1864,56 @@ 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"); - if ($target.is(".OxTitle")) { - clickTitle(position); - } else { - self.focused = false; + position = typeof $target.data("position") != "undefined" ? + $target.data("position") : -1; + clickTitle(position); + } + + 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; - if (self.focused) { - if (self.focused && position != self.selected) { - clickTitle(position); - } - } - } - - function clickMenu() { - Ox.print("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; + focused, + position = typeof $target.data("position") != "undefined" ? + $target.data("position") : -1; + if (self.focused && position != self.selected) { + if (position > -1) { + clickTitle(position); } 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(); + focused = self.focused; + that.menus[self.selected].hideMenu(); + self.focused = focused; } } } + function onHideMenu() { + Ox.print("hideMenu self.selected", self.selected) + that.titles[self.selected].removeClass("OxSelected"); + self.focused = false; + self.selected = -1; + } + self.onChange = function(key, value) { }; @@ -2029,24 +2026,21 @@ requires that.$bottom = $("
") .addClass("OxBottom") .appendTo(that.$element); + that.$layer = $("
") + .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 $("").append( $("", { @@ -2371,19 +2360,21 @@ requires }); selectItem(-1); scrollMenuUp(); - that.hide(); if (self.options.parent) { self.options.element.removeClass("OxSelected"); } - that.loseFocus(); - that.unbindEvent({ - key_up: selectPreviousItem, - key_down: selectNextItem, - key_left: selectSupermenu, - key_right: selectSubmenu, - key_escape: that.hideMenu, - key_enter: clickItem - }); + that.hide() + .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() { diff --git a/demos/.DS_Store b/demos/.DS_Store index 1ca89b4e44d977add7c1e9244249092f3609009e..db1f06b1b84efdcfb42affdfc0de1068eedce245 100644 GIT binary patch delta 26 hcmZoMXffCj%*<HZU}9*tIe~eJ2moeN2TA|{ delta 26 hcmZoMXffCj%*<<4tD{hDZf>HZU}9*#Ie~eJ2moeB2TA|{