From 49fef1e57b597c32f1f7fcb42f5150c895bf187f Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 19 Jul 2017 18:47:17 +0200 Subject: [PATCH] Added touch controller --- scripts/AnimeNotifier.ts | 11 +++++++- scripts/TouchController.ts | 53 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 scripts/TouchController.ts diff --git a/scripts/AnimeNotifier.ts b/scripts/AnimeNotifier.ts index 63c9a9f9..66c663a3 100644 --- a/scripts/AnimeNotifier.ts +++ b/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() { diff --git a/scripts/TouchController.ts b/scripts/TouchController.ts new file mode 100644 index 00000000..9fd06bf7 --- /dev/null +++ b/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 + } +} \ No newline at end of file