forked from tohe/wmdeit_kaform
98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
|
(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);
|