Unread Channels support
Added support for unread channels, along with a few bug fixes
This commit is contained in:
MathMan05
parent
9676c605e7
commit
f01c75d73c
5 changed files with 131 additions and 18 deletions
|
|
@ -26,7 +26,7 @@ class channel{
|
|||
this.lastpin=json.last_pin_timestamp;
|
||||
}
|
||||
get hasunreads(){
|
||||
return this.lastmessageid===this.lastreadmessageid
|
||||
return this.lastmessageid!==this.lastreadmessageid&&this.type!==4;
|
||||
}
|
||||
get canMessage(){
|
||||
for(const thing of this.permission_overwrites){
|
||||
|
|
@ -127,6 +127,9 @@ class channel{
|
|||
div.appendChild(childrendiv);
|
||||
}else{
|
||||
div.classList.add("Channel");
|
||||
if(this.hasunreads){
|
||||
div.classList.add("cunread");
|
||||
}
|
||||
lacechannel(div);
|
||||
if(admin){this.coatDropDiv(div,this);}
|
||||
div.all=this;
|
||||
|
|
@ -158,6 +161,46 @@ class channel{
|
|||
}
|
||||
return div;
|
||||
}
|
||||
get myhtml(){
|
||||
const search=document.getElementById("channels").children[0].children
|
||||
if(this.owner!==thisuser.lookingguild){
|
||||
return null
|
||||
}else if(this.parrent){
|
||||
for(const thing of search){
|
||||
if(thing.all===this.parrent){
|
||||
for(const thing2 of thing.children[1].children){
|
||||
if(thing2.all===this){
|
||||
return thing2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}else{
|
||||
for(const thing of search){
|
||||
if(thing.all===this){
|
||||
return thing;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
readbottom(){
|
||||
console.log(this)
|
||||
if(!this.hasunreads){
|
||||
return;
|
||||
}
|
||||
fetch("https://old.server.spacebar.chat/api/v9/channels/"+this.id+"/messages/"+this.lastmessageid+"/ack",{
|
||||
method:"POST",
|
||||
headers:{"Content-type": "application/json; charset=UTF-8",Authorization:token},
|
||||
body:JSON.stringify({})
|
||||
});
|
||||
this.lastreadmessageid=this.lastmessageid;
|
||||
this.owner.unreads();
|
||||
if(this.myhtml!==null){
|
||||
console.log(this.myhtml.classList)
|
||||
this.myhtml.classList.remove("cunread");
|
||||
}
|
||||
}
|
||||
coatDropDiv(div,that,container=false){
|
||||
div.addEventListener("dragenter", (event) => {
|
||||
console.log("enter")
|
||||
|
|
@ -381,7 +424,15 @@ class channel{
|
|||
this.lastmessageid=messagez.id;
|
||||
if(messagez.user===thisuser.user){
|
||||
this.lastreadmessageid=messagez.id;
|
||||
if(this.myhtml){
|
||||
this.myhtml.classList.remove("cunread");
|
||||
}
|
||||
}else{
|
||||
if(this.myhtml){
|
||||
this.myhtml.classList.add("cunread");
|
||||
}
|
||||
}
|
||||
this.owner.unreads();
|
||||
this.messages.unshift(messagez);
|
||||
const scrolly=document.getElementById("messagecontainer");
|
||||
this.messageids[messagez.id]=messagez;
|
||||
|
|
|
|||
|
|
@ -95,6 +95,27 @@ class guild{
|
|||
sortchannels(){
|
||||
this.headchannels.sort((a,b)=>{return a.position-b.position;});
|
||||
}
|
||||
unreads(html){
|
||||
if(html){
|
||||
this.html=html;
|
||||
}else{
|
||||
html=this.html;
|
||||
}
|
||||
let read=true;
|
||||
for(const thing of this.channels){
|
||||
if(thing.hasunreads){
|
||||
console.log(thing)
|
||||
read=false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log(read);
|
||||
if(read){
|
||||
html.children[0].classList.remove("notiunread");
|
||||
}else{
|
||||
html.children[0].classList.add("notiunread");
|
||||
}
|
||||
}
|
||||
getHTML(){
|
||||
//this.printServers();
|
||||
this.sortchannels();
|
||||
|
|
|
|||
|
|
@ -16,13 +16,6 @@ let ws
|
|||
initwebsocket();
|
||||
let READY;
|
||||
|
||||
/*
|
||||
fetch("https://old.server.spacebar.chat/api/v9/channels/1243314160814653069/messages/1244097259492795763/ack",{
|
||||
method:"POST",
|
||||
headers:{"Content-type": "application/json; charset=UTF-8",Authorization:token},
|
||||
body:JSON.stringify({})
|
||||
})
|
||||
*/
|
||||
function createbutton(text,img,clickevent=function(){}){
|
||||
const textb=document.createElement("tr");
|
||||
const intext=document.createElement("button")
|
||||
|
|
@ -116,6 +109,15 @@ function makemenuc(divmessage,x,y){
|
|||
})
|
||||
copyidbutton.button.all=divmessage.all;
|
||||
build.appendChild(copyidbutton);
|
||||
|
||||
const readall=createbutton("Mark as read",null,function(){
|
||||
console.log(channel)
|
||||
channel.readbottom();
|
||||
})
|
||||
readall.button.all=divmessage.all;
|
||||
build.appendChild(readall);
|
||||
|
||||
|
||||
if(thisuser.isAdmin()){
|
||||
const deleteChannel=createbutton("Delete channel",null,function(){
|
||||
console.log(channel)
|
||||
|
|
@ -632,13 +634,17 @@ function userSettings(){
|
|||
}
|
||||
let triggered=false;
|
||||
document.getElementById("messagecontainer").addEventListener("scroll",(e)=>{
|
||||
if(document.getElementById("messagecontainer").scrollTop<2000){
|
||||
const messagecontainer=document.getElementById("messagecontainer")
|
||||
if(messagecontainer.scrollTop<2000){
|
||||
if(!triggered){
|
||||
thisuser.lookingguild.prevchannel.grabmoremessages();
|
||||
}
|
||||
triggered=true;
|
||||
}else{
|
||||
triggered=false;
|
||||
if(Math.abs(messagecontainer.scrollHeight-messagecontainer.scrollTop-messagecontainer.clientHeight) < 3){
|
||||
thisuser.lookingguild.prevchannel.readbottom();
|
||||
}
|
||||
}
|
||||
//
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ class localuser{
|
|||
this.status=this.ready.d.user_settings.status;
|
||||
this.channelfocus=null;
|
||||
this.lookingguild=null;
|
||||
this.guildhtml={};
|
||||
for(const thing of ready.d.guilds){
|
||||
const temp=new guild(thing,this);
|
||||
this.guilds.push(temp);
|
||||
|
|
@ -23,17 +24,13 @@ class localuser{
|
|||
}
|
||||
for(const thing of ready.d.read_state.entries){
|
||||
console.log(thing)
|
||||
thing.id=this.resolveGuildidFromChannelID(thing.channel_id);//currently needed due to broken server code, remove once id is the guild id
|
||||
this.guildids[thing.id].channelids[thing.channel_id].readStateInfo(thing);
|
||||
const guildid=this.resolveGuildidFromChannelID(thing.id).id;//currently needed due to broken server code, remove once id is the guild id
|
||||
this.guildids[guildid].channelids[thing.channel_id].readStateInfo(thing);
|
||||
}
|
||||
this.typing=[];
|
||||
}
|
||||
resolveGuildidFromChannelID(ID){
|
||||
for(const thing of this.guilds){
|
||||
if(thing.channelids[ID]){
|
||||
return thing.id;
|
||||
}
|
||||
}
|
||||
return this.guilds.find(guild => guild.channelids[ID]);
|
||||
}
|
||||
updateChannel(JSON){
|
||||
this.guildids[JSON.guild_id].updateChannel(JSON);
|
||||
|
|
@ -102,11 +99,18 @@ class localuser{
|
|||
if(thing instanceof dirrect){
|
||||
continue;
|
||||
}
|
||||
const divy=document.createElement("div");
|
||||
divy.classList.add("servernoti");
|
||||
|
||||
const noti=document.createElement("div");
|
||||
noti.classList.add("unread");
|
||||
divy.append(noti);
|
||||
this.guildhtml[thing.id]=divy;
|
||||
if(thing.properties.icon!=null){
|
||||
const img=document.createElement("img");
|
||||
img.classList.add("pfp","servericon")
|
||||
img.src="https://cdn.old.server.spacebar.chat/icons/"+thing.properties.id+"/"+thing.properties.icon+".png";
|
||||
serverlist.appendChild(img)
|
||||
divy.appendChild(img)
|
||||
img.all=thing;
|
||||
img.onclick=function(){
|
||||
console.log(this.all.loadGuild)
|
||||
|
|
@ -121,18 +125,28 @@ class localuser{
|
|||
}
|
||||
div.innerText=build;
|
||||
div.classList.add("blankserver","servericon")
|
||||
serverlist.appendChild(div)
|
||||
divy.appendChild(div)
|
||||
div.all=thing;
|
||||
div.onclick=function(){
|
||||
this.all.loadGuild();
|
||||
this.all.loadChannel();
|
||||
}
|
||||
}
|
||||
serverlist.append(divy);
|
||||
}
|
||||
this.unreads();
|
||||
}
|
||||
messageCreate(messagep){
|
||||
messagep.d.guild_id??="@me";
|
||||
this.guildids[messagep.d.guild_id].channelids[messagep.d.channel_id].messageCreate(messagep,this.channelfocus===messagep.d.channel_id);
|
||||
this.unreads();
|
||||
}
|
||||
unreads(){
|
||||
console.log(this.guildhtml)
|
||||
for(const thing of this.guilds){
|
||||
if(thing.id==="@me"){continue;}
|
||||
thing.unreads(this.guildhtml[thing.id])
|
||||
}
|
||||
}
|
||||
typeingStart(typing){
|
||||
if(this.channelfocus===typing.d.channel_id){
|
||||
|
|
|
|||
|
|
@ -85,6 +85,7 @@ h2{
|
|||
}
|
||||
.servericon{
|
||||
transition: border-radius .2s;
|
||||
position:relative;
|
||||
}
|
||||
.servericon:hover{
|
||||
border-radius: 30%;
|
||||
|
|
@ -591,3 +592,23 @@ span{
|
|||
.filename{
|
||||
color:#47bbff;
|
||||
}
|
||||
|
||||
.unread{
|
||||
position:absolute;
|
||||
background:white;
|
||||
height:.075in;
|
||||
width:.075in;
|
||||
transition:transform .2s;
|
||||
transform:translate(-.20in,.2in);
|
||||
z-index:10;
|
||||
border-radius: 50%;
|
||||
border:solid;
|
||||
border-width:.02in;
|
||||
border-color:black;
|
||||
}
|
||||
.notiunread{
|
||||
transform:translate(0in,.2in);
|
||||
}
|
||||
.cunread{
|
||||
box-shadow: inset .024in 0 white;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue