fixes airbnb#1878 supports id attribute for container

immutable · Nov 27, 2019 · 24c705b · 24c705b
1 parent 3dfa97e
commit 24c705b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -244,7 +244,8 @@ lottie.loadAnimation({
     clearCanvas: false,
     progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
     hideOnTransparent: true, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
-    className: 'some-css-class-name'
+    className: 'some-css-class-name',
+    id: 'some-id',
   }
 });
 ```

diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
@@ -6,7 +6,8 @@ function CanvasRenderer(animationItem, config){
         progressiveLoad: (config && config.progressiveLoad) || false,
         preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
         imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
-        className: (config && config.className) || ''
+        className: (config && config.className) || '',
+        id: (config && config.id) || '',
     };
     this.renderConfig.dpr = (config && config.dpr) || 1;
     if (this.animationItem.wrapper) {
@@ -148,6 +149,9 @@ CanvasRenderer.prototype.configAnimation = function(animData){
         if(this.renderConfig.className) {
             this.animationItem.container.setAttribute('class', this.renderConfig.className);
         }
+        if(this.renderConfig.id) {
+            this.animationItem.container.setAttribute('id', this.renderConfig.id);
+        }
     }else{
         this.canvasContext = this.renderConfig.context;
     }

diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
@@ -36,6 +36,7 @@ function SVGRenderer(animationItem, config){
         viewBoxOnly: (config && config.viewBoxOnly) || false,
         viewBoxSize: (config && config.viewBoxSize) || false,
         className: (config && config.className) || '',
+        id: (config && config.id) || '',
         focusable: config && config.focusable
     };
 
@@ -95,10 +96,13 @@ SVGRenderer.prototype.configAnimation = function(animData){
         this.svgElement.style.height = '100%';
         this.svgElement.style.transform = 'translate3d(0,0,0)';
     }
-    if(this.renderConfig.className) {
+    if (this.renderConfig.className) {
         this.svgElement.setAttribute('class', this.renderConfig.className);
     }
-    if(this.renderConfig.focusable !== undefined) {
+    if (this.renderConfig.id) {
+        this.svgElement.setAttribute('id', this.renderConfig.id);
+    }
+    if (this.renderConfig.focusable !== undefined) {
         this.svgElement.setAttribute('focusable', this.renderConfig.focusable);
     }
     this.svgElement.setAttribute('preserveAspectRatio',this.renderConfig.preserveAspectRatio);