From 89200faaf8027d9e8883f7d2d685d8c3932cc997 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Sat, 21 Aug 2021 00:39:36 +0300
Subject: [PATCH] Zoom: fix wheeling

---
 src/components/appMediaViewer.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts
index 99e1fc3c..85187945 100644
--- a/src/components/appMediaViewer.ts
+++ b/src/components/appMediaViewer.ts
@@ -234,13 +234,6 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
     this.moversContainer = document.createElement('div');
     this.moversContainer.classList.add(MEDIA_VIEWER_CLASSNAME + '-movers');
-    this.moversContainer.addEventListener('wheel', (e) => {
-      if(this.ctrlKeyDown) {
-        cancelEvent(e);
-        const scrollingUp = e.deltaY < 0;
-        this.changeZoom(!!scrollingUp);
-      }
-    });
 
     this.wholeDiv.append(this.overlaysDiv, this.buttons.prev, this.buttons.next, this.topbar, this.moversContainer);
 
@@ -438,6 +431,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
 
     window.removeEventListener('keydown', this.onKeyDown);
     window.removeEventListener('keyup', this.onKeyUp);
+    window.removeEventListener('wheel', this.onWheel);
 
     promise.finally(() => {
       this.wholeDiv.remove();
@@ -525,6 +519,14 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     }
   };
 
+  private onWheel = (e: WheelEvent) => {
+    if(this.ctrlKeyDown) {
+      cancelEvent(e);
+      const scrollingUp = e.deltaY < 0;
+      this.changeZoom(!!scrollingUp);
+    }
+  };
+
   protected async setMoverToTarget(target: HTMLElement, closing = false, fromRight = 0) {
     if(this.videoPlayer) { // there could be a better place for it
       this.wholeDiv.classList.remove('has-video-controls');
@@ -1209,6 +1211,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
     } else {
       window.addEventListener('keydown', this.onKeyDown);
       window.addEventListener('keyup', this.onKeyUp);
+      if(!isTouchSupported) window.addEventListener('wheel', this.onWheel, {passive: false});
       const mainColumns = this.pageEl.querySelector('#main-columns');
       this.pageEl.insertBefore(this.wholeDiv, mainColumns);
       void this.wholeDiv.offsetLeft; // reflow