Added touch controller

scripts/AnimeNotifier.ts

@@ -6,6 +6,7 @@ import { Diff } from "./Diff"
 import { MutationQueue } from "./MutationQueue"
 import { StatusMessage } from "./StatusMessage"
 import { PushManager } from "./PushManager"
+import { TouchController } from "./TouchController"
 
 export class AnimeNotifier {
 	app: Application
@@ -16,6 +17,8 @@ export class AnimeNotifier {
 	statusMessage: StatusMessage
 	visibilityObserver: IntersectionObserver
 	pushManager: PushManager
+	touchController: TouchController
+	sideBar: HTMLElement
 	mainPageLoaded: boolean
 	lastReloadContentPath: string
 
@@ -117,9 +120,15 @@ export class AnimeNotifier {
 		this.pushManager = new PushManager()
 
 		// Sidebar control
+		this.sideBar = this.app.find("sidebar")
+
 		document.body.addEventListener("click", e => {
-			this.app.find("sidebar").classList.remove("sidebar-visible")
+			this.sideBar.classList.remove("sidebar-visible")
 		})
+
+		this.touchController = new TouchController()
+		this.touchController.leftSwipe = () => this.sideBar.classList.remove("sidebar-visible")
+		this.touchController.rightSwipe = () => this.sideBar.classList.add("sidebar-visible")
 	}
 
 	async onContentLoaded() {

scripts/TouchController.ts

@@ -0,0 +1,53 @@
+export class TouchController {
+	x: number
+	y: number
+
+	threshold: number
+
+	leftSwipe: Function
+	rightSwipe: Function
+	upSwipe: Function
+	downSwipe: Function
+
+	constructor() {
+		document.addEventListener("touchstart", evt => this.handleTouchStart(evt), false)
+		document.addEventListener("touchmove", evt => this.handleTouchMove(evt), false)
+
+		this.downSwipe = this.upSwipe = this.rightSwipe = this.leftSwipe = () => null
+		this.threshold = 5
+	}
+
+	handleTouchStart(evt) {
+		this.x = evt.touches[0].clientX
+		this.y = evt.touches[0].clientY
+	}
+
+	handleTouchMove(evt) {
+		if(!this.x || !this.y) {
+			return
+		}
+
+		let xUp = evt.touches[0].clientX
+		let yUp = evt.touches[0].clientY
+
+		let xDiff = this.x - xUp
+		let yDiff = this.y - yUp
+
+		if(Math.abs(xDiff) > Math.abs(yDiff)) {
+			if(xDiff > this.threshold) {
+				this.leftSwipe()
+			} else if(xDiff < -this.threshold) {
+				this.rightSwipe()
+			}
+		} else {
+			if(yDiff > this.threshold) {
+				this.upSwipe()
+			} else if(yDiff < -this.threshold) {
+				this.downSwipe()
+			}
+		}
+		
+		this.x = undefined
+		this.y = undefined
+	}
+}