sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
100 lines • 3.87 kB
JavaScript
import { HTMLComponent } from "../HtmlComponent";
import LoadingSpinner from "./LoadingSpinner";
import { DataFactory, Literal } from "rdf-data-factory";
const factory = new DataFactory();
// The ValueType decides wheter a widget has the possibility to choose only one value or multiple values
// example for multiples: List of countries in ListWidget
// example for single: Search string in SearchWidget
export var ValueRepetition;
(function (ValueRepetition) {
ValueRepetition[ValueRepetition["SINGLE"] = 0] = "SINGLE";
ValueRepetition[ValueRepetition["MULTIPLE"] = 1] = "MULTIPLE";
})(ValueRepetition || (ValueRepetition = {}));
/**
* Generic RDFTerm value structure, either an IRI or a Literal with lang or datatype
*/
export class RDFTerm {
constructor(term) {
switch (term.termType) {
case "Literal":
this.type = "literal";
break;
case "BlankNode":
this.type = "bnode";
break;
case "NamedNode":
this.type = "uri";
break;
default:
throw new Error("Unsupported termType here " + term.termType);
}
this.value = term.value;
this["xml:lang"] =
term instanceof Literal ? term.language : undefined;
this.datatype =
term instanceof Literal ? term.datatype.value : undefined;
}
}
export class RdfTermValue {
key() {
return this.value.rdfTerm.value;
}
constructor(v) {
this.value = v;
}
}
export class AbstractWidget extends HTMLComponent {
constructor(baseCssClass, parentComponent, widgetHTML, startClassVal, objectPropVal, endClassVal, valueRepetition) {
super(baseCssClass, parentComponent, widgetHTML);
this.blockStartTriple = false;
this.blockObjectPropTriple = false;
this.blockEndTriple = false;
this.spinner = new LoadingSpinner(this).render();
this.startClassVal = startClassVal;
this.objectPropVal = objectPropVal;
this.endClassVal = endClassVal;
this.valueRepetition = valueRepetition;
}
render() {
super.render();
this.spinner.render();
return this;
}
// fires the event to render the label of the WidgetValue on the UI
// can take either a single value or an array of values
triggerRenderWidgetVal(widgetValue) {
this.html[0].dispatchEvent(new CustomEvent("renderWidgetVal", {
bubbles: true,
detail: widgetValue,
}));
}
// Method to disable the widget
disableWidget() {
// Add a 'disabled-widget' class to visually indicate it's disabled
//this.html[0].classList.add("disabled-widget");
// Disable all input elements within the widget's HTML container
const inputs = this.html[0].querySelectorAll("input, button, select, textarea");
inputs.forEach((element) => {
element.setAttribute("disabled", "true");
});
}
// Method to enable the widget
enableWidget() {
// Remove the 'disabled-widget' class to restore normal appearance
//this.html[0].classList.remove("disabled-widget");
// Enable all input elements within the widget's HTML container
const inputs = this.html[0].querySelectorAll("input, button, select, textarea");
inputs.forEach((element) => {
element.removeAttribute("disabled");
});
}
// toggle spinner component when loading a datasource
toggleSpinner(message) {
const elements = this.spinner.html[0].getElementsByClassName("load");
if (elements.length > 0)
elements[0].classList.toggle("show");
if (message != null)
this.spinner.renderMessage(message);
}
}
//# sourceMappingURL=AbstractWidget.js.map