diff --git a/bricks/svg.js b/bricks/svg.js new file mode 100644 index 0000000..deb95b3 --- /dev/null +++ b/bricks/svg.js @@ -0,0 +1,69 @@ +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.dynsize = true; + super(opts); + if (opts.url){ + this.set_url(opts.url); + } + } + set_url(url){ + fetch(url) + .then(response => reponse.text()) + .then(svgText => { + this.svgText = svgText.repeat(1); + this.set_colored_svg(this.color); + }); + } + 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; + svgText = bricks.obj_fmtstr({color: color}, self.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; + } +} + +brick.Factory.register('Svg', bricks.Svg); +