Add help menu

2025-09-06 06:37:09 +00:00 · 2024-11-10 00:50:06 +08:00
parent fcfa723052
commit 9883922927
3 changed files with 178 additions and 33 deletions
--- a/module/webroot/index.html
+++ b/module/webroot/index.html
@@ -9,12 +9,52 @@
    <script type="module" crossorigin src="/index.js"></script>
 </head>
 <body>
-    <div id="title">Tricky Addon - Update Target List</div>
+    <div class="title-container">
+        <div id="title">Tricky Addon - Update Target List</div>
+        <button id="help-button" class="help-button"><i class="fa fa-question-circle"></i></button>
+    </div>
+    <div id="help-overlay" class="help-overlay">
+        <div class="help-menu">
+            <button id="close-help" class="close-help">&#x2715;</button>
+            <div class="help-content">
+                <p>Instructions</p>
+                <ul>
+                    <li>Save and Update
+                        <ul>
+                            <li>Save the current configuration and update target.txt immediately.</li>
+                            <li><br></li>
+                        </ul>
+                    </li>
+                    <li>Refresh
+                        <ul>
+                            <li>Refresh app list and exclude list.</li>
+                            <li><br></li>
+                        </ul>
+                    </li>
+                    <li>Select All & Deselect All
+                        <ul>
+                            <li>Select or deselect all apps in the current interface.</li>
+                            <li><br></li>
+                        </ul>
+                    </li>
+                    <li>Deselect Unnecessary
+                        <ul>
+                            <li>Unnecessary category: Xposed module, root manager, root-related apps, and general apps that never check bootloader status.</li>
+                            <ul>
+                                <li>Contribute to <a href="https://raw.githubusercontent.com/KOWX712/Tricky-Addon-Update-Target-List/master/more-excldue.json" target="_blank">unnecessary app list</a>? Create an <a href="https://github.com/KOWX712/Tricky-Addon-Update-Target-List/issues" target="_blank">issue</a> or <a href="https://github.com/KOWX712/Tricky-Addon-Update-Target-List/pulls" target="_blank">pull request</a>.</li>
+                            </ul>
+                            <li><br></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
    <div class="search-menu-container">
        <div class="search-card">
            <span class="search-icon"><i class="fa fa-search"></i></span>
            <input type="text" class="search-input" id="search" placeholder="Search">
-            <button class="clear-btn" id="clear-btn"><i class="fa fa-close"></i></button>
+            <button class="clear-btn" id="clear-btn">&#x2715;</button>
        </div>
        <div class="menu">
            <input type="checkbox" id="menu-toggle" class="menu-toggle">
@@ -26,7 +66,7 @@
                    <li id="refresh">Refresh</li>
                    <li id="select-all">Select All</li>
                    <li id="deselect-all">Deselect All</li>
-                    <li id="deselect-xposed">Deselect Root Related</li>
+                    <li id="deselect-xposed">Deselect Unnecessary</li>
                </ul>
            </div>
        </div>
@@ -42,7 +82,7 @@
                <input type="checkbox" class="checkbox" checked>
            </div>
        </div>
-    </template>    
+    </template>
    <div class="loading">Loading...</div>
    <div class="acknowledgment">Credit to j-hc/zygisk-detach WebUI</div>
    <div id="prompt" class="prompt"></div>
--- a/module/webroot/index.js
+++ b/module/webroot/index.js
@@ -2,9 +2,13 @@ let e = 0;
 const appTemplate = document.getElementById("app-template").content;
 const appListContainer = document.getElementById("apps-list");
 const loadingIndicator = document.querySelector(".loading");
+const searchMenuContainer = document.querySelector('.search-menu-container');
 const searchInput = document.getElementById("search");
 const clearBtn = document.getElementById("clear-btn");
-const title = document.getElementById('title');
+const title = document.querySelector('.title-container');
+const helpButton = document.getElementById("help-button");
+const helpOverlay = document.getElementById("help-overlay");
+const closeHelp = document.getElementById("close-help");
 const searchCard = document.querySelector('.search-card');
 const menu = document.querySelector('.menu');
 const floatingBtn = document.querySelector('.floating-btn');
@@ -44,38 +48,29 @@ async function readExcludeFile() {
    }
 }

-// Function to check if an app name should be excluded
-function isExcluded(appName) {
-    return excludeList.some(excludeItem => appName.includes(excludeItem));
-}
-
 // Function to fetch, sort, and render the app list
 async function fetchAppList() {
    try {
        await readExcludeFile();
        const result = await execCommand("pm list packages -3 </dev/null 2>&1 | cat");
        const packageList = result.split("\n").map(line => line.replace("package:", "").trim()).filter(Boolean);
-
        const sortedApps = packageList.sort((a, b) => {
-            const aInExclude = isExcluded(a);
-            const bInExclude = isExcluded(b);
+            const aInExclude = excludeList.includes(a);
+            const bInExclude = excludeList.includes(b);
            return aInExclude === bInExclude ? a.localeCompare(b) : aInExclude ? 1 : -1;
        });
-
        appListContainer.innerHTML = "";
        sortedApps.forEach(appName => {
            const appElement = document.importNode(appTemplate, true);
            appElement.querySelector(".name").textContent = appName;
            const checkbox = appElement.querySelector(".checkbox");
-            checkbox.checked = !isExcluded(appName);
+            checkbox.checked = !excludeList.includes(appName);
            appListContainer.appendChild(appElement);
        });
-
        console.log("App list fetched, sorted, and rendered successfully.");
    } catch (error) {
        console.error("Failed to fetch or render app list:", error);
    }
-
    floatingBtn.style.transform = 'translateY(-100px)';
 }

