72 lines
1.4 KiB
JavaScript
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);
|
|
|