bricks/bricks/svg.js
2025-06-02 12:29:54 +00:00

72 lines
1.4 KiB
JavaScript

var bricks = window.bricks || {};
bricks.Svg = class extends bricks.VBox {
/*
options:{
rate:
url:
color:*
blinkcolor:*
blinktime:*
}
*/
constructor(opts){
opts.rate = opts.rate || 1;
opts.cwidth = opts.cwidth || 1;
opts.cheight = opts.cheight || 1;
opts.blinktime = opts.blinktime || 0.2;
opts.dynsize = true;
super(opts);
if (opts.url){
this.set_url(opts.url);
}
}
set_url(url){
fetch(url)
.then(response => response.text())
.then(svgText => {
this.svgText = svgText;
this.set_colored_svg(this.color);
this.blink();
});
}
set_ancent_color(e){
var pstyle = getComputedStyle(this.parent);
this.set_color(pstyle.color);
}
set_color(color){
this.color = color;
this.set_colored_svg(color);
}
set_blinkcolor(color){
this.blinkcolor = color;
this.blinktime = this.blinktime || 0.5;
}
set_colored_svg(color){
this.cur_color = color;
var svgText = bricks.obj_fmtstr({color: color}, this.svgText);
this.dom_element.innerHTML = svgText;
}
blink(){
if (this.blinktime && this.blinkcolor) {
if (this.cur_color == this.color){
this.set_colored_svg(this.blinkcolor);
} else {
this.set_colored_svg(this.color);
}
this.blink_task = schedule_once(this.blink.bind(this),
this.blinktime);
}
}
start_blink(){
if (!this.blink_task){
blink();
}
}
end_blink(){
this.blink_task = null;
}
}
bricks.Factory.register('Svg', bricks.Svg);