From: Raphaël Jakse <raphael.trivabble@jakse.fr>
Date: Thu, 8 May 2025 10:32:59 +0000 (+0200)
Subject: Automatically zoom the board to fit the screen
X-Git-Url: https://secure.softndesign.org/git/?a=commitdiff_plain;h=73158b94cccdca9df8b5f5ebfd739f5f464738b1;p=trivabble.git

Automatically zoom the board to fit the screen
---

diff --git a/public/trivabble.css b/public/trivabble.css
index bec1470..6ed303e 100644
--- 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 3f9bf14..e040e75 100644
--- 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);
-
 }());