From fbf87c9b1c2c90ecb9c2b312e2b7f9292663a3fa Mon Sep 17 00:00:00 2001 From: Rolux Date: Mon, 8 Feb 2010 15:05:24 +0530 Subject: [PATCH] MainMenu in demos/test/index.html --- build/css/ox.ui.classic.css | 5 + build/css/ox.ui.css | 47 ++++++++ build/js/ox.ui.js | 228 ++++++++++++++++++++++++++---------- demos/test/index.html | 74 ++++++++++-- demos/test/test.js | 2 +- 5 files changed, 281 insertions(+), 75 deletions(-) diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index f13fe13..3027165 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -100,6 +100,11 @@ Menus ================================================================================ */ +.OxThemeClassic .OxMainMenu > .OxTitle.OxSelected { + background: -moz-linear-gradient(top, rgb(176, 176, 176), rgb(144, 144, 144)); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(176, 176, 176)), to(rgb(144, 144, 144))); +} + .OxThemeClassic .OxMenu { -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 570a437..09b2c63 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -334,6 +334,53 @@ Menus ================================================================================ */ +.OxMainMenu { + z-index: 10; + -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); +} +.OxMainMenu.OxLarge { + height: 24px; + padding-left: 8px; +} +.OxMainMenu.OxMedium { + height: 20px; + padding-left: 6px; +} +.OxMainMenu.OxSmall { + height: 16px; + padding-left: 4px; +} +.OxMainMenu > .OxTitle { + float: left; + cursor: default; +} +.OxMainMenu.OxLarge > .OxTitle { + height: 21px; + padding-left: 8px; + padding-right: 8px; + padding-top: 3px; + font-size: 14px; +} +.OxMainMenu.OxMedium > .OxTitle { + height: 17px; + padding-left: 6px; + padding-right: 6px; + padding-top: 3px; + font-size: 11px; +} +.OxMainMenu.OxSmall > .OxTitle { + height: 14px; + padding-left: 4px; + padding-right: 4px; + padding-top: 2px; + font-size: 9px; +} +.OxMainMenu .OxTitle.OxSelected { + background: rgb(48, 48, 48); + 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 e3b3df8..5e7926e 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -799,7 +799,7 @@ requires ret = that.$element[v](args[0], args[1], args[2], args[3]); } if (v == "data") { - Ox.print("data ret", ret, $(ret)) + // Ox.print("data ret", ret, $(ret)) } // if the $element of an ox object was returned // then return the ox object instead @@ -905,12 +905,12 @@ requires /* triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...}) */ - if (arguments.length == 1) { + if (Ox.isObject(arguments[0])) { $.each(arguments[0], function(event, fn) { - Ox.Event.trigger(event + "." + that.id, fn); + Ox.Event.trigger(event + "_" + that.id, fn); }); } else { - Ox.Event.trigger(arguments[0] + "." + that.id, arguments[1]); + Ox.Event.trigger(arguments[0] + "_" + that.id, arguments[1] || {}); } return that; } @@ -1162,15 +1162,14 @@ requires .options(options || {}) .addClass("OxTabbar"); - (function() { - Ox.ButtonGroup({ - selectable: true, - selected: self.options.selected, - size: "medium", - style: "tab", - values: self.options.values - }).appendTo(that); - })(); + Ox.ButtonGroup({ + group: true, + selectable: true, + selected: self.options.selected, + size: "medium", + style: "tab", + values: self.options.values + }).appendTo(that); return that; @@ -1308,10 +1307,8 @@ requires var self = self || {}, that = new Ox.Element("input", self) .defaults({ - buttonId: null, - //click: function() {}, disabled: false, - groupId: null, + group: false, selectable: false, selected: false, size: "medium", @@ -1362,10 +1359,9 @@ requires } } function click() { - if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) { + if (self.options.selectable && !(self.options.group && self.options.selected)) { that.toggleSelected(); } - Ox.print(self.options); if (self.options.values.length == 2) { Ox.print("2 values") that.options({ @@ -1379,9 +1375,10 @@ requires //Ox.print("setOption", option, value) Ox.print("OxButton onChange", key, value) if (key == "selected") { - if (value != that.hasClass("OxSelected")) { + if (value != that.hasClass("OxSelected")) { // fixme: neccessary? that.toggleClass("OxSelected"); } + that.triggerEvent(value ? "select" : "deselect", {}); } else if (key == "value") { Ox.print("OxButton onChange value", value) if (self.options.type == "image") { @@ -1391,7 +1388,7 @@ requires }); } else { that.val(value); - Ox.Event.trigger("change." + that.id, { + that.triggerEvent("change", { value: value }); } @@ -1406,7 +1403,6 @@ requires that.options({ selected: !self.options.selected }); - that.trigger("OxButtonToggle", self.options); } that.options("value", self.options.value); return that; @@ -1419,10 +1415,11 @@ requires */ Ox.ButtonGroup = function(options, self) { + var self = self || {}, that = new Ox.Element({}, self) .defaults({ - groupId: Ox.uid(), + group: false, selectable: false, selected: -1, size: "medium", @@ -1432,31 +1429,37 @@ requires }) .options(options || {}) .addClass("OxButtonGroup"); - (function() { - that.$buttons = []; - $.each(self.options.values, function(i, v) { - that.$buttons[i] = Ox.Button({ - buttonId: i, - groupId: self.options.groupId, - selectable: self.options.selectable, - selected: i == self.options.selected, - size: self.options.size, - style: self.options.style, - type: self.options.type, - value: v - }).appendTo(that); + self.position = {}; + + that.$buttons = []; + $.each(self.options.values, function(position, value) { + that.$buttons[position] = Ox.Button({ + group: self.options.group, + selectable: self.options.selectable, + selected: position == self.options.selected, + size: self.options.size, + style: self.options.style, + type: self.options.type, + value: value + }).appendTo(that); + self.position[that.$buttons.id] = position; + Ox.print("binding", "select_" + that.$buttons[position].id); + that.bindEvent("select_" + that.$buttons[position].id, select); + }); + + function select(event, data) { + console.log("event", event, "data", data) + var id = event.split("_")[1]; + Ox.print("OK") + if (self.options.selected > -1) { + that.$buttons[self.options.selected].toggleSelected(); + } + self.options.selected = self.position[id]; + that.triggerEvent("change", { + value: id }); - that.$element.bind("OxButtonToggle", function(e, data) { - if (data.groupId = self.options.groupId) { - if (data.selected) { - if (self.options.selected > -1) { - that.$buttons[self.options.selected].toggleSelected(); - } - self.options.selected = data.buttonId; - } - } - }); - })(); + } + return that; }; @@ -1785,11 +1788,11 @@ requires size: self.options.size }); - that.bindEvent("change." + that.$button.id, changeButton); - that.bindEvent("click." + that.$menu.id, clickMenu); + that.bindEvent("change_" + that.$button.id, changeButton); + that.bindEvent("click_" + that.$menu.id, clickMenu); function changeButton(event, data) { - that.triggerEvent("change." + that.id, data); + that.triggerEvent("change_" + that.id, data); } function clickButton() { @@ -1828,9 +1831,98 @@ requires var self = self || {}, that = new Ox.Bar({}, self) - .options + .defaults({ + menus: [], + size: "medium" + }) + .options(options || {}) + .addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large + .click(click) + .mousemove(mousemove); - } + self.focused = false; + self.selected = -1; + that.titles = []; + that.menus = []; + + $.each(options.menus, function(position, menu) { + that.titles[position] = $("
") + .addClass("OxTitle") + .html(menu.title) + .data("position", position) + .appendTo(that.$element); + that.menus[position] = new Ox.Menu($.extend(menu, { + element: that.titles[position], + mainmenu: that, + size: self.options.size + })); + Ox.print("binding", "click_" + that.menus[position].id) + that.bindEvent("click_" + that.menus[position].id, clickMenu); + }); + + function click(event) { + var $target = $(event.target), + position = $target.data("position"); + if ($target.is(".OxTitle")) { + clickTitle(position); + } else { + self.focused = false; + } + } + + function mousemove(event) { + var $target = $(event.target), + position = $target.data("position"); + if (self.focused && position != self.selected) { + clickTitle(position); + } + } + + function clickMenu() { + Ox.print("clickMenu!!") + that.titles[self.selected].removeClass("OxSelected"); + self.selected = -1; + self.focused = false; + } + + function clickTitle(position) { + Ox.print("clickMenu", position) + var 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 { + self.focused = true; + self.selected = position; + that.titles[self.selected].addClass("OxSelected"); + that.menus[self.selected].showMenu(); + } + } + + self.onChange = function(key, value) { + + }; + + that.selectNextMenu = function() { + if (self.selected < self.options.menus.length - 1) { + clickTitle(self.selected + 1); + } + }; + + that.selectPreviousMenu = function() { + if (self.selected) { + clickTitle(self.selected - 1); + } + }; + + return that; + + }; Ox.Menu = function(options, self) { @@ -1840,6 +1932,7 @@ requires element: null, id: "", items: [], + mainmenu: null, offset: { left: 0, top: 0 @@ -1920,23 +2013,25 @@ requires if ($target.is(".OxCell")) { position = $target.parent().data("position"); item = that.items[position]; + Ox.print("...", position, item) if (!item.options("disabled")) { clickItem(position); } } + that.triggerEvent("click"); } function clickItem(position) { var item = that.items[position]; - if (that.options("parent")) { - that.options("parent").hideMenu(); - } if (!item.options("items").length) { + if (that.options("parent")) { + that.options("parent").hideMenu().triggerEvent("click"); + } if (item.options("checked") !== null && (!item.options("group") || !item.options("checked"))) { item.options({ checked: !item.options("checked") }); - Ox.Event.trigger("click." + that.id, { + Ox.Event.trigger("click_" + that.id, { id: item.options("id"), value: item.options("title")[0] // fixme: value or title? }); @@ -2103,6 +2198,7 @@ requires function selectItem(position) { var item; + Ox.print("selectItem", position) if (self.options.selected > -1) { that.items[self.options.selected].removeClass("OxSelected"); } @@ -2114,6 +2210,7 @@ requires return false; } }); + Ox.print("length", item.options("items").length) item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style? item.addClass("OxSelected"); } @@ -2188,18 +2285,23 @@ requires if (self.options.selected > -1) { var submenu = that.submenus[that.items[self.options.selected].options("id")]; if (submenu && submenu.hasEnabledItems()) { - //that.loseFocus(); submenu.gainFocus(); submenu.selectFirstItem(); - } + } else if (self.options.mainmenu) { + self.options.mainmenu.selectNextMenu(); + } + } else if (self.options.mainmenu) { + self.options.mainmenu.selectNextMenu(); } } function selectSupermenu() { if (self.options.parent) { that.items[self.options.selected].trigger("mouseleave"); - // that.loseFocus(); self.options.parent.gainFocus(); + } else if (self.options.mainmenu) { + Ox.print("previousMenu") + self.options.mainmenu.selectPreviousMenu(); } } @@ -2225,11 +2327,9 @@ requires return false; } }); + self.options.selected = -1; scrollMenuUp(); that.hide(); - if (self.options.selected > -1) { - that.items[self.options.selected].trigger("mouseleave"); - } if (self.options.parent) { self.options.element.removeClass("OxSelected"); } @@ -2243,10 +2343,11 @@ requires key_enter: clickItem }); $document.unbind("click", click); + return that; + //that.triggerEvent("hide"); }; that.selectFirstItem = function() { - Ox.print("selectFirstItem") selectNextItem(); }; @@ -2290,6 +2391,8 @@ requires setTimeout(function() { $document.bind("click", click); }, 100); + return that; + //that.triggerEvent("show"); }; that.toggleMenu = function() { @@ -2548,6 +2651,7 @@ requires dimensions = oxui.getDimensions(self.options.orientation), edges = oxui.getEdges(self.options.orientation); $.each(self.options.elements, function(i, v) { + Ox.print("v", v); var element = v.element .css({ position: "absolute" // fixme: this can go into a class diff --git a/demos/test/index.html b/demos/test/index.html index 1142d85..1fe04c4 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -59,17 +59,67 @@ borderBottom: "1px solid rgb(160, 160, 160)" })*/; - var topPanel = Ox.Toolbar({size: "small"}) - .css({ - zIndex: 2, - MozBoxShadow: "0 0 4px rgb(0, 0, 0)", - WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)" - }) - .append( - $("
") - .addClass("top") - .html("Ox.js") - ); + var mainMenu = new Ox.MainMenu({ + menus: [ + { + id: "oxjs", + title: "Ox.js", + items: [ + { id: "about", title: "About" }, + {}, + { id: "contact", title: "Contact"} + ] + }, + { + id: "file", + title: "File", + items: [ + { id: "load", title: "Load" }, + { id: "save", title: "Save" }, + { id: "save_ad", title: "Save As..."} + ] + }, + { + id: "edit", + title: "Edit", + items: [ + { id: "undo", title: "Undo" }, + { id: "redo", title: "Redo" }, + {}, + { id: "cut", title: "Cut" }, + { id: "copy", title: "Copy" }, + { id: "paste", title: "Paste"}, + { id: "delete", title: "Delete"}, + {}, + { id: "select_all", title: "Select All" }, + { id: "select_none", title: "Select None" }, + { id: "invert_selection", title: "Invert Selection" }, + ] + }, + { + id: "sort", + title: "Sort", + items: [ + { id: "sort_movies", title: "Sort Movies by", items: [ + { checked: true, group: "sort_movies", id: "title", title: "Title"}, + { checked: false, group: "sort_movies", id: "director", title: "Director" }, + ] }, + { id: "order_movies", title: "Order Movies", items: [ + { checked: false, group: "order_movies", id: "ascending", title: "Ascending"}, + { checked: true, group: "order_movies", id: "descending", title: "Descending" }, + ] } + ] + }, + { + id: "help", + title: "Help", + items: [ + { id: "help", title: "Help" } + ] + } + ], + size: "large" + }); var bottomPanel = Ox.Toolbar({size: "small"}) .css({ zIndex: 2, @@ -84,7 +134,7 @@ var mainSplitPanel = Ox.SplitPanel({ elements: [ { - element: topPanel, + element: mainMenu, size: 24 }, { diff --git a/demos/test/test.js b/demos/test/test.js index df3ed55..df39f0f 100644 --- a/demos/test/test.js +++ b/demos/test/test.js @@ -220,7 +220,7 @@ Ox = { .defaults({ bar: "xyz" }) - .options(options || {}), + .options(options || {}); (function() { self.time = 0; })();