oxjs/source/Ox.UI/js/Menu/Ox.MainMenu.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript

/*@
Ox.MainMenu <f:Ox.Bar> MainMenu Object
    () ->              <f> MainMenu Object
    (options) ->       <f> MainMenu Object
    (options, self) -> <f> MainMenu Object
    options <o> Options object
        extras <a|[]> extra menus
        menus <a|[]> submenus
        size <s|medium> can be small, medium, large
    self    <o> shared private variable
@*/

Ox.MainMenu = function(options, self) {

    self = self || {};
    var that = Ox.Bar({}, self)
            .defaults({
                extras: [],
                menus: [],
                size: 'medium'
            })
            .options(options || {})
            .addClass('OxMainMenu Ox' + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar
            .click(click)
            .mousemove(mousemove);

    self.focused = false;
    self.selected = -1;
    that.menus = [];
    that.titles = [];
    that.layer = $('<div>').addClass('OxLayer');

    self.options.menus.forEach(function(menu, position) {
        that.titles[position] = $('<div>')
            .addClass('OxTitle')
            .html(menu.title)
            .data('position', position)
            .appendTo(that.$element);
        that.menus[position] = Ox.Menu($.extend(menu, {
                element: that.titles[position],
                mainmenu: that,
                size: self.options.size
            }))
            .bindEvent({
                hide: onHideMenu
            });
    });

    if (self.options.extras.length) {
        that.extras = $('<div>')
            .addClass('OxExtras')
            .appendTo(that.$element);
        self.options.extras.forEach(function(extra) {
            extra.css({
                float: 'left' // fixme: need class!
            }).appendTo(that.extras);
        });
    }

    function click(event) {
        var $target = $(event.target),
            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) {
            if (position != selected) {
                self.focused = true;
                self.selected = position;
                that.titles[self.selected].addClass('OxSelected');
                that.menus[self.selected].showMenu();
            }
        }
    }

    function mousemove(event) {
        var $target = $(event.target),
            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 onHideMenu() {
        if (self.selected > -1) {
            that.titles[self.selected].removeClass('OxSelected');
            self.selected = -1;
        }
        self.focused = false;
    }

    self.setOption = function(key, value) {

    };

    that.addMenuAfter = function(id) {
        
    };

    that.addMenuBefore = function(id) {
        
    };

    /*@
    checkItem <f> checkItem
    @*/
    that.checkItem = function(id) {
        var ids = id.split('_'),
            itemId = ids.pop(),
            menuId = ids.join('_');
        that.getMenu(menuId).checkItem(itemId);
        return that;
    };

    /*@
    disableItem <f> disableItem
    @*/
    that.disableItem = function(id) {
        that.getItem(id).options({disabled: true});
        return that;
    };

    /*@
    enableItem <f> enableItem
    @*/
    that.enableItem = function(id) {
        that.getItem(id).options({disabled: false});
        return that;
    };

    /*@
    getItem <f> getItem
    @*/
    that.getItem = function(id) {
        var ids = id.split('_'),
            item;
        if (ids.length == 1) {
            Ox.forEach(that.menus, function(menu) {
                item = menu.getItem(id);
                return !item;
            });
        } else {
            item = that.getMenu(ids.shift()).getItem(ids.join('_'));
        }
        Ox.print('getItem', id, item);
        return item;
    };

    /*@
    getMenu <f> getMenu
    @*/
    that.getMenu = function(id) {
        var ids = id.split('_'),
            menu;
        if (ids.length == 1) {
            Ox.forEach(that.menus, function(v) {
                if (v.options('id') == id) {
                    menu = v;
                    return false;
                }
            });
        } else {
            menu = that.getMenu(ids.shift()).getSubmenu(ids.join('_'));
        }
        return menu;
    };

    that.removeMenu = function() {
        
    };

    /*@
    selectNextMenu <f> selectNextMenu
    @*/
    that.selectNextMenu = function() {
        if (self.selected < self.options.menus.length - 1) {
            clickTitle(self.selected + 1);
        }
        return that;
    };

    /*@
    selectPreviousMenu <f> selectPreviousMenu
    @*/
    that.selectPreviousMenu = function() {
        if (self.selected) {
            clickTitle(self.selected - 1);
        }
        return that;
    };

    /*@
    uncheckItem <f> uncheckItem
    @*/
    that.uncheckItem = function(id) {
        that.getItem(id).options({checked: false});
        return that;
    };

    return that;

};