Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2026-01-29 05:40:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add animation for skip to highlight on mobile

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-21 21:58:43 -04:00
parent c803ae9499
commit 0647576d6f
3 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/utils.ts
View File

@@ -183,7 +183,7 @@ export default class Utils {
}
}
setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
setupCustomHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): { hide: () => void, show: () => void } {
if (enabled) element.classList.add("autoHiding");
element.classList.add("hidden");
element.classList.add("animationDone");
@@ -191,22 +191,30 @@ export default class Utils {
let mouseEntered = false;
container.addEventListener("mouseenter", () => {
mouseEntered = true;
element.classList.remove("animationDone");
// Wait for next event loop
setTimeout(() => {
if (mouseEntered) element.classList.remove("hidden")
}, 10);
});
container.addEventListener("mouseleave", () => {
mouseEntered = false;
if (element.classList.contains("autoHiding")) {
element.classList.add("hidden");
return {
hide: () => {
mouseEntered = false;
if (element.classList.contains("autoHiding")) {
element.classList.add("hidden");
}
},
show: () => {
mouseEntered = true;
element.classList.remove("animationDone");
// Wait for next event loop
setTimeout(() => {
if (mouseEntered) element.classList.remove("hidden")
}, 10);
}
});
};
}
setupAutoHideAnimation(element: Element, container: Element, enabled = true, rightSlide = true): void {
const { hide, show } = this.setupCustomHideAnimation(element, container, enabled, rightSlide);
container.addEventListener("mouseleave", () => hide());
container.addEventListener("mouseenter", () => show());
}
enableAutoHideAnimation(element: Element): void {