sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
213 lines • 12.6 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 _EndClassWidgetGroup_instances, _EndClassWidgetGroup_addEventListener, _EndClassWidgetGroup_addEditEventListener, _EndClassWidgetGroup_onRemoveValue, _EndClassWidgetGroup_renderEndClassWidgetVal, _EndClassWidgetGroup_renderNewSelectedValue, _EndClassWidgetGroup_addMoreValues, _EndClassWidgetValue_stripLabelHtml;
import { getSettings } from "../../../../../../sparnatural/settings/defaultSettings";
import { ArrowComponent } from "../../../../buttons/ArrowComponent";
import { UnselectBtn } from "../../../../buttons/UnselectBtn";
import { HTMLComponent } from "../../../../HtmlComponent";
import { AddWidgetValueBtn } from "../../../../buttons/AddWidgetValueBtn";
import { ValueRepetition } from "../../../../widgets/AbstractWidget";
import { EditBtn } from "../../../../buttons/EditBtn";
import { equalsCriteria, getCriteriaType, CriteriaType } from "../../../../../SparnaturalQueryIfc";
import { I18n } from "../../../../../settings/I18n";
/*
This class is responsible for rendering the WidgetValues, selected by a widget.
This values are added in a 'list' after the EndClassGroup
*/
export class EndClassWidgetGroup extends HTMLComponent {
constructor(parentComponent, specProvider) {
super("EndClassWidgetGroup", parentComponent, null);
_EndClassWidgetGroup_instances.add(this);
this.widgetValues = [];
this.isSelectAll = false;
// when more values should be added then render the inputypecomponent again
_EndClassWidgetGroup_addMoreValues.set(this, () => {
// tell it is not completed so that it is higher
this.html[0].dispatchEvent(new CustomEvent("onGrpInputNotCompleted", { bubbles: true }));
this.html[0].dispatchEvent(new CustomEvent("renderWidgetWrapper", {
bubbles: true,
detail: { selectedValues: this.widgetValues },
}));
//this.#addEventListener();
});
this.specProvider = specProvider;
}
render() {
super.render();
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_addEventListener).call(this);
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_addEditEventListener).call(this);
return this;
}
// user selects a value for example a country from the listwidget
renderWidgetVal(selectedVal) {
this.isSelectAll = false;
// check if value already got selected before
if (this.widgetValues.some((val) => equalsCriteria(val.widgetVal.criteria, selectedVal.criteria)))
return;
// if not, then create the EndclassWidgetValue and add it to the list
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_renderEndClassWidgetVal).call(this, selectedVal);
}
setSelectAll() {
this.isSelectAll = true;
let endClassWidgetVal = new EndClassWidgetValue(this, null, true);
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_renderNewSelectedValue).call(this, endClassWidgetVal);
// asks to remove the value selection part, with 1 and 2
this.html[0].dispatchEvent(new CustomEvent("removeEditComponents", { bubbles: true }));
this.html[0].dispatchEvent(new CustomEvent("onGrpInputCompleted", { bubbles: true }));
}
getWidgetValues() {
let vals = this.widgetValues.map((val) => {
return val.widgetVal;
});
return vals;
}
/**
* @returns true if the widget value is the "Any" value
*/
hasAnyValue() {
return this.isSelectAll;
}
}
_EndClassWidgetGroup_addMoreValues = new WeakMap(), _EndClassWidgetGroup_instances = new WeakSet(), _EndClassWidgetGroup_addEventListener = function _EndClassWidgetGroup_addEventListener() {
this.html[0].addEventListener("onRemoveEndClassWidgetValue", (e) => {
e.stopImmediatePropagation();
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_onRemoveValue).call(this, e);
});
}, _EndClassWidgetGroup_addEditEventListener = function _EndClassWidgetGroup_addEditEventListener() {
this.html[0].addEventListener("onEditEndClassWidgetValue", (e) => {
e.stopImmediatePropagation();
let valueToDel = e.detail;
let unselectedValue;
this.widgetValues = this.widgetValues.filter((val) => {
if (equalsCriteria(val.widgetVal.criteria, valueToDel.widgetVal.criteria)) {
unselectedValue = val;
return false;
}
return true;
});
if (unselectedValue === undefined)
throw Error("Unselected val not found in the widgetValues list!");
unselectedValue.html.remove();
this.html[0].dispatchEvent(new CustomEvent("renderWidgetWrapper", {
bubbles: true,
detail: {
selectedValues: this.widgetValues,
editedValue: valueToDel.widgetVal
},
}));
});
}, _EndClassWidgetGroup_onRemoveValue = function _EndClassWidgetGroup_onRemoveValue(e) {
let valueToDel = e.detail;
// special case: if the value to delete is the selectAll value
let unselectedValue;
if (valueToDel.selectAll) {
this.isSelectAll = false;
unselectedValue = valueToDel;
}
else {
unselectedValue = valueToDel;
this.widgetValues = this.widgetValues.filter((val) => {
if (equalsCriteria(val.widgetVal.criteria, valueToDel.widgetVal.criteria)) {
unselectedValue = val;
return false;
}
return true;
});
if (unselectedValue === undefined)
throw Error("Unselected val not found in the widgetValues list!");
}
unselectedValue.html.remove();
if (this.widgetValues.length < 1) {
// reattach eventlistener. it got removed
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_addEventListener).call(this);
//if there is an addWidgetValueBtn then remove it as well
this.addWidgetValueBtn?.html?.remove();
this.html[0].dispatchEvent(new CustomEvent("renderWidgetWrapper", {
bubbles: true,
detail: { selectedValues: this.widgetValues },
}));
}
// if the number of widgetValues is now less than the maximum
if (this.widgetValues.length < getSettings().maxOr && this.addWidgetValueBtn?.html) {
this.addWidgetValueBtn.html.show();
}
this.html[0].dispatchEvent(new CustomEvent("updateWidgetList", {
bubbles: true,
detail: { unselectedVal: unselectedValue },
}));
this.html[0].dispatchEvent(new CustomEvent("redrawBackgroundAndLinks", { bubbles: true }));
}, _EndClassWidgetGroup_renderEndClassWidgetVal = function _EndClassWidgetGroup_renderEndClassWidgetVal(widgetVal) {
let endClassWidgetVal = new EndClassWidgetValue(this, widgetVal);
this.widgetValues.push(endClassWidgetVal);
__classPrivateFieldGet(this, _EndClassWidgetGroup_instances, "m", _EndClassWidgetGroup_renderNewSelectedValue).call(this, endClassWidgetVal);
// if the widget allows multiple values to be selected then AddWidgetValueBtn
// undefined for NON_SELECTABLE_PROPERTY
const widgetComp = this.parentComponent.endClassGroup.getWidgetComponent();
if (widgetComp && widgetComp.valueRepetition == ValueRepetition.MULTIPLE) {
// now (re)render the addMoreValuesButton
this.addWidgetValueBtn?.html
? this.addWidgetValueBtn.render()
: (this.addWidgetValueBtn = new AddWidgetValueBtn(this, __classPrivateFieldGet(this, _EndClassWidgetGroup_addMoreValues, "f")).render());
}
// If we reached maxOr hide the AddWidgetValueBtn
if (this.widgetValues.length == getSettings().maxOr) {
this.addWidgetValueBtn.html.hide();
}
// asks to remove the value selection part, with 1 and 2
this.html[0].dispatchEvent(new CustomEvent("removeEditComponents", { bubbles: true }));
this.html[0].dispatchEvent(new CustomEvent("onGrpInputCompleted", { bubbles: true }));
}, _EndClassWidgetGroup_renderNewSelectedValue = function _EndClassWidgetGroup_renderNewSelectedValue(endClassWidgetVal) {
endClassWidgetVal.render();
};
export class EndClassWidgetValue extends HTMLComponent {
constructor(ParentComponent, selectedVal, selectAll = false) {
super("EndClassWidgetValue", ParentComponent, null);
this.backArrow = new ArrowComponent(this, "<svg data-name=\"Calque 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 48.000001\"><defs></defs><path class=\"cls-1\" d=\"M 18.008733,1.5080381 6.6838121,1.5024032 c 0,0 -2.7510996,0.04416 -4.2115752,1.5946504 -2.02680282,2.1517235 -0.2098002,4.361739 -0.2098002,4.361739 0,0 8.2984163,9.9121154 11.7095953,13.1759434 1.225377,1.172444 1.678616,2.314014 1.658747,3.289995 l 0.0038,0.312891 c 0.01988,0.975981 -0.357679,2.113567 -1.583053,3.28601 C 10.640342,30.78746 2.2971761,40.70739 2.2971761,40.70739 c 0,0 -1.96022402,2.586197 0.363389,4.448506 1.7469044,1.400093 3.8753989,1.339578 3.8753989,1.339578 l 11.468674,0.0044\"/></svg>" /* UiuxConfig.COMPONENT_ARROW_BACK */);
this.frontArrow = new ArrowComponent(this, "<svg data-name=\"Calque 1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 48\"><defs></defs><path class=\"cls-1\" d=\"M 3.5511345e-5,46.497994 1.4361963,46.498028 C 4.1152796,46.495828 6.5425435,45.960846 8.383125,43.886622 12.296677,39.36225 22.28399,27.872435 22.28399,27.872435 c 0,0 1.196835,-1.301906 1.168082,-3.372191 -0.02772,-1.995828 -1.327436,-3.531545 -1.327436,-3.531545 0,0 -2.138386,-2.468047 -5.246376,-6.031304 C 13.831845,11.444733 10.328483,7.4203762 8.3992834,5.177641 6.5556265,3.0981441 4.025266,1.5036569 1.2346701,1.5 H 1.7192135e-4\"/><rect width=\"25\" height=\"5\" x=\"0\" y=\"43\" /><rect width=\"25\" height=\"5\" x=\"0\" y=\"0\" /></svg>" /* UiuxConfig.COMPONENT_ARROW_FRONT */);
// in case this value is the special "select all" value
this.selectAll = false;
_EndClassWidgetValue_stripLabelHtml.set(this, (html) => {
let tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
});
// set a tooltip if the label is a bit long
this.widgetVal = selectedVal;
this.selectAll = selectAll;
}
render() {
super.render();
this.backArrow.render();
let theLabel = this.selectAll ? I18n.labels.SelectAllValues : this.widgetVal.label;
// set a tooltip if the label is a bit long
var extraClass = "";
if (this.widgetVal && this.widgetVal.criteria && (getCriteriaType(this.widgetVal.criteria) == CriteriaType.RdfTermCriteria)
&& this.widgetVal.criteria.rdfTerm.value == "https://services.sparnatural.eu/api/v1/URI_NOT_FOUND") {
extraClass = 'class="notFound"';
}
var tooltip = (theLabel.length > 25) ? 'title="' + __classPrivateFieldGet(this, _EndClassWidgetValue_stripLabelHtml, "f").call(this, theLabel) + '"' : "";
let valuelbl = `<p ${tooltip}><span ${extraClass}> ${theLabel} </span></p>`;
this.html.append($(valuelbl));
this.frontArrow.render();
this.unselectBtn = new UnselectBtn(this, () => {
this.html[0].dispatchEvent(new CustomEvent("onRemoveEndClassWidgetValue", {
bubbles: true,
detail: this,
}));
}).render();
if (this.widgetVal && getCriteriaType(this.widgetVal.criteria) == CriteriaType.MapCriteria) {
this.editBtn = new EditBtn(this, () => {
this.html[0].dispatchEvent(new CustomEvent("onEditEndClassWidgetValue", {
bubbles: true,
detail: this,
}));
}).render();
}
return this;
}
}
_EndClassWidgetValue_stripLabelHtml = new WeakMap();
//# sourceMappingURL=EndClassWidgetGroup.js.map