Merge pull request #1 from EthanhByers/main

Added horizontal scolling to task list
This commit is contained in:
RythonDev 2026-08-02 15:28:48 +10:00 committed by GitHub
commit 9eb9ea5e5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -7,9 +7,9 @@ class TaskList {
#scroll = { #scroll = {
offset: 0, offset: 0,
contentH: 0, contentW: 0,
viewportH: 0, viewportW: 0,
speed: 50, speed: 35,
raf: null, raf: null,
lastT: 0, lastT: 0,
active: false, active: false,
@ -228,22 +228,22 @@ class TaskList {
#animateIn(el) { #animateIn(el) {
el.style.overflow = "hidden"; el.style.overflow = "hidden";
const h = el.scrollHeight; const w = el.scrollWidth;
el.style.height = "0px"; el.style.width = "0px";
el.style.opacity = "0"; el.style.opacity = "0";
requestAnimationFrame(() => { requestAnimationFrame(() => {
const anim = el.animate( const anim = el.animate(
[ [
{ {
height: "0px", width: "0px",
opacity: 0, opacity: 0,
transform: "translateX(-8px)", transform: "translateY(-8px)",
}, },
{ {
height: h + "px", width: w + "px",
opacity: 1, opacity: 1,
transform: "translateX(0)", transform: "translateY(0)",
}, },
], ],
{ {
@ -254,7 +254,7 @@ class TaskList {
); );
anim.onfinish = () => { anim.onfinish = () => {
el.style.height = ""; el.style.width = "";
el.style.opacity = ""; el.style.opacity = "";
el.style.overflow = ""; el.style.overflow = "";
el.style.transform = ""; el.style.transform = "";
@ -300,6 +300,7 @@ class TaskList {
); );
} }
// ── dom helpers ──────────────────────────────────── // ── dom helpers ────────────────────────────────────
#parseTaskText(text) { #parseTaskText(text) {
@ -449,11 +450,11 @@ class TaskList {
s.lastT = now; s.lastT = now;
if (dt < 0.2) { if (dt < 0.2) {
s.contentH = this.#els.content.scrollHeight; s.contentW = this.#els.content.scrollWidth;
s.offset += s.speed * dt; s.offset += s.speed * dt;
if (s.contentH > 0 && s.offset >= s.contentH) { if (s.contentW > 0 && s.offset >= s.contentW) {
s.offset -= s.contentH; s.offset -= s.contentW;
if (s.wantStop) { if (s.wantStop) {
s.wantStop = false; s.wantStop = false;
@ -462,7 +463,7 @@ class TaskList {
} }
} }
this.#els.track.style.transform = `translateY(${-s.offset}px)`; this.#els.track.style.transform = `translateX(${-s.offset}px)`;
} }
s.raf = requestAnimationFrame(this.#tick); s.raf = requestAnimationFrame(this.#tick);
@ -497,9 +498,9 @@ class TaskList {
#syncScroll() { #syncScroll() {
const s = this.#scroll; const s = this.#scroll;
s.contentH = this.#els.content.scrollHeight; s.contentW = this.#els.content.scrollWidth;
s.viewportH = this.#els.viewport.clientHeight; s.viewportW = this.#els.viewport.clientWidth;
const needs = s.contentH > s.viewportH; const needs = s.contentW > s.viewportW;
let clone = this.#els.track.querySelector(".scroll-clone"); let clone = this.#els.track.querySelector(".scroll-clone");
@ -512,8 +513,8 @@ class TaskList {
} else { } else {
this.#patchContainer(clone, this.#data, false); this.#patchContainer(clone, this.#data, false);
} }
if (s.offset >= s.contentH) { if (s.offset >= s.contentW) {
s.offset %= s.contentH; s.offset %= s.contentW;
} }
this.#startScroll(); this.#startScroll();
} else { } else {