2015-08-26 23:19:33 +03:00
|
|
|
import Ember from 'ember';
|
|
|
|
import EmberSelectizeComponent from 'ember-cli-selectize/components/ember-selectize';
|
|
|
|
|
|
|
|
export default EmberSelectizeComponent.extend({
|
|
|
|
|
2015-10-26 19:02:28 +03:00
|
|
|
selectizeOptions: Ember.computed(function () {
|
|
|
|
const options = this._super(...arguments);
|
|
|
|
|
|
|
|
options.onChange = Ember.run.bind(this, '_onChange');
|
|
|
|
|
|
|
|
return options;
|
|
|
|
}),
|
|
|
|
|
2015-09-01 11:53:10 +03:00
|
|
|
_dontOpenWhenBlank: Ember.on('didInsertElement', function () {
|
|
|
|
var openOnFocus = this.get('openOnFocus');
|
|
|
|
|
|
|
|
if (!openOnFocus) {
|
2015-11-20 19:40:41 +03:00
|
|
|
Ember.run.schedule('afterRender', this, function () {
|
2015-09-01 11:53:10 +03:00
|
|
|
var selectize = this._selectize;
|
2015-11-04 18:20:11 +03:00
|
|
|
if (selectize) {
|
|
|
|
selectize.on('dropdown_open', function () {
|
|
|
|
if (Ember.isBlank(selectize.$control_input.val())) {
|
|
|
|
selectize.close();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
selectize.on('type', function (filter) {
|
|
|
|
if (Ember.isBlank(filter)) {
|
|
|
|
selectize.close();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2015-09-01 11:53:10 +03:00
|
|
|
});
|
|
|
|
}
|
|
|
|
}),
|
|
|
|
|
2015-08-26 23:19:33 +03:00
|
|
|
/**
|
|
|
|
* Event callback that is triggered when user creates a tag
|
|
|
|
* - modified to pass the caret position to the action
|
|
|
|
*/
|
2015-10-12 19:54:15 +03:00
|
|
|
_create: function (input, callback) {
|
2015-08-26 23:19:33 +03:00
|
|
|
var caret = this._selectize.caretPos;
|
|
|
|
|
|
|
|
// Delete user entered text
|
|
|
|
this._selectize.setTextboxValue('');
|
|
|
|
// Send create action
|
|
|
|
|
|
|
|
// allow the observers and computed properties to run first
|
|
|
|
Ember.run.schedule('actions', this, function () {
|
|
|
|
this.sendAction('create-item', input, caret);
|
|
|
|
});
|
|
|
|
// We cancel the creation here, so it's up to you to include the created element
|
|
|
|
// in the content and selection property
|
|
|
|
callback(null);
|
2015-09-01 19:34:31 +03:00
|
|
|
},
|
|
|
|
|
2015-10-12 19:54:15 +03:00
|
|
|
_addSelection: function (obj) {
|
2015-09-01 19:34:31 +03:00
|
|
|
var _valuePath = this.get('_valuePath'),
|
|
|
|
val = Ember.get(obj, _valuePath),
|
|
|
|
caret = this._selectize.caretPos;
|
|
|
|
|
|
|
|
// caret position is always 1 more than the desired index as this method
|
|
|
|
// is called after selectize has inserted the item and the caret has moved
|
|
|
|
// to the right
|
|
|
|
caret = caret - 1;
|
|
|
|
|
|
|
|
this.get('selection').insertAt(caret, obj);
|
|
|
|
|
|
|
|
Ember.run.schedule('actions', this, function () {
|
|
|
|
this.sendAction('add-item', obj);
|
|
|
|
this.sendAction('add-value', val);
|
|
|
|
});
|
2015-10-26 19:02:28 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_onChange: function (args) {
|
|
|
|
const selection = Ember.get(this, 'selection'),
|
|
|
|
valuePath = Ember.get(this, '_valuePath');
|
|
|
|
|
|
|
|
if (!args || !selection || !Ember.isArray(selection) || args.length !== selection.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let hasNoChanges = selection.every(function (obj, idx) {
|
|
|
|
return Ember.get(obj, valuePath) === args[idx];
|
|
|
|
});
|
|
|
|
|
|
|
|
if (hasNoChanges) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let reorderedSelection = Ember.A([]);
|
|
|
|
|
|
|
|
args.forEach(function (value) {
|
|
|
|
const obj = selection.find(function (item) {
|
|
|
|
return (Ember.get(item, valuePath) + '') === value;
|
|
|
|
});
|
|
|
|
|
|
|
|
if (obj) {
|
|
|
|
reorderedSelection.addObject(obj);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.set('selection', reorderedSelection);
|
2015-08-26 23:19:33 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
});
|