webui: mode button triggers dev settings (bindhosts#19)

* webui: mode button triggers dev settings * webui: mode button single-tap opens mode bindhosts-operating-modes guide and double-tapping enables developer options * webui: 5 taps on ststus-box enables developer options and single tap on mode-btn opens mode menu when developers options is disabled mode-btn opens mode-guide * webui: reset 5 tap sequence count if there is a time gap * webui: enabling developer options doesn't trigger mode-menu overlay * webui: refine logic Determine developer option status earlier, no need to enable again if user already using a custom mode. Cleanup code. --------- Co-authored-by: KOWX712 <[email protected]>
backslashxx · Dec 5, 2024 · 93cede2 · 93cede2
1 parent 188d9c1
commit 93cede2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 26 deletions.
diff --git a/module/webroot/index.html b/module/webroot/index.html
@@ -13,8 +13,7 @@
 <body>
 	<div class="header">
 		<div id="title">bindhosts <span id="version-text"></span></div>
-		<a href="https://github.com/backslashxx/bindhosts/blob/master/Documentation/modes.md#bindhosts-operating-modes"
-			class="current-mode-text">Mode: <span id="mode-text">X</span></a>
+		<div id="mode-btn" class="current-mode-text">Mode: <span id="mode-text">X</span></div>
 	</div>
 	<div class="content">
 		<div class="float">

diff --git a/module/webroot/index.js b/module/webroot/index.js
@@ -7,8 +7,11 @@ const filePaths = {
     whitelist: `${basePath}/whitelist.txt`,
 };
 
-let developerOption = false;
 let clickCount = 0;
+let timeout;
+let clickTimeout;
+let developerOption = false;
+let disableTimeout;
 
 // Function to read a file and display its content in the UI
 async function loadFile(fileType) {
@@ -204,38 +207,51 @@ async function executeActionScript() {
     }
 }
 
-// Open mode menu with developer option logic
-document.getElementById("status-box").addEventListener("click", async () => {
-    if (developerOption) {
-        await updateModeSelection();
-        openOverlay(document.getElementById("mode-menu"));
-        return;
-    }
-    const fileExists = await execCommand("[ -f /data/adb/bindhosts/mode_override.sh ] && echo 'exists' || echo 'not-exists'");
+// Funtion to determine state of developer option
+async function checkDevOption() {
+    const filePath = "/data/adb/bindhosts/mode_override.sh";
+    const fileExists = await execCommand(`[ -f ${filePath} ] && echo 'exists' || echo 'not-exists'`);
+
     if (fileExists.trim() === "exists") {
         developerOption = true;
-        await updateModeSelection();
+    }
+}
+
+// Determine mode button behavior of mode button depends on developer option
+document.getElementById("mode-btn").addEventListener("click", async () => {
+    await checkDevOption();
+    if (developerOption) {
         openOverlay(document.getElementById("mode-menu"));
-        return;
+    } else {
+        window.open("https://github.com/backslashxx/bindhosts/blob/master/Documentation/modes.md#bindhosts-operating-modes", "_blank");
     }
+});
+
+// Event listener to enable developer option
+document.getElementById("status-box").addEventListener("click", async () => {
     clickCount++;
-    if (clickCount >= 5) {
-        try {
-            await execCommand("> /data/adb/bindhosts/mode_override.sh");
-            developerOption = true;
-            showPrompt("Developer option enabled", true);
-            openOverlay(document.getElementById("mode-menu"));
-        } catch (error) {
-            console.error("Error enabling developer option:", error);
-            showPrompt("Error enabling developer option", false);
-        }
-    }
-    setTimeout(() => {
+    clearTimeout(clickTimeout);
+
+    clickTimeout = setTimeout(() => {
         clickCount = 0;
     }, 2000);
+    if (clickCount === 5) {
+        clickCount = 0;
+        await checkDevOption();
+        if (!developerOption) {
+            try {
+                developerOption = true;
+                showPrompt("Developer option enabled", true);
+            } catch (error) {
+                console.error("Error enabling developer option:", error);
+                showPrompt("Error enabling developer option", false);
+            }
+        } else {
+            showPrompt("Developer option already enabled", true);
+        }
+    }
 });
 
-
 // Save mode option
 async function saveModeSelection(mode) {
     try {