sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
111 lines • 4.89 kB
JavaScript
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _VariableOrderMenu_instances, _VariableOrderMenu_addSortable, _VariableOrderMenu_updateVariableList;
import Sortable from "sortablejs";
import { HTMLComponent } from "../../HtmlComponent";
import { DraggableComponent } from "./DraggableComponent";
class VariableOrderMenu extends HTMLComponent {
constructor(parentComponent, specProvider) {
super("VariableOrderMenu", parentComponent, null);
_VariableOrderMenu_instances.add(this);
this.draggables = [];
// A variable name has been edited. Update it in the correct ClassTypeId
this.variableNameEdited = (state, previousVarName) => {
this.html[0].dispatchEvent(new CustomEvent("updateVarName", {
bubbles: true,
detail: { state: state, previousVarName: previousVarName },
}));
};
// A variable agregate function has been edited. Update it in the correct ClassTypeId
this.variableAggrChange = (state) => {
this.html[0].dispatchEvent(new CustomEvent("updateAggr", {
bubbles: true,
detail: { state: state },
}));
};
this.specProvider = specProvider;
this.aggrOptionsExtend = false;
}
render() {
this.htmlParent = $(this.parentComponent.html).find(".line2");
super.render();
let otherSelectHtml = $('<div class="variablesOtherSelect"></div>');
this.html.append(otherSelectHtml);
__classPrivateFieldGet(this, _VariableOrderMenu_instances, "m", _VariableOrderMenu_addSortable).call(this, otherSelectHtml);
return this;
}
addDraggableComponent(selected_val) {
let dragbl = new DraggableComponent(this, this.specProvider, selected_val, this.variableNameEdited, this.variableAggrChange);
dragbl.render();
this.draggables.push(dragbl);
return dragbl;
}
/**
* @param varName the varName
*/
removeDraggableByVarName(varName) {
this.draggables = this.draggables.filter((d) => {
if (d.state.selectedVariable.variable == varName
||
d.state.originalVariable?.variable == varName) {
d.html.remove();
return false;
}
return d;
});
}
}
_VariableOrderMenu_instances = new WeakSet(), _VariableOrderMenu_addSortable = function _VariableOrderMenu_addSortable(htmlParent) {
let that = this;
let sortable = new Sortable(htmlParent[0], {
group: "name",
sort: true,
delay: 0,
delayOnTouchOnly: false,
touchStartThreshold: 0,
disabled: false,
store: null,
animation: 150,
easing: "cubic-bezier(1, 0, 0, 1)",
handle: "div>.variable-handle",
filter: ".ignore-elements",
preventOnFilter: true,
draggable: ".sortableItem",
dataIdAttr: "data-variableName",
ghostClass: "sortable-ghost",
chosenClass: "sortable-chosen",
dragClass: "sortable-drag",
// Element is dropped into the list from another list
onAdd: function (/**Event*/ evt) {
// same properties as onEnd
},
// Changed sorting within list
onUpdate: function (/**Event*/ evt) {
// same properties as onEnd
},
// Called by any change to the list (add / update / remove)
onSort: function (/**Event*/ evt) {
// same properties as onEnd
},
// Called when dragging element changes position
onEnd: function (/**Event*/ evt) {
this.displayVariableList = this.toArray();
let fromIndex = evt.oldDraggableIndex;
let toIndex = evt.newDraggableIndex;
__classPrivateFieldGet(that, _VariableOrderMenu_instances, "m", _VariableOrderMenu_updateVariableList).call(that, fromIndex, toIndex);
// adjust sort option width
},
});
}, _VariableOrderMenu_updateVariableList = function _VariableOrderMenu_updateVariableList(oldIndex, newIndex) {
let tmp = this.draggables[oldIndex];
this.draggables.splice(oldIndex, 1);
this.draggables.splice(newIndex, 0, tmp);
this.html[0].dispatchEvent(new CustomEvent("updateVariablesOrder", {
bubbles: true
}));
};
export default VariableOrderMenu;
//# sourceMappingURL=VariableOrderMenu.js.map