From 567885cd78eb957ac8d60ae0a0374e17b7fd4303 Mon Sep 17 00:00:00 2001
From: Aonrud <107251085+Aonrud@users.noreply.github.com>
Date: Mon, 30 Jan 2023 14:09:08 +0000
Subject: [PATCH] fix: update ILA UI Elements for bugfixes

---
 app/static/ila-ui.esm.js | 64 +++++++++++++++++++++++++++++-----------
 package-lock.json        | 10 +++----
 package.json             |  2 +-
 3 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/app/static/ila-ui.esm.js b/app/static/ila-ui.esm.js
index f1cfd34..36e4550 100644
--- a/app/static/ila-ui.esm.js
+++ b/app/static/ila-ui.esm.js
@@ -69,8 +69,9 @@ function makeButton(name, css = "", text = "", title = "", icon = "", handler =
 
 /**
  * Adds custom swipe events to a given element.
+ * Call the attach() method to add the event listeners, and detach() to remove it.
  * 
- * When instantiated, a `swiped-[DIRECTION]` event will be dispatched when that element is swiped.
+ * When attached, a `swiped-[DIRECTION]` event will be dispatched when that element is swiped.
  * A `swiped` event is also dispatched with the direction in the customEvent.detail, to allow for a single listener if needed.
  * 
  * @public
@@ -85,17 +86,41 @@ class Swipe {
 	
 	constructor(el) {
 		this._el = el;
-		el.addEventListener('touchstart',
-			e => {
-				this.startX = e.changedTouches[0].clientX;
-				this.startY = e.changedTouches[0].clientY;
-			});
-		el.addEventListener('touchend',
-			e => {
-				this.endX = e.changedTouches[0].clientX;
-				this.endY = e.changedTouches[0].clientY;
-				this._sendEvents();
-			});
+	}
+	
+	/**
+	 * Attach the event listeners
+	 * @public
+	 */
+	attach() {
+		this._el.addEventListener('touchstart', this);
+		this._el.addEventListener('touchend', this);
+	}
+	
+	/**
+	 * Detach the event listeners
+	 * @public
+	 */
+	detach() {
+		this._el.removeEventListener('touchstart', this);
+		this._el.removeEventListener('touchend', this);
+	}
+	
+	/**
+	 * Handle touchstart and touchend events
+	 * @protected
+	 * @param {Event} e
+	 */
+	handleEvent(e) {
+		if (e.type == 'touchstart') {
+			this.startX = e.changedTouches[0].clientX;
+			this.startY = e.changedTouches[0].clientY;
+		}
+		if (e.type == 'touchend') {
+			this.endX = e.changedTouches[0].clientX;
+			this.endY = e.changedTouches[0].clientY;
+			this._sendEvents();
+		}
 	}
 	
 	/**
@@ -248,7 +273,8 @@ class Scroller {
 		
 		window.addEventListener('resize', this);
 		
-		new Swipe(this._wrapper);
+		const swipe = new Swipe(this._wrapper);
+		swipe.attach();
 		this._wrapper.addEventListener('swiped-right', () => this.left() );
 		this._wrapper.addEventListener('swiped-left', e => this.right() );
 	}
@@ -752,11 +778,14 @@ class ImageViewer {
 		const pz = this._pzInstance;
 		
 		if (switchOn) {
+			//Turn off swipe actions when zoomed to prevent over-riding Panzoom movements
+			this._swipe.detach();
 			this._imgDisplay.classList.add("pan");
 			pz.bind();
 			pz.setStyle("cursor", "move");
 			return;
 		}
+		this._swipe.attach();
 		this._imgDisplay.classList.remove("pan");
 		pz.reset({ animate: false });
 		pz.setStyle("cursor", "auto");
@@ -809,10 +838,11 @@ class ImageViewer {
 		overlay.append(this._createControls());
 		overlay.addEventListener("keydown", (e) => this._shortcutsEventListener(e));
 		
-		new Swipe(overlay);
-		overlay.addEventListener('swiped-right', () => this.prev() );
-		overlay.addEventListener('swiped-left', e => this.next() );
-		overlay.addEventListener('swiped-up', e => this.hide() );
+		this._swipe = new Swipe(imgWrap);
+		this._swipe.attach();
+		imgWrap.addEventListener('swiped-right', () => this.prev() );
+		imgWrap.addEventListener('swiped-left', () => this.next() );
+		imgWrap.addEventListener('swiped-up', () => this.hide() );
 				
 		this._overlay = overlay;
 		this._imgDisplay = activeImg;
diff --git a/package-lock.json b/package-lock.json
index 5f3bb41..793dcf7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,20 +6,20 @@
     "": {
       "name": "ILA Microblog.pub assets",
       "dependencies": {
-        "ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.8.0"
+        "ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.8.2"
       }
     },
     "node_modules/ila-ui-elements": {
       "name": "ila_ui_elements",
-      "version": "0.8.0",
-      "resolved": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#0ab1b563f03183f786fdec97009fbe36f64ee50a",
+      "version": "0.8.2",
+      "resolved": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#66bd1b0d5d7ff2b6e064e78f7db4c7522df0cd15",
       "license": "GPL-3.0-or-later"
     }
   },
   "dependencies": {
     "ila-ui-elements": {
-      "version": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#0ab1b563f03183f786fdec97009fbe36f64ee50a",
-      "from": "ila-ui-elements@Aonrud/ila-ui-elements#semver:0.8.0"
+      "version": "git+ssh://git@github.com/Aonrud/ila-ui-elements.git#66bd1b0d5d7ff2b6e064e78f7db4c7522df0cd15",
+      "from": "ila-ui-elements@Aonrud/ila-ui-elements#semver:0.8.2"
     }
   }
 }
diff --git a/package.json b/package.json
index 9193793..1382069 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,6 @@
   "author": "Aonrud",
   "license": "",
   "dependencies": {
-    "ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.8.0"
+    "ila-ui-elements": "Aonrud/ila-ui-elements#semver:0.8.2"
   }
 }