oxjs/source/Ox.UI/js/Form/Ox.Picker.js

// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.Picker = function(options, self) {

    var self = self || {},
        that = new Ox.Element({}, self)
            .defaults({
                element: null,
                elementHeight: 128,
                elementWidth: 256,
                id: '',
                overlap: 'none'
            })
            .options(options || {});

    self.$selectButton = new Ox.Button({
            overlap: self.options.overlap,
            title: 'select',
            type: 'image'
        })
        .click(showMenu)
        .appendTo(that);

    self.$menu = new Ox.Element()
        .addClass('OxPicker')
        .css({
            width: self.options.elementWidth + 'px',
            height: (self.options.elementHeight + 24) + 'px'
        });

    self.options.element
        .css({
            width: self.options.elementWidth + 'px',
            height: self.options.elementHeight + 'px'
        })
        .appendTo(self.$menu);

    self.$bar = new Ox.Bar({
            orientation: 'horizontal',
            size: 24
        })
        .appendTo(self.$menu);

    that.$label = new Ox.Label({
            width: self.options.elementWidth - 60
        })
        .appendTo(self.$bar);

    self.$doneButton = new Ox.Button({
            title: 'Done',
            width: 48
        })
        .click(hideMenu)
        .appendTo(self.$bar);

    self.$layer = $('<div>')
        .addClass('OxLayer')
        .click(hideMenu);

    function hideMenu() {
        self.$menu.detach();
        self.$layer.detach();
        self.$selectButton
            .removeClass('OxSelected')
            .css({
                MozBorderRadius: '8px',
                WebkitBorderRadius: '8px'
            });
        that.triggerEvent('hide');
    };

    function showMenu() {
        var offset = that.offset(),
            left = offset.left,
            top = offset.top + 15;
        self.$selectButton
            .addClass('OxSelected')
            .css({
                MozBorderRadius: '8px 8px 0 0',
                WebkitBorderRadius: '8px 8px 0 0'
            });
        self.$layer.appendTo(Ox.UI.$body);
        self.$menu
            .css({
                left: left + 'px',
                top: top + 'px'
            })
            .appendTo(Ox.UI.$body);
        that.triggerEvent('show');
    };

    return that;

};