jank-client-fork/webpage/infiniteScroller.ts

class InfiniteScroller{
    readonly getIDFromOffset:(ID:string,offset:number)=>Promise<string|undefined>;
    readonly getHTMLFromID:(ID:string)=>Promise<HTMLElement>;
    readonly destroyFromID:(ID:string)=>Promise<boolean>;
    readonly reachesBottom:()=>void;
    private readonly minDist=2000;
    private readonly fillDist=3000;
    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;
        this.destroyFromID=destroyFromID;
        this.reachesBottom=reachesBottom;
    }
    timeout:NodeJS.Timeout|null;
    async getDiv(initialId:string,bottom=true):Promise<HTMLDivElement>{
        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.interval=setInterval(this.updatestuff.bind(this,true),100);

        this.scroll=scroll;
        this.div.addEventListener("scroll",_=>{
            if(this.scroll) this.scrollTop=this.scroll.scrollTop;
            this.watchForChange()
        });
        this.scroll.addEventListener("scroll",_=>{
            if(null===this.timeout){
                this.timeout=setTimeout(this.updatestuff.bind(this),300);
            }

            this.watchForChange()
        });
        {
            let oldheight=0;
            new ResizeObserver(_=>{
                this.updatestuff();
                const change=oldheight-div.offsetHeight;
                if(change>0&&this.scroll){
                    this.scroll.scrollTop+=change;
                }
                oldheight=div.offsetHeight;
                this.watchForChange();
            }).observe(div);
        }
        new ResizeObserver(this.watchForChange.bind(this)).observe(scroll);

        await this.firstElement(initialId)
        this.updatestuff();
        await this.watchForChange().then(_=>{
            this.updatestuff();
        })
        return div;
    }
    scrollBottom:number;
    scrollTop:number;
    needsupdate=true;
    averageheight:number=60;
    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.averageheight<10){
            this.averageheight=60;
        }
        this.scrollTop=this.scroll.scrollTop;
        if(!this.scrollBottom){
            if(!await this.watchForChange()){
                this.reachesBottom();
            }
        }
        if(!this.scrollTop){
            await this.watchForChange()
        }
        this.needsupdate=false;
        //this.watchForChange();
    }
    async firstElement(id:string){
        if(!this.scroll) return;
        const html=await this.getHTMLFromID(id);
        this.scroll.appendChild(html);
        this.HTMLElements.push([html,id]);
    }
    currrunning:boolean=false;
    async addedBottom(){
        this.updatestuff();
        const func=this.snapBottom();
        await this.watchForChange();
        func();
    }
    snapBottom(){
        const scrollBottom=this.scrollBottom;
        return ()=>{
            if(this.scroll&&scrollBottom<30){
                this.scroll.scrollTop=this.scroll.scrollHeight+20;
            }
        }
    }
    private async watchForTop(already=false,fragement=new DocumentFragment()):Promise<boolean>{
        if(!this.scroll) return false;
        try{
            let again=false;
            if(this.scrollTop<(already?this.fillDist:this.minDist)){
                let nextid:string|undefined;
                const firstelm=this.HTMLElements.at(0);
                if(firstelm){
                    const previd=firstelm[1];
                    nextid=await this.getIDFromOffset(previd,1);
                }


                if(!nextid){

                }else{
                    const html=await this.getHTMLFromID(nextid);
                    if(!html){
                        this.destroyFromID(nextid);
                        return false;
                    }
                    again=true;
                    fragement.prepend(html);
                    this.HTMLElements.unshift([html,nextid]);
                    this.scrollTop+=this.averageheight;
                };
            }
            if(this.scrollTop>this.maxDist){


                const html=this.HTMLElements.shift();
                if(html){
                    again=true;
                    await this.destroyFromID(html[1]);
                    this.scrollTop-=this.averageheight;
                }
            }
            if(again){
                await this.watchForTop(true,fragement);
            }
            return again;
        }finally{
            if(!already){
                if(this.scroll.scrollTop===0){
                    this.scrollTop=1;
                    this.scroll.scrollTop=10;
                }
                this.scroll.prepend(fragement,fragement);
            }
        }
    }
    async watchForBottom(already=false,fragement=new DocumentFragment()):Promise<boolean>{
        if(!this.scroll) return false;
        try{
            let again=false;
            const scrollBottom = this.scrollBottom;
            if(scrollBottom<(already?this.fillDist:this.minDist)){

                let nextid:string|undefined;
                const lastelm=this.HTMLElements.at(-1);
                if(lastelm){
                    const previd=lastelm[1];
                    nextid=await this.getIDFromOffset(previd,-1);
                }
                if(!nextid){
                }else{
                    again=true;
                    const html=await this.getHTMLFromID(nextid);
                    fragement.appendChild(html);
                    this.HTMLElements.push([html,nextid]);
                    this.scrollBottom+=this.averageheight;
                };
            }
            if(scrollBottom>this.maxDist){


                const html=this.HTMLElements.pop();
                if(html){
                    await this.destroyFromID(html[1]);
                    this.scrollBottom-=this.averageheight;
                    again=true;
                }
            }
            if(again){
                await this.watchForBottom(true,fragement);
            }
            return again;
        }finally{
            if(!already){
                this.scroll.append(fragement);
                if(this.scrollBottom<30){
                    this.scroll.scrollTop=this.scroll.scrollHeight;
                }
            }
        }
    }
    watchtime:boolean=false;
    changePromise:Promise<boolean>|undefined;
    async watchForChange():Promise<boolean>{
        if(this.currrunning){
            this.watchtime=true;
            if(this.changePromise){
                return await this.changePromise;
            }else{
                return false;
            }
        }else{
            this.watchtime=false;
            this.currrunning=true;

        }
        this.changePromise=new Promise<boolean>(async res=>{
            try{

                try{
                if(!this.div){res(false);return false}
                const out=await Promise.allSettled([this.watchForTop(),this.watchForBottom()]) as {value:boolean}[];
                const changed=(out[0].value||out[1].value);
                if(null===this.timeout&&changed){
                    this.timeout=setTimeout(this.updatestuff.bind(this),300);
                }
                if(!this.currrunning){console.error("something really bad happened")}

                res(!!changed);
                return !!changed;

                }catch(e){
                    console.error(e);
                }
                res(false);
                return false;
            }catch(e){
                throw e;
            }finally{


                setTimeout(_=>{
                    this.changePromise=undefined;
                    this.currrunning=false;
                    if(this.watchtime){
                        this.watchForChange();
                    }
                },300)

            }
        })
        return await this.changePromise;
    }
    async focus(id:string,flash=true){

        let element:HTMLElement|undefined;
        for(const thing of this.HTMLElements){
            if(thing[1]===id){
                element=thing[0];
            }
        }
        console.log(id,element,this.HTMLElements.length,":3");
        if(element){

            if(flash){
                element.scrollIntoView({
                    behavior:"smooth",
                    block:"center"
                });
                await new Promise(resolve => setTimeout(resolve, 1000));
                element.classList.remove("jumped");
                await new Promise(resolve => setTimeout(resolve, 100));
                element.classList.add("jumped");
            }else{
                element.scrollIntoView();
            }
        }else{
            for(const thing of this.HTMLElements){
                await this.destroyFromID(thing[1]);
            }
            this.HTMLElements=[];
            await this.firstElement(id);
            this.updatestuff();
            await this.watchForChange();
            await new Promise(resolve => setTimeout(resolve, 100));
            await this.focus(id,true);
        }
    }
    async delete():Promise<void>{
        for(const thing of this.HTMLElements){
            await this.destroyFromID(thing[1]);
        }
        this.HTMLElements=[];
        if(this.timeout){
            clearTimeout(this.timeout);
        }
        if(this.div){
            this.div.remove();
        }
        this.scroll=null;
        this.div=null;
    }
}
export {InfiniteScroller};