Simplify logic, add Material Design ripple effect

This commit is contained in:
KOWX712
2024-12-26 20:52:01 +08:00
parent 10c02a6924
commit 1861e43a81
21 changed files with 190 additions and 184 deletions

View File

@@ -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();
}
});