better explain the autosize and add better support to the boolean par…

…ameters in html
dealfonso · Apr 24, 2024 · b0e47d4 · b0e47d4
1 parent 3faae05
commit b0e47d4
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ It is possible to customize many parameters of the _Simple Lottie Player_, but y
     url="https://assets6.lottiefiles.com/packages/lf20_fj8rlma5.json"
     max-width="300"
     max-height="300"
-    autosize="true"
+    autosize="false"
     loop="true"
     repeat-count="0"
     autoplay="true"
@@ -56,7 +56,7 @@ It is possible to customize many parameters of the _Simple Lottie Player_, but y
 The parameters are:
 - `url`: the URL from which to retrieve the animation.
 - `max-width` and `max-height`: when resizing the animation using `resize(...)` function, these values limit the size of the containers, while keeping the aspect ratio for the animation.
-- `autosize`: if set to true the container is resized (observing `max-witdh` and `max-height`) when an animation is loaded.
+- `autosize`: if set to true the container is resized to the size of the animation (observing `max-witdh` and `max-height`), when an animation is loaded.
 - `loop`: if set to true, the animation will play in loop when loaded, for a number of times (see `repeat-count`).
 - `repeat-count`: if set to a number, the animation will play that number of times and then stop (0 means _forever_). This parameter is ignored if `loop` is set to false.
 - `autoplay`: if set to true, the animation will start playing when loaded.
@@ -98,8 +98,8 @@ let defaultOptions = {
     /// Number of times the animation should be repeated (0 means infinite, 1 means play once, 2 means play twice, etc.)
     //  (*) if loop is set to false, this parameter is ignored
     repeatCount: 0,
-    // Automatically resize the container on animation loaded
-    autosize: true,
+    // Automatically resize the container to the size of the animation, on animation loaded
+    autosize: false,
     // Add two overlay divs that act as buttons (play and pause, that work depending on the animation is playing or not)
     controlButtons: false,
     // Add an overlay button that makes the player to display at full size (ignoring the maxWidth and maxHeight parameters)

diff --git a/js/simplelottieplayer.js b/js/simplelottieplayer.js
@@ -514,6 +514,7 @@ class MemLottiePlayer extends SimpleLottiePlayer {
 
                     // Get the value and convert the type, if needed
                     let value = element.getAttribute(camelToSnakeCase(attributeName));
+                    console.log(attributeName);
                     if (value != null) {
                         let type = "string"
                         if (parts.length > 1) {
@@ -525,7 +526,9 @@ class MemLottiePlayer extends SimpleLottiePlayer {
                             case "float":
                                 try { value = parseFloat(value); } catch (_) { }; break;
                             case "bool":
-                                value = [ "", "true", "1" ].indexOf(value.toLowerCase()) >= 0; break;
+                                value = [ "", "true", "1", attributeName ].indexOf(value.toLowerCase()) >= 0; 
+                                console.log(attributeName, value);
+                                break;
                         }
                         result[attributeName] = value;
                     } else {
@@ -546,7 +549,7 @@ class MemLottiePlayer extends SimpleLottiePlayer {
                     autoplay: true,
                     controlButtons: false,
                     fullsizeButton: false,
-                    autosize: true,
+                    autosize: false,
                     cssClassControlButtons: null,
                     cssClassFullsizeButton: null,
                     repeatCount: 0

diff --git a/simplelottieplayer.js b/simplelottieplayer.js
@@ -555,6 +555,7 @@ class MemLottiePlayer extends SimpleLottiePlayer {
                     let parts = attributeName.split(":");
                     attributeName = parts[0];
                     let value = element.getAttribute(camelToSnakeCase(attributeName));
+                    console.log(attributeName);
                     if (value != null) {
                         let type = "string";
                         if (parts.length > 1) {
@@ -576,7 +577,8 @@ class MemLottiePlayer extends SimpleLottiePlayer {
                             break;
 
                           case "bool":
-                            value = [ "", "true", "1" ].indexOf(value.toLowerCase()) >= 0;
+                            value = [ "", "true", "1", attributeName ].indexOf(value.toLowerCase()) >= 0;
+                            console.log(attributeName, value);
                             break;
                         }
                         result[attributeName] = value;
@@ -597,7 +599,7 @@ class MemLottiePlayer extends SimpleLottiePlayer {
                     autoplay: true,
                     controlButtons: false,
                     fullsizeButton: false,
-                    autosize: true,
+                    autosize: false,
                     cssClassControlButtons: null,
                     cssClassFullsizeButton: null,
                     repeatCount: 0