bebraw
1/9/2011 - 5:59 PM

Simple menu plugin for RightJS

Simple menu plugin for RightJS

var Menu = new Class(Element, {
    include: Options,
    Options: {
        choices: [],
        name: ''
    },
    initialize: function(options) {
        var scope = this;

        this.setOptions(options);

        this.$super('div');

        this.text(this.options.name);

        this._width = 200;

        // shortcut for easy access to menu elements
        this._menuElements = {};

        this._menu = $E('div', {
            style: {
                backgroundColor: 'white',
                border: '2px outset white',
                verticalAlign: 'top',
                textAlign: 'left',
                zIndex: 1002
            }
        }).addClass('menu').insertTo(this).hide();

        this._menuTable = $E('table', {
            style: {
                width: (this._width + 10) + 'px',
                border: 0,
                cellPadding: 0,
                cellSpacing: 0
            }
        }).addClass('menuTable').insertTo(this._menu);

        this.options.choices.each(function(choice) {
            if(choice.trim()) {
                scope._addItem(choice);
            }
            else {
                scope._addSeparator();
            }
        });

        this.on('click', function() {
            scope._menu.toggle();
        });
    },
    getOption: function(name) {
        return this._menuElements[name];
    },
    getOptions: function() {
        return this._menuElements;
    },
    _addItem: function(name) {
        var tr = $E('tr').insertTo(this._menuTable).setStyle({
            fontFamily: 'Verdana',
            fontSize: '10pt',
            fontWeight: 'normal',
            backgroundColor: 'white',
            cursor: 'default'
        });

        this._menuElements[name] = $E('td').insertTo(tr).setStyle({
            width: (this._width - 25) + 'px',
            height: '25px',
            textAligh: 'left',
            verticalAlign: 'middle',
            fontStyle: 'normal',
            borderTop: '2px solid white',
            borderBottom: '2px solid white',
            borderRight: '2px solid white'
        }).html(name.title() || ' ');
    },
    _addSeparator: function() {
        var tr = $E('tr').insertTo(this._menuTable).setStyle({
            cursor: 'default'
        });

        $E('td').insertTo(tr).setStyle({
            width: (this._width - 25) + 'px',
            height: '1px',
            backgroundColor: 'gray'
        });
    }
});
var menu = new Menu(); // XXX: it might be nice to pass handlers as opts as well
var opts = menu.getOptions(); // this gives access to Menu item elems

// let's bind some handlers
var initClick = function(elem, optName) {
    elem.on('click', function() {
        // do something cool now
    });
};

for(var optName in opts) {
    var elem = opts[optName];

    initClick(elem, optName);
}