wmdeit_kaform/addons/combobox/kube.combobox.js

(function($K)
{
    $K.add('module', 'combobox', {
        init: function(app, context)
        {
            this.app = app;
            this.$win = app.$win;

            // defaults
            var defaults = {
                placeholder: ''
            };

            // context
            this.context = context;
            this.params = context.getParams(defaults);
            this.$element = context.getElement();
    	},
    	start: function()
    	{
        	this._buildSource();
        	this._buildCaret();
        	this._buildEvent();
    	},
    	stop: function()
    	{
        	this.$sourceBox.after(this.$element);
        	this.$sourceBox.remove();

        	this.$element.off('.kube.combobox');
        	this.$win.off('.kube.combobox');
    	},

    	// private
    	_buildSource: function()
    	{
        	this.$sourceBox = $K.dom('<div>');
        	this.$sourceBox.addClass('combobox');

        	this.$source = $K.dom('<input>');
        	this.$source.attr('type', 'text');
        	this.$source.attr('placeholder', this.params.placeholder);

            this.$sourceBox.width(this.$element.width());
            this.$sourceBox.append(this.$source);

        	this.$element.after(this.$sourceBox);
        	this.$element.attr('class', '');
        	this.$element.attr('style', '');
        	this.$sourceBox.append(this.$element);

        	this.$win.on('resize.kube.combobox', this._resize.bind(this));
    	},
        _buildCaret: function()
        {
            this.$sourceCaret = $K.dom('<span>');
            this.$sourceCaret.addClass('combobox-caret');

            this.$sourceBox.append(this.$sourceCaret);
        },
        _buildEvent: function()
        {
            this.$element.on('change.kube.combobox', this._select.bind(this));
            this.$source.on('keyup.kube.combobox', this._type.bind(this));
        },
        _resize: function()
        {
            this.$sourceBox.width(this.$element.width());
        },
        _type: function(e)
        {
            var value = this.$source.val();

            this.app.broadcast('combobox.set', this, value);

            if (this.$sourceValue) this.$sourceValue.remove();
            if (value.trim() === '') return;

            this.$sourceValue = $K.dom('<option>');
            this.$sourceValue.attr('value', value);
            this.$sourceValue.attr('selected', true);
            this.$sourceValue.text(value);
            this.$sourceValue.addClass('is-hidden');

            this.$element.append(this.$sourceValue);
        },
        _select: function(e)
        {
            var el = e.target;
            var value = el.options[el.selectedIndex].text;

            if (this.$sourceValue) this.$sourceValue.remove();
            this.$source.val(value);

            this.app.broadcast('combobox.set', this, value);
        }
    });
})(Kube);