br0kenpixel/Tricky-Addon-Update-Target-List
1
0
Fork 0
mirror of https://github.com/KOWX712/Tricky-Addon-Update-Target-List.git synced 2025-09-06 06:37:09 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

opt: ripple animation

Browse Source
This commit is contained in:
KOWX712
2025-04-10 14:39:39 +08:00
parent 98ed78cebb
commit 3b355ac5ff
3 changed files with 47 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
module/webui/scripts/language.js
View File

@@ -80,7 +80,8 @@ export function setupLanguageMenu() {
if (isVisible) {
closeLanguageMenu();
} else {
openLanguageMenu();
languageOverlay.style.display = 'flex';
setTimeout(() => languageMenu.classList.add("show"), 10);
}
});
document.addEventListener("click", (event) => {
@@ -98,13 +99,7 @@ export function setupLanguageMenu() {
closeLanguageMenu();
}
});
function openLanguageMenu() {
languageOverlay.style.display = 'flex';
setTimeout(() => {
languageMenu.classList.add("show");
}, 10);
}
function closeLanguageMenu() {
const closeLanguageMenu = () => {
languageMenu.classList.remove("show");
languageOverlay.style.display = 'none';
}

26
module/webui/scripts/main.js
View File

@@ -243,7 +243,20 @@ export function hideFloatingBtn(hide = true) {
export function applyRippleEffect() {
document.querySelectorAll('.ripple-element').forEach(element => {
if (element.dataset.rippleListener !== "true") {
element.addEventListener("pointerdown", function (event) {
element.addEventListener("pointerdown", async (event) => {
const handlePointerUp = () => {
ripple.classList.add("end");
setTimeout(() => {
ripple.classList.remove("end");
ripple.remove();
}, duration * 1000);
element.removeEventListener("pointerup", handlePointerUp);
element.removeEventListener("pointercancel", handlePointerUp);
};
element.addEventListener("pointerup", () => setTimeout(handlePointerUp, 80));
element.addEventListener("pointercancel", () => setTimeout(handlePointerUp, 80));
await new Promise(resolve => setTimeout(resolve, 80));
if (isScrolling) return;
const ripple = document.createElement("span");
ripple.classList.add("ripple");
@@ -280,17 +293,6 @@ export function applyRippleEffect() {
// Append ripple and handle cleanup
element.appendChild(ripple);
const handlePointerUp = () => {
ripple.classList.add("end");
setTimeout(() => {
ripple.classList.remove("end");
ripple.remove();
}, duration * 1000);
element.removeEventListener("pointerup", handlePointerUp);
element.removeEventListener("pointercancel", handlePointerUp);
};
element.addEventListener("pointerup", handlePointerUp);
element.addEventListener("pointercancel", handlePointerUp);
});
element.dataset.rippleListener = "true";
}

76
module/webui/scripts/search_menu.js
View File

@@ -4,16 +4,13 @@ const searchCard = document.querySelector('.search-card');
export const searchInput = document.getElementById('search');
export const clearBtn = document.getElementById('clear-btn');
export const searchMenuContainer = document.querySelector('.search-menu-container');
const menu = document.querySelector('.menu');
const menuButton = document.getElementById('menu-button');
const menuOptions = document.getElementById('menu-options');
const menuOverlay = document.getElementById('menu-overlay');
const menuIcon = menuButton.querySelector('.menu-icon');
// Focus on search input when search card is clicked
searchCard.addEventListener("click", () => {
searchInput.focus();
});
searchCard.addEventListener("click", () => searchInput.focus());
// Search functionality
searchInput.addEventListener("input", (e) => {
@@ -24,11 +21,8 @@ searchInput.addEventListener("input", (e) => {
app.style.display = name.includes(searchQuery) ? "block" : "none";
window.scrollTo(0, 0);
});
if (searchQuery !== "") {
clearBtn.style.display = "block";
} else {
clearBtn.style.display = "none";
}
if (searchQuery !== "") clearBtn.style.display = "block";
else clearBtn.style.display = "none";
});
// Clear search input
@@ -37,48 +31,38 @@ clearBtn.addEventListener("click", () => {
clearBtn.style.display = "none";
window.scrollTo(0, 0);
const apps = appListContainer.querySelectorAll(".card");
apps.forEach(app => {
app.style.display = "block";
});
apps.forEach(app => app.style.display = "block");
});
// Function to toggle menu option
export function setupMenuToggle() {
menuButton.addEventListener('click', (event) => {
event.stopPropagation();
if (menuOptions.classList.contains('visible')) {
closeMenu();
} else {
openMenu();
}
});
document.addEventListener('click', (event) => {
if (!menuOptions.contains(event.target) && event.target !== menuButton) {
closeMenu();
}
});
window.addEventListener('scroll', () => {
if (menuOptions.classList.contains('visible')) {
closeMenu();
}
});
const menuOptionsList = document.querySelectorAll('#menu-options li');
menuOptionsList.forEach(option => {
option.addEventListener('click', (event) => {
event.stopPropagation();
closeMenu();
});
});
function openMenu() {
setTimeout(() => {
menuOptions.classList.add('visible');
menuIcon.classList.add('menu-open');
menuOverlay.style.display = 'flex';
}, 10);
}
function closeMenu() {
const closeMenu = () => {
menuOptions.classList.remove('visible');
menuIcon.classList.remove('menu-open');
menuOverlay.style.display = 'none';
}
}
menuButton.addEventListener('click', () => {
if (menuOptions.classList.contains('visible')) {
closeMenu();
} else {
setTimeout(() => {
menuOptions.classList.add('visible');
menuIcon.classList.add('menu-open');
menuOverlay.style.display = 'flex';
}, 10);
}
});
document.addEventListener('click', (event) => {
if (!menuOptions.contains(event.target) && event.target !== menuButton) closeMenu();
});
window.addEventListener('scroll', () => {
if (menuOptions.classList.contains('visible')) closeMenu();
});
const menuOptionsList = document.querySelectorAll('#menu-options li');
menuOptionsList.forEach(option => {
option.addEventListener('click', () => {
setTimeout(() => closeMenu(), 80);
});
});
}