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

// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.MenuItem <f:Ox.Element> MenuItem Object
    () ->              <f> MenuItem Object
    (options) ->       <f> MenuItem Object
    (options, self) -> <f> MenuItem Object
    options <o> Options object
        bind <a|[]> fixme: what's this?
        checked <f|null> 
        disabled <b|false>
        group <s|''>
        icon <s|''> icon
        id <s|''> id
        items <a|[]> items
        keyboard <s|''> keyboard
        menu <o|null> menu
        position <n|0> position
        title <a|[]> title
    self    <o> shared private variable
@*/

Ox.MenuItem = function(options, self) {

    self = self || {};
    var that = Ox.Element('<tr>', self)
            .defaults({
                bind: [], // fixme: what's this?
                checked: null,
                disabled: false,
                group: '',
                icon: '',
                id: '',
                items: [],
                keyboard: '',
                maxWidth: 0,
                menu: null, // fixme: is passing the menu to 100s of menu items really memory-neutral?
                position: 0,
                title: [],
            })
            .options(Ox.extend(Ox.clone(options), {
                keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
                title: Ox.toArray(options.title || self.defaults.title)
            }))
            .addClass('OxItem' + (self.options.disabled ? ' OxDisabled' : ''))
            /*
            .attr({
                id: Ox.toCamelCase(self.options.menu.options('id') + '/' + self.options.id)
            })
            */
            .data('group', self.options.group); // fixme: why?

    if (self.options.group && self.options.checked === null) {
        self.options.checked = false;
    }

    // construct
    that.append(
            that.$status = $('<td>', {
                'class': 'OxCell OxStatus',
                html: self.options.checked ? Ox.UI.symbols.check : ''
            })
        )
        .append(
            that.$icon = $('<td>', {
                'class': 'OxCell OxIcon'
            })
            .append(self.options.icon
                ? $('<img>', {src: self.options.icon}) : null
            )
        )
        .append(
            that.$title = $('<td>', {
                'class': 'OxCell OxTitle',
                css: self.options.maxWidth
                    ? {maxWidth: self.options.maxWidth - 46}
                    : {},
                html: Ox.isString(self.options.title[0])
                    ? self.options.title[0]
                    : $('<div>').html(self.options.title[0]).html()
            })
        )
        .append(
            $('<td>', {
                'class': 'OxCell OxModifiers',
                html: self.options.keyboard.modifiers.map(function(modifier) {
                    return Ox.UI.symbols[modifier];
                }).join('')
            })
        )
        .append(
            $('<td>', {
                'class': 'OxCell Ox'
                    + (self.options.items.length ? 'Submenu' : 'Key'),
                html: self.options.items.length
                    ? Ox.UI.symbols.triangle_right
                    : Ox.UI.symbols[self.options.keyboard.key]
                    || self.options.keyboard.key.toUpperCase()
            })
        );

    function parseKeyboard(str) {
        var modifiers = str.split(' '),
            key = modifiers.pop();
        return {
            modifiers: modifiers,
            key: key
        };
    }

    /*@
    setOption <f> setOption
    @*/
    self.setOption = function(key, value) {
        if (key == 'checked') {
            that.$status.html(value ? Ox.UI.symbols.check : '')
        } else if (key == 'disabled') {
            that.toggleClass('OxDisabled');
        } else if (key == 'title') {
            self.options.title = Ox.toArray(value);
            that.$title.html(self.options.title[0]);
        }
    };

    that.toggle = function() {
        // toggle id and title
    };

    /*@
    toggleChecked <f> toggleChecked
    @*/
    that.toggleChecked = function() {
        that.options({checked: !self.options.checked});
        return that;
    };

    that.toggleDisabled = function() {

    };
    
    /*@
    toggleTitle <f> toggleTitle
    @*/
    that.toggleTitle = function() {
        that.options({title: Ox.clone(self.options.title).reverse()});
        return that;
    };

    return that;

};