sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
40 lines • 2.92 kB
JavaScript
import { ArrowComponent } from "../../../../../buttons/ArrowComponent";
import { HTMLComponent } from "../../../../../HtmlComponent";
/*
This is the base class for the optioncomponents such as NotExistComponent or OptionalComponent
*/
class BaseOptionComponent extends HTMLComponent {
constructor(baseCssClass, type, ParentComponent, name) {
super(baseCssClass, ParentComponent, null);
// If you would like to change the shape of the Arrow. Do it here
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 */);
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.default_value = "";
this.selected = false;
this.name = name;
this.ParentOptionsGroup = ParentComponent;
this.parentWrapper =
this.ParentOptionsGroup.ParentCriteriaGroup.parentGroupWrapper;
this.type = type;
}
render() {
// htmlStructure rendering:
super.render();
this.backArrow.render();
this.html.append($(`<span>${this.label}</span>`));
this.frontArrow.render();
return this;
}
// Optional or notExists button got clicked. handle the css and state
onChange() {
this.html[0].dispatchEvent(new CustomEvent("optionTriggered", { bubbles: true, detail: this.type }));
}
select() {
this.html[0].classList.add("Enabled");
}
unselect() {
this.html[0].classList.remove("Enabled");
}
}
export default BaseOptionComponent;
//# sourceMappingURL=BaseOptionComponent.js.map