Merge pull request #59 from LottieFiles/fix/window

fix: changed way window is used

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lottiefiles/lottie-interactivity",
   "description": "This is a small effects and interactivity library written to be paired with the Lottie Web Player",
-  "version": "0.1.5",
+  "version": "1.3.5",
   "license": "MIT",
   "main": "./dist/lottie-interactivity.min.js",
   "module": "./dist/lottie-interactivity.es.js",

src/main.js

@@ -58,15 +58,18 @@ export class LottieInteractivity {
     this.playCounter = 0;
     this.stateHandler = new Map();
     this.transitionHandler = new Map();
+
+    //globals
+    this.window = this.container.ownerDocument.defaultView;
   }
 
   getContainerVisibility() {
     // Get the bounding box for the lottie player or container
     const { top, height } = this.container.getBoundingClientRect();
 
     // Calculate current view percentage
-    const current = window.innerHeight - top;
-    const max = window.innerHeight + height;
+    const current = this.window.innerHeight - top;
+    const max = this.window.innerHeight + height;
     return current / max;
   }
 
@@ -81,7 +84,7 @@ export class LottieInteractivity {
 
   initScrollMode() {
     this.player.stop();
-    window.addEventListener('scroll', this.#scrollHandler);
+    this.window.addEventListener('scroll', this.#scrollHandler, true);
   }
 
   initCursorMode() {
@@ -227,7 +230,7 @@ export class LottieInteractivity {
 
   stop() {
     if (this.mode === 'scroll') {
-      window.removeEventListener('scroll', this.#scrollHandler);
+      this.window.removeEventListener('scroll', this.#scrollHandler, true);
     }
 
     if (this.mode === 'cursor') {
@@ -670,22 +673,22 @@ export class LottieInteractivity {
         throw new Error(`${ERROR_PREFIX} Specified player is invalid.`, this.enteredPlayer);
       }
     } else {
-      if (window.lottie) {
+      if (this.window.lottie) {
         this.stop();
         this.player.destroy();
         // Removes svg animation contained inside
         this.container.innerHTML = "";
 
         if (typeof path === 'object' && path.constructor.name === 'AnimationItem') {
-          this.player = window.lottie.loadAnimation({
+          this.player = this.window.lottie.loadAnimation({
             loop: false,
             autoplay: false,
             animationData: path.animationData,
             container: this.container
           });
         }
         else {
-          this.player = window.lottie.loadAnimation({
+          this.player = this.window.lottie.loadAnimation({
             loop: false,
             autoplay: false,
             path,