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
module/webui/scripts/search_menu.js
+30 -46
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);
});
});
}