Simplify logic, add Material Design ripple effect

module/webui/scripts/about.js

@@ -4,7 +4,7 @@ const telegramLink = document.getElementById('telegram');
 const githubLink = document.getElementById('github');
 
 // Function to show about overlay
-export function aboutMenu() {
+document.getElementById("about").addEventListener("click", () => {
     const aboutOverlay = document.getElementById('about-overlay');
     const aboutMenu = document.getElementById('about-menu');
     const closeAbout = document.getElementById('close-about');
@@ -35,7 +35,7 @@ export function aboutMenu() {
         }
     });
     menu.addEventListener('click', (event) => event.stopPropagation());
-}
+});
 
 // Event listener for link redirect
 telegramLink.addEventListener('click', async () => {

module/webui/scripts/help.js

@@ -3,28 +3,29 @@ const helpOverlay = document.getElementById('help-overlay');
 const closeHelp = document.getElementById('close-help');
 const helpList = document.getElementById('help-list');
 
-// Function to setup the help menu
-export function setupHelpOverlay() {
-    helpButton.addEventListener("click", () => {
-        helpOverlay.classList.remove("hide");
-        helpOverlay.style.display = "flex";
-        requestAnimationFrame(() => {
-            helpOverlay.classList.add("show");
-        });
-        document.body.classList.add("no-scroll");
+// Open help menu
+helpButton.addEventListener("click", () => {
+    helpOverlay.classList.remove("hide");
+    helpOverlay.style.display = "flex";
+    requestAnimationFrame(() => {
+        helpOverlay.classList.add("show");
     });
-    const hideHelpOverlay = () => {
-        helpOverlay.classList.remove("show");
-        helpOverlay.classList.add("hide");
-        document.body.classList.remove("no-scroll");
-        setTimeout(() => {
-            helpOverlay.style.display = "none";
-        }, 200);
-    };
-    closeHelp.addEventListener("click", hideHelpOverlay);
-    helpOverlay.addEventListener("click", (event) => {
-        if (event.target === helpOverlay) {
-            hideHelpOverlay();
-        }
-    });
-}
+    document.body.classList.add("no-scroll");
+});
+
+const hideHelpOverlay = () => {
+    helpOverlay.classList.remove("show");
+    helpOverlay.classList.add("hide");
+    document.body.classList.remove("no-scroll");
+    setTimeout(() => {
+        helpOverlay.style.display = "none";
+    }, 200);
+};
+
+// Close help menu
+closeHelp.addEventListener("click", hideHelpOverlay);
+helpOverlay.addEventListener("click", (event) => {
+    if (event.target === helpOverlay) {
+        hideHelpOverlay();
+    }
+});

module/webui/scripts/main.js

@@ -1,18 +1,13 @@
-import { aboutMenu } from './about.js';
 import { appListContainer, updateCard, fetchAppList } from './applist.js';
-import { setupHelpOverlay } from './help.js';
 import { initializeAvailableLanguages, detectUserLanguage, loadTranslations, setupLanguageMenu, translations } from './language.js';
-import { selectAllApps, deselectAllApps, selectDenylistApps, deselectUnnecessaryApps, aospkb, extrakb } from './menu_option.js';
+import { aospkb } from './menu_option.js';
 import { searchMenuContainer, searchInput, clearBtn, setupMenuToggle } from './search_menu.js';
-import { setBootHash } from './vbmeta-digest.js';
+import { updateCheck } from './update.js';
 
 // Header Elements
 const headerBlock = document.querySelector('.header-block');
 const title = document.querySelector('.header');
-const noConnection = document.querySelector('.no-connection');
-
-// Menu Elements
-const selectDenylistElement = document.getElementById('select-denylist');
+export const noConnection = document.querySelector('.no-connection');
 
 // Loading, Save and Prompt Elements
 const loadingIndicator = document.querySelector('.loading');
@@ -23,11 +18,24 @@ export const basePath = "set-path";
 export const appsWithExclamation = [];
 export const appsWithQuestion = [];
 const ADDITIONAL_APPS = [ "com.google.android.gms", "io.github.vvb2060.keyattestation", "io.github.vvb2060.mahoshojo", "icu.nullptr.nativetest" ];
+const rippleClasses = ['.language-option', '.menu-button', '.menu-options li', '.search-card', '.card', '.update-card', '.link-icon', '.floating-btn', '.uninstall-container'];
 
 // Variables
 let e = 0;
 let isRefreshing = false;
 
+// Function to load the version from module.prop
+async function getModuleVersion() {
+    const moduleVersion = document.getElementById('module-version');
+    try {
+        const version = await execCommand(`grep '^version=' ${basePath}common/update/module.prop | cut -d'=' -f2`);
+        moduleVersion.textContent = version;
+    } catch (error) {
+        console.error("Failed to read version from module.prop:", error);
+        updateVersion("Error reading version from module.prop");
+    }
+}
+
 // Function to refresh app list
 async function refreshAppList() {
     isRefreshing = true;
@@ -43,48 +51,29 @@ async function refreshAppList() {
     window.scrollTo(0, 0);
     if (noConnection.style.display === "flex") {
         try {
-            await updateCheck();
+            updateCheck();
             await execCommand(`[ -f ${basePath}common/tmp/exclude-list ] && rm -f "${basePath}common/tmp/exclude-list"`);
         } catch (error) {
             console.error("Error occurred:", error);
         }
     }
     await fetchAppList();
+    applyRippleEffect();
     loadingIndicator.style.display = 'none';
     document.querySelector('.uninstall-container').classList.remove('hidden-uninstall');
     isRefreshing = false;
 }
 
-// Function to run the update check
-async function updateCheck() {
-    try {
-        const scriptPath = `sh ${basePath}common/get_extra.sh --update`;
-        const output = await execCommand(scriptPath);
-        console.log("update script executed successfully.");
-        noConnection.style.display = "none";
-        if (output.includes("update")) {
-            console.log("Update detected from extra script.");
-            showPrompt("prompt.new_update");
-            updateCard.style.display = "flex";
-        } else {
-            console.log("No update detected from extra script.");
-        }
-    } catch (error) {
-        console.error("Failed to execute update script:", error);
-        showPrompt("prompt.no_internet", false);
-        noConnection.style.display = "flex";
-    }
-}
-
 // Function to check if Magisk
 async function checkMagisk() {
+    const selectDenylistElement = document.getElementById('select-denylist');
     try {
         const magiskEnv = await execCommand(`command -v magisk >/dev/null 2>&1 && echo "OK"`);
         if (magiskEnv.trim() === "OK") {
             console.log("Denylist conditions met, displaying element.");
             selectDenylistElement.style.display = "flex";
         } else {
-            console.log("ksud or apd detected, leaving denylist element hidden.");
+            console.log("not running on Magisk, leaving denylist element hidden.");
         }
     } catch (error) {
         console.error("Error while checking denylist conditions:", error);
@@ -169,6 +158,35 @@ function adjustHeaderForMMRL() {
     }
 }
 
+// Function to apply ripple effect
+function applyRippleEffect() {
+    rippleClasses.forEach(selector => {
+        document.querySelectorAll(selector).forEach(element => {
+            element.addEventListener("click", function(event) {
+                const ripple = document.createElement("span");
+                ripple.classList.add("ripple");
+
+                const rect = element.getBoundingClientRect();
+                const width = rect.width;
+                const size = Math.max(rect.width, rect.height);
+                const x = event.clientX - rect.left - size / 2;
+                const y = event.clientY - rect.top - size / 2;
+
+                let duration = 0.3 + (width / 800) * 0.5;
+                duration = Math.min(0.8, Math.max(0.2, duration));
+                ripple.style.width = ripple.style.height = `${size}px`;
+                ripple.style.left = `${x}px`;
+                ripple.style.top = `${y}px`;
+                ripple.style.animationDuration = `${duration}s`;
+                element.appendChild(ripple);
+                ripple.addEventListener("animationend", () => {
+                    ripple.remove();
+                });
+            });
+        });
+    });
+}
+
 // Scroll event
 let lastScrollY = window.scrollY;
 const scrollThreshold = 40;
@@ -191,25 +209,19 @@ window.addEventListener('scroll', () => {
 // Initial load
 document.addEventListener('DOMContentLoaded', async () => {
     adjustHeaderForMMRL();
+    getModuleVersion();
     await initializeAvailableLanguages();
     const userLang = detectUserLanguage();
     await loadTranslations(userLang);
     setupMenuToggle();
     setupLanguageMenu();
-    setupHelpOverlay();
-    document.getElementById("refresh").addEventListener("click", refreshAppList);
-    document.getElementById("select-all").addEventListener("click", selectAllApps);
-    document.getElementById("deselect-all").addEventListener("click", deselectAllApps);
-    document.getElementById("select-denylist").addEventListener("click", selectDenylistApps);
-    document.getElementById("deselect-unnecessary").addEventListener("click", deselectUnnecessaryApps);
-    document.getElementById("aospkb").addEventListener("click", aospkb);
-    document.getElementById("extrakb").addEventListener("click", extrakb);
-    document.getElementById("boot-hash").addEventListener("click", setBootHash);
-    document.getElementById("about").addEventListener("click", aboutMenu);
     await fetchAppList();
+    applyRippleEffect();
     checkMagisk();
     updateCheck();
     loadingIndicator.style.display = "none";
+    document.getElementById("refresh").addEventListener("click", refreshAppList);
+    document.getElementById("aospkb").addEventListener("click", aospkb);
     document.querySelector('.uninstall-container').classList.remove('hidden-uninstall');
 });
 
@@ -242,4 +254,4 @@ export async function execCommand(command) {
             reject(error);
         }
     });
-}
+}

module/webui/scripts/menu_option.js

@@ -10,22 +10,18 @@ function toggleCheckboxes(shouldCheck) {
 }
 
 // Function to select all visible apps
-export function selectAllApps() {
-    toggleCheckboxes(true);
-}
+document.getElementById("select-all").addEventListener("click", () => toggleCheckboxes(true));
 
 // Function to deselect all visible apps
-export function deselectAllApps() {
-    toggleCheckboxes(false);
-}
+document.getElementById("deselect-all").addEventListener("click", () => toggleCheckboxes(false));
 
 // Function to read the denylist and check corresponding apps
-export async function selectDenylistApps() {
+document.getElementById("select-denylist").addEventListener("click", async () => {
     try {
         const result = await execCommand(`magisk --denylist ls 2>/dev/null | awk -F'|' '{print $1}' | grep -v "isolated" | sort | uniq`);
         const denylistApps = result.split("\n").map(app => app.trim()).filter(Boolean);
         const apps = document.querySelectorAll(".card");
-        await deselectAllApps();
+        toggleCheckboxes(false);
         apps.forEach(app => {
             const contentElement = app.querySelector(".content");
             const packageName = contentElement.getAttribute("data-package");
@@ -38,10 +34,10 @@ export async function selectDenylistApps() {
     } catch (error) {
         console.error("Failed to select Denylist apps:", error);
     }
-}
+});
 
 // Function to read the exclude list and uncheck corresponding apps
-export async function deselectUnnecessaryApps() {
+document.getElementById("deselect-unnecessary").addEventListener("click", async () => {
     try {
         const fileCheck = await execCommand(`test -f ${basePath}common/tmp/exclude-list && echo "exists" || echo "not found"`);
         if (fileCheck.trim() === "not found") {
@@ -71,7 +67,7 @@ export async function deselectUnnecessaryApps() {
     } catch (error) {
         console.error("Failed to deselect unnecessary apps:", error);
     }
-}
+});
 
 // Function to replace aosp kb
 export async function aospkb() {
@@ -88,7 +84,7 @@ export async function aospkb() {
 }
 
 // Function to replace valid kb
-export async function extrakb() {
+document.getElementById("extrakb").addEventListener("click", async () => {
     setTimeout(async () => {
         await execCommand(`sh ${basePath}common/get_extra.sh --kb`);
     }, 100);
@@ -108,4 +104,4 @@ export async function extrakb() {
         await aospkb();
         showPrompt("prompt.no_valid_fallback", false);
     }
-}
+});

module/webui/scripts/search_menu.js

@@ -44,10 +44,7 @@ clearBtn.addEventListener("click", () => {
 
 // Function to toggle menu option
 export function setupMenuToggle() {
-    let menuOpen = false;
-    let menuAnimating = false;
     menuButton.addEventListener('click', (event) => {
-        if (menuAnimating) return;
         event.stopPropagation();
         if (menuOptions.classList.contains('visible')) {
             closeMenu();
@@ -73,31 +70,15 @@ export function setupMenuToggle() {
         });
     });
     function openMenu() {
-        menuAnimating = true;
-        menuOptions.style.display = 'block';
         setTimeout(() => {
-            menuOptions.classList.remove('hidden');
             menuOptions.classList.add('visible');
             menuIcon.classList.add('menu-open');
-            menuIcon.classList.remove('menu-closed');
             menuOverlay.style.display = 'flex';
-            menuOpen = true;
-            menuAnimating = false;
         }, 10);
     }
     function closeMenu() {
-        if (menuOptions.classList.contains('visible')) {
-            menuAnimating = true;
-            menuOptions.classList.remove('visible');
-            menuOptions.classList.add('hidden');
-            menuIcon.classList.remove('menu-open');
-            menuIcon.classList.add('menu-closed');
-            menuOverlay.style.display = 'none';
-            setTimeout(() => {
-                menuOptions.style.display = 'none';
-                menuOpen = false;
-                menuAnimating = false;
-            }, 200);
-        }
+        menuOptions.classList.remove('visible');
+        menuIcon.classList.remove('menu-open');
+        menuOverlay.style.display = 'none';
     }
 }

module/webui/scripts/update.js

@@ -0,0 +1,22 @@
+import { basePath, execCommand, showPrompt, noConnection } from './main.js';
+import { updateCard } from './applist.js';
+
+// Function to run the update check
+export async function updateCheck() {
+    try {
+        const output = await execCommand(`sh ${basePath}common/get_extra.sh --update`);
+        console.log("update script executed successfully.");
+        noConnection.style.display = "none";
+        if (output.includes("update")) {
+            console.log("Update detected from extra script.");
+            showPrompt("prompt.new_update");
+            updateCard.style.display = "flex";
+        } else {
+            console.log("No update detected from extra script.");
+        }
+    } catch (error) {
+        console.error("Failed to execute update script:", error);
+        showPrompt("prompt.no_internet", false);
+        noConnection.style.display = "flex";
+    }
+}

module/webui/scripts/vbmeta-digest.js

@@ -6,7 +6,7 @@ const inputBox = document.getElementById('boot-hash-input');
 const saveButton = document.getElementById('boot-hash-save-button');
 
 // Function to handle Verified Boot Hash
-export async function setBootHash() {
+document.getElementById("boot-hash").addEventListener("click", async () => {
     const showCard = () => {
         bootHashOverlay.style.display = "flex";
         card.style.display = "flex";
@@ -51,4 +51,4 @@ export async function setBootHash() {
     bootHashOverlay.addEventListener("click", (event) => {
         if (event.target === bootHashOverlay) closeCard();
     });
-}
+});