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

Redo context menus work and make them not ugly

Browse source
This commit is contained in:
MathMan05 2024-06-09 19:05:45 -05:00
parent bf9062bfc8
commit 44c0b3b3cc
8 changed files with 144 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.js
View file

@ -18,6 +18,10 @@ app.get('/register.js', (req, res) => {
app.get('/dirrect.js', (req, res) => { app.get('/dirrect.js', (req, res) => {
res.sendFile("./webpage/dirrect.js", {root: __dirname}) res.sendFile("./webpage/dirrect.js", {root: __dirname})
}) })
app.get('/contextmenu.js', (req, res) => {
res.sendFile("./webpage/contextmenu.js", {root: __dirname})
})
//
app.get('/login.js', (req, res) => { app.get('/login.js', (req, res) => {
res.sendFile("./webpage/login.js", {root: __dirname}) res.sendFile("./webpage/login.js", {root: __dirname})
}) })

27
webpage/channel.js
View file

@ -1,4 +1,26 @@
"use strict"
class channel{ class channel{
static contextmenu=new contextmenu("channel menu");
static setupcontextmenu(){
channel.contextmenu.addbutton("Copy channel id",function(){
console.log(this)
navigator.clipboard.writeText(this.id);
})
channel.contextmenu.addbutton("Mark as read",function(){
console.log(this)
this.readbottom();
})
channel.contextmenu.addbutton("Delete channel",function(){
console.log(this)
this.deleteChannel();
},null,_=>{return thisuser.isAdmin()})
channel.contextmenu.addbutton("Edit channel",function(){
editchannelf(this);
},null,_=>{return thisuser.isAdmin()})
}
constructor(JSON,owner){ constructor(JSON,owner){
if(JSON===-1){ if(JSON===-1){
return; return;
@ -105,7 +127,7 @@ class channel{
decdiv.classList.add("channeleffects"); decdiv.classList.add("channeleffects");
decdiv.classList.add("channel"); decdiv.classList.add("channel");
lacechannel(decdiv); channel.contextmenu.bind(decdiv,this);
decdiv.all=this; decdiv.all=this;
@ -131,7 +153,7 @@ class channel{
if(this.hasunreads){ if(this.hasunreads){
div.classList.add("cunread"); div.classList.add("cunread");
} }
lacechannel(div); channel.contextmenu.bind(div,this);
if(admin){this.coatDropDiv(div,this);} if(admin){this.coatDropDiv(div,this);}
div.all=this; div.all=this;
const myhtml=document.createElement("span"); const myhtml=document.createElement("span");
@ -450,3 +472,4 @@ class channel{
} }
} }
} }
channel.setupcontextmenu();

43
webpage/contextmenu.js Normal file
View file

@ -0,0 +1,43 @@
class contextmenu{
constructor(name){
this.name=name;
this.buttons=[]
}
addbutton(text,onclick,img=null,shown=_=>{return true}){
this.buttons.push([text,onclick,img,shown])
return {};
}
makemenu(x,y,addinfo,obj){
const div=document.createElement("table");
div.classList.add("contextmenu");
for(const thing of this.buttons){
if(!thing[3](addinfo)){continue;}
const textb=document.createElement("tr");
const intext=document.createElement("button")
textb.button=intext;
intext.classList.add("contextbutton")
intext.innerText=thing[0]
textb.appendChild(intext)
console.log(thing)
intext.onclick=thing[1].bind(addinfo,obj);
div.appendChild(textb);
}
if(currentmenu!=""){
currentmenu.remove();
}
div.style.top = y+'px';
div.style.left = x+'px';
document.body.appendChild(div);
console.log(div)
currentmenu=div;
return this.div;
}
bind(obj,addinfo){
obj.addEventListener("contextmenu", (event) => {
event.preventDefault();
event.stopImmediatePropagation();
this.makemenu(event.clientX,event.clientY,addinfo,obj)
});
}
}

2
webpage/index.html
View file

@ -10,6 +10,7 @@
<body class="Dark-theme"> <body class="Dark-theme">
<script src="/login.js"></script> <script src="/login.js"></script>
<script src="/contextmenu.js"></script>
<script src="/member.js"></script> <script src="/member.js"></script>
<script src="/user.js"></script> <script src="/user.js"></script>
<script src="/message.js"></script> <script src="/message.js"></script>
@ -20,6 +21,7 @@
<script src="/localuser.js"></script> <script src="/localuser.js"></script>
<script src="/markdown.js"></script> <script src="/markdown.js"></script>
<script src="/fullscreen.js"></script> <script src="/fullscreen.js"></script>
<div id="loading" class="loading"><div id="centerdiv"><img src="/bitmap.svg" width="1in" height="1in"><h1>Jank Client is loading</h1><h2>This shouldn't take long</h2></div></div> <div id="loading" class="loading"><div id="centerdiv"><img src="/bitmap.svg" width="1in" height="1in"><h1>Jank Client is loading</h1><h2>This shouldn't take long</h2></div></div>
<table id="page"> <table id="page">
<tr> <tr>

185
webpage/index.js
View file

@ -21,18 +21,6 @@ let ws
initwebsocket(); initwebsocket();
let READY; let READY;
function createbutton(text,img,clickevent=function(){}){
const textb=document.createElement("tr");
const intext=document.createElement("button")
textb.button=intext;
intext.classList.add("contextbutton")
intext.innerText=text
textb.appendChild(intext)
intext.onclick=clickevent;
return textb
}
var currentmenu=""; var currentmenu="";
document.addEventListener('click', function(event) { document.addEventListener('click', function(event) {
if(currentmenu==""){ if(currentmenu==""){
@ -44,15 +32,19 @@ document.addEventListener('click', function(event) {
} }
}); });
let replyingto=null; let replyingto=null;
lacechannel(document.getElementById("channels")); {
function lacechannel(c){ const menu=new contextmenu("create backclick");
c.addEventListener("contextmenu", (event) => { menu.addbutton("Create channel",function(){
event.preventDefault(); createchannels(thisuser.lookingguild.createChannel.bind(thisuser.lookingguild));
event.stopImmediatePropagation(); },null,_=>{return thisuser.isAdmin()})
makemenuc.bind(c)(event.currentTarget,event.clientX,event.clientY);
}); menu.addbutton("Create category",function(){
createcategory(thisuser.lookingguild.createChannel.bind(thisuser.lookingguild));
},null,_=>{return thisuser.isAdmin()})
menu.bind(document.getElementById("channels"))
} }
function createchannels(fincall){ function createchannels(fincall){
let name=""; let name="";
let category=2; let category=2;
@ -98,139 +90,7 @@ function createcategory(fincall){
channelselect.show(); channelselect.show();
} }
function editchannelf(channel){channel.editChannel();} function editchannelf(channel){channel.editChannel();}
function makemenuc(divmessage,x,y){
if(currentmenu!=""){
currentmenu.remove();
}
const build = document.createElement('table');
if(x!==-1){
build.classList.add("contextmenu");
}
console.log(divmessage,divmessage.classList.contains("Channel"));
if(divmessage.classList.contains("Channel")){
const channel=this.all;
const copyidbutton=createbutton("copy channel id",null,function(){
console.log(this)
navigator.clipboard.writeText(channel.id);
})
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)
channel.deleteChannel();
})
deleteChannel.button.all=divmessage.all;
build.appendChild(deleteChannel);
const editchannel=createbutton("edit channel",null,function(){
editchannelf(channel);
})
editchannel.button.all=divmessage.all;
build.appendChild(editchannel);
}
}else{
if(thisuser.isAdmin()){
const createchannel=createbutton("create channel",null,function(){
createchannels(thisuser.lookingguild.createChannel.bind(thisuser.lookingguild));
})
createchannel.button.all=divmessage.all;
build.appendChild(createchannel);
const createcat=createbutton("create category",null,function(){
createcategory(thisuser.lookingguild.createChannel.bind(thisuser.lookingguild));
})
createcat.button.all=divmessage.all;
build.appendChild(createcat);
//createcategory
}
}
if(divmessage.userid==READY.d.user.id){
const editbut=createbutton("edit",null,function(){
console.log(this)
editing=this.all.id;
document.getElementById("typebox").value=this.all.content;
})
editbut.button.all=divmessage.all;
console.log(editbut)
build.appendChild(editbut);
}
if(x!==-1){
build.style.top = y+'px';
build.style.left = x+'px';
}
document.body.appendChild(build)
currentmenu=build;
}
function makemenu(divmessage,x,y){
if(currentmenu!=""){
currentmenu.remove();
}
const build = document.createElement('table');
if(x!==-1){
build.classList.add("contextmenu");
}
const copybutton=createbutton("copy raw text",null,function(){
console.log(this)
navigator.clipboard.writeText(this.all.content);
})
copybutton.button.all=divmessage.all;
build.appendChild(copybutton);
const replybutton=createbutton("reply",null,function(){
console.log(this)
if(replyingto){
replyingto.classList.remove("replying");
}
replyingto=divmessage;
replyingto.classList.add("replying");
})
replybutton.button.all=divmessage.all;
build.appendChild(replybutton);
const copyidbutton=createbutton("copy message id",null,function(){
console.log(this)
navigator.clipboard.writeText(this.all.id);
})
copyidbutton.button.all=divmessage.all;
build.appendChild(copyidbutton);
const dmbutton=createbutton("Message user",null,function(){
console.log(this)
fetch(info.api.toString()+"/v9/users/@me/channels",
{method:"POST",
body:JSON.stringify({"recipients":[this.all.author.id]}),
headers: {"Content-type": "application/json; charset=UTF-8",Authorization:token}
});
})
dmbutton.button.all=divmessage.all;
build.appendChild(dmbutton);
if(divmessage.userid==READY.d.user.id){
const editbut=createbutton("edit",null,function(){
console.log(this)
editing=this.all.id;
document.getElementById("typebox").value=this.all.content;
})
editbut.button.all=divmessage.all;
console.log(editbut)
build.appendChild(editbut);
}
if(x!==-1){
build.style.top = y+'px';
build.style.left = x+'px';
}
document.body.appendChild(build)
currentmenu=build;
}
let messagelist=[]; let messagelist=[];
function buildprofile(x,y,user,type="author"){ function buildprofile(x,y,user,type="author"){
if(currentmenu!=""){ if(currentmenu!=""){
@ -302,12 +162,15 @@ function profileclick(obj,author){
} }
var editing=false; var editing=false;
document.getElementById("typebox").addEventListener("keyup",enter); const typebox=document.getElementById("typebox")
console.log(document.getElementById("typebox")) typebox.addEventListener("keyup",enter);
document.getElementById("typebox").onclick=console.log; typebox.addEventListener("keydown",event=>{
if(event.key === "Enter"&&!event.shiftKey) event.preventDefault();
});
console.log(typebox)
typebox.onclick=console.log;
async function enter(event){ async function enter(event){
thisuser.lookingguild.prevchannel.typingstart(); thisuser.lookingguild.prevchannel.typingstart();
const tis=document.getElementById("typebox");
if(event.key === "Enter"&&!event.shiftKey){ if(event.key === "Enter"&&!event.shiftKey){
event.preventDefault(); event.preventDefault();
if(editing){ if(editing){
@ -317,10 +180,10 @@ async function enter(event){
"Content-type": "application/json; charset=UTF-8", "Content-type": "application/json; charset=UTF-8",
Authorization:token Authorization:token
}, },
body:JSON.stringify({content:tis.value}) body:JSON.stringify({content:typebox.value})
}) })
tis.value=""; typebox.value="";
editing=false; editing=false;
}else{ }else{
let replyjson=false; let replyjson=false;
@ -338,7 +201,7 @@ async function enter(event){
if(images.length==0){ if(images.length==0){
const body={ const body={
content:tis.value, content:typebox.value,
nonce:Math.floor(Math.random()*1000000000) nonce:Math.floor(Math.random()*1000000000)
}; };
if(replyjson){ if(replyjson){
@ -357,11 +220,11 @@ async function enter(event){
console.log(out,"here it is") console.log(out,"here it is")
} }
) )
tis.value=""; typebox.value="";
}else{ }else{
let formData = new FormData(); let formData = new FormData();
const body={ const body={
content:tis.value, content:typebox.value,
nonce:Math.floor(Math.random()*1000000000), nonce:Math.floor(Math.random()*1000000000),
} }
if(replyjson){ if(replyjson){
@ -387,7 +250,7 @@ async function enter(event){
images.pop() images.pop()
pasteimage.removeChild(imageshtml.pop()) pasteimage.removeChild(imageshtml.pop())
} }
tis.value=""; typebox.value="";
} }
} }
} }

11
webpage/login.js
View file

@ -38,12 +38,13 @@ if(instancein){
clearTimeout(timeout); clearTimeout(timeout);
timeout=setTimeout(checkInstance,1000); timeout=setTimeout(checkInstance,1000);
}); });
if(localStorage.getItem("instanceinfo")){
instancein.value=JSON.parse(localStorage.getItem("instanceinfo")).wellknown
}else{
checkInstance("https://spacebar.chat/");
}
} }
if(localStorage.getItem("instanceinfo")){
instancein.value=JSON.parse(localStorage.getItem("instanceinfo")).wellknown
}else{
checkInstance("https://spacebar.chat/");
}
async function login(username, password){ async function login(username, password){
const options={ const options={

39
webpage/message.js
View file

@ -1,4 +1,37 @@
class cmessage{ class cmessage{
static contextmenu=new contextmenu("message menu");
static setupcmenu(){
cmessage.contextmenu.addbutton("Copy raw text",function(){
console.log(this)
navigator.clipboard.writeText(this.content);
})
cmessage.contextmenu.addbutton("Reply",function(div){
console.log(this)
if(replyingto){
replyingto.classList.remove("replying");
}
replyingto=div;
console.log(div);
replyingto.classList.add("replying");
})
cmessage.contextmenu.addbutton("Copy message id",function(){
console.log(this)
navigator.clipboard.writeText(this.id);
})
cmessage.contextmenu.addbutton("Message user",function(){
console.log(this)
fetch(info.api.toString()+"/v9/users/@me/channels",
{method:"POST",
body:JSON.stringify({"recipients":[this.author.id]}),
headers: {"Content-type": "application/json; charset=UTF-8",Authorization:token}
});
})
cmessage.contextmenu.addbutton("Edit",function(){
console.log(this)
editing=this.id;
document.getElementById("typebox").value=this.content;
},null,_=>{return _.author.id==READY.d.user.id});
}
constructor(messagejson){ constructor(messagejson){
for(const thing of Object.keys(messagejson)){ for(const thing of Object.keys(messagejson)){
this[thing]=messagejson[thing]; this[thing]=messagejson[thing];
@ -7,11 +40,8 @@ class cmessage{
console.log(this.type) console.log(this.type)
} }
messageevents(obj){ messageevents(obj){
cmessage.contextmenu.bind(obj,this)
obj.classList.add("messagediv") obj.classList.add("messagediv")
obj.addEventListener("contextmenu", (event) => {
event.preventDefault();
makemenu(event.currentTarget,event.clientX,event.clientY)
});
} }
buildhtml(premessage){ buildhtml(premessage){
//premessage??=messages.lastChild; //premessage??=messages.lastChild;
@ -175,3 +205,4 @@ function formatTime(date) {
return `${date.toLocaleDateString()} at ${formatTime(date)}`; return `${date.toLocaleDateString()} at ${formatTime(date)}`;
} }
} }
cmessage.setupcmenu();

7
webpage/style.css
View file

@ -64,7 +64,7 @@ samp {
.contextbutton { .contextbutton {
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--message-bg-hover); background-color: var(--channels-bg);
color: var(--primary-text); color: var(--primary-text);
font-weight: bold; font-weight: bold;
width: 5cm; width: 5cm;
@ -72,6 +72,8 @@ samp {
text-align: left; text-align: left;
font-size: .5cm; font-size: .5cm;
cursor: pointer; cursor: pointer;
border-width: 0px 0px .03in;
margin: .02in .05in;
} }
.infosection { .infosection {
@ -137,7 +139,8 @@ h2 {
.contextmenu { .contextmenu {
position: absolute; position: absolute;
background-color: var(--profile-bg); background-color: var(--profile-info-bg);
border-radius: .05in;
} }
#neunence { #neunence {