menu skeleton

build/js/ox.ui.js

@@ -1557,6 +1557,211 @@ requires
 
     };
 
+    /*
+    ============================================================================
+    Menus
+    ============================================================================
+    */
+
+    Ox.MainMenu = function(options, self) {
+        
+    }
+
+    Ox.Menu = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element({}, self)
+                .defaults({
+                    id: "",
+                    items: [],
+                    offset: {
+                        left: 0,
+                        top: 0
+                    },
+                    side: "bottom",
+                    size: "medium"
+                })
+                .options(options),
+            itemHeight = options.size == "small" ? 12 : (options.size == "medium" ? 16 : 20),
+            selected = -1,
+            scrollSpeed = 1,
+            $item;
+
+        // construct
+        that.addClass(
+            "OxMenu Ox" + Ox.toTitleCase(options.side) +
+            " Ox" + Ox.toTitleCase(options.size)
+        );
+        that.$items = [];
+        that.$scrollbars = [];
+        that.$submenus = {};
+        that.$top = $("<div>")
+            .addClass("OxTop")
+            .appendTo(that.$element);
+        that.$scrollbars.up = constructScrollbar("up")
+            .appendTo(that.$element);
+        that.$container = $("<div>")
+            .addClass("OxContainer")
+            .appendTo(that.$element);
+        that.$content = $("<table>")
+            .addClass("OxContent")
+            .appendTo(that.$container);
+        $.each(options.items, function(i, item) {
+            if (item.id) {
+                $item = constructItem(item)
+                    .data("pos", i)
+                    .appendTo(that.$content);
+                that.$items.push($item);
+                that.$content.append($item);
+            } else {
+                that.$content.append(constructSpace());
+                that.$content.append(constructLine());
+                that.$content.append(constructSpace());
+            }
+        });
+        that.$scrollbars.down = constructScrollbar("down")
+            .appendTo(that.$element);
+        that.$bottom = $("<div>")
+            .addClass("OxBottom")
+            .appendTo(that.$element);
+        $.each(options.items, function(i, item) {
+            if (item.items.length) {
+                that.$submenus[item.id] = new Ox.Menu({
+                    id: options.id + "/" + item.id,
+                    side: "right",
+                    offset: {
+                        left: 0,
+                        top: -4
+                    },
+                    size: args.size,
+                    items: item.items
+                });
+            }
+        });
+
+        function constructItem(item) {
+            
+        }
+
+        function constructLine() {
+            
+        }
+
+        function constructScrollbar(direction) {
+            
+        }
+
+        function constructSpace() {
+            
+        }
+
+        function getElement(id) {
+            return $("#" + Ox.toCamelCase(options.id + "/" + id));
+        }
+
+        function parseShortcut() {
+            
+        }
+
+        function scroll(speed) {
+            
+        }
+
+        function selectNextItem() {
+            
+        }
+
+        function selectPreviousItem() {
+            
+        }
+
+        that.check = function(id) {
+            
+        };
+
+        that.disable = function(id) {
+            
+        };
+
+        that.enable = function(id) {
+            
+        };
+
+        that.hideMenu = function() {
+            
+        };
+
+        that.insertItemAfter = function(id, item) {
+            
+        };
+
+        that.insertItemBefore = function(id, item) {
+            
+        };
+
+        that.removeItem = function(id) {
+            
+        };
+
+        that.showMenu = function() {
+            
+        };
+
+        that.toggleChecked = function(id) {
+            
+        };
+
+        that.toggleDisabled = function(id) {
+            
+        };
+
+        that.toggleTitle = function(id) {
+            
+        };
+
+        that.uncheck = function(id) {
+            
+        };
+
+        return that;
+
+    }
+
+    Ox.MenuItem = function(options, self) {
+
+        var self = self || {},
+            that = new Ox.Element("tr")
+                .defaults({
+                    bind: [],
+                    checked: false,
+                    click: function() {},
+                    disabled: false,
+                    group: "",
+                    icon: "",
+                    id: "",
+                    items: [],
+                    menu: "",
+                    shortcut: {
+                        modifiers: [],
+                        key: ""
+                    },
+                    title: "",
+                })
+                .options(options);
+
+        that.addClass("OxItem " + (options.disabled ? "OxDisabled" : ""))
+            .attr({
+                id: Ox.toCamelCase(options.menu + "/" + options.id)
+            })
+            .data("group", options.group)
+            .mouseenter()
+            .mouseleave()
+            .click();
+
+        return that;
+
+    }
+
     /*
     ============================================================================
     Panels