Added dynamic stroke color and width attribute as well as attribute c…

…hange detection
samuelOsborne · Dec 5, 2020 · cc1da4d · cc1da4d
1 parent 1e8aaaf
commit cc1da4d
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -73,14 +73,26 @@ Plays animation once
 
 #### Attributes
 
-The default state for attributes are false.
+The default state for attributes are false or null for stroke width and color.
 
 ##### loop
 Makes the animation loop
 ```HTML
 <lottie-interactive path="button.json" loop></lottie-interactive>
 ```
 
+##### s-width
+Changes the stroke width of every stroke
+```HTML
+<lottie-interactive path="button.json" s-width="25"></lottie-interactive>
+```
+
+##### s-color
+Changes the stroke color of every stroke, must be a full hexadecimal color
+```HTML
+<lottie-interactive path="button.json" s-color="#ffffff"></lottie-interactive>
+```
+
 ##### autoplay
 Makes the animation play automatically on load
 ```HTML

diff --git a/bin/lottie-interactive.js b/bin/lottie-interactive.js
diff --git a/examples/index.html b/examples/index.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Examples</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script type="module" src="../../bin/lottie-interactive.js"></script>
 </head>
 <body>
 <div class="title">
@@ -25,7 +24,8 @@ <h1>Examples</h1>
   <li><a href="./loop/loop.html">Attribute: Loop</a></li>
   <li><a href="./reset/reset.html">Attribute: Reset</a></li>
   <li><a href="./autoplay/autoplay.html">Attribute: Autoplay</a></li>
-  <li><a href="./stroke/width.html">Attribute: Stroke</a></li>
+  <li><a href="./stroke/width.html">Attribute: s-width</a></li>
+  <li><a href="./stroke/color.html">Attribute: s-color</a></li>
 </ul>
 </body>
 </html>

diff --git a/examples/stroke/color.html b/examples/stroke/color.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Stroke color example</title>
+  <script type="module" src="../../bin/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Stroke color attribute in element
+</h1>
+<div style="text-align: center">
+  <h2>
+    Original
+  </h2>
+  <lottie-interactive path="../animations/rainbow.json"
+                      s-width="10"
+                      loop
+                      stroke
+                      autoplay>
+  </lottie-interactive>
+
+  <h2>
+    Stroke color  #44feee
+  </h2>
+  <lottie-interactive path="../animations/rainbow.json"
+                      s-width="10"
+                      s-color="#44feee"
+                      loop
+                      autoplay>
+  </lottie-interactive>
+  <div>
+    Rainbow courtesy of @lack_robin, found here: https://lottiefiles.com/38726-stagger-rainbow
+  </div>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+	}
+</style>
diff --git a/examples/stroke/width.html b/examples/stroke/width.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Click example</title>
+  <title>Stroke width example</title>
   <script type="module" src="../../bin/lottie-interactive.js"></script>
 </head>
 
@@ -12,10 +12,10 @@ <h1>
 </h1>
 <div style="text-align: center">
   <h2>
-    5px stroke width
+    10px stroke width
   </h2>
   <lottie-interactive path="../animations/rainbow.json"
-                      stroke="5"
+                      s-width="10"
                       loop
                       autoplay>
   </lottie-interactive>

diff --git a/src/index.ts b/src/index.ts
@@ -10,6 +10,12 @@ import {PlayOnce} from "./interactions/play-once";
 
 import {Stroke} from "./modifiers/stroke";
 
+
+const OBSERVED_ATTRIBUTES = [
+    "s-width",
+    "s-color"
+]
+
 const styling = `
   :host {
     justify-content: center;
@@ -33,6 +39,7 @@ export class LottieInteractive extends HTMLElement {
     private reset: boolean = false;
     private aspectRatio: string = 'xMidYMid slice';
     private strokeWidth: string = null;
+    private strokeColor: string = null;
     private data: any;
 
     private interactions: Array<BaseInteraction> = new Array<BaseInteraction>();
@@ -54,8 +61,7 @@ export class LottieInteractive extends HTMLElement {
             console.error("Lottie-interactive: Your JSON data could not be loaded.");
             return ;
         }
-        if (this.strokeWidth !== null)
-            Stroke.changeWidth(this.data, this.strokeWidth);
+        Stroke.changeStrokeWidthColor(this.data, this.strokeWidth, this.strokeColor);
         this.loadAnimation();
         this.initInteractions();
     }
@@ -96,8 +102,11 @@ export class LottieInteractive extends HTMLElement {
         if (this.hasAttribute('aspect-ratio')) {
             this.aspectRatio = this.getAttribute('aspect-ratio');
         }
-        if (this.hasAttribute('stroke')) {
-            this.strokeWidth = this.getAttribute('stroke');
+        if (this.hasAttribute('s-width')) {
+            this.strokeWidth = this.getAttribute('s-width');
+        }
+        if (this.hasAttribute('s-color')) {
+            this.strokeColor = this.getAttribute('s-color');
         }
     }
 
@@ -123,6 +132,31 @@ export class LottieInteractive extends HTMLElement {
             }
         });
     }
