Feature: Add ability to navigate recipe with mouse buttons (#223)

2 files changed, 22 insertions, 0 deletions

diff --git a/src/app.js b/src/app.js
index 5d6ac9b8d..c56cda241 100644
--- a/src/app.js
+++ b/src/app.js
@@ -49,6 +49,15 @@ window.addEventListener('load', () => {
   window['ferdium'].render();
 });
 
+// Prevent back and forward mouse events for the app itself (not inside the recipe)
+// TODO: send this request to the recipe.js
+window.addEventListener('mouseup', e => {
+  if (e.button === 3 || e.button === 4) {
+      e.preventDefault()
+      e.stopPropagation()
+  }
+});
+
 // Prevent drag and drop into window from redirecting
 window.addEventListener('dragover', event => event.preventDefault());
 window.addEventListener('drop', event => event.preventDefault());
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index a14c01b68..847a720ff 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -193,6 +193,19 @@ class RecipeController {
         textColor: '#212121',
       });
     });
+
+    // Add ability to go forward or back with mouse buttons (inside the recipe)
+    window.addEventListener('mouseup', e => {
+      if (e.button === 3) {
+          e.preventDefault()
+          e.stopPropagation()
+          window.history.back()
+      } else if (e.button === 4) {
+        e.preventDefault()
+        e.stopPropagation()
+        window.history.forward()
+      }
+    });
   }
 
   loadRecipeModule(event, config, recipe) {