wmdeit_kaform/addons/combobox/kube.combobox.js

98 lines
2.8 KiB
JavaScript
Raw Normal View History

2020-02-20 13:45:47 +00:00
(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);