diff --git a/README.md b/README.md index af47af0..8870289 100644 --- 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 index 1b22d12..976b3b1 100644 --- 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 index 4dd4fed..6833785 100644 --- 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 diff --git a/simplelottieplayer.min.js b/simplelottieplayer.min.js index f92091b..75da81c 100644 --- a/simplelottieplayer.min.js +++ b/simplelottieplayer.min.js @@ -1 +1 @@ -/* Copyright (c) 2023 Carlos A. (https://github.com/dealfonso); License: https://opensource.org/license/mit/ */class LottieUtils{static trimAnimation(t,e,i,n,o){t=JSON.parse(JSON.stringify(t));if(t["assets"]==null){t["assets"]=[]}const a=`animation-${LottieUtils.getId(8)}`;t["assets"].push({id:a,layers:JSON.parse(JSON.stringify(t["layers"]))});t["layers"]=[{ddd:0,ind:0,ty:0,nm:"Precomp Layer",refId:a,ks:{a:{a:0,k:[0,0]},p:{a:0,k:[-e,-i]},s:{a:0,k:[100,100]},r:{a:0,k:0},sk:{a:0,k:0},sa:{a:0,k:0},o:{a:0,k:100}},fr:t["fr"],w:t["w"],h:t["h"],ip:t["ip"],op:t["op"],st:0}];t["w"]=n-e;t["h"]=o-i;return t}static getId(t=5){const e="0123456789abcdef";return Array.from({length:t},()=>e.charAt(Math.floor(Math.random()*e.length))).join("")}static getImageBB(t,n=(t,e,i,n)=>t==0&&e==0&&i==0&&n==0){let e=0,i=0,o=0,a=0;let l=t.width;let s=t.height;let r=document.createElement("canvas");r.width=l;r.height=s;let h=r.getContext("2d");let u=new Array(s).fill(true);let c=new Array(l).fill(true);h.clearRect(0,0,r.width,r.height);h.drawImage(t,0,0);let d,p,f,m;let y=h.getImageData(0,0,r.width,r.height).data;for(let i=0;ie){if(!u[o]){break}o--}while(ii){if(!c[a]){break}a--}if(otrue){let y=new Image;return new Promise((o,a)=>{let l=p;let s=99999,r=99999,h=0,u=0;let c=[];y.onload=()=>{let t,e,i,n;[t,e,i,n]=LottieUtils.getImageBB(y);c.push([t,e,i,n]);s=Math.min(s,t);r=Math.min(r,e);h=Math.max(h,i);u=Math.max(u,n);if(typeof m==="function"){if(m(l,[t,e,i,n],[s,r,h,u],p,f)===false){a(`interrupted at frame ${l}`);return}}if(l{const e="0123456789abcdef";return Array.from({length:t},()=>e.charAt(Math.floor(Math.random()*e.length))).join("")};let n={url:null,onAnimationLoaded:(t,e)=>{},maxWidth:null,maxHeight:null,autoplay:true,loop:true,autosize:true,controlButtons:false,fullsizeButton:false,cssClassControlButtons:null,cssClassFullsizeButton:null,repeatCount:0,onPlayBtn:t=>{},onPauseBtn:t=>{},onPlay:t=>{},onStop:t=>{},onPause:t=>{}};this.options=Object.assign(n,e);let o=null;if(typeof t==="string"){o=document.querySelectorAll(t);if(o.length!=1){throw"Invalid container"}o=o[0]}else if(t instanceof Element||t instanceof HTMLDocument){o=t}else{throw"Invalid container"}this._container=o;o.getLottiePlayer=()=>this;this._lottie=null;this._selector=t;this._animationData=null;this._id=`player-${i()}`;this._buttonEventHandler=null;if(this.options.url!==null){this.load(this.options.url)}}play(t=null){if(this._lottie!=null){if(t===null){this._lottie.play()}else{this._lottie.goToAndPlay(t,true)}if(typeof this.options.onPlay==="function"){this.options.onPlay(this)}}}stop(){if(this._lottie!=null){this._lottie.stop();if(typeof this.options.onStop==="function"){this.options.onStop(this)}}}pause(){if(this._lottie!=null){this._lottie.pause();if(typeof this.options.onPause==="function"){this.options.onPause(this)}}}isPaused(){if(this._lottie==null){return false}return this._lottie.isPaused}currentFrame(){if(this._lottie===null){return null}return this._lottie.currentFrame}_onLoaded(t){function a(t,e){let i=document.createElementNS("http://www.w3.org/2000/svg",t);for(let t in e){i.setAttributeNS(null,t,e[t])}return i}this._container.style.display="block";if(this._buttonEventHandler!==null){this._container.removeEventListener("click",this._buttonEventHandler);this._buttonEventHandler=null}if(this.options.fullsizeButton){let e=document.createElement("div");e.classList.add(`${this._id}-btn`);if(this.options.cssClassFullsizeButton!==null){this.options.cssClassFullsizeButton.split(/\s+/).forEach(t=>e.classList.add(t))}Object.assign(e.style,{padding:"8px",width:"32px",height:"32px",position:"absolute",backgroundColor:"#888888",zIndex:"2",opacity:"0.5",transitionProperty:"opacity",display:"flex",color:"white",right:0,bottom:0});let i=e.cloneNode();i.style.display="none";let t=a("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});t.appendChild(a("path",{d:"M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"}));e.appendChild(t);let n=a("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});n.appendChild(a("path",{d:"M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"}));i.appendChild(n);this._container.prepend(e);this._container.prepend(i);this._container.style.position="relative";let o=this;e.addEventListener("click",function(t){o.resize(o._animationData["w"],o._animationData["h"],true);i.style.display="flex";e.style.display="none";t.stopImmediatePropagation()});i.addEventListener("click",function(t){o.resize(o._animationData["w"],o._animationData["h"],false);i.style.display="none";e.style.display="flex";t.stopImmediatePropagation()});e.addEventListener("mouseover",function(t){e.style.opacity="1"});e.addEventListener("mouseout",function(t){e.style.opacity="0.5"});i.addEventListener("mouseover",function(t){i.style.opacity="1"});i.addEventListener("mouseout",function(t){i.style.opacity="0.5"})}if(this.options.controlButtons){let e=document.createElement("div");if(this.options.cssClassControlButtons!==null){this.options.cssClassControlButtons.split(/\s+/).forEach(t=>{if(t!="")e.classList.add(t)})}Object.assign(e.style,{width:"100%",height:"100%",position:"absolute",backgroundColor:"#888888",zIndex:"1",opacity:"0",transitionProperty:"opacity",display:"flex",color:"white"});let i=e.cloneNode();let t=a("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});Object.assign(t.style,{margin:"auto",width:"25%",height:"25%"});let n=t.cloneNode();t.appendChild(a("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"}));t.appendChild(a("path",{d:"M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"}));n.appendChild(a("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"}));n.appendChild(a("path",{d:"M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z"}));e.appendChild(t);i.appendChild(n);this._container.prepend(e);this._container.prepend(i);this._container.style.position="relative";let o=this;this._buttonEventHandler=function(){let t=null;if(o.isPaused()){o.play();if(typeof o.options.onPlayBtn==="function"){o.options.onPlayBtn(o)}t=e}else{o.pause();if(typeof o.options.onPauseBtn==="function"){o.options.onPauseBtn(o)}t=i}t.style.opacity=.6;t.style.transitionDuration="0s";setTimeout(()=>{t.style.transitionDuration="1s";t.style.opacity=0},750)};this._container.addEventListener("click",this._buttonEventHandler)}}async _retrieveJSON(i){if(typeof i==="object"){return i}try{return JSON.parse(i)}catch(t){const n=new URL(i,window.location.href);let e;try{e=await fetch(n.toString());return await e.json()}catch(t){throw`could not retrieve the animation from ${i}: ${t}`}}}async load(t,e=null){if(this._lottie!=null){this._lottie.destroy();this._lottie=null}if(e!==null){this.options=Object.assign(this.options,e)}let i=await this._retrieveJSON(t);let n=this.options.loop===true;if(n===true&&this.options.repeatCount>0){n=this.options.repeatCount-1}this._lottie=await lottie.loadAnimation({container:this._container,renderer:"svg",loop:n,autoplay:this.options.autoplay===true,animationData:i});if(this.options.autosize){this.resize(i["w"],i["h"])}this._animationData=i;this._onLoaded(i);if(typeof this.options.onAnimationLoaded==="function"){this.options.onAnimationLoaded(i,this)}}async updateOptions(t){if(this._animationData===null){this.options=Object.assign(this.options,t);return}else{return this.load(this._animationData,t)}}getFrame(t){if(this._lottie==null){return null}let e=this._lottie.currentFrame;if(e!=t){this._lottie.goToAndStop(t,true)}const i=this._container.querySelector("svg");const n=(new XMLSerializer).serializeToString(i);if(e!=t){this._lottie.goToAndStop(e,true)}return n}resize(n,o,t=false){let a=n;let l=o;if(!t){if(this.options.maxWidth!=null){a=Math.min(a,this.options.maxWidth)}if(this.options.maxHeight!=null){l=Math.min(l,this.options.maxHeight)}let t=a/n;let e=l/o;let i=Math.min(t,e);a=i*n;l=i*o}this._container.style.width=`${a}px`;this._container.style.height=`${l}px`;if(this._lottie!=null){this._lottie.resize(a,l)}}}class MemLottiePlayer extends SimpleLottiePlayer{constructor(t={}){let e=document.createElement("div");super(e,Object.assign({},t,{controlButtons:false,onPlayBtn:null,onPauseBtn:null}))}_onLoaded(t){}}(()=>{if(document.addEventListener!==undefined){document.addEventListener("DOMContentLoaded",function(t){let e=document.querySelectorAll("simplelottie");function o(t,e,i=true,a=false){const l=i?t=>t.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`):t=>t;let s={};e.forEach((e,i)=>{let n=e.split(":");e=n[0];let o=t.getAttribute(l(e));if(o!=null){let t="string";if(n.length>1){t=n[1].toLowerCase()}switch(t){case"int":try{o=parseInt(o)}catch(i){};break;case"float":try{o=parseFloat(o)}catch(i){};break;case"bool":o=["","true","1"].indexOf(o.toLowerCase())>=0;break}s[e]=o}else{if(a){s[e]=null}}});return s}e.forEach((t,e)=>{let i={url:null,maxWidth:null,maxHeight:null,loop:true,autoplay:true,controlButtons:false,fullsizeButton:false,autosize:true,cssClassControlButtons:null,cssClassFullsizeButton:null,repeatCount:0};let n=Object.assign(i,o(t,["url","maxWidth:int","maxHeight:int","loop:bool","repeatCount:int","autoplay:bool","controlButtons:bool","fullsizeButton:bool","cssClassControlButtons","cssClassFullsizeButton","autosize:bool"]));new SimpleLottiePlayer(t,n)})})}})(); +/* Copyright (c) 2023 Carlos A. (https://github.com/dealfonso); License: https://opensource.org/license/mit/ */class LottieUtils{static trimAnimation(t,e,i,n,o){t=JSON.parse(JSON.stringify(t));if(t["assets"]==null){t["assets"]=[]}const l=`animation-${LottieUtils.getId(8)}`;t["assets"].push({id:l,layers:JSON.parse(JSON.stringify(t["layers"]))});t["layers"]=[{ddd:0,ind:0,ty:0,nm:"Precomp Layer",refId:l,ks:{a:{a:0,k:[0,0]},p:{a:0,k:[-e,-i]},s:{a:0,k:[100,100]},r:{a:0,k:0},sk:{a:0,k:0},sa:{a:0,k:0},o:{a:0,k:100}},fr:t["fr"],w:t["w"],h:t["h"],ip:t["ip"],op:t["op"],st:0}];t["w"]=n-e;t["h"]=o-i;return t}static getId(t=5){const e="0123456789abcdef";return Array.from({length:t},()=>e.charAt(Math.floor(Math.random()*e.length))).join("")}static getImageBB(t,n=(t,e,i,n)=>t==0&&e==0&&i==0&&n==0){let e=0,i=0,o=0,l=0;let a=t.width;let s=t.height;let r=document.createElement("canvas");r.width=a;r.height=s;let h=r.getContext("2d");let u=new Array(s).fill(true);let c=new Array(a).fill(true);h.clearRect(0,0,r.width,r.height);h.drawImage(t,0,0);let d,p,f,m;let y=h.getImageData(0,0,r.width,r.height).data;for(let i=0;ie){if(!u[o]){break}o--}while(ii){if(!c[l]){break}l--}if(otrue){let y=new Image;return new Promise((o,l)=>{let a=p;let s=99999,r=99999,h=0,u=0;let c=[];y.onload=()=>{let t,e,i,n;[t,e,i,n]=LottieUtils.getImageBB(y);c.push([t,e,i,n]);s=Math.min(s,t);r=Math.min(r,e);h=Math.max(h,i);u=Math.max(u,n);if(typeof m==="function"){if(m(a,[t,e,i,n],[s,r,h,u],p,f)===false){l(`interrupted at frame ${a}`);return}}if(a{const e="0123456789abcdef";return Array.from({length:t},()=>e.charAt(Math.floor(Math.random()*e.length))).join("")};let n={url:null,onAnimationLoaded:(t,e)=>{},maxWidth:null,maxHeight:null,autoplay:true,loop:true,autosize:true,controlButtons:false,fullsizeButton:false,cssClassControlButtons:null,cssClassFullsizeButton:null,repeatCount:0,onPlayBtn:t=>{},onPauseBtn:t=>{},onPlay:t=>{},onStop:t=>{},onPause:t=>{}};this.options=Object.assign(n,e);let o=null;if(typeof t==="string"){o=document.querySelectorAll(t);if(o.length!=1){throw"Invalid container"}o=o[0]}else if(t instanceof Element||t instanceof HTMLDocument){o=t}else{throw"Invalid container"}this._container=o;o.getLottiePlayer=()=>this;this._lottie=null;this._selector=t;this._animationData=null;this._id=`player-${i()}`;this._buttonEventHandler=null;if(this.options.url!==null){this.load(this.options.url)}}play(t=null){if(this._lottie!=null){if(t===null){this._lottie.play()}else{this._lottie.goToAndPlay(t,true)}if(typeof this.options.onPlay==="function"){this.options.onPlay(this)}}}stop(){if(this._lottie!=null){this._lottie.stop();if(typeof this.options.onStop==="function"){this.options.onStop(this)}}}pause(){if(this._lottie!=null){this._lottie.pause();if(typeof this.options.onPause==="function"){this.options.onPause(this)}}}isPaused(){if(this._lottie==null){return false}return this._lottie.isPaused}currentFrame(){if(this._lottie===null){return null}return this._lottie.currentFrame}_onLoaded(t){function l(t,e){let i=document.createElementNS("http://www.w3.org/2000/svg",t);for(let t in e){i.setAttributeNS(null,t,e[t])}return i}this._container.style.display="block";if(this._buttonEventHandler!==null){this._container.removeEventListener("click",this._buttonEventHandler);this._buttonEventHandler=null}if(this.options.fullsizeButton){let e=document.createElement("div");e.classList.add(`${this._id}-btn`);if(this.options.cssClassFullsizeButton!==null){this.options.cssClassFullsizeButton.split(/\s+/).forEach(t=>e.classList.add(t))}Object.assign(e.style,{padding:"8px",width:"32px",height:"32px",position:"absolute",backgroundColor:"#888888",zIndex:"2",opacity:"0.5",transitionProperty:"opacity",display:"flex",color:"white",right:0,bottom:0});let i=e.cloneNode();i.style.display="none";let t=l("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});t.appendChild(l("path",{d:"M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"}));e.appendChild(t);let n=l("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});n.appendChild(l("path",{d:"M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z"}));i.appendChild(n);this._container.prepend(e);this._container.prepend(i);this._container.style.position="relative";let o=this;e.addEventListener("click",function(t){o.resize(o._animationData["w"],o._animationData["h"],true);i.style.display="flex";e.style.display="none";t.stopImmediatePropagation()});i.addEventListener("click",function(t){o.resize(o._animationData["w"],o._animationData["h"],false);i.style.display="none";e.style.display="flex";t.stopImmediatePropagation()});e.addEventListener("mouseover",function(t){e.style.opacity="1"});e.addEventListener("mouseout",function(t){e.style.opacity="0.5"});i.addEventListener("mouseover",function(t){i.style.opacity="1"});i.addEventListener("mouseout",function(t){i.style.opacity="0.5"})}if(this.options.controlButtons){let e=document.createElement("div");if(this.options.cssClassControlButtons!==null){this.options.cssClassControlButtons.split(/\s+/).forEach(t=>{if(t!="")e.classList.add(t)})}Object.assign(e.style,{width:"100%",height:"100%",position:"absolute",backgroundColor:"#888888",zIndex:"1",opacity:"0",transitionProperty:"opacity",display:"flex",color:"white"});let i=e.cloneNode();let t=l("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});Object.assign(t.style,{margin:"auto",width:"25%",height:"25%"});let n=t.cloneNode();t.appendChild(l("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"}));t.appendChild(l("path",{d:"M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"}));n.appendChild(l("path",{d:"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"}));n.appendChild(l("path",{d:"M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z"}));e.appendChild(t);i.appendChild(n);this._container.prepend(e);this._container.prepend(i);this._container.style.position="relative";let o=this;this._buttonEventHandler=function(){let t=null;if(o.isPaused()){o.play();if(typeof o.options.onPlayBtn==="function"){o.options.onPlayBtn(o)}t=e}else{o.pause();if(typeof o.options.onPauseBtn==="function"){o.options.onPauseBtn(o)}t=i}t.style.opacity=.6;t.style.transitionDuration="0s";setTimeout(()=>{t.style.transitionDuration="1s";t.style.opacity=0},750)};this._container.addEventListener("click",this._buttonEventHandler)}}async _retrieveJSON(i){if(typeof i==="object"){return i}try{return JSON.parse(i)}catch(t){const n=new URL(i,window.location.href);let e;try{e=await fetch(n.toString());return await e.json()}catch(t){throw`could not retrieve the animation from ${i}: ${t}`}}}async load(t,e=null){if(this._lottie!=null){this._lottie.destroy();this._lottie=null}if(e!==null){this.options=Object.assign(this.options,e)}let i=await this._retrieveJSON(t);let n=this.options.loop===true;if(n===true&&this.options.repeatCount>0){n=this.options.repeatCount-1}this._lottie=await lottie.loadAnimation({container:this._container,renderer:"svg",loop:n,autoplay:this.options.autoplay===true,animationData:i});if(this.options.autosize){this.resize(i["w"],i["h"])}this._animationData=i;this._onLoaded(i);if(typeof this.options.onAnimationLoaded==="function"){this.options.onAnimationLoaded(i,this)}}async updateOptions(t){if(this._animationData===null){this.options=Object.assign(this.options,t);return}else{return this.load(this._animationData,t)}}getFrame(t){if(this._lottie==null){return null}let e=this._lottie.currentFrame;if(e!=t){this._lottie.goToAndStop(t,true)}const i=this._container.querySelector("svg");const n=(new XMLSerializer).serializeToString(i);if(e!=t){this._lottie.goToAndStop(e,true)}return n}resize(n,o,t=false){let l=n;let a=o;if(!t){if(this.options.maxWidth!=null){l=Math.min(l,this.options.maxWidth)}if(this.options.maxHeight!=null){a=Math.min(a,this.options.maxHeight)}let t=l/n;let e=a/o;let i=Math.min(t,e);l=i*n;a=i*o}this._container.style.width=`${l}px`;this._container.style.height=`${a}px`;if(this._lottie!=null){this._lottie.resize(l,a)}}}class MemLottiePlayer extends SimpleLottiePlayer{constructor(t={}){let e=document.createElement("div");super(e,Object.assign({},t,{controlButtons:false,onPlayBtn:null,onPauseBtn:null}))}_onLoaded(t){}}(()=>{if(document.addEventListener!==undefined){document.addEventListener("DOMContentLoaded",function(t){let e=document.querySelectorAll("simplelottie");function o(t,e,i=true,l=false){const a=i?t=>t.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`):t=>t;let s={};e.forEach((e,i)=>{let n=e.split(":");e=n[0];let o=t.getAttribute(a(e));console.log(e);if(o!=null){let t="string";if(n.length>1){t=n[1].toLowerCase()}switch(t){case"int":try{o=parseInt(o)}catch(i){};break;case"float":try{o=parseFloat(o)}catch(i){};break;case"bool":o=["","true","1",e].indexOf(o.toLowerCase())>=0;console.log(e,o);break}s[e]=o}else{if(l){s[e]=null}}});return s}e.forEach((t,e)=>{let i={url:null,maxWidth:null,maxHeight:null,loop:true,autoplay:true,controlButtons:false,fullsizeButton:false,autosize:false,cssClassControlButtons:null,cssClassFullsizeButton:null,repeatCount:0};let n=Object.assign(i,o(t,["url","maxWidth:int","maxHeight:int","loop:bool","repeatCount:int","autoplay:bool","controlButtons:bool","fullsizeButton:bool","cssClassControlButtons","cssClassFullsizeButton","autosize:bool"]));new SimpleLottiePlayer(t,n)})})}})();