ref: navigation buttons

html/navigation.html

@@ -46,16 +46,19 @@
       li.dynamic {
         flex: 1 1 0%;
       }
+      li.hidden {
+        display: none;
+      }
+      li.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
       button {
         width: 32px;
         height: 32px;
         border: none;
         background-color: transparent;
       }
-      button.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-      }
       input {
         width: 100%;
         min-width: 0;
@@ -144,7 +147,10 @@
 
       const registerReceiveEvents = () => {
         ipcRenderer.on("button-disabled", (e, button) => {
-          document.getElementById(button.id).classList.toggle("disabled", button.disabled);
+          document.getElementById(button.id).parentNode.classList.toggle("disabled", button.disabled);
+        });
+        ipcRenderer.on("button-hidden", (e, button) => {
+          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
         });
         ipcRenderer.on("input-blur", (e, input) => {
           document.getElementById(input.id).blur();

html/widget.html

@@ -46,6 +46,14 @@
         border-bottom: 1px solid var(--border-color);
         background: var(--background-color);
       }
+      li {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+      }
+      li.hidden {
+        display: none;
+      }
       button {
         width: 32px;
         height: 32px;
@@ -114,7 +122,7 @@
 
       const registerReceiveEvents = () => {
         ipcRenderer.on("button-hidden", (e, button) => {
-          document.getElementById(button.id).parentNode.hidden = button.hidden;
+          document.getElementById(button.id).parentNode.classList.toggle("hidden", button.hidden);
         });
         ipcRenderer.on("data-theme", (e, data) => {
           document.documentElement.setAttribute("data-theme", data.theme);

js/integration.js

@@ -413,6 +413,9 @@ const updateKeyboard = () => {
  * Initializes the page number and handles the execute logic.
  */
 const initPageNumber = () => {
+  if (WEBVIEW.viewUrls.length < 3) {
+    return;
+  }
   const root = `${INTEGRATION.root}/page_number`;
   const config = {
     name: "Page Number",

js/webview.js

@@ -183,10 +183,10 @@ const updateNavigation = () => {
   const defaultUrl = WEBVIEW.viewUrls[WEBVIEW.viewActive];
   const currentUrl = view.webContents.getURL();
 
-  // Disable pager button
-  WEBVIEW.navigation.webContents.send("button-disabled", {
+  // Hide pager button
+  WEBVIEW.navigation.webContents.send("button-hidden", {
     id: "pager",
-    disabled: WEBVIEW.views.length < 3,
+    hidden: WEBVIEW.viewUrls.length < 3,
   });
 
   // Update url text