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

'use strict';

Ox.SelectInput = function(options, self) {

    var that;

    self = Ox.extend(self || {}, {
        options: Ox.extend({
            inputWidth: 128,
            items: [],
            label: '',
            labelWidth: 128,
            max: 0,
            min: 1,
            placeholder: '',
            title: '',
            width: 384
        }, options)
    });

    self.other = self.options.items[self.options.items.length - 1].id;
    self.otherWidth = self.options.width - self.options.inputWidth - 3; // fixme: 3? obscure!

    self.$select = Ox.Select({
            items: self.options.items,
            label: self.options.label,
            labelWidth: self.options.labelWidth,
            max: self.options.max,
            min: self.options.min,
            title: self.options.title,
            width: self.options.width
        })
        .bindEvent({
            change: function(data) {
                if (self.options.title) {
                    self.$select.options({title: data.selected[0].title});
                }
                if (data.selected[0].id == self.other) {
                    self.$select.options({width: self.otherWidth})
                        .addClass('OxOverlapRight');
                    self.$input.show();
                } else {
                    self.$select.options({width: self.options.width})
                        .removeClass('OxOverlapRight')
                    self.$input.hide();
                }
            }
        });

    self.$input = Ox.Input({
            placeholder: self.options.placeholder,
            width: 0
        })
        .hide();

    that = Ox.FormElementGroup({
        elements: [
            self.$select,
            self.$input
        ],
        width: self.options.width
    });

    that.value = function() {
        return self.$select.value() == self.other
            ? self.$input.value() : self.$select.value();
    };

    return that;

};