@@ -325,17 +320,35 @@ document.addEventListener('DOMContentLoaded', async () => {

 // Scroll event
 let lastScrollY = window.scrollY;
-const searchMenuContainer = document.querySelector('.search-menu-container');
+const scrollThreshold = 35;
 window.addEventListener('scroll', () => {
    if (isRefreshing) return;
-    if (window.scrollY > lastScrollY) {
+    if (window.scrollY > lastScrollY && window.scrollY > scrollThreshold) {
        title.style.transform = 'translateY(-100%)';
        searchMenuContainer.style.transform = 'translateY(-35px)';
        floatingBtn.style.transform = 'translateY(0)';
-    } else {
+    } else if (window.scrollY < lastScrollY) {
        title.style.transform = 'translateY(0)';
        searchMenuContainer.style.transform = 'translateY(0)';
        floatingBtn.style.transform = 'translateY(-100px)';
    }
    lastScrollY = window.scrollY;
+});
+
+// Show help overlay and disable scrolling
+helpButton.addEventListener("click", () => {
+    helpOverlay.style.display = "flex";
+    document.body.classList.add("no-scroll");
+});
+
+// Hide the help overlay and re-enable scrolling, Close button and blank
+const hideHelpOverlay = () => {
+    helpOverlay.style.display = "none";
+    document.body.classList.remove("no-scroll");
+};
+closeHelp.addEventListener("click", hideHelpOverlay);
+helpOverlay.addEventListener("click", (event) => {
+    if (event.target === helpOverlay) {
+        hideHelpOverlay();
+    }
 });
--- a/module/webroot/styles.css
+++ b/module/webroot/styles.css
@@ -2,19 +2,106 @@ body {
    background-color: #F5F5F5;
 }

-#title {
+.no-scroll {
+    overflow: hidden;
+}
+
+.title-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: fixed;
+    top: 0;
+    height: 40px;
+    width: calc(100% - 17px);
    background-color: #F5F5F5;
-    border: none;
+    transition: transform 0.3s ease;
+    z-index: 1000;
+}
+
+#title {
    font-size: 18px;
    font-weight: bold;
-    left: 0;
-    padding: 10px 25px;
+    padding-left: 10px;
+}
+
+.help-button {
+    margin-right: auto;
+    padding: 0 10px;
+    background: none;
+    border: none;
+    font-size: 24px;
+    align-items: center;
+    justify-content: center;
+}
+
+.help-overlay {
+    display: none;
    position: fixed;
-    text-align: left;
    top: 0;
-    transition: transform 0.3s ease;
-    width: 100%;
-    z-index: 1000;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 2000;
+    justify-content: center;
+    align-items: center;
+}
+
+.help-menu {
+    position: relative;
+    width: 75vw;
+    max-width: 600px;
+    background-color: white;
+    padding: 0 10px;
+    border-radius: 15px;
+    text-align: left;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.close-help {
+    position: absolute;
+    top: 15px;
+    right: 12px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: #ccc;
+}
+
+.help-content {
+    max-height: 85vh;
+    padding: 0 20px;
+    overflow-y: auto;
+}
+
+.help-content p {
+    font-size: 26px;
+}
+
+.help-content ul {
+    padding-left: 0;
+    list-style-type: none;
+}
+
+.help-content ul li {
+    font-weight: bold;
+    font-size: 17px;
+}
+
+.help-content ul ul li {
+    font-weight: normal;
+    font-size: 16px;
+}
+
+.help-content ul ul ul li {
+    color: #777777;
+    font-weight: normal;
+    font-size: 14px;
+}
+
+.help-content ul ul ul li a {
+    color: inherit;
 }

 #apps-list {
@@ -64,6 +151,7 @@ body {

 .clear-btn {
    position: absolute;
+    color: #ccc;
    right: 10px;
    border: none;
    background: none;
@@ -139,7 +227,7 @@ body {
 }

 .menu-options li {
-    cursor: pointer;
+    cursor: default;
    padding: 15px 18px;
    text-align: left;
 }
@@ -271,11 +359,16 @@ body {
        background-color: #121212;
        color: #eee;
    }
-
-    #title {
+    
+    .title-container {
        background-color: #121212;
    }
-
+    
+    .help-button {
+        color: #fff;
+    }
+    
+    .help-menu,
    .card,
    .search-input,
    .search-card {
@@ -286,7 +379,6 @@ body {
        border: 1px solid #6E6E6E;
    }

-    .clear-btn,
    .search-input{
        color: white;
    }