105 lines
2.9 KiB
JavaScript
105 lines
2.9 KiB
JavaScript
export default Ember.Component.extend({
|
|
classNameBindings: [':value-list'],
|
|
|
|
_enableSorting: function() {
|
|
const self = this;
|
|
const placeholder = document.createElement("div");
|
|
placeholder.className = "placeholder";
|
|
|
|
let dragging = null;
|
|
let over = null;
|
|
let nodePlacement;
|
|
|
|
this.$().on('dragstart.discourse', '.values .value', function(e) {
|
|
dragging = e.currentTarget;
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData("text/html", e.currentTarget);
|
|
});
|
|
|
|
this.$().on('dragend.discourse', '.values .value', function() {
|
|
Ember.run(function() {
|
|
dragging.parentNode.removeChild(placeholder);
|
|
dragging.style.display = 'block';
|
|
|
|
// Update data
|
|
const from = Number(dragging.dataset.index);
|
|
let to = Number(over.dataset.index);
|
|
if (from < to) to--;
|
|
if (nodePlacement === "after") to++;
|
|
|
|
const collection = self.get('collection');
|
|
const fromObj = collection.objectAt(from);
|
|
collection.replace(from, 1);
|
|
collection.replace(to, 0, [fromObj]);
|
|
self._saveValues();
|
|
});
|
|
return false;
|
|
});
|
|
|
|
this.$().on('dragover.discourse', '.values', function(e) {
|
|
e.preventDefault();
|
|
dragging.style.display = 'none';
|
|
if (e.target.className === "placeholder") { return; }
|
|
over = e.target;
|
|
|
|
const relY = e.originalEvent.clientY - over.offsetTop;
|
|
const height = over.offsetHeight / 2;
|
|
const parent = e.target.parentNode;
|
|
|
|
if (relY > height) {
|
|
nodePlacement = "after";
|
|
parent.insertBefore(placeholder, e.target.nextElementSibling);
|
|
} else if(relY < height) {
|
|
nodePlacement = "before";
|
|
parent.insertBefore(placeholder, e.target);
|
|
}
|
|
});
|
|
}.on('didInsertElement'),
|
|
|
|
_removeSorting: function() {
|
|
this.$().off('dragover.discourse').off('dragend.discourse').off('dragstart.discourse');
|
|
}.on('willDestroyElement'),
|
|
|
|
_setupCollection: function() {
|
|
const values = this.get('values');
|
|
if (this.get('inputType') === "array") {
|
|
this.set('collection', values || []);
|
|
} else {
|
|
this.set('collection', (values && values.length) ? values.split("\n") : []);
|
|
}
|
|
}.on('init').observes('values'),
|
|
|
|
_saveValues: function() {
|
|
if (this.get('inputType') === "array") {
|
|
this.set('values', this.get('collection'));
|
|
} else {
|
|
this.set('values', this.get('collection').join("\n"));
|
|
}
|
|
},
|
|
|
|
inputInvalid: Ember.computed.empty('newValue'),
|
|
|
|
keyDown(e) {
|
|
if (e.keyCode === 13) {
|
|
this.send('addValue');
|
|
}
|
|
},
|
|
|
|
actions: {
|
|
addValue() {
|
|
if (this.get('inputInvalid')) { return; }
|
|
|
|
this.get('collection').addObject(this.get('newValue'));
|
|
this.set('newValue', '');
|
|
|
|
this._saveValues();
|
|
},
|
|
|
|
removeValue(value) {
|
|
const collection = this.get('collection');
|
|
collection.removeObject(value);
|
|
this._saveValues();
|
|
}
|
|
}
|
|
});
|