sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
258 lines (257 loc) • 13.9 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 _DraggableComponent_instances, _DraggableComponent_resize, _DraggableComponent_validateInput;
import { HTMLComponent } from "../../HtmlComponent";
import { I18n } from "../../../settings/I18n";
/*
Single Draggable Component
It consists of an "drag handle" + icon + name of the variable
The name of the variable can be edited.
*/
export class DraggableComponent extends HTMLComponent {
constructor(parentComponent, specProvider, selected_val, varEdited, aggrChanged) {
let varName = selected_val.variable;
let icon = specProvider.getEntity(selected_val.type).getIcon();
let icon_display = ``;
if (icon != undefined) {
icon_display = `<div class="tmpicon"><span><i class="fa ${icon} fa-fw"></i></span></div>`;
}
let editVar = $(`
<input type="text" minlength="1">
</input>
`).val(varName);
let aggrActionIput = $(`<input type="hidden" name="selectedAggr" />`);
let aggrAction = $(`
<div class="variableSelectedAggr flexWrap" data-variableName="${varName}">
<span class="variableAggr-handle">
${"<svg class=\"icon-arrow-bottom\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 14.2 7.5\" style=\"enable-background:new 0 0 14.2 7.5;\" xml:space=\"preserve\"><style type=\"text/css\">.st0{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}</style><polyline class=\"st0\" points=\"0.4,0.4 7.1,7.1 13.8,0.4 \"/></svg>" /* UiuxConfig.ICON_ARROW_BOTTOM */}
</span>
</div>`);
let aggrOptions = $(`
<div class="aggrOptions reducted is-num is-time" style="display: none;">
<ul>
<li data-value="" class="reducted-visible">` + I18n.labels.AggrLabelNone + `</li>
<li data-value="count" data class="reducted-visible" data-suffix="_count">` + I18n.labels.AggrLabelCount + `</li>
<li data-value="group_concat" data-suffix="_group_concat">` + I18n.labels.AggrLabelGroupConcat + `</li>
<li data-value="max" data-suffix="_max" class="revealIf revealIf-num revealIf-time">` + I18n.labels.AggrLabelMax + `</li>
<li data-value="min" data-suffix="_min" class="revealIf revealIf-num revealIf-time">` + I18n.labels.AggrLabelMin + `</li>
<li data-value="sample" data-suffix="_sample">` + I18n.labels.AggrLabelSample + `</li>
<li data-value="sum" data-suffix="_sum" class="revealIf revealIf-num">` + I18n.labels.AggrLabelSum + `</li>
<li data-value="avg" data-suffix="_avg" class="revealIf revealIf-num">` + I18n.labels.AggrLabelAvg + `</li>
</ul>
</div>`);
let aggrOptionsExtend = $(`
<div class="aggrOptionsExtend">
<span class="reducted-action">` + I18n.labels.AggrLabelSeeMore + `</span>
<span class="extended-action">` + I18n.labels.AggrLabelSeeLess + `</span>
</div>`);
let widgetHtml = $(`<div class="variableSelected flexWrap" data-variableName="${varName}">
<span class="variable-handle">
${"<svg data-name=\"Calque 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1.5274673 3.9676008\"><defs></defs><g><g style=\"display:inline\" transform=\"translate(0,-0.00102867)\"><path style=\"fill:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.793749, 0.793749;stroke-dashoffset:0;stroke-opacity:1\" d=\"M 0.13229143,1.3296317e-4 0.13760743,3.9679622\" sodipodi:nodetypes=\"cc\" /><path style=\"fill:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.793749, 0.793749;stroke-dashoffset:0;stroke-opacity:1\" d=\"M 1.3939913,0.00220012 1.3927859,3.9685394\" sodipodi:nodetypes=\"cc\" /></g></g></svg>" /* UiuxConfig.COMPONENT_DRAG_HANDLE */}
</span>
${icon_display}
</div>`).append(editVar);
let aggrBadgeValue = $(`<div class="aggrBadgeValue" style="display: none;"></div>
</div>`);
$(aggrAction).append(aggrActionIput);
$(widgetHtml).append(aggrAction);
$(aggrOptions).append(aggrOptionsExtend);
$(widgetHtml).append(aggrOptions);
$(widgetHtml).append(aggrBadgeValue);
super("sortableItem", parentComponent, widgetHtml);
_DraggableComponent_instances.add(this);
this.state = {
// make a COPY of the Selected val
// otherwise any change to that object is also reflected in the Start/EndClassGroup
selectedVariable: { ...selected_val }
};
__classPrivateFieldGet(this, _DraggableComponent_instances, "m", _DraggableComponent_resize).call(this, editVar, varName);
this.varEdited = varEdited;
this.aggrChanged = aggrChanged;
this.aggrComponentAction = aggrAction;
this.aggrComponentOptionsExtend = aggrOptionsExtend;
this.aggrComponentOptions = aggrOptions;
this.aggrComponentInput = aggrActionIput;
this.aggrComponentBadgeValue = aggrBadgeValue;
let that = this;
editVar[0].addEventListener("change", (event) => {
//variableName got edited by user
let val = __classPrivateFieldGet(this, _DraggableComponent_instances, "m", _DraggableComponent_validateInput).call(this, event.currentTarget);
that.onVarNameChange(val);
});
this.initEventListenersAggr();
if (parentComponent.aggrOptionsExtend) {
this.toggleAggrOptionsExtend();
}
}
/**
* This is called from QueryLoader when loading query
*/
loadAggregatedVariable(aggregatedVar) {
// need to init aggregate funtion selection
// set this/state for agregate function context
this.state.aggregateFunction = this.getAggregateFunctionByValue(aggregatedVar.expression.aggregation);
this.state.originalVariable = { ...this.state.selectedVariable };
this.state.selectedVariable.variable = aggregatedVar.variable.value;
//Init UI/UX elements
this.onAggrOptionSelected(this.state.aggregateFunction);
this.widgetHtml.find("input").val(this.state.selectedVariable.variable);
__classPrivateFieldGet(this, _DraggableComponent_instances, "m", _DraggableComponent_resize).call(this, this.widgetHtml.find("input"), this.state.selectedVariable.variable);
}
render() {
this.htmlParent = $(this.parentComponent.html).find(".variablesOtherSelect");
super.render();
return this;
}
initEventListenersAggr() {
//Toggle option menu display
this.aggrComponentAction[0].addEventListener("click", (event) => {
this.toggleAggrOption();
});
// Capture aggregate function selection
this.aggrComponentOptions[0].querySelectorAll('li').forEach((optionItem) => {
optionItem.addEventListener("click", (event) => {
let option = event.currentTarget;
let optionValue = option.getAttribute('data-value');
let optionValueSuffix = option.getAttribute('data-suffix');
if (!this.state.aggregateFunction) {
// no aggr function was selected, store original variable
// no NOT simply assign the selected variable to the original variable
// but create a new object
this.state.originalVariable = { variable: this.state.selectedVariable.variable, type: this.state.selectedVariable.type };
}
if (optionValue == '') {
// no aggr function selected : reset to original var name
this.state.aggregateFunction = undefined;
this.state.selectedVariable = this.state.originalVariable;
}
else {
this.state.aggregateFunction = this.getAggregateFunctionByValue(optionValue);
}
if (this.state.aggregateFunction) {
// compute new variable name
this.state.selectedVariable.variable = this.state.originalVariable.variable + optionValueSuffix;
}
this.onAggrOptionSelected(optionValue);
// notify event
this.aggrChanged(this.state);
// set the input value to the new variable name
this.widgetHtml.find("input").val(this.state.selectedVariable.variable);
__classPrivateFieldGet(this, _DraggableComponent_instances, "m", _DraggableComponent_resize).call(this, this.widgetHtml.find("input"), this.state.selectedVariable.variable);
});
});
this.aggrComponentOptionsExtend[0].addEventListener("click", (event) => {
this.toggleAggrOptionsExtend();
});
}
onVarNameChange(newName) {
// recreate a new object, otherwise this will get changed too !
let previousVarName = { ...this.state.selectedVariable };
this.state.selectedVariable.variable = newName;
let editVar = this.widgetHtml.find("input");
__classPrivateFieldGet(this, _DraggableComponent_instances, "m", _DraggableComponent_resize).call(this, editVar, newName);
// if there is currently an aggregate function, display badge
if (this.state.aggregateFunction) {
this.displayBadgeValue(this.aggrComponentOptions[0].querySelector('li.selected').innerHTML);
}
// call callback
this.varEdited(this.state, previousVarName);
}
onAggrOptionSelected(option) {
let optionItemLabel = '';
this.aggrComponentOptions[0].querySelectorAll('li').forEach((optionItem) => {
if (optionItem.getAttribute('data-value') == option) {
optionItemLabel = optionItem.innerHTML;
optionItem.classList.add('selected');
}
else {
optionItem.classList.remove('selected');
}
});
this.aggrComponentInput[0].value = option;
this.closeAggrOptions();
this.displayBadgeValue(optionItemLabel);
}
toggleAggrOption() {
if (this.aggrComponentOptions[0].style.display == 'block') {
return this.closeAggrOptions();
}
if (this.parentComponent.aggrOptionsExtend) {
this.aggrComponentOptions[0].classList.remove('reducted');
this.aggrComponentOptions[0].classList.add('extended');
}
else {
this.aggrComponentOptions[0].classList.add('reducted');
this.aggrComponentOptions[0].classList.remove('extended');
}
return this.onpenAggrOptions();
}
toggleAggrOptionsExtend() {
if (this.aggrComponentOptions[0].classList.contains('reducted')) {
this.aggrComponentOptions[0].classList.remove('reducted');
this.aggrComponentOptions[0].classList.add('extended');
this.parentComponent.aggrOptionsExtend = true;
}
else {
this.aggrComponentOptions[0].classList.add('reducted');
this.aggrComponentOptions[0].classList.remove('extended');
this.parentComponent.aggrOptionsExtend = false;
}
}
onpenAggrOptions() {
this.aggrComponentOptions[0].style.display = 'block';
}
closeAggrOptions() {
this.aggrComponentOptions[0].style.display = 'none';
}
/**
* Displays the aggregation function badge from the selected option
*/
displayBadgeValue(option) {
// if there is an aggregation function in the state...
if (this.state.aggregateFunction) {
this.aggrComponentBadgeValue[0].style.display = 'block';
this.aggrComponentBadgeValue[0].innerText = option + '(' + this.state.originalVariable.variable + ')';
}
else {
this.aggrComponentBadgeValue[0].style.display = 'none';
}
}
setVarName(newName) {
this.onVarNameChange(newName);
this.widgetHtml.find("input").val(newName);
}
/**
* @returns the enum value from the string value
*/
getAggregateFunctionByValue(value) {
let str = value;
let aggregateFunction = str;
return aggregateFunction;
}
}
_DraggableComponent_instances = new WeakSet(), _DraggableComponent_resize = function _DraggableComponent_resize(el, varName) {
el[0].style.width = 10 + "ch";
if (varName.length > 10)
el[0].style.width = varName.length + "ch";
}, _DraggableComponent_validateInput = function _DraggableComponent_validateInput(inputEl) {
if (inputEl.value.length < 1) {
let keepValue = this.state.selectedVariable.variable;
inputEl.value = keepValue; // keep old variable
return keepValue;
}
// if there is an aggregation function
if (this.state.aggregateFunction) {
// prevent the varName from being equal to the original varName
if (inputEl.value == this.state.originalVariable.variable) {
let keepValue = this.state.selectedVariable.variable;
inputEl.value = keepValue;
return keepValue;
}
}
return inputEl.value;
};
//# sourceMappingURL=DraggableComponent.js.map