From 3e92f2a9e6c52b0058e865d8c56a14faa6b27009 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Sun, 8 Sep 2024 14:29:22 -0500 Subject: [PATCH] simplify infinate scroller --- .dist/infiniteScroller.js | 59 +++++++++++++++---------------------- .dist/message.js | 8 ++--- webpage/infiniteScroller.ts | 58 +++++++++++++++--------------------- webpage/message.ts | 8 ++--- webpage/style.css | 1 - 5 files changed, 54 insertions(+), 80 deletions(-) diff --git a/.dist/infiniteScroller.js b/.dist/infiniteScroller.js index 38393d7..039bc33 100644 --- a/.dist/infiniteScroller.js +++ b/.dist/infiniteScroller.js @@ -8,7 +8,6 @@ class InfiniteScroller { maxDist = 6000; HTMLElements = []; div; - scroll; constructor(getIDFromOffset, getHTMLFromID, destroyFromID, reachesBottom = () => { }) { this.getIDFromOffset = getIDFromOffset; this.getHTMLFromID = getHTMLFromID; @@ -17,23 +16,13 @@ class InfiniteScroller { } timeout; async getDiv(initialId, bottom = true) { - const div = document.createElement("div"); - div.classList.add("messagecontainer"); //div.classList.add("flexttb") const scroll = document.createElement("div"); scroll.classList.add("flexttb", "scroller"); - div.appendChild(scroll); - this.div = div; this.beenloaded = false; //this.interval=setInterval(this.updatestuff.bind(this,true),100); - this.scroll = scroll; + this.div = scroll; this.div.addEventListener("scroll", _ => { - this.checkscroll(); - if (this.scroll) - this.scrollTop = this.scroll.scrollTop; - this.watchForChange(); - }); - this.scroll.addEventListener("scroll", _ => { this.checkscroll(); if (this.timeout === null) { this.timeout = setTimeout(this.updatestuff.bind(this), 300); @@ -46,14 +35,14 @@ class InfiniteScroller { this.checkscroll(); const func = this.snapBottom(); this.updatestuff(); - const change = oldheight - div.offsetHeight; - if (change > 0 && this.scroll) { - this.scroll.scrollTop += change; + const change = oldheight - scroll.offsetHeight; + if (change > 0 && this.div) { + this.div.scrollTop += change; } - oldheight = div.offsetHeight; + oldheight = scroll.offsetHeight; this.watchForChange(); func(); - }).observe(div); + }).observe(scroll); } new ResizeObserver(this.watchForChange.bind(this)).observe(scroll); await this.firstElement(initialId); @@ -62,7 +51,7 @@ class InfiniteScroller { this.updatestuff(); this.beenloaded = true; }); - return div; + return scroll; } beenloaded = false; scrollBottom; @@ -70,21 +59,20 @@ class InfiniteScroller { needsupdate = true; averageheight = 60; checkscroll() { - if (this.beenloaded && this.scroll && !document.body.contains(this.scroll)) { - this.scroll = null; + if (this.beenloaded && this.div && !document.body.contains(this.div)) { this.div = null; } } async updatestuff() { this.timeout = null; - if (!this.scroll) + if (!this.div) return; - this.scrollBottom = this.scroll.scrollHeight - this.scroll.scrollTop - this.scroll.clientHeight; - this.averageheight = this.scroll.scrollHeight / this.HTMLElements.length; + this.scrollBottom = this.div.scrollHeight - this.div.scrollTop - this.div.clientHeight; + this.averageheight = this.div.scrollHeight / this.HTMLElements.length; if (this.averageheight < 10) { this.averageheight = 60; } - this.scrollTop = this.scroll.scrollTop; + this.scrollTop = this.div.scrollTop; if (!this.scrollBottom && !await this.watchForChange()) { this.reachesBottom(); } @@ -95,10 +83,10 @@ class InfiniteScroller { //this.watchForChange(); } async firstElement(id) { - if (!this.scroll) + if (!this.div) return; const html = await this.getHTMLFromID(id); - this.scroll.appendChild(html); + this.div.appendChild(html); this.HTMLElements.push([html, id]); } currrunning = false; @@ -111,13 +99,13 @@ class InfiniteScroller { snapBottom() { const scrollBottom = this.scrollBottom; return () => { - if (this.scroll && scrollBottom < 10) { - this.scroll.scrollTop = this.scroll.scrollHeight + 20; + if (this.div && scrollBottom < 10) { + this.div.scrollTop = this.div.scrollHeight + 20; } }; } async watchForTop(already = false, fragement = new DocumentFragment()) { - if (!this.scroll) + if (!this.div) return false; try { let again = false; @@ -157,16 +145,16 @@ class InfiniteScroller { } finally { if (!already) { - if (this.scroll.scrollTop === 0) { + if (this.div.scrollTop === 0) { this.scrollTop = 1; - this.scroll.scrollTop = 10; + this.div.scrollTop = 10; } - this.scroll.prepend(fragement, fragement); + this.div.prepend(fragement, fragement); } } } async watchForBottom(already = false, fragement = new DocumentFragment()) { - if (!this.scroll) + if (!this.div) return false; try { let again = false; @@ -203,9 +191,9 @@ class InfiniteScroller { } finally { if (!already) { - this.scroll.append(fragement); + this.div.append(fragement); if (this.scrollBottom < 30) { - this.scroll.scrollTop = this.scroll.scrollHeight; + this.div.scrollTop = this.div.scrollHeight; } } } @@ -310,7 +298,6 @@ class InfiniteScroller { if (this.div) { this.div.remove(); } - this.scroll = null; this.div = null; } } diff --git a/.dist/message.js b/.dist/message.js index e4ec239..cabb4b2 100644 --- a/.dist/message.js +++ b/.dist/message.js @@ -295,8 +295,8 @@ class Message extends SnowFlake { next.generateMessage(); next = this.channel.messages.get(this.channel.idToNext.get(next.id)); } - if (this.channel.infinite.scroll && scroll) { - this.channel.infinite.scroll.scrollTop = scroll; + if (this.channel.infinite.div && scroll) { + this.channel.infinite.div.scrollTop = scroll; } }; } @@ -329,9 +329,9 @@ class Message extends SnowFlake { next = this.channel.messages.get(this.channel.idToNext.get(next.id)); console.log("loopy"); } - if (this.channel.infinite.scroll && scroll) { + if (this.channel.infinite.div && scroll) { func(); - this.channel.infinite.scroll.scrollTop = scroll; + this.channel.infinite.div.scrollTop = scroll; } }; div.appendChild(build); diff --git a/webpage/infiniteScroller.ts b/webpage/infiniteScroller.ts index e529ce1..90e9bd2 100644 --- a/webpage/infiniteScroller.ts +++ b/webpage/infiniteScroller.ts @@ -8,7 +8,6 @@ class InfiniteScroller{ private readonly maxDist=6000; HTMLElements:[HTMLElement,string][]=[]; div:HTMLDivElement|null; - scroll:HTMLDivElement|null; constructor(getIDFromOffset:InfiniteScroller["getIDFromOffset"],getHTMLFromID:InfiniteScroller["getHTMLFromID"],destroyFromID:InfiniteScroller["destroyFromID"],reachesBottom:InfiniteScroller["reachesBottom"]=()=>{}){ this.getIDFromOffset=getIDFromOffset; this.getHTMLFromID=getHTMLFromID; @@ -17,23 +16,14 @@ class InfiniteScroller{ } timeout:NodeJS.Timeout|null; async getDiv(initialId:string,bottom=true):Promise{ - const div=document.createElement("div"); - div.classList.add("messagecontainer"); //div.classList.add("flexttb") const scroll=document.createElement("div"); scroll.classList.add("flexttb","scroller"); - div.appendChild(scroll); - this.div=div; this.beenloaded=false; //this.interval=setInterval(this.updatestuff.bind(this,true),100); - this.scroll=scroll; + this.div=scroll; this.div.addEventListener("scroll",_=>{ - this.checkscroll(); - if(this.scroll)this.scrollTop=this.scroll.scrollTop; - this.watchForChange(); - }); - this.scroll.addEventListener("scroll",_=>{ this.checkscroll(); if(this.timeout===null){ this.timeout=setTimeout(this.updatestuff.bind(this),300); @@ -47,14 +37,14 @@ class InfiniteScroller{ this.checkscroll(); const func=this.snapBottom(); this.updatestuff(); - const change=oldheight-div.offsetHeight; - if(change>0&&this.scroll){ - this.scroll.scrollTop+=change; + const change=oldheight-scroll.offsetHeight; + if(change>0&&this.div){ + this.div.scrollTop+=change; } - oldheight=div.offsetHeight; + oldheight=scroll.offsetHeight; this.watchForChange(); func(); - }).observe(div); + }).observe(scroll); } new ResizeObserver(this.watchForChange.bind(this)).observe(scroll); @@ -64,7 +54,7 @@ class InfiniteScroller{ this.updatestuff(); this.beenloaded=true; }); - return div; + return scroll; } beenloaded=false; scrollBottom:number; @@ -72,20 +62,19 @@ class InfiniteScroller{ needsupdate=true; averageheight:number=60; checkscroll(){ - if(this.beenloaded&&this.scroll&&!document.body.contains(this.scroll)){ - this.scroll=null; + if(this.beenloaded&&this.div&&!document.body.contains(this.div)){ this.div=null; } } async updatestuff(){ this.timeout=null; - if(!this.scroll)return; - this.scrollBottom = this.scroll.scrollHeight - this.scroll.scrollTop - this.scroll.clientHeight; - this.averageheight=this.scroll.scrollHeight/this.HTMLElements.length; + if(!this.div)return; + this.scrollBottom = this.div.scrollHeight - this.div.scrollTop - this.div.clientHeight; + this.averageheight=this.div.scrollHeight/this.HTMLElements.length; if(this.averageheight<10){ this.averageheight=60; } - this.scrollTop=this.scroll.scrollTop; + this.scrollTop=this.div.scrollTop; if(!this.scrollBottom && !await this.watchForChange()){ this.reachesBottom(); } @@ -96,9 +85,9 @@ class InfiniteScroller{ //this.watchForChange(); } async firstElement(id:string){ - if(!this.scroll)return; + if(!this.div)return; const html=await this.getHTMLFromID(id); - this.scroll.appendChild(html); + this.div.appendChild(html); this.HTMLElements.push([html,id]); } currrunning:boolean=false; @@ -111,13 +100,13 @@ class InfiniteScroller{ snapBottom(){ const scrollBottom=this.scrollBottom; return()=>{ - if(this.scroll&&scrollBottom<10){ - this.scroll.scrollTop=this.scroll.scrollHeight+20; + if(this.div&&scrollBottom<10){ + this.div.scrollTop=this.div.scrollHeight+20; } }; } private async watchForTop(already=false,fragement=new DocumentFragment()):Promise{ - if(!this.scroll)return false; + if(!this.div)return false; try{ let again=false; if(this.scrollTop<(already?this.fillDist:this.minDist)){ @@ -157,16 +146,16 @@ class InfiniteScroller{ return again; }finally{ if(!already){ - if(this.scroll.scrollTop===0){ + if(this.div.scrollTop===0){ this.scrollTop=1; - this.scroll.scrollTop=10; + this.div.scrollTop=10; } - this.scroll.prepend(fragement,fragement); + this.div.prepend(fragement,fragement); } } } async watchForBottom(already=false,fragement=new DocumentFragment()):Promise{ - if(!this.scroll)return false; + if(!this.div)return false; try{ let again=false; const scrollBottom = this.scrollBottom; @@ -200,9 +189,9 @@ class InfiniteScroller{ return again; }finally{ if(!already){ - this.scroll.append(fragement); + this.div.append(fragement); if(this.scrollBottom<30){ - this.scroll.scrollTop=this.scroll.scrollHeight; + this.div.scrollTop=this.div.scrollHeight; } } } @@ -300,7 +289,6 @@ class InfiniteScroller{ if(this.div){ this.div.remove(); } - this.scroll=null; this.div=null; } } diff --git a/webpage/message.ts b/webpage/message.ts index 34c077d..664baf3 100644 --- a/webpage/message.ts +++ b/webpage/message.ts @@ -291,8 +291,8 @@ class Message extends SnowFlake{ next.generateMessage(); next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string); } - if(this.channel.infinite.scroll&&scroll){ - this.channel.infinite.scroll.scrollTop=scroll; + if(this.channel.infinite.div&&scroll){ + this.channel.infinite.div.scrollTop=scroll; } }; } @@ -323,9 +323,9 @@ class Message extends SnowFlake{ next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string); console.log("loopy"); } - if(this.channel.infinite.scroll&&scroll){ + if(this.channel.infinite.div&&scroll){ func(); - this.channel.infinite.scroll.scrollTop=scroll; + this.channel.infinite.div.scrollTop=scroll; } }; div.appendChild(build); diff --git a/webpage/style.css b/webpage/style.css index b792cee..a8cdbfc 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1523,7 +1523,6 @@ span { } .scroller{ padding-bottom: .2in; - flex-shrink: 0; flex-grow: 0; } .suberror{