sparnatural
Version:
Visual client-side SPARQL query builder and knowledge graph exploration tool
45 lines • 2.37 kB
JavaScript
import { HTMLComponent } from "../HtmlComponent";
import { I18n } from "../../settings/I18n";
export class PlayBtn extends HTMLComponent {
constructor(ParentComponent, callback) {
//TODO generateQuery enable disable as binary state
let widgetHtml = $(`<span title="${I18n.labels["Submit.tooltip"]}">${"<svg class=\"playIcon\" 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 3.9 4.4\" style=\"enable-background:new 0 0 3.9 4.4;\" xml:space=\"preserve\"><path d=\"M3.7,1.8C3.9,2,4,2.2,3.8,2.4c0,0,0,0,0,0c0,0.1-0.1,0.1-0.2,0.2l-3,1.7C0.5,4.5,0.2,4.4,0.1,4.2C0,4.2,0,4.1,0,4V0.5C0,0.2,0.2,0,0.4,0c0,0,0,0,0,0c0.1,0,0.2,0,0.2,0.1L3.7,1.8z\"/></svg><svg version=\"1.1\" class=\"playLoader\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" enable-background=\"new 0 0 0 0\" xml:space=\"preserve\"><path fill=\"#fff\" d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\"><animateTransform attributeName=\"transform\" attributeType=\"XML\" type=\"rotate\" dur=\"1s\" from=\"0 50 50\" to=\"360 50 50\" repeatCount=\"indefinite\" /></path></svg>" /* UiuxConfig.ICON_PLAY */}</span>`);
super("playBtn", ParentComponent, widgetHtml);
this.callback = callback;
// add clicklistener
let that = this;
this.widgetHtml.on("click", function (e) {
// don't call the callback when the button is disabled
if (!that.isDisabled()) {
callback();
}
});
}
render() {
super.render();
return this;
}
/**
* @returns true when the button is disabled
*/
isDisabled() {
return this.html.hasClass("submitDisable");
}
disable() {
// set a disabled CSS class, trigger the loader
this.html.addClass("submitDisable loadingEnabled");
}
/**
* Triggered when query has finished executing. Just removes the loading but keep the button disabled
*/
removeLoading() {
this.html.removeClass("loadingEnabled");
}
/**
* Re-enables the grey button
*/
enable() {
this.html.removeClass("submitDisable");
}
}
//# sourceMappingURL=PlayBtn.js.map