widgets scrollbar + little refactor

This commit is contained in:
Freeplay 2023-06-12 14:59:54 -04:00
parent d778f6ad77
commit 79f9398ca3
3 changed files with 22 additions and 77 deletions

View File

@ -1,59 +0,0 @@
export class StickySidebar {
private lastScrollTop = 0;
private container: HTMLElement;
private el: HTMLElement;
private isTop = false;
private isBottom = false;
private offsetTop: number;
constructor(
container: StickySidebar["container"],
) {
this.container = container;
this.container.style.display = "flex";
this.el = this.container.children[0] as HTMLElement;
this.el.style.position = "sticky";
this.offsetTop = this.container.getBoundingClientRect().top;
}
public calc(scrollTop: number) {
if (scrollTop > this.lastScrollTop) {
// downscroll
this.isTop = false;
this.isBottom =
scrollTop + window.innerHeight >
this.el.offsetTop + this.el.clientHeight;
} else {
// upscroll
this.isBottom = false;
this.isTop = scrollTop < this.el.offsetTop + 1;
}
if (this.isTop) {
if (this.el.style.alignSelf != "flex-start") {
this.el.style.position = "sticky";
this.el.style.bottom = null;
this.el.style.top = "0px";
this.el.style.alignSelf = "flex-start";
console.log("top");
}
this.offsetTop = scrollTop;
} else if (this.isBottom) {
if (this.el.style.alignSelf != "flex-end") {
this.el.style.position = "sticky";
this.el.style.bottom = "0px";
this.el.style.top = null;
this.el.style.alignSelf = "flex-end";
console.log("bottom");
}
this.offsetTop = window.innerHeight + scrollTop - this.el.scrollHeight;
} else {
this.el.style.position = "relative";
this.el.style.top = this.offsetTop + "px";
this.el.style.bottom = null;
this.el.style.alignSelf = null;
}
this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}
}

View File

@ -101,6 +101,13 @@ body::-webkit-scrollbar-thumb {
}
}
.hide-scrollbar {
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
html._themeChanging_ {
&, *, ::before, ::after {
transition: background 1s ease, border 1s ease !important;

View File

@ -3,7 +3,7 @@
class="dkgtipfy"
:class="{ wallpaper, isMobile, centered: ui === 'classic' }"
>
<XSidebar v-if="!isMobile" class="sidebar" />
<XSidebar v-if="!isMobile" />
<MkStickyContainer class="contents">
<template #header
@ -168,7 +168,6 @@ import * as Acct from "calckey-js/built/acct";
import type { ComputedRef } from "vue";
import type { PageMetadata } from "@/scripts/page-metadata";
import { instanceName, ui } from "@/config";
import { StickySidebar } from "@/scripts/sticky-sidebar";
import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
import XSidebar from "@/ui/_common_/navbar.vue";
import * as os from "@/os";
@ -250,8 +249,6 @@ mainRouter.on("change", () => {
updateButtonState();
});
document.documentElement.style.overflowY = "scroll";
if (defaultStore.state.widgets.length === 0) {
defaultStore.set("widgets", [
{
@ -334,14 +331,10 @@ async function startGroup(): void {
onMounted(() => {
if (!isDesktop.value) {
window.addEventListener(
"resize",
() => {
if (window.innerWidth >= DESKTOP_THRESHOLD)
isDesktop.value = true;
},
{ passive: true }
);
matchMedia(`(min-width: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => {
if (mql.matches)
isDesktop.value = true;
}
}
});
@ -384,14 +377,22 @@ const attachSticky = (el: any) => {
let lastScrollTop = 0;
addEventListener(
"scroll",
(ev) => {
() => {
requestAnimationFrame(() => {
widgetsEl.scrollTop += window.scrollY - lastScrollTop;
lastScrollTop = window.scrollY <= 0 ? 0 : window.scrollY;
lastScrollTop = window.scrollY;
});
},
{ passive: true }
);
widgetsEl.classList.add("hide-scrollbar");
widgetsEl.onmouseenter = () => {
if (document.documentElement.scrollHeight <= window.innerHeight) {
widgetsEl.classList.remove("hide-scrollbar");
} else {
widgetsEl.classList.add("hide-scrollbar");
}
}
};
function top() {
@ -572,10 +573,6 @@ console.log(mainRouter.currentRoute.value.name);
width: 300px;
min-width: max-content;
box-sizing: content-box;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
@media (max-width: $widgets-hide-threshold) {
display: none;