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

misc: better ripple animation workflow

Browse Source
This commit is contained in:
KOWX712
2025-05-05 21:36:05 +08:00
parent 8c4f7c0e5c
commit 395c6c276d
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -204,11 +204,17 @@ export function hideFloatingBtn(hide = true) {
else floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom, 0px) + 120px))'; else floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom, 0px) + 120px))';
} }
// Function to apply ripple effect /**
* Simulate MD3 ripple animation
* Usage: class="ripple-element" style="position: relative; overflow: hidden;"
* Note: Require background-color to work properly
* @return {void}
*/
export function applyRippleEffect() { export function applyRippleEffect() {
document.querySelectorAll('.ripple-element').forEach(element => { document.querySelectorAll('.ripple-element').forEach(element => {
if (element.dataset.rippleListener !== "true") { if (element.dataset.rippleListener !== "true") {
element.addEventListener("pointerdown", async (event) => { element.addEventListener("pointerdown", async (event) => {
// Pointer up event
const handlePointerUp = () => { const handlePointerUp = () => {
ripple.classList.add("end"); ripple.classList.add("end");
setTimeout(() => { setTimeout(() => {
@@ -221,8 +227,6 @@ export function applyRippleEffect() {
element.addEventListener("pointerup", () => setTimeout(handlePointerUp, 80)); element.addEventListener("pointerup", () => setTimeout(handlePointerUp, 80));
element.addEventListener("pointercancel", () => setTimeout(handlePointerUp, 80)); element.addEventListener("pointercancel", () => setTimeout(handlePointerUp, 80));
await new Promise(resolve => setTimeout(resolve, 80));
if (isScrolling) return;
const ripple = document.createElement("span"); const ripple = document.createElement("span");
ripple.classList.add("ripple"); ripple.classList.add("ripple");
@@ -247,7 +251,6 @@ export function applyRippleEffect() {
// Adaptive color // Adaptive color
const computedStyle = window.getComputedStyle(element); const computedStyle = window.getComputedStyle(element);
const bgColor = computedStyle.backgroundColor || "rgba(0, 0, 0, 0)"; const bgColor = computedStyle.backgroundColor || "rgba(0, 0, 0, 0)";
const textColor = computedStyle.color;
const isDarkColor = (color) => { const isDarkColor = (color) => {
const rgb = color.match(/\d+/g); const rgb = color.match(/\d+/g);
if (!rgb) return false; if (!rgb) return false;
@@ -256,7 +259,9 @@ export function applyRippleEffect() {
}; };
ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : ""; ripple.style.backgroundColor = isDarkColor(bgColor) ? "rgba(255, 255, 255, 0.2)" : "";
// Append ripple and handle cleanup // Append ripple if not scrolling
await new Promise(resolve => setTimeout(resolve, 80));
if (isScrolling) return;
element.appendChild(ripple); element.appendChild(ripple);
}); });
element.dataset.rippleListener = "true"; element.dataset.rippleListener = "true";