mirror of
https://github.com/liyunze-coding/rython-task-bot-v2.git
synced 2026-09-22 07:24:27 +00:00
Add files via upload
Added horizontal scolling to task list
This commit is contained in:
parent
abb3f5f7a0
commit
fc9a052473
1 changed files with 20 additions and 19 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue