simplelottieplayer.min.js

/* 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;i<r.width;i++){for(let e=0;e<r.height;e++){let t=(e*r.width+i)*4;[d,p,f,m]=[y[t],y[t+1],y[t+2],y[t+3]];if(!n(d,p,f,m)){u[i]=false;c[e]=false}}}while(e<r.width){if(!u[e]){break}e++}o=r.width-1;while(o>e){if(!u[o]){break}o--}while(i<r.height){if(!c[i]){break}i++}a=r.height-1;while(a>i){if(!c[a]){break}a--}if(o<e){o=0}if(a<i){a=0}return[e,i,o,a]}static getBlob(t,e=""){let i=new Blob([t],{type:`${e};charset=utf-8`});let n=window.URL||window.webkitURL||window;let o=n.createObjectURL(i);return o}static calculateBoundingBox(e,p,f,m=(t,e,i,n,o)=>true){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<f){l++;d()}else{o({framesBoundingBoxes:c,animationBoundingBox:[s,r,h,u]})}};function d(){let t=e.getFrame(l);y.src=LottieUtils.getBlob(t,"image/svg+xml")}d()})}}class SimpleLottiePlayer{constructor(t,e={}){const i=(t=5)=>{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",e].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: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)})})}})();