feat: add page zoom buttons #48

html/navigation.html

@@ -103,6 +103,26 @@
       <li class="dynamic">
         <input id="url" type="text" spellcheck="false" />
       </li>
+      <li>
+        <button id="minus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <title>magnify-minus</title>
+            <path
+              d="M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M5,8V10H13V8H5Z"
+            />
+          </svg>
+        </button>
+      </li>
+      <li>
+        <button id="plus">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <title>magnify-plus</title>
+            <path
+              d="M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M8,5V8H5V10H8V13H10V10H13V8H10V5H8Z"
+            />
+          </svg>
+        </button>
+      </li>
       <li>
         <button id="backward">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

js/integration.js

@@ -473,10 +473,10 @@ const initPageZoom = () => {
     state_topic: `${root}/state`,
     value_template: "{{ value | int }}",
     mode: "slider",
-    min: 5,
-    max: 500,
+    min: 25,
+    max: 400,
     unit_of_measurement: "%",
-    icon: "mdi:magnify-plus-outline",
+    icon: "mdi:magnify-plus",
     device: INTEGRATION.device,
   };
   publishConfig("number", config)

js/webview.js

@@ -152,8 +152,8 @@ const updateView = () => {
   if (!WEBVIEW.viewActive) {
     return;
   }
-  const title = `TouchKio - ${new URL(WEBVIEW.viewUrls[WEBVIEW.viewActive]).host}`;
-  console.log(`Update View: ${title} (${WEBVIEW.viewActive})`);
+  const title = `TouchKio - ${new URL(WEBVIEW.viewUrls[WEBVIEW.viewActive]).host} (${WEBVIEW.viewActive})`;
+  console.log(`Update View: ${title}`);
   WEBVIEW.window.setTitle(title);
 
   // Hide all other webviews and show only the active one
@@ -201,6 +201,16 @@ const updateNavigation = () => {
     placeholder: defaultUrl.startsWith("data:") ? "" : defaultUrl,
   });
 
+  // Disable zoom buttons
+  WEBVIEW.navigation.webContents.send("button-disabled", {
+    id: "minus",
+    disabled: view.webContents.getZoomFactor().toFixed(2) <= 0.25,
+  });
+  WEBVIEW.navigation.webContents.send("button-disabled", {
+    id: "plus",
+    disabled: view.webContents.getZoomFactor().toFixed(2) >= 4.0,
+  });
+
   // Disable history buttons
   WEBVIEW.navigation.webContents.send("button-disabled", {
     id: "backward",
@@ -522,6 +532,7 @@ const navigationEvents = () => {
 
   // Handle navigation button click events
   ipcMain.on("button-click", (e, button) => {
+    const view = WEBVIEW.views[WEBVIEW.viewActive];
     switch (button.id) {
       case "pager":
         nextView();
@@ -531,6 +542,16 @@ const navigationEvents = () => {
         reloadView();
         hardware.setKeyboardVisibility("OFF");
         break;
+      case "minus":
+        view.webContents.setZoomFactor(Math.max(0.25, view.webContents.getZoomFactor() - 0.1));
+        hardware.setKeyboardVisibility("OFF");
+        updateView();
+        break;
+      case "plus":
+        view.webContents.setZoomFactor(Math.min(4.0, view.webContents.getZoomFactor() + 0.1));
+        hardware.setKeyboardVisibility("OFF");
+        updateView();
+        break;
       case "backward":
         historyBackward();
         hardware.setKeyboardVisibility("OFF");