Lottie-Files: Player pausieren

///////////////////////////////////////////////////////////////
//
// Anmeldung Eventhandling Lottie-Files
//
////////////////////////////////////////////////////////////////

setEventPauseLottiePlayer = function(id, pauseAtFrame){
  if(jQuery('div[id=' + id + '] lottie-player').length == 1){
    var lottiePlayer = jQuery('div[id=' + id + '] lottie-player').get(0);
    lottiePlayer.setAttribute('data-pauseatframe', pauseAtFrame);
    lottiePlayer.addEventListener("frame", eventHandlerPauseLottiePlayer);
    lottiePlayer.addEventListener("load", eventHandlerPauseLottiePlayer);
    lottiePlayer.addEventListener("mouseenter", eventHandlerPauseLottiePlayer);
  }
};

////////////////////////////////////////////////////////////////
//
// EventHandler über das der Lottie-Player pausiert werden kann. 
//
////////////////////////////////////////////////////////////////

eventHandlerPauseLottiePlayer = function(e){
  var aElement = e.target;
  
  if(aElement.currentState == 'playing' && e.type == 'frame' && aElement.getAttribute('data-pauseatframe') != ''){
    var pauseAtFrame = aElement.getAttribute('data-pauseatframe');
    if(parseInt(Math.round(aElement._lottie.currentFrame)) > pauseAtFrame){
      aElement.pause();
    }
  }
  else if(aElement.currentState == 'paused' && e.type == 'mouseenter'){
    aElement.setAttribute('data-pauseatframe', '');
    aElement.play();
  }
  else{
    aElement.play();
  }
};

if(typeof wEditor == 'undefined'){
  document.addEventListener('DOMContentLoaded', function waitUntilContentLoaded(){
  if(!window.jQuery){
    return setTimeout(waitUntilContentLoaded, 100);
  }

  var id = 'myInfobox';  /*Id des Containers in dem das Lottie-File eingebunden wurde*/
  var pauseAtFrame = 30; /*Frame bei dem das File pausieren soll*/

  setEventPauseLottiePlayer(id, pauseAtFrame); /*Anmelden beim Eventhandler, definiert in design.js*/
 
}, false);
}