discourse/app/assets/javascripts/admin/components/value-list.js.es6

105 lines
2.9 KiB
Plaintext
Raw Normal View History

export default Ember.Component.extend({
classNameBindings: [':value-list'],
2015-07-28 15:58:49 -04:00
_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'),
2015-07-28 15:58:49 -04:00
_saveValues: function() {
if (this.get('inputType') === "array") {
this.set('values', this.get('collection'));
} else {
this.set('values', this.get('collection').join("\n"));
}
2015-07-28 15:58:49 -04:00
},
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', '');
2015-07-28 15:58:49 -04:00
this._saveValues();
},
removeValue(value) {
const collection = this.get('collection');
collection.removeObject(value);
2015-07-28 15:58:49 -04:00
this._saveValues();
}
}
});