oxjs/source/Ox.UI/js/List/Ox.ItemInput.js

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

/*@
Ox.ItemInput <f:Ox.Element> ItemInput Object
    () ->              <f> ItemInput Object
    (options) ->       <f> ItemInput Object
    (options, self) -> <f> ItemInput Object
    options <o> Options object
        type <s|textarea> can be textare
        value <s> default value
        height <n|300> height
        width <n|100> width
    self    <o> shared private variable
    cancel <!> triggered if cancel button is pressed
    save <!> triggered if save button is pressed
@*/

Ox.ItemInput = function(options, self) {

    var self = self || {},
        that = new Ox.Element({}, self)
            .defaults({
                type: 'textarea',
                value: '',
                height: 300,
                width: 100
            })
            .options(options || {}),
        $input;

    that.append(
        $input = new Ox.Input({
                height: self.options.height,
                style: 'square',
                type: self.options.type,
                value: self.options.value,
                width: self.options.width + 6
            })
            .bind({
                mousedown: function(e) {
                    // keep mousedown from reaching list
                    e.stopPropagation();
                }
            })
        )
        .append(new Ox.Element()
            .append(new Ox.Button({type: 'text', title: 'Cancel'})
                .css('width', '42%')
                .bindEvent({
                    'click': function() {
                        that.triggerEvent('cancel');
                    }
            }))
            .append(new Ox.Button({type: 'text', title: 'Save'})
                .css('width', '42%')
                .bindEvent({
                    'click': function() {
                        that.triggerEvent('save', {
                            value: $input.value()
                        });
                    }
            }))
            .css({
                'margin-top': self.options.height-8,
                'height': '16px',
                'text-align': 'right',
            })
        );
    Ox.print($input);
    return that;
}