wip

frontend/src/index.html

@@ -21,11 +21,11 @@
         <div class="bar"></div>
       </div>
     </div>
-    <div class="content-grid scrollToTopContainer">
+    <!-- <div class="content-grid scrollToTopContainer">
       <div class="scrollToTopButton invisible breakout">
         <i class="fas fa-angle-double-up"></i>
       </div>
-    </div>
+    </div> -->
     <div id="popups">
       <load src="html/popups.html" />
     </div>

frontend/src/styles/core.scss

@@ -256,37 +256,6 @@ key {
   visibility: hidden !important;
 }
 
-.scrollToTopContainer {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 99999999;
-
-  .scrollToTopButton {
-    pointer-events: all;
-    place-self: end end;
-    margin-bottom: 2rem;
-    font-size: 2rem;
-    width: 4rem;
-    height: 4rem;
-    text-align: center;
-
-    line-height: 4rem;
-    background: var(--sub-alt-color);
-    border-radius: 99rem;
-    outline: 0.5rem solid var(--bg-color);
-
-    cursor: pointer;
-    color: var(--sub-color);
-    transition: 0.25s;
-    &:hover {
-      background: var(--text-color);
-      color: var(--bg-color);
-    }
-  }
-}
-
 .inputAndIndicator {
   input {
     width: 100%;

frontend/src/ts/components/ScrollToTop.module.scss

@@ -0,0 +1,32 @@
+.container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 99999999;
+  top: 0;
+  left: 0;
+
+  .button {
+    pointer-events: all;
+    place-self: end end;
+    margin-bottom: 2rem;
+    font-size: 2rem;
+    width: 4rem;
+    height: 4rem;
+    text-align: center;
+
+    line-height: 4rem;
+    background: var(--sub-alt-color);
+    border-radius: 99rem;
+    outline: 0.5rem solid var(--bg-color);
+
+    cursor: pointer;
+    color: var(--sub-color);
+    transition: 0.25s;
+    &:hover {
+      background: var(--text-color);
+      color: var(--bg-color);
+    }
+  }
+}

frontend/src/ts/components/ScrollToTop.tsx

@@ -0,0 +1,46 @@
+import { JSXElement, createSignal, onMount, onCleanup } from "solid-js";
+import * as ActivePage from "../states/active-page";
+import styles from "./ScrollToTop.module.scss";
+
+export function hideScrollToTop(): void {
+  // setVisible(false);
+}
+
+export function ScrollToTop(): JSXElement {
+  const [visible, setVisible] = createSignal(false);
+  const handleScroll = () => {
+    const page = ActivePage.get();
+    if (page === "test") return;
+
+    const scroll = window.scrollY;
+    setVisible(scroll > 100);
+  };
+
+  onMount(() => {
+    window.addEventListener("scroll", handleScroll, { passive: true });
+  });
+
+  onCleanup(() => {
+    window.removeEventListener("scroll", handleScroll);
+  });
+
+  return (
+    <div class={`content-grid ${styles["container"]}`}>
+      <div
+        class={`breakout ${styles["button"]}`}
+        classList={{
+          invisible: !visible(),
+        }}
+        onClick={() => {
+          setVisible(false);
+          window.scrollTo({
+            top: 0,
+            behavior: "instant",
+          });
+        }}
+      >
+        <i class="fas fa-angle-double-up"></i>
+      </div>
+    </div>
+  );
+}

frontend/src/ts/components/mount.tsx

@@ -2,9 +2,11 @@ import { render } from "solid-js/web";
 import { isDevEnvironment } from "../utils/misc";
 import { SolidTest } from "../components/SolidTest";
 import { qsr } from "../utils/dom";
+import { ScrollToTop } from "./ScrollToTop";
 
 export function mountComponents(): void {
   if (isDevEnvironment()) {
     render(() => <SolidTest />, qsr("#solidTest").native);
   }
+  render(ScrollToTop, qsr("body").native);
 }

frontend/src/ts/elements/scroll-to-top.ts

@@ -1,37 +0,0 @@
-import * as ActivePage from "../states/active-page";
-import { prefersReducedMotion } from "../utils/misc";
-import { qsr } from "../utils/dom";
-
-let visible = false;
-
-const button = qsr(".scrollToTopButton");
-
-export function hide(): void {
-  button.addClass("invisible");
-  visible = false;
-}
-
-function show(): void {
-  button.removeClass("invisible");
-  visible = true;
-}
-
-button.on("click", () => {
-  button.addClass("invisible");
-  window.scrollTo({
-    top: 0,
-    behavior: prefersReducedMotion() ? "instant" : "smooth",
-  });
-});
-
-window.addEventListener("scroll", () => {
-  const page = ActivePage.get();
-  if (page === "test") return;
-
-  const scroll = window.scrollY;
-  if (!visible && scroll > 100) {
-    show();
-  } else if (visible && scroll < 100) {
-    hide();
-  }
-});

frontend/src/ts/index.ts

@@ -30,7 +30,6 @@ import "./input/listeners";
 import "./ready";
 import "./controllers/route-controller";
 import "./pages/about";
-import "./elements/scroll-to-top";
 import * as Account from "./pages/account";
 import "./elements/no-css";
 import { egVideoListener } from "./popups/video-ad-popup";

frontend/src/ts/pages/test.ts

@@ -7,9 +7,9 @@ import { updateFooterAndVerticalAds } from "../controllers/ad-controller";
 import * as ModesNotice from "../elements/modes-notice";
 import * as Keymap from "../elements/keymap";
 import * as TestConfig from "../test/test-config";
-import * as ScrollToTop from "../elements/scroll-to-top";
 import { blurInputElement } from "../input/input-element";
 import { qsr } from "../utils/dom";
+import { hideScrollToTop } from "../components/ScrollToTop";
 
 export const page = new Page({
   id: "test",
@@ -36,6 +36,6 @@ export const page = new Page({
     });
     void TestConfig.instantUpdate();
     void Keymap.refresh();
-    ScrollToTop.hide();
+    hideScrollToTop();
   },
 });