+
+    static get observedAttributes() {
+        return OBSERVED_ATTRIBUTES;
+    }
+
+    attributeChangedCallback(name: any, oldValue: any, newValue: any) {
+        switch (name) {
+            case 's-width':
+                this.strokeWidth = newValue;
+                Stroke.changeWidth(this.data, this.strokeWidth);
+                if (this.lottie != null) {
+                    this.lottie.destroy();
+                    this.loadAnimation();
+                }
+                break;
+            case 's-color':
+                this.strokeColor = newValue;
+                Stroke.changeColor(this.data, this.strokeColor);
+                if (this.lottie != null) {
+                    this.lottie.destroy();
+                    this.loadAnimation();
+                }
+                break;
+        }
+    }
 }
 
 customElements.define('lottie-interactive', LottieInteractive);
diff --git a/src/modifiers/stroke.ts b/src/modifiers/stroke.ts
@@ -1,5 +1,22 @@
 export class Stroke {
-    public static changeWidth(data: any, strokeWidth: String) {
+
+    public static changeStrokeWidthColor(data: any, strokeWidth: string, strokeHex: string) {
+        if (data !== null && !(strokeHex === null && strokeWidth === null)) {
+            if ( typeof data == "object" ) {
+                Object.entries(data).forEach(([key, value]) => {
+                    if (key === "ty" && value === "st") {
+                        if (strokeWidth !== null)
+                            data.w.k = Number(strokeWidth);
+                        if (strokeHex !== null)
+                            data.c.k = this.hexToRgbA(strokeHex);
+                    }
+                    this.changeStrokeWidthColor(value, strokeWidth, strokeHex);
+                });
+            }
+        }
+    }
+
+    public static changeWidth(data: any, strokeWidth: string) {
         if (data !== null) {
             if ( typeof data == "object" ) {
                 Object.entries(data).forEach(([key, value]) => {
@@ -11,4 +28,41 @@ export class Stroke {
             }
         }
     }
+
+    public static changeColor(data: any, strokeHex: string) {
+        if (data !== null) {
+            if ( typeof data == "object" ) {
+                Object.entries(data).forEach(([key, value]) => {
+                    if (key === "ty" && value === "st") {
+                        data.c.k = this.hexToRgbA(strokeHex);
+                    }
+                    this.changeColor(value, strokeHex);
+                });
+            }
+        }
+    }
+
+    public static scaleRGB(n: number) {
+        return Math.round((n / 255 ) * 100) / 100;
+    }
+
+    public static hexToRgbA(hex: string) : Array<Number> {
+        let c: any;
+        let list: Array<number> = new Array<number>();
+
+        if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+            c= hex.substring(1).split('');
+            if(c.length== 3){
+                c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+            }
+            c= '0x' + c.join('');
+            list.push(this.scaleRGB(c>>16&255));
+            list.push(this.scaleRGB(c>>8&255));
+            list.push(this.scaleRGB(c&255));
+            list.push(1);
+            return list;
+        }
+        return (this.hexToRgbA("#000000"))
+    }
+
 }