From 875e050692c4d86522d04343ca85527dbdcfd273 Mon Sep 17 00:00:00 2001
From: Illia <lemehovskiy@gmail.com>
Date: Mon, 11 Dec 2023 16:45:46 +0200
Subject: [PATCH] multiple events, ogranized event logic, bump version

---
 package.json |  2 +-
 src/index.ts | 60 +++++++++++++++++++++++++---------------------------
 2 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/package.json b/package.json
index 13272ed..23f05f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "parallax_background",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "VanillaJS parallax background plugin",
   "types": "./dist/index.d.ts",
   "main": "./dist/parallaxBackground.umd.js",
diff --git a/src/index.ts b/src/index.ts
index dba61ad..95fa2bc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,6 +17,7 @@ enum AnimationTypes {
 enum EventTypes {
   Mouse = "MOUSE",
   Scroll = "SCROLL",
+  Gyro = "GYRO",
 }
 
 enum DeviceOrientationTypes {
@@ -25,7 +26,7 @@ enum DeviceOrientationTypes {
 }
 
 type OptionsType = {
-  event: EventTypes.Scroll;
+  events: Array<EventTypes>;
   animationType: AnimationTypes;
   zoom: number;
   rotatePerspective: number;
@@ -51,12 +52,10 @@ export class ParallaxBackground {
   shift: number;
   doubleShift: number;
   deviceOrientation: DeviceOrientationTypes | undefined;
-  ww: number;
-  wh: number;
 
   constructor(element: HTMLElement, options: Partial<OptionsType>) {
     this.settings = {
-      event: EventTypes.Scroll,
+      events: [EventTypes.Scroll],
       animationType: AnimationTypes.Shift,
       zoom: 20,
       rotatePerspective: 1400,
@@ -93,30 +92,16 @@ export class ParallaxBackground {
     }
 
     this.setElementsStyles();
-    this.updateWindowSize();
-    this.updateOrientation();
-    this.updateElementSize();
 
-    window.addEventListener("resize", () => {
-      this.updateWindowSize();
-      this.updateOrientation();
-      this.updateElementSize();
+    new Set(this.settings.events).forEach((event) => {
+      if (event === EventTypes.Scroll) {
+        this.subscribeScrollEvent();
+      } else if (event === EventTypes.Mouse) {
+        this.subscribeMouseMoveEvent();
+      } else if (event === EventTypes.Gyro) {
+        this.subscribeGyroEvent();
+      }
     });
-
-    if (this.settings.event === EventTypes.Scroll) {
-      this.subscribeScrollEvent();
-    } else if (this.settings.event === EventTypes.Mouse) {
-      this.subscribeMouseMoveEvent();
-    }
-
-    if (this.settings.gyroscopeEvent) {
-      this.subscribeGyroEvent();
-    }
-  }
-
-  private updateWindowSize() {
-    this.ww = window.innerWidth;
-    this.wh = window.innerHeight;
   }
 
   private updateElementSize() {
@@ -143,7 +128,7 @@ export class ParallaxBackground {
   }
 
   private updateOrientation() {
-    if (this.ww > this.wh) {
+    if (window.innerWidth > window.innerHeight) {
       this.deviceOrientation = DeviceOrientationTypes.Landscape;
     } else {
       this.deviceOrientation = DeviceOrientationTypes.Portrait;
@@ -151,6 +136,8 @@ export class ParallaxBackground {
   }
 
   private subscribeGyroEvent() {
+    this.updateOrientation();
+
     const maxRange = 30;
 
     let lastGamma = 0,
@@ -158,6 +145,10 @@ export class ParallaxBackground {
       rangeGamma = 0,
       rangeBeta = 0;
 
+    window.addEventListener("resize", () => {
+      this.updateOrientation();
+    });
+
     window.addEventListener(
       "deviceorientation",
       (e) => {
@@ -219,13 +210,20 @@ export class ParallaxBackground {
   }
 
   private subscribeMouseMoveEvent() {
+    this.updateElementSize();
+
+    window.addEventListener("resize", () => {
+      this.updateElementSize();
+    });
+
     this.element.addEventListener("mousemove", (e: MouseEvent) => {
-      const { offsetX, offsetY } = e;
+      const { clientY, clientX } = e;
+      const { x, y } = this.element.getBoundingClientRect();
 
-      const x = offsetX / this.elementSize[0];
-      const y = offsetY / this.elementSize[1];
+      const yProgress = (clientY - y) / this.elementSize[1];
+      const xProgress = (clientX - x) / this.elementSize[0];
 
-      this.animate(y, x);
+      this.animate(yProgress, xProgress);
     });
 
     this.element.addEventListener("mouseleave", () => {