Automatically zoom the board to fit the screen

diff --git a/public/trivabble.css b/public/trivabble.css
index bec1470580268206b3defe7f1fee91e13de6aeec..6ed303ed0f91250b9cd02c230716845d3ea86518 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -170,6 +170,11 @@ body {
     width:15em;
 }
 
+#content {
+    /* This is important for the auto zoom feature, it allows #content not to take the whole height */
+    align-self: baseline;
+}
+
 button, select {
     border-radius: 2px;
 }

diff --git a/public/trivabble.js b/public/trivabble.js
index 3f9bf141ce3565b1f8988eb63480686d47e0e0f0..e040e75026dd35e5d50449cc90eb126c6e218558 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -2718,6 +2718,11 @@
         }
 
         setCellCaptions(getSetting("CELL_CAPTIONS"));
+        if (window.CSS && CSS.supports && CSS.supports("zoom: 1.5")) {
+            resize();
+            window.removeEventListener("resize", resize);
+            window.addEventListener("resize", resize);
+        }
     }
 
     function initLang() {
@@ -2733,6 +2738,29 @@
         document.getElementsByTagName("head")[0].appendChild(script);
     }
 
+    function resize() {
+        const content = document.getElementById("content");
+        const panel = document.getElementById("panel");
+        const menu = document.getElementById("menu");
+        const screenWidth  = window.innerWidth || document.documentElement.clientWidth ||
+        document.body.clientWidth;
+        const screenHeight = window.innerHeight|| document.documentElement.clientHeight||
+        document.body.clientHeight;
+        const menuAndPanelWidth  = panel.offsetWidth + menu.offsetWidth;
+        const availableWidth = screenWidth - menuAndPanelWidth;
+        const candidateScaleW = availableWidth / board.offsetWidth;
+        // RJ - The - 5 is a hack to avoid scrollbars and to prevent the rack
+        // from being too close from the bottom of the screen.
+        // It is an arbitrary value guessed from observation. It's not very
+        // pretty and I don't know why scrollbars appear without it.
+        const candidateScaleH = (screenHeight - 5) / content.offsetHeight;
+        const candidateScale = Math.min(candidateScaleW, candidateScaleH)
+        if (candidateScale < 1) {
+            candidateScale = 1;
+        }
+        content.style.zoom = candidateScale;
+    }
+
     function load() {
         initLang();
         loadBagSVG();
@@ -2793,5 +2821,4 @@
     });
 
     window.addEventListener("online", startConnection);
-
 }());