sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
87 lines • 4.03 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 _VariableSection_instances, _VariableSection_renderShowHideBtn, _VariableSection_addMutationObserver;
import { DisplayBtn } from "../buttons/DisplayBtn";
import { HTMLComponent } from "../HtmlComponent";
import VariableOrderMenu from "./variableorder/VariableOrderMenu";
import VariableSortOption from "./variablesort/VariableSortOptions";
import { Order } from "../../SparnaturalQueryIfc";
class VariableSection extends HTMLComponent {
constructor(ParentComponent, specProvider) {
super("variablesSelection", ParentComponent, null);
_VariableSection_instances.add(this);
this.specProvider = specProvider;
}
render() {
super.render();
this.linesWrapper = $('<div class="linesWrapper"></div>');
let line1 = $('<div class="line1"></div>');
let line2 = $('<div class="line2"></div>');
this.linesWrapper.append(line1).append(line2);
this.html.append(this.linesWrapper);
this.variableOrderMenu = new VariableOrderMenu(this, this.specProvider).render();
this.variableSortOption = new VariableSortOption(this).render();
__classPrivateFieldGet(this, _VariableSection_instances, "m", _VariableSection_renderShowHideBtn).call(this);
__classPrivateFieldGet(this, _VariableSection_instances, "m", _VariableSection_addMutationObserver).call(this);
return this;
}
/**
* @returns the states of draggable components from the variable selection part of the UI
*/
listVariables() {
return this.variableOrderMenu.draggables.map((d) => d.state);
}
/**
* @returns the order option selected from the UI
*/
getOrder() {
if (this.variableSortOption.ascendBtn.selected) {
return Order.ASC;
}
if (this.variableSortOption.descendBtn.selected) {
return Order.DESC;
}
return Order.NOORDER;
}
}
_VariableSection_instances = new WeakSet(), _VariableSection_renderShowHideBtn = function _VariableSection_renderShowHideBtn() {
let displayaction = (display) => {
if (display) {
$(this.linesWrapper).animate({
height: $(this.linesWrapper).get(0).scrollHeight,
}, 500, () => {
$(this.linesWrapper).height("auto");
$(this.linesWrapper).css("overflow", "visible");
});
}
else {
$(this.linesWrapper).animate({
height: 0,
}, 500, () => {
$(this.linesWrapper).css("overflow", "hidden");
});
this.variableOrderMenu.draggables.forEach((draggableItem) => {
draggableItem.closeAggrOptions();
});
}
};
this.displayBtn = new DisplayBtn(this, displayaction).render();
}, _VariableSection_addMutationObserver = function _VariableSection_addMutationObserver() {
let observer = new MutationObserver(mutationRecords => {
const firstItem = this.variableOrderMenu.html[0].getElementsByClassName('sortableItem').item(0);
const sortOption = this.variableSortOption.html[0];
if (!firstItem || firstItem.getBoundingClientRect().width === sortOption.getBoundingClientRect().width)
return;
sortOption.style.width = `${firstItem.getBoundingClientRect().width}px`;
});
observer.observe(this.html[0], {
childList: true,
subtree: true,
attributes: true
});
};
export default VariableSection;
//# sourceMappingURL=VariableSelection.js.map