Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

simplify infinate scroller

Browse source
This commit is contained in:
MathMan05 2024-09-08 14:29:22 -05:00
parent c2c0e08b03
commit 3e92f2a9e6
5 changed files with 54 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

59
.dist/infiniteScroller.js
View file

@ -8,7 +8,6 @@ class InfiniteScroller {
maxDist = 6000; maxDist = 6000;
HTMLElements = []; HTMLElements = [];
div; div;
scroll;
constructor(getIDFromOffset, getHTMLFromID, destroyFromID, reachesBottom = () => { }) { constructor(getIDFromOffset, getHTMLFromID, destroyFromID, reachesBottom = () => { }) {
this.getIDFromOffset = getIDFromOffset; this.getIDFromOffset = getIDFromOffset;
this.getHTMLFromID = getHTMLFromID; this.getHTMLFromID = getHTMLFromID;
@ -17,23 +16,13 @@ class InfiniteScroller {
} }
timeout; timeout;
async getDiv(initialId, bottom = true) { async getDiv(initialId, bottom = true) {
const div = document.createElement("div");
div.classList.add("messagecontainer");
//div.classList.add("flexttb") //div.classList.add("flexttb")
const scroll = document.createElement("div"); const scroll = document.createElement("div");
scroll.classList.add("flexttb", "scroller"); scroll.classList.add("flexttb", "scroller");
div.appendChild(scroll);
this.div = div;
this.beenloaded = false; this.beenloaded = false;
//this.interval=setInterval(this.updatestuff.bind(this,true),100); //this.interval=setInterval(this.updatestuff.bind(this,true),100);
this.scroll = scroll; this.div = scroll;
this.div.addEventListener("scroll", _ => { this.div.addEventListener("scroll", _ => {
this.checkscroll();
if (this.scroll)
this.scrollTop = this.scroll.scrollTop;
this.watchForChange();
});
this.scroll.addEventListener("scroll", _ => {
this.checkscroll(); this.checkscroll();
if (this.timeout === null) { if (this.timeout === null) {
this.timeout = setTimeout(this.updatestuff.bind(this), 300); this.timeout = setTimeout(this.updatestuff.bind(this), 300);
@ -46,14 +35,14 @@ class InfiniteScroller {
this.checkscroll(); this.checkscroll();
const func = this.snapBottom(); const func = this.snapBottom();
this.updatestuff(); this.updatestuff();
const change = oldheight - div.offsetHeight; const change = oldheight - scroll.offsetHeight;
if (change > 0 && this.scroll) { if (change > 0 && this.div) {
this.scroll.scrollTop += change; this.div.scrollTop += change;
} }
oldheight = div.offsetHeight; oldheight = scroll.offsetHeight;
this.watchForChange(); this.watchForChange();
func(); func();
}).observe(div); }).observe(scroll);
} }
new ResizeObserver(this.watchForChange.bind(this)).observe(scroll); new ResizeObserver(this.watchForChange.bind(this)).observe(scroll);
await this.firstElement(initialId); await this.firstElement(initialId);
@ -62,7 +51,7 @@ class InfiniteScroller {
this.updatestuff(); this.updatestuff();
this.beenloaded = true; this.beenloaded = true;
}); });
return div; return scroll;
} }
beenloaded = false; beenloaded = false;
scrollBottom; scrollBottom;
@ -70,21 +59,20 @@ class InfiniteScroller {
needsupdate = true; needsupdate = true;
averageheight = 60; averageheight = 60;
checkscroll() { checkscroll() {
if (this.beenloaded && this.scroll && !document.body.contains(this.scroll)) { if (this.beenloaded && this.div && !document.body.contains(this.div)) {
this.scroll = null;
this.div = null; this.div = null;
} }
} }
async updatestuff() { async updatestuff() {
this.timeout = null; this.timeout = null;
if (!this.scroll) if (!this.div)
return; return;
this.scrollBottom = this.scroll.scrollHeight - this.scroll.scrollTop - this.scroll.clientHeight; this.scrollBottom = this.div.scrollHeight - this.div.scrollTop - this.div.clientHeight;
this.averageheight = this.scroll.scrollHeight / this.HTMLElements.length; this.averageheight = this.div.scrollHeight / this.HTMLElements.length;
if (this.averageheight < 10) { if (this.averageheight < 10) {
this.averageheight = 60; this.averageheight = 60;
} }
this.scrollTop = this.scroll.scrollTop; this.scrollTop = this.div.scrollTop;
if (!this.scrollBottom && !await this.watchForChange()) { if (!this.scrollBottom && !await this.watchForChange()) {
this.reachesBottom(); this.reachesBottom();
} }
@ -95,10 +83,10 @@ class InfiniteScroller {
//this.watchForChange(); //this.watchForChange();
} }
async firstElement(id) { async firstElement(id) {
if (!this.scroll) if (!this.div)
return; return;
const html = await this.getHTMLFromID(id); const html = await this.getHTMLFromID(id);
this.scroll.appendChild(html); this.div.appendChild(html);
this.HTMLElements.push([html, id]); this.HTMLElements.push([html, id]);
} }
currrunning = false; currrunning = false;
@ -111,13 +99,13 @@ class InfiniteScroller {
snapBottom() { snapBottom() {
const scrollBottom = this.scrollBottom; const scrollBottom = this.scrollBottom;
return () => { return () => {
if (this.scroll && scrollBottom < 10) { if (this.div && scrollBottom < 10) {
this.scroll.scrollTop = this.scroll.scrollHeight + 20; this.div.scrollTop = this.div.scrollHeight + 20;
} }
}; };
} }
async watchForTop(already = false, fragement = new DocumentFragment()) { async watchForTop(already = false, fragement = new DocumentFragment()) {
if (!this.scroll) if (!this.div)
return false; return false;
try { try {
let again = false; let again = false;
@ -157,16 +145,16 @@ class InfiniteScroller {
} }
finally { finally {
if (!already) { if (!already) {
if (this.scroll.scrollTop === 0) { if (this.div.scrollTop === 0) {
this.scrollTop = 1; 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()) { async watchForBottom(already = false, fragement = new DocumentFragment()) {
if (!this.scroll) if (!this.div)
return false; return false;
try { try {
let again = false; let again = false;
@ -203,9 +191,9 @@ class InfiniteScroller {
} }
finally { finally {
if (!already) { if (!already) {
this.scroll.append(fragement); this.div.append(fragement);
if (this.scrollBottom < 30) { 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) { if (this.div) {
this.div.remove(); this.div.remove();
} }
this.scroll = null;
this.div = null; this.div = null;
} }
} }

8
.dist/message.js
View file

@ -295,8 +295,8 @@ class Message extends SnowFlake {
next.generateMessage(); next.generateMessage();
next = this.channel.messages.get(this.channel.idToNext.get(next.id)); next = this.channel.messages.get(this.channel.idToNext.get(next.id));
} }
if (this.channel.infinite.scroll && scroll) { if (this.channel.infinite.div && scroll) {
this.channel.infinite.scroll.scrollTop = 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)); next = this.channel.messages.get(this.channel.idToNext.get(next.id));
console.log("loopy"); console.log("loopy");
} }
if (this.channel.infinite.scroll && scroll) { if (this.channel.infinite.div && scroll) {
func(); func();
this.channel.infinite.scroll.scrollTop = scroll; this.channel.infinite.div.scrollTop = scroll;
} }
}; };
div.appendChild(build); div.appendChild(build);

58
webpage/infiniteScroller.ts
View file

@ -8,7 +8,6 @@ class InfiniteScroller{
private readonly maxDist=6000; private readonly maxDist=6000;
HTMLElements:[HTMLElement,string][]=[]; HTMLElements:[HTMLElement,string][]=[];
div:HTMLDivElement|null; div:HTMLDivElement|null;
scroll:HTMLDivElement|null;
constructor(getIDFromOffset:InfiniteScroller["getIDFromOffset"],getHTMLFromID:InfiniteScroller["getHTMLFromID"],destroyFromID:InfiniteScroller["destroyFromID"],reachesBottom:InfiniteScroller["reachesBottom"]=()=>{}){ constructor(getIDFromOffset:InfiniteScroller["getIDFromOffset"],getHTMLFromID:InfiniteScroller["getHTMLFromID"],destroyFromID:InfiniteScroller["destroyFromID"],reachesBottom:InfiniteScroller["reachesBottom"]=()=>{}){
this.getIDFromOffset=getIDFromOffset; this.getIDFromOffset=getIDFromOffset;
this.getHTMLFromID=getHTMLFromID; this.getHTMLFromID=getHTMLFromID;
@ -17,23 +16,14 @@ class InfiniteScroller{
} }
timeout:NodeJS.Timeout|null; timeout:NodeJS.Timeout|null;
async getDiv(initialId:string,bottom=true):Promise<HTMLDivElement>{ async getDiv(initialId:string,bottom=true):Promise<HTMLDivElement>{
const div=document.createElement("div");
div.classList.add("messagecontainer");
//div.classList.add("flexttb") //div.classList.add("flexttb")
const scroll=document.createElement("div"); const scroll=document.createElement("div");
scroll.classList.add("flexttb","scroller"); scroll.classList.add("flexttb","scroller");
div.appendChild(scroll);
this.div=div;
this.beenloaded=false; this.beenloaded=false;
//this.interval=setInterval(this.updatestuff.bind(this,true),100); //this.interval=setInterval(this.updatestuff.bind(this,true),100);
this.scroll=scroll; this.div=scroll;
this.div.addEventListener("scroll",_=>{ this.div.addEventListener("scroll",_=>{
this.checkscroll();
if(this.scroll)this.scrollTop=this.scroll.scrollTop;
this.watchForChange();
});
this.scroll.addEventListener("scroll",_=>{
this.checkscroll(); this.checkscroll();
if(this.timeout===null){ if(this.timeout===null){
this.timeout=setTimeout(this.updatestuff.bind(this),300); this.timeout=setTimeout(this.updatestuff.bind(this),300);
@ -47,14 +37,14 @@ class InfiniteScroller{
this.checkscroll(); this.checkscroll();
const func=this.snapBottom(); const func=this.snapBottom();
this.updatestuff(); this.updatestuff();
const change=oldheight-div.offsetHeight; const change=oldheight-scroll.offsetHeight;
if(change>0&&this.scroll){ if(change>0&&this.div){
this.scroll.scrollTop+=change; this.div.scrollTop+=change;
} }
oldheight=div.offsetHeight; oldheight=scroll.offsetHeight;
this.watchForChange(); this.watchForChange();
func(); func();
}).observe(div); }).observe(scroll);
} }
new ResizeObserver(this.watchForChange.bind(this)).observe(scroll); new ResizeObserver(this.watchForChange.bind(this)).observe(scroll);
@ -64,7 +54,7 @@ class InfiniteScroller{
this.updatestuff(); this.updatestuff();
this.beenloaded=true; this.beenloaded=true;
}); });
return div; return scroll;
} }
beenloaded=false; beenloaded=false;
scrollBottom:number; scrollBottom:number;
@ -72,20 +62,19 @@ class InfiniteScroller{
needsupdate=true; needsupdate=true;
averageheight:number=60; averageheight:number=60;
checkscroll(){ checkscroll(){
if(this.beenloaded&&this.scroll&&!document.body.contains(this.scroll)){ if(this.beenloaded&&this.div&&!document.body.contains(this.div)){
this.scroll=null;
this.div=null; this.div=null;
} }
} }
async updatestuff(){ async updatestuff(){
this.timeout=null; this.timeout=null;
if(!this.scroll)return; if(!this.div)return;
this.scrollBottom = this.scroll.scrollHeight - this.scroll.scrollTop - this.scroll.clientHeight; this.scrollBottom = this.div.scrollHeight - this.div.scrollTop - this.div.clientHeight;
this.averageheight=this.scroll.scrollHeight/this.HTMLElements.length; this.averageheight=this.div.scrollHeight/this.HTMLElements.length;
if(this.averageheight<10){ if(this.averageheight<10){
this.averageheight=60; this.averageheight=60;
} }
this.scrollTop=this.scroll.scrollTop; this.scrollTop=this.div.scrollTop;
if(!this.scrollBottom && !await this.watchForChange()){ if(!this.scrollBottom && !await this.watchForChange()){
this.reachesBottom(); this.reachesBottom();
} }
@ -96,9 +85,9 @@ class InfiniteScroller{
//this.watchForChange(); //this.watchForChange();
} }
async firstElement(id:string){ async firstElement(id:string){
if(!this.scroll)return; if(!this.div)return;
const html=await this.getHTMLFromID(id); const html=await this.getHTMLFromID(id);
this.scroll.appendChild(html); this.div.appendChild(html);
this.HTMLElements.push([html,id]); this.HTMLElements.push([html,id]);
} }
currrunning:boolean=false; currrunning:boolean=false;
@ -111,13 +100,13 @@ class InfiniteScroller{
snapBottom(){ snapBottom(){
const scrollBottom=this.scrollBottom; const scrollBottom=this.scrollBottom;
return()=>{ return()=>{
if(this.scroll&&scrollBottom<10){ if(this.div&&scrollBottom<10){
this.scroll.scrollTop=this.scroll.scrollHeight+20; this.div.scrollTop=this.div.scrollHeight+20;
} }
}; };
} }
private async watchForTop(already=false,fragement=new DocumentFragment()):Promise<boolean>{ private async watchForTop(already=false,fragement=new DocumentFragment()):Promise<boolean>{
if(!this.scroll)return false; if(!this.div)return false;
try{ try{
let again=false; let again=false;
if(this.scrollTop<(already?this.fillDist:this.minDist)){ if(this.scrollTop<(already?this.fillDist:this.minDist)){
@ -157,16 +146,16 @@ class InfiniteScroller{
return again; return again;
}finally{ }finally{
if(!already){ if(!already){
if(this.scroll.scrollTop===0){ if(this.div.scrollTop===0){
this.scrollTop=1; 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<boolean>{ async watchForBottom(already=false,fragement=new DocumentFragment()):Promise<boolean>{
if(!this.scroll)return false; if(!this.div)return false;
try{ try{
let again=false; let again=false;
const scrollBottom = this.scrollBottom; const scrollBottom = this.scrollBottom;
@ -200,9 +189,9 @@ class InfiniteScroller{
return again; return again;
}finally{ }finally{
if(!already){ if(!already){
this.scroll.append(fragement); this.div.append(fragement);
if(this.scrollBottom<30){ 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){ if(this.div){
this.div.remove(); this.div.remove();
} }
this.scroll=null;
this.div=null; this.div=null;
} }
} }

8
webpage/message.ts
View file

@ -291,8 +291,8 @@ class Message extends SnowFlake{
next.generateMessage(); next.generateMessage();
next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string); next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
} }
if(this.channel.infinite.scroll&&scroll){ if(this.channel.infinite.div&&scroll){
this.channel.infinite.scroll.scrollTop=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); next=this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
console.log("loopy"); console.log("loopy");
} }
if(this.channel.infinite.scroll&&scroll){ if(this.channel.infinite.div&&scroll){
func(); func();
this.channel.infinite.scroll.scrollTop=scroll; this.channel.infinite.div.scrollTop=scroll;
} }
}; };
div.appendChild(build); div.appendChild(build);

1
webpage/style.css
View file

@ -1523,7 +1523,6 @@ span {
} }
.scroller{ .scroller{
padding-bottom: .2in; padding-bottom: .2in;
flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
} }
.suberror{ .suberror{