From 45cad777f6a08ab62e640aa3ce9e7b895d6d3e45 Mon Sep 17 00:00:00 2001
From: liabru <liabru@brm.io>
Date: Sun, 13 Aug 2023 12:17:40 +0100
Subject: [PATCH] added arrow key navigation of examples in development demo

---
 demo/src/Demo.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/demo/src/Demo.js b/demo/src/Demo.js
index 044a065..39609c4 100644
--- a/demo/src/Demo.js
+++ b/demo/src/Demo.js
@@ -41,8 +41,10 @@ var demo = function(examples, isDev) {
     document.title = 'Matter.js Demo' + (isDev ? ' ・ Dev' : '');
 
     if (isDev) {
-        var buttonSource = demo.dom.buttonSource;
-        var buttonCompare = buttonSource.cloneNode(true);
+        // add compare button
+        var buttonSource = demo.dom.buttonSource,
+            buttonCompare = buttonSource.cloneNode(true);
+
         buttonCompare.textContent = '⎄';
         buttonCompare.title = 'Compare';
         buttonCompare.href = '?compare';
@@ -52,11 +54,29 @@ var demo = function(examples, isDev) {
             window.location = '?compare#' + demo.example.id;
             event.preventDefault();
         });
+
         buttonSource.parentNode.insertBefore(buttonCompare, buttonSource.nextSibling);
 
+        // always show debug info
         Matter.before('Render.create', function(renderOptions) {
             renderOptions.options.showDebug = true;
         });
+
+        // arrow key navigation of examples
+        document.addEventListener('keyup', function(event) {
+            var isBackKey = event.key === 'ArrowLeft' || event.key === 'ArrowUp',
+                isForwardKey = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+
+            if (isBackKey || isForwardKey) {
+                var direction = isBackKey ? -1 : 1,
+                    currentExampleIndex = demo.examples.findIndex(function(example) { 
+                        return example.id === demo.example.id;
+                    }),
+                    nextExample = demo.examples[(demo.examples.length + currentExampleIndex + direction) % demo.examples.length];
+                
+                MatterTools.Demo.setExample(demo, nextExample);
+            }
+        });
     }
 
     MatterTools.Demo.start(demo);