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

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

'use strict';

/*@
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 textarea
        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) {

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

    self.$input = Ox.Input({
            changeOnKeypress: true,
            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();
            }
        })
        .bindEvent({
            change: function(data) {
                self.options.height = data.value.split('\n').length * 13;
                Ox.Log('List', 'HEIGHT', self.options.height)
                self.$input.options({
                    height: self.options.height
                });
                that.css({
                    height: self.options.height + 16 + 'px'
                });
                that.parent().css({
                    height: self.options.height + 24 + 'px'
                });
                self.$bar.css({
                    marginTop: 8 + 'px'
                });
            }
        })
        .appendTo(that);

    self.$bar = Ox.Bar({
            size: 16
        })
        .css({
            marginTop: self.options.height - 8 + 'px'
        })
        .appendTo(that);

    Ox.Button({
            style: 'symbol',
            title: 'delete',
            tooltip: 'Remove',
            type: 'image'
        })
        .css({float: 'left'})
        .bindEvent({
            click: function() {
                that.triggerEvent('remove');
            }
        })
        .appendTo(self.$bar);

    Ox.Button({
            style: 'symbol',
            title: 'check',
            tooltip: 'Save',
            type: 'image'
        })
        .css({float: 'right'})
        .bindEvent({
            click: function() {
                that.triggerEvent('save', {
                    value: self.$input.value()
                });
            }
        })
        .appendTo(self.$bar);

    Ox.Button({
            style: 'symbol',
            title: 'view',
            tooltip: 'Preview',
            type: 'image'
        })
        .css({float: 'right'})
        .bindEvent({
            click: function() {
                that.triggerEvent('preview');
            }
        })
        .appendTo(self.$bar);

    Ox.Button({
            style: 'symbol',
            title: 'close',
            tooltip: 'Cancel',
            type: 'image'
        })
        .css({float: 'right'})
        .bindEvent({
            click: function() {
                that.triggerEvent('cancel');
            }
        })
        .appendTo(self.$bar);

    /*
    that.append(
        $input = 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(Ox.Element()
            .append(Ox.Button({type: 'text', title: 'Cancel'})
                .css('width', '42%')
                .bindEvent({
                    'click': function() {
                        that.triggerEvent('cancel');
                    }
            }))
            .append(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.Log('List', $input);
    */

    return that;

};