MainMenu in demos/test/index.html

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);

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;

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({
-            Ox.ButtonGroup({
+            group: true,
-                selectable: true,
+            selectable: true,
-                selected: self.options.selected,
+            selected: self.options.selected,
-                size: "medium",
+            size: "medium",
-                style: "tab",
+            style: "tab",
-                values: self.options.values
+            values: self.options.values
-            }).appendTo(that);
+        }).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() {
+        self.position = {};
-            that.$buttons = [];
+
-            $.each(self.options.values, function(i, v) {
+        that.$buttons = [];
-                that.$buttons[i] = Ox.Button({
+        $.each(self.options.values, function(position, value) {
-                    buttonId: i,
+            that.$buttons[position] = Ox.Button({
-                    groupId: self.options.groupId,
+                group: self.options.group,
-                    selectable: self.options.selectable,
+                selectable: self.options.selectable,
-                    selected: i == self.options.selected,
+                selected: position == self.options.selected,
-                    size: self.options.size,
+                size: self.options.size,
-                    style: self.options.style,
+                style: self.options.style,
-                    type: self.options.type,
+                type: self.options.type,
-                    value: v
+                value: value
-                }).appendTo(that);
+            }).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("change_" + that.$button.id, changeButton);
-        that.bindEvent("click." + that.$menu.id, clickMenu);
+        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] = $("<div>")
+                .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

demos/test/index.html

@@ -59,17 +59,67 @@
                     borderBottom: "1px solid rgb(160, 160, 160)"
                 })*/;
 
-                var topPanel = Ox.Toolbar({size: "small"})
+                var mainMenu = new Ox.MainMenu({
-                    .css({
+                    menus: [
-                        zIndex: 2,
+                        {
-                        MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
+                            id: "oxjs",
-                        WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
+                            title: "Ox.js",
-                    })
+                            items: [
-                    .append(
+                                { id: "about", title: "About" },
-                        $("<div/>")
+                                {},
-                            .addClass("top")
+                                { id: "contact", title: "Contact"}
-                            .html("Ox.js")
+                            ]
-                    );
+                        },
+                        {
+                            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
                         },
                         {

demos/test/test.js

@@ -220,7 +220,7 @@ Ox = {
                 .defaults({
                     bar: "xyz"
                 })
-                .options(options || {}),
+                .options(options || {});
         (function() {
             self.time = 0;
         })();