feat(ui): opt in admin touch toggling

src/admin/adminService.ts

@@ -12,6 +12,14 @@ export interface AdminModeCfg {
    */
   predicate?: (e: KeyboardEvent) => boolean
 
+  /**
+   * Enable touch sequence toggling
+   * (lower left corner, lower right corner, lower left corner, lower right corner, lower left corner)
+   *
+   * @default false
+   */
+  allowTouchSequence?: boolean
+
   /**
    * Called when RedDot is clicked. Implies that AdminMode is enabled.
    */
@@ -67,6 +75,7 @@ export class AdminService {
   constructor(cfg?: AdminModeCfg) {
     this.cfg = {
       predicate: e => e.ctrlKey && e.key === 'L',
+      allowTouchSequence: false,
       persistToLocalStorage: true,
       localStorageKey: '__adminMode__',
       onRedDotClick: NOOP,
@@ -83,8 +92,10 @@ export class AdminService {
 
   private listening = false
 
+  private touchSequenceIndex = 1
+
   /**
-   * Start listening to keyboard events to toggle AdminMode when detected.
+   * Start listening to keyboard and touch events to toggle AdminMode when detected.
    */
   startListening(): void {
     if (this.listening || isServerSide()) return
@@ -95,6 +106,10 @@ export class AdminService {
 
     document.addEventListener('keydown', this.keydownListener.bind(this), { passive: true })
 
+    if (this.cfg.allowTouchSequence) {
+      document.addEventListener('touchstart', this.touchListener.bind(this), { passive: true })
+    }
+
     this.listening = true
   }
 
@@ -104,10 +119,57 @@ export class AdminService {
     this.listening = false
   }
 
+  private async touchListener(e: TouchEvent): Promise<void> {
+    // console.log(e)
+    const clientX = e.touches[0]?.clientX
+    const clientY = e.touches[0]?.clientY
+
+    if (!clientX || !clientY) {
+      this.touchSequenceIndex = 1
+      return
+    }
+
+    if (this.touchSequence[this.touchSequenceIndex]!(clientX, clientY)) {
+      this.touchSequenceIndex++
+    } else {
+      this.touchSequenceIndex = 1
+      return
+    }
+
+    if (this.touchSequenceIndex === this.touchSequence.length) {
+      this.touchSequenceIndex = 1
+      await this.checkAllowToggle()
+    }
+  }
+
+  private touchSequence: ((clientX: number, clientY: number) => boolean)[] = [
+    this.lowerLeftCorner,
+    this.lowerRightCorner,
+    this.lowerLeftCorner,
+    this.lowerRightCorner,
+    this.lowerLeftCorner,
+  ]
+
+  private lowerRightCorner(clientX: number, clientY: number): boolean {
+    const rightLowerCorner: [xAxis: number, yAxis: number] = [
+      window.innerWidth - 40,
+      window.innerHeight - 40,
+    ]
+    return clientX > rightLowerCorner[0] && clientY > rightLowerCorner[1]
+  }
+
+  private lowerLeftCorner(clientX: number, clientY: number): boolean {
+    const leftLowerCorner: [xAxis: number, yAxis: number] = [40, window.innerHeight - 40]
+    return clientX < leftLowerCorner[0] && clientY > leftLowerCorner[1]
+  }
+
   private async keydownListener(e: KeyboardEvent): Promise<void> {
     // console.log(e)
     if (!this.cfg.predicate(e)) return
+    await this.checkAllowToggle()
+  }
 
+  private async checkAllowToggle(): Promise<void> {
     try {
       const allow = await this.cfg[this.adminMode ? 'beforeExit' : 'beforeEnter']()
       if (!allow) return // no change