Merge pull request #34 from michaelfiber/prevent-arrow-scroll-in-examples

Add "no arrow scroll" mode to code/loader.html

9 files changed, 71 insertions, 0 deletions

diff --git a/common/disable-arrow-scroll.js b/common/disable-arrow-scroll.js
new file mode 100644
index 0000000..150e9d1
--- /dev/null
+++ b/common/disable-arrow-scroll.js
@@ -0,0 +1,47 @@
+window.addEventListener("DOMContentLoaded", () => {
+  var clickedInCanvas = false;
+  var warning = document.createElement("div");
+  warning.innerHTML =
+    "Arrow key scrolling disabled.<br />Click outside canvas or press Escape to enable again.";
+  warning.style.padding = "1em";
+  warning.style.color = "white";
+  warning.style.backgroundColor = "red";
+  warning.style.position = "fixed";
+  warning.style.bottom = 0;
+  warning.style.left = 0;
+  warning.style.right = 0;
+  warning.style.textAlign = "center";
+  warning.id = "no-scroll-warning-20220323";
+  warning.style.display = "none";
+  warning.style.fontFamily =
+    "grixel_acme_7_wide_xtnd, Courier New, Verdana, Arial";
+  document.body.appendChild(warning);
+
+  function update() {
+    warning.style.display = clickedInCanvas ? "block" : "none";
+  }
+
+  window.addEventListener("click", (ev) => {
+    clickedInCanvas = ev.target.tagName.toUpperCase() == "CANVAS";
+    update();
+  });
+  window.addEventListener(
+    "keydown",
+    (ev) => {
+      if (clickedInCanvas) {
+        if (
+          ["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(
+            ev.code
+          ) > -1
+        ) {
+          ev.preventDefault();
+        }
+      }
+      if (ev.code == "Escape") {
+        clickedInCanvas = false;
+        update();
+      }
+    },
+    false
+  );
+});
diff --git a/examples/audio/loader.html b/examples/audio/loader.html
index 76394d9..ffcd8c9 100644
--- a/examples/audio/loader.html
+++ b/examples/audio/loader.html
@@ -238,5 +238,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>     
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/core/loader.html b/examples/core/loader.html
index 76394d9..b6de108 100644
--- a/examples/core/loader.html
+++ b/examples/core/loader.html
@@ -238,5 +238,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>        
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/models/loader.html b/examples/models/loader.html
index 65fafa1..dba0c42 100644
--- a/examples/models/loader.html
+++ b/examples/models/loader.html
@@ -238,5 +238,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>     
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/physics/loader.html b/examples/physics/loader.html
index 1f63254..514924d 100644
--- a/examples/physics/loader.html
+++ b/examples/physics/loader.html
@@ -236,5 +236,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>     
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/shaders/loader.html b/examples/shaders/loader.html
index 6ea9587..05a97ee 100644
--- a/examples/shaders/loader.html
+++ b/examples/shaders/loader.html
@@ -230,5 +230,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>             
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/shapes/loader.html b/examples/shapes/loader.html
index 76394d9..a73f5df 100644
--- a/examples/shapes/loader.html
+++ b/examples/shapes/loader.html
@@ -238,5 +238,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>             
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/text/loader.html b/examples/text/loader.html
index 76394d9..ffcd8c9 100644
--- a/examples/text/loader.html
+++ b/examples/text/loader.html
@@ -238,5 +238,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>     
     </body>
 </html>
\ No newline at end of file
diff --git a/examples/textures/loader.html b/examples/textures/loader.html
index 76394d9..9b5a8d8 100644
--- a/examples/textures/loader.html
+++ b/examples/textures/loader.html
@@ -238,5 +238,8 @@
             ga('require', 'linkid', 'linkid.js');
             ga('send', 'pageview');
         </script>
+        
+        <!-- prevent arrow keys fromscrolling the loaded game. -->
+        <script src="/common/disable-arrow-scroll.js"></script>             
     </body>
 </html>
\ No newline at end of file