From 46f9df7d7c2493272ee905960f587a9bf4d87607 Mon Sep 17 00:00:00 2001
From: Arskan17 <75216911+Arskan17@users.noreply.github.com>
Date: Tue, 6 Feb 2024 22:13:35 +0100
Subject: [PATCH 1/2] Mouse side button navigation

- Added the listeners that check for button codes, but I can't check with my mouse yet since it doesn't emit the usual supported codes.
- Also added listeners for trackpad swipes left&right.
---
 .gitignore         |  3 +++
 app/ui/omni-box.js | 23 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 01dcd4b..906a76d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -133,3 +133,6 @@ package-lock.json
 
 # This gets generated post install
 app/version.js
+
+# This gets generated when I open in a Container
+.devcontainer
\ No newline at end of file
diff --git a/app/ui/omni-box.js b/app/ui/omni-box.js
index 8eaee7f..ce9e2db 100644
--- a/app/ui/omni-box.js
+++ b/app/ui/omni-box.js
@@ -5,6 +5,7 @@ const { CID } = require('multiformats/cid')
 
 const IPNS_PREFIX = '/ipns/'
 const IPFS_PREFIX = '/ipfs/'
+const { app } = require('electron')
 
 class OmniBox extends HTMLElement {
   constructor () {
@@ -107,6 +108,26 @@ class OmniBox extends HTMLElement {
     this.forwardButton.addEventListener('click', () => {
       this.dispatchEvent(new CustomEvent('forward'))
     })
+
+    window.addEventListener("mouseup", (e) => {
+      e.preventDefault()
+
+      if(e.button === 3) {
+        this.dispatchEvent(new CustomEvent('back'))
+      } else if(e.button === 4) {
+        this.dispatchEvent(new CustomEvent('forward'))
+      }
+    })
+
+    app.whenReady().then(() => {
+      document.addEventListener('swipe', (e, direction) => {
+        if (direction === 'right') {
+          this.dispatchEvent(new CustomEvent('forward'))
+        } else if (direction === 'left') {
+          this.dispatchEvent(new CustomEvent('back'))
+        }
+      })
+    })
   }
 
   clearOptions () {
@@ -342,4 +363,4 @@ function makeIPNS (path) {
   return `ipns://${path.slice(IPNS_PREFIX.length)}`
 }
 
-customElements.define('omni-box', OmniBox)
+customElements.define('omni-box', OmniBox)
\ No newline at end of file

From dbbee44ddfd540249b7b36b1badf5b3bac17204f Mon Sep 17 00:00:00 2001
From: Arskan17 <75216911+Arskan17@users.noreply.github.com>
Date: Wed, 7 Feb 2024 06:44:05 +0100
Subject: [PATCH 2/2] gestures navigation

added some gestures navigation logic
---
 app/ui/omni-box.js | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/app/ui/omni-box.js b/app/ui/omni-box.js
index ce9e2db..475bd36 100644
--- a/app/ui/omni-box.js
+++ b/app/ui/omni-box.js
@@ -5,7 +5,6 @@ const { CID } = require('multiformats/cid')
 
 const IPNS_PREFIX = '/ipns/'
 const IPFS_PREFIX = '/ipfs/'
-const { app } = require('electron')
 
 class OmniBox extends HTMLElement {
   constructor () {
@@ -109,6 +108,7 @@ class OmniBox extends HTMLElement {
       this.dispatchEvent(new CustomEvent('forward'))
     })
 
+    // mouse side-buttons for navigating
     window.addEventListener("mouseup", (e) => {
       e.preventDefault()
 
@@ -119,14 +119,33 @@ class OmniBox extends HTMLElement {
       }
     })
 
-    app.whenReady().then(() => {
-      document.addEventListener('swipe', (e, direction) => {
-        if (direction === 'right') {
-          this.dispatchEvent(new CustomEvent('forward'))
-        } else if (direction === 'left') {
-          this.dispatchEvent(new CustomEvent('back'))
+    // mouse gestures for navigating
+    let isMouseDown = false
+    let startX = 0
+    let startY = 0
+
+    window.addEventListener('mousedown', (e) => {
+      isMouseDown = true
+      startX = e.clientX
+      startY = e.clientY
+    })
+    window.addEventListener('mousemove', (e) => {
+      if (isMouseDown) {
+        const distX = e.clientX - startX
+        const distY = e.clientY - startY
+
+        if (Math.abs(distX) > Math.abs(distY)) {
+          if (distX > 0) {
+            this.dispatchEvent(new CustomEvent('forward'))
+          } else {
+            this.dispatchEvent(new CustomEvent('back'))
+          }
         }
-      })
+        isMouseDown = false
+      }
+    })
+    window.addEventListener('mouseup', () => {
+        isMouseDown = false
     })
   }