68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import Component from '@ember/component';
|
|
import { get, set } from '@ember/object';
|
|
import { inject as service } from '@ember/service';
|
|
|
|
export default Component.extend({
|
|
dom: service('dom'),
|
|
classNames: ['phrase-editor'],
|
|
item: '',
|
|
didInsertElement: function() {
|
|
this._super(...arguments);
|
|
// TODO: use {{ref}}
|
|
this.input = get(this, 'dom').element('input', this.element);
|
|
},
|
|
onchange: function(e) {},
|
|
search: function(e) {
|
|
// TODO: Temporarily continue supporting `searchable`
|
|
let searchable = get(this, 'searchable');
|
|
if (searchable) {
|
|
if (!Array.isArray(searchable)) {
|
|
searchable = [searchable];
|
|
}
|
|
searchable.forEach(item => {
|
|
item.search(get(this, 'value'));
|
|
});
|
|
}
|
|
this.onchange(e);
|
|
},
|
|
oninput: function(e) {},
|
|
onkeydown: function(e) {},
|
|
actions: {
|
|
keydown: function(e) {
|
|
switch (e.keyCode) {
|
|
case 8: // backspace
|
|
if (e.target.value == '' && get(this, 'value').length > 0) {
|
|
this.actions.remove.bind(this)(get(this, 'value').length - 1);
|
|
}
|
|
break;
|
|
case 27: // escape
|
|
set(this, 'value', []);
|
|
this.search({ target: this });
|
|
break;
|
|
}
|
|
this.onkeydown({ target: this });
|
|
},
|
|
input: function(e) {
|
|
set(this, 'item', e.target.value);
|
|
this.oninput({ target: this });
|
|
},
|
|
remove: function(index, e) {
|
|
get(this, 'value').removeAt(index, 1);
|
|
this.search({ target: this });
|
|
this.input.focus();
|
|
},
|
|
add: function(e) {
|
|
const item = get(this, 'item').trim();
|
|
if (item !== '') {
|
|
set(this, 'item', '');
|
|
const currentItems = get(this, 'value') || [];
|
|
const items = new Set(currentItems).add(item);
|
|
if (items.size > currentItems.length) {
|
|
set(this, 'value', [...items]);
|
|
this.search({ target: this });
|
|
}
|
|
}
|
|
},
|
|
},
|
|
});
|