diff --git a/.dist/channel.js b/.dist/channel.js index e6b2868..75d154c 100644 --- a/.dist/channel.js +++ b/.dist/channel.js @@ -23,7 +23,7 @@ class Channel extends SnowFlake { permission_overwritesar; topic; nsfw; - position; + position = 0; lastreadmessageid; lastmessageid; mentions; @@ -340,8 +340,10 @@ class Channel extends SnowFlake { return build; } static dragged = []; + html; createguildHTML(admin = false) { const div = document.createElement("div"); + this.html = new WeakRef(div); if (!this.hasPermission("VIEW_CHANNEL")) { let quit = true; for (const thing of this.children) { @@ -457,29 +459,12 @@ class Channel extends SnowFlake { return div; } get myhtml() { - const search = document.getElementById("channels").children[0].children; - if (this.guild !== this.localuser.lookingguild) { - return null; - } - else if (this.parent) { - for (const thing of search) { - if (thing["all"] === this.parent) { - for (const thing2 of thing.children[1].children) { - if (thing2["all"] === this) { - return thing2; - } - } - } - } + if (this.html) { + return this.html.deref(); } else { - for (const thing of search) { - if (thing["all"] === this) { - return thing; - } - } + return undefined; } - return null; } readbottom() { if (!this.hasunreads) { @@ -492,7 +477,7 @@ class Channel extends SnowFlake { }); this.lastreadmessageid = this.lastmessageid; this.guild.unreads(); - if (this.myhtml !== null) { + if (this.myhtml) { this.myhtml.classList.remove("cunread"); } } @@ -663,12 +648,12 @@ class Channel extends SnowFlake { static genid = 0; async getHTML() { const id = ++Channel.genid; - if (this.guild !== this.localuser.lookingguild) { - this.guild.loadGuild(); - } if (this.localuser.channelfocus) { this.localuser.channelfocus.infinite.delete(); } + if (this.guild !== this.localuser.lookingguild) { + this.guild.loadGuild(); + } if (this.localuser.channelfocus && this.localuser.channelfocus.myhtml) { this.localuser.channelfocus.myhtml.classList.remove("viewChannel"); } diff --git a/.dist/direct.js b/.dist/direct.js index 6cd7faf..344fa4c 100644 --- a/.dist/direct.js +++ b/.dist/direct.js @@ -29,10 +29,11 @@ class Direct extends Guild { } createChannelpac(json) { const thischannel = new Group(json, this); - this.channelids[json.id] = thischannel; + this.channelids[thischannel.id] = thischannel; this.channels.push(thischannel); - this.calculateReorder(); + this.sortchannels(); this.printServers(); + return thischannel; } giveMember(_member) { console.error("not a real guild, can't give member object"); @@ -95,13 +96,20 @@ class Group extends Channel { this.lastmessageid = json.last_message_id; this.mentions = 0; this.setUpInfiniteScroller(); + this.updatePosition(); + } + updatePosition() { if (this.lastmessageid) { this.position = SnowFlake.stringToUnixTime(this.lastmessageid); } + else { + this.position = 0; + } this.position = -Math.max(this.position, this.getUnixTime()); } createguildHTML() { const div = document.createElement("div"); + this.html = new WeakRef(div); div.classList.add("channeleffects"); const myhtml = document.createElement("span"); myhtml.textContent = this.name; @@ -151,7 +159,19 @@ class Group extends Channel { } } this.unreads(); + this.updatePosition(); this.infinite.addedBottom(); + this.guild.sortchannels(); + if (this.myhtml) { + const parrent = this.myhtml.parentElement; + parrent.prepend(this.myhtml); + } + if (this === this.localuser.channelfocus) { + if (!this.infinitefocus) { + this.tryfocusinfinate(); + } + this.infinite.addedBottom(); + } if (messagez.author === this.localuser.user) { return; } diff --git a/.dist/embed.js b/.dist/embed.js index f4ffb4d..ec65ca3 100644 --- a/.dist/embed.js +++ b/.dist/embed.js @@ -358,14 +358,16 @@ class Embed { img.classList.add("bigembedimg"); if (this.json.video) { img.onclick = async () => { - img.remove(); - const iframe = document.createElement("iframe"); - iframe.src = this.json.video.url + "?autoplay=1"; - if (this.json.thumbnail.width && this.json.thumbnail.width) { - iframe.style.width = this.json.thumbnail.width + "px"; - iframe.style.height = this.json.thumbnail.height + "px"; + if (this.json.video) { + img.remove(); + const iframe = document.createElement("iframe"); + iframe.src = this.json.video.url + "?autoplay=1"; + if (this.json.thumbnail.width && this.json.thumbnail.width) { + iframe.style.width = this.json.thumbnail.width + "px"; + iframe.style.height = this.json.thumbnail.height + "px"; + } + div.append(iframe); } - div.append(iframe); }; } else { diff --git a/.dist/guild.js b/.dist/guild.js index 89a48c5..fa36348 100644 --- a/.dist/guild.js +++ b/.dist/guild.js @@ -476,6 +476,7 @@ class Guild extends SnowFlake { } this.calculateReorder(); this.printServers(); + return thischannel; } createchannels(func = this.createChannel) { let name = ""; diff --git a/.dist/infiniteScroller.js b/.dist/infiniteScroller.js index 860db5c..38393d7 100644 --- a/.dist/infiniteScroller.js +++ b/.dist/infiniteScroller.js @@ -24,14 +24,17 @@ class InfiniteScroller { 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.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); } @@ -40,6 +43,8 @@ class InfiniteScroller { { let oldheight = 0; new ResizeObserver(_ => { + this.checkscroll(); + const func = this.snapBottom(); this.updatestuff(); const change = oldheight - div.offsetHeight; if (change > 0 && this.scroll) { @@ -47,6 +52,7 @@ class InfiniteScroller { } oldheight = div.offsetHeight; this.watchForChange(); + func(); }).observe(div); } new ResizeObserver(this.watchForChange.bind(this)).observe(scroll); @@ -54,13 +60,21 @@ class InfiniteScroller { this.updatestuff(); await this.watchForChange().then(_ => { this.updatestuff(); + this.beenloaded = true; }); return div; } + beenloaded = false; scrollBottom; scrollTop; needsupdate = true; averageheight = 60; + checkscroll() { + if (this.beenloaded && this.scroll && !document.body.contains(this.scroll)) { + this.scroll = null; + this.div = null; + } + } async updatestuff() { this.timeout = null; if (!this.scroll) diff --git a/.dist/localuser.js b/.dist/localuser.js index 6ed85d6..c6da5e1 100644 --- a/.dist/localuser.js +++ b/.dist/localuser.js @@ -495,10 +495,31 @@ class Localuser { const guild = this.guildids.get(json.guild_id); if (!guild) return; - guild.createChannelpac(json); + const channel = guild.createChannelpac(json); if (json.guild_id === this.lookingguild?.id) { this.loadGuild(json.guild_id); } + if (channel.id === this.gotoid) { + guild.loadGuild(); + guild.loadChannel(channel.id); + this.gotoid = undefined; + } + } + gotoid; + async goToChannel(id) { + let guild; + for (const thing of this.guilds) { + if (thing.channelids[id]) { + guild = thing; + } + } + if (guild) { + guild.loadGuild(); + guild.loadChannel(id); + } + else { + this.gotoid = id; + } } delChannel(json) { let guild_id = json.guild_id; diff --git a/.dist/user.js b/.dist/user.js index 9e84b1b..f7f27a3 100644 --- a/.dist/user.js +++ b/.dist/user.js @@ -70,6 +70,8 @@ class User extends SnowFlake { fetch(this.info.api + "/users/@me/channels", { method: "POST", body: JSON.stringify({ recipients: [this.id] }), headers: this.localuser.headers + }).then(_ => _.json()).then(json => { + this.localuser.goToChannel(json.id); }); }); this.contextmenu.addbutton("Block user", function () { diff --git a/webpage/channel.ts b/webpage/channel.ts index 752fcb6..2710b54 100644 --- a/webpage/channel.ts +++ b/webpage/channel.ts @@ -32,7 +32,7 @@ class Channel extends SnowFlake{ permission_overwritesar:[Role,Permissions][]; topic:string; nsfw:boolean; - position:number; + position:number=0; lastreadmessageid:string|undefined; lastmessageid:string|undefined; mentions:number; @@ -353,8 +353,10 @@ class Channel extends SnowFlake{ return build; } static dragged:[Channel,HTMLDivElement]|[]=[]; + html:WeakRef|undefined; createguildHTML(admin=false):HTMLDivElement{ const div=document.createElement("div"); + this.html=new WeakRef(div); if(!this.hasPermission("VIEW_CHANNEL")){ let quit=true; for(const thing of this.children){ @@ -470,27 +472,11 @@ class Channel extends SnowFlake{ return div; } get myhtml(){ - const search=(document.getElementById("channels") as HTMLDivElement).children[0].children; - if(this.guild!==this.localuser.lookingguild){ - return null; - }else if(this.parent){ - for(const thing of search){ - if(thing["all"]===this.parent){ - for(const thing2 of thing.children[1].children){ - if(thing2["all"]===this){ - return thing2; - } - } - } - } + if(this.html){ + return this.html.deref(); }else{ - for(const thing of search){ - if(thing["all"]===this){ - return thing; - } - } + return undefined } - return null; } readbottom(){ if(!this.hasunreads){ @@ -503,7 +489,7 @@ class Channel extends SnowFlake{ }); this.lastreadmessageid=this.lastmessageid; this.guild.unreads(); - if(this.myhtml!==null){ + if(this.myhtml){ this.myhtml.classList.remove("cunread"); } } @@ -673,12 +659,12 @@ class Channel extends SnowFlake{ static genid:number=0; async getHTML(){ const id=++Channel.genid; - if(this.guild!==this.localuser.lookingguild){ - this.guild.loadGuild(); - } if(this.localuser.channelfocus){ this.localuser.channelfocus.infinite.delete(); } + if(this.guild!==this.localuser.lookingguild){ + this.guild.loadGuild(); + } if(this.localuser.channelfocus&&this.localuser.channelfocus.myhtml){ this.localuser.channelfocus.myhtml.classList.remove("viewChannel"); } @@ -857,7 +843,7 @@ class Channel extends SnowFlake{ this.tryfocusinfinate(); } infinitefocus=false; - private async tryfocusinfinate(){ + async tryfocusinfinate(){ if(this.infinitefocus)return; this.infinitefocus=true; const messages=document.getElementById("channelw") as HTMLDivElement; diff --git a/webpage/direct.ts b/webpage/direct.ts index 9629a8d..2c783a6 100644 --- a/webpage/direct.ts +++ b/webpage/direct.ts @@ -32,10 +32,11 @@ class Direct extends Guild{ } createChannelpac(json){ const thischannel=new Group(json,this); - this.channelids[json.id]=thischannel; + this.channelids[thischannel.id]=thischannel; this.channels.push(thischannel); - this.calculateReorder(); + this.sortchannels(); this.printServers(); + return thischannel; } giveMember(_member:memberjson){ console.error("not a real guild, can't give member object"); @@ -100,14 +101,19 @@ class Group extends Channel{ this.lastmessageid=json.last_message_id; this.mentions=0; this.setUpInfiniteScroller(); + this.updatePosition(); + } + updatePosition(){ if(this.lastmessageid){ this.position=SnowFlake.stringToUnixTime(this.lastmessageid); + }else{ + this.position=0; } - this.position=-Math.max(this.position,this.getUnixTime()); } createguildHTML(){ const div=document.createElement("div"); + this.html=new WeakRef(div); div.classList.add("channeleffects"); const myhtml=document.createElement("span"); myhtml.textContent=this.name; @@ -156,7 +162,19 @@ class Group extends Channel{ } } this.unreads(); + this.updatePosition(); this.infinite.addedBottom(); + this.guild.sortchannels(); + if(this.myhtml){ + const parrent=this.myhtml.parentElement as HTMLElement; + parrent.prepend(this.myhtml); + } + if(this===this.localuser.channelfocus){ + if(!this.infinitefocus){ + this.tryfocusinfinate(); + } + this.infinite.addedBottom(); + } if(messagez.author===this.localuser.user){ return; } diff --git a/webpage/embed.ts b/webpage/embed.ts index 6010ba0..8973707 100644 --- a/webpage/embed.ts +++ b/webpage/embed.ts @@ -365,14 +365,16 @@ class Embed{ img.classList.add("bigembedimg"); if(this.json.video){ img.onclick=async ()=>{ - img.remove(); - const iframe=document.createElement("iframe"); - iframe.src=this.json.video.url+"?autoplay=1"; - if(this.json.thumbnail.width&&this.json.thumbnail.width){ - iframe.style.width=this.json.thumbnail.width+"px"; - iframe.style.height=this.json.thumbnail.height+"px"; + if(this.json.video){ + img.remove(); + const iframe=document.createElement("iframe"); + iframe.src=this.json.video.url+"?autoplay=1"; + if(this.json.thumbnail.width&&this.json.thumbnail.width){ + iframe.style.width=this.json.thumbnail.width+"px"; + iframe.style.height=this.json.thumbnail.height+"px"; + } + div.append(iframe); } - div.append(iframe); }; }else{ img.onclick=async ()=>{ diff --git a/webpage/guild.ts b/webpage/guild.ts index 8fc90e4..3e0f4a9 100644 --- a/webpage/guild.ts +++ b/webpage/guild.ts @@ -483,6 +483,7 @@ class Guild extends SnowFlake{ } this.calculateReorder(); this.printServers(); + return thischannel; } createchannels(func=this.createChannel){ let name=""; diff --git a/webpage/infiniteScroller.ts b/webpage/infiniteScroller.ts index 5968839..e529ce1 100644 --- a/webpage/infiniteScroller.ts +++ b/webpage/infiniteScroller.ts @@ -24,14 +24,17 @@ class InfiniteScroller{ 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.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); } @@ -41,6 +44,8 @@ class InfiniteScroller{ { let oldheight=0; new ResizeObserver(_=>{ + this.checkscroll(); + const func=this.snapBottom(); this.updatestuff(); const change=oldheight-div.offsetHeight; if(change>0&&this.scroll){ @@ -48,6 +53,7 @@ class InfiniteScroller{ } oldheight=div.offsetHeight; this.watchForChange(); + func(); }).observe(div); } new ResizeObserver(this.watchForChange.bind(this)).observe(scroll); @@ -56,13 +62,21 @@ class InfiniteScroller{ this.updatestuff(); await this.watchForChange().then(_=>{ this.updatestuff(); + this.beenloaded=true; }); return div; } + beenloaded=false; scrollBottom:number; scrollTop:number; needsupdate=true; averageheight:number=60; + checkscroll(){ + if(this.beenloaded&&this.scroll&&!document.body.contains(this.scroll)){ + this.scroll=null; + this.div=null; + } + } async updatestuff(){ this.timeout=null; if(!this.scroll)return; diff --git a/webpage/localuser.ts b/webpage/localuser.ts index a10753b..f5bec14 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -474,14 +474,34 @@ class Localuser{ } } } - createChannel(json:channeljson):void{ + createChannel(json:channeljson):undefined|Channel{ json.guild_id??="@me"; const guild=this.guildids.get(json.guild_id); if(!guild) return; - guild.createChannelpac(json); + const channel=guild.createChannelpac(json); if(json.guild_id===this.lookingguild?.id){ this.loadGuild(json.guild_id); } + if(channel.id===this.gotoid){ + guild.loadGuild(); + guild.loadChannel(channel.id); + this.gotoid=undefined; + } + } + gotoid:string|undefined; + async goToChannel(id:string){ + let guild:undefined|Guild; + for(const thing of this.guilds){ + if(thing.channelids[id]){ + guild=thing; + } + } + if(guild){ + guild.loadGuild(); + guild.loadChannel(id); + }else{ + this.gotoid=id; + } } delChannel(json:channeljson):void{ let guild_id=json.guild_id; diff --git a/webpage/style.css b/webpage/style.css index 80bc3f4..b792cee 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -748,6 +748,7 @@ textarea:focus-visible, width: 100%; height: 100%; /* aspect-ratio: 1 /20; */ + max-height: 3in; } .embedimg { cursor: pointer; diff --git a/webpage/user.ts b/webpage/user.ts index cd7e46d..f1e91a2 100644 --- a/webpage/user.ts +++ b/webpage/user.ts @@ -73,6 +73,8 @@ class User extends SnowFlake{ {method: "POST", body: JSON.stringify({recipients: [this.id]}), headers: this.localuser.headers + }).then(_=>_.json()).then(json=>{ + this.localuser.goToChannel(json.id) }); }); this.contextmenu.addbutton("Block user",function(this:User){