From 187a343fe77d43fc6a27cf36ba78ddbbff9eefcb Mon Sep 17 00:00:00 2001 From: Carlos A Date: Fri, 16 Jun 2023 14:19:19 +0200 Subject: [PATCH] change the hover method --- js/simplelottieplayer.js | 27 ++++++++++++--------------- simplelottieplayer.js | 24 ++++++++++++------------ simplelottieplayer.min.js | 2 +- 3 files changed, 25 insertions(+), 28 deletions(-) diff --git a/js/simplelottieplayer.js b/js/simplelottieplayer.js index 8de760a..e6272f2 100644 --- a/js/simplelottieplayer.js +++ b/js/simplelottieplayer.js @@ -180,21 +180,6 @@ class SimpleLottiePlayer { } if (this.options.fullsizeButton) { - let stylesheet = document.styleSheets[0]; - let found = false; - for (let selector in [...stylesheet.cssRules]) { - if (selector.selectorText === `.${this._id}`) { - found = true; - break; - } - } - - if (!found) { - // Add the rules (the placeholder and the hover); we want a hover effect in this case, so we need to use this mechanism (which I don't like very much) - document.styleSheets[0].insertRule(`.${this._id} {}`); - document.styleSheets[0].insertRule(`.${this._id}-btn:hover { opacity: 1 !important; }`) - } - let fullScreenBtn = document.createElement("div"); fullScreenBtn.classList.add(`${this._id}-btn`); if (this.options.cssClassFullsizeButton !== null) { @@ -249,6 +234,18 @@ class SimpleLottiePlayer { fullScreenBtn.style.display = "flex"; event.stopImmediatePropagation(); }); + fullScreenBtn.addEventListener('mouseover', function(event) { + fullScreenBtn.style.opacity = "1"; + }); + fullScreenBtn.addEventListener('mouseout', function(event) { + fullScreenBtn.style.opacity = "0.5"; + }); + exitFullScreenBtn.addEventListener('mouseover', function(event) { + exitFullScreenBtn.style.opacity = "1"; + }); + exitFullScreenBtn.addEventListener('mouseout', function(event) { + exitFullScreenBtn.style.opacity = "0.5"; + }); } if (this.options.controlButtons) { diff --git a/simplelottieplayer.js b/simplelottieplayer.js index 124b3a9..217d794 100644 --- a/simplelottieplayer.js +++ b/simplelottieplayer.js @@ -293,18 +293,6 @@ class SimpleLottiePlayer { this._buttonEventHandler = null; } if (this.options.fullsizeButton) { - let stylesheet = document.styleSheets[0]; - let found = false; - for (let selector in [ ...stylesheet.cssRules ]) { - if (selector.selectorText === `.${this._id}`) { - found = true; - break; - } - } - if (!found) { - document.styleSheets[0].insertRule(`.${this._id} {}`); - document.styleSheets[0].insertRule(`.${this._id}-btn:hover { opacity: 1 !important; }`); - } let fullScreenBtn = document.createElement("div"); fullScreenBtn.classList.add(`${this._id}-btn`); if (this.options.cssClassFullsizeButton !== null) { @@ -363,6 +351,18 @@ class SimpleLottiePlayer { fullScreenBtn.style.display = "flex"; event.stopImmediatePropagation(); }); + fullScreenBtn.addEventListener("mouseover", function(event) { + fullScreenBtn.style.opacity = "1"; + }); + fullScreenBtn.addEventListener("mouseout", function(event) { + fullScreenBtn.style.opacity = "0.5"; + }); + exitFullScreenBtn.addEventListener("mouseover", function(event) { + exitFullScreenBtn.style.opacity = "1"; + }); + exitFullScreenBtn.addEventListener("mouseout", function(event) { + exitFullScreenBtn.style.opacity = "0.5"; + }); } if (this.options.controlButtons) { let playBtn = document.createElement("div"); diff --git a/simplelottieplayer.min.js b/simplelottieplayer.min.js index c2b2297..ba6f646 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 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 s=t.width;let a=t.height;let r=document.createElement("canvas");r.width=s;r.height=a;let h=r.getContext("2d");let u=new Array(a).fill(true);let c=new Array(s).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 s=p;let a=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]);a=Math.min(a,t);r=Math.min(r,e);h=Math.max(h,i);u=Math.max(u,n);if(typeof m==="function"){if(m(s,[t,e,i,n],[a,r,h,u],p,f)===false){l(`interrupted at frame ${s}`);return}}if(s{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,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}if(this._buttonEventHandler!==null){this._container.removeEventListener("click",this._buttonEventHandler);this._buttonEventHandler=null}if(this.options.fullsizeButton){let e=document.styleSheets[0];let i=false;for(let t in[...e.cssRules]){if(t.selectorText===`.${this._id}`){i=true;break}}if(!i){document.styleSheets[0].insertRule(`.${this._id} {}`);document.styleSheets[0].insertRule(`.${this._id}-btn:hover { opacity: 1 !important; }`)}let n=document.createElement("div");n.classList.add(`${this._id}-btn`);if(this.options.cssClassFullsizeButton!==null){this.options.cssClassFullsizeButton.split(/\s+/).forEach(t=>n.classList.add(t))}Object.assign(n.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 o=n.cloneNode();o.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"}));n.appendChild(t);let l=a("svg",{width:16,height:16,fill:"currentColor",viewBox:"0 0 16 16"});l.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"}));o.appendChild(l);this._container.prepend(n);this._container.prepend(o);this._container.style.position="relative";this._container.style.display="block";let s=this;n.addEventListener("click",function(t){s.resize(s._animationData["w"],s._animationData["h"],true);o.style.display="flex";n.style.display="none";t.stopImmediatePropagation()});o.addEventListener("click",function(t){s.resize(s._animationData["w"],s._animationData["h"],false);o.style.display="none";n.style.display="flex";t.stopImmediatePropagation()})}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);this._lottie=await lottie.loadAnimation({container:this._container,renderer:"svg",loop:this.options.loop===true,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 s=o;if(!t){if(this.options.maxWidth!=null){l=Math.min(l,this.options.maxWidth)}if(this.options.maxHeight!=null){s=Math.min(s,this.options.maxHeight)}let t=l/n;let e=s/o;let i=Math.min(t,e);l=i*n;s=i*o}this._container.style.width=`${l}px`;this._container.style.height=`${s}px`;if(this._lottie!=null){this._lottie.resize(l,s)}}}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 s=i?t=>t.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`):t=>t;let a={};e.forEach((e,i)=>{let n=e.split(":");e=n[0];let o=t.getAttribute(s(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}a[e]=o}else{if(l){a[e]=null}}});return a}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};let n=Object.assign(i,o(t,["url","maxWidth:int","maxHeight:int","loop:bool","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,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}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";this._container.style.display="block";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);this._lottie=await lottie.loadAnimation({container:this._container,renderer:"svg",loop:this.options.loop===true,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));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(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:true,cssClassControlButtons:null,cssClassFullsizeButton:null};let n=Object.assign(i,o(t,["url","maxWidth:int","maxHeight:int","loop:bool","autoplay:bool","controlButtons:bool","fullsizeButton:bool","cssClassControlButtons","cssClassFullsizeButton","autosize:bool"]));new SimpleLottiePlayer(t,n)})})}})();