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..475bd36 100644 --- a/app/ui/omni-box.js +++ b/app/ui/omni-box.js @@ -107,6 +107,46 @@ class OmniBox extends HTMLElement { this.forwardButton.addEventListener('click', () => { this.dispatchEvent(new CustomEvent('forward')) }) + + // mouse side-buttons for navigating + 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')) + } + }) + + // 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 + }) } clearOptions () { @@ -342,4 +382,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