From 44c0b3b3ccd1ea8fcb73cb155e2ac124a87000cb Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Sun, 9 Jun 2024 19:05:45 -0500 Subject: [PATCH] Redo context menus work and make them not ugly --- index.js | 4 + webpage/channel.js | 27 +++++- webpage/contextmenu.js | 43 ++++++++++ webpage/index.html | 2 + webpage/index.js | 185 ++++++----------------------------------- webpage/login.js | 11 +-- webpage/message.js | 39 ++++++++- webpage/style.css | 7 +- 8 files changed, 144 insertions(+), 174 deletions(-) create mode 100644 webpage/contextmenu.js diff --git a/index.js b/index.js index 5bfa988..3b11994 100755 --- a/index.js +++ b/index.js @@ -18,6 +18,10 @@ app.get('/register.js', (req, res) => { app.get('/dirrect.js', (req, res) => { 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) => { res.sendFile("./webpage/login.js", {root: __dirname}) }) diff --git a/webpage/channel.js b/webpage/channel.js index 91e2772..a6deb29 100644 --- a/webpage/channel.js +++ b/webpage/channel.js @@ -1,4 +1,26 @@ +"use strict" 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){ if(JSON===-1){ return; @@ -105,7 +127,7 @@ class channel{ decdiv.classList.add("channeleffects"); decdiv.classList.add("channel"); - lacechannel(decdiv); + channel.contextmenu.bind(decdiv,this); decdiv.all=this; @@ -131,7 +153,7 @@ class channel{ if(this.hasunreads){ div.classList.add("cunread"); } - lacechannel(div); + channel.contextmenu.bind(div,this); if(admin){this.coatDropDiv(div,this);} div.all=this; const myhtml=document.createElement("span"); @@ -450,3 +472,4 @@ class channel{ } } } +channel.setupcontextmenu(); diff --git a/webpage/contextmenu.js b/webpage/contextmenu.js new file mode 100644 index 0000000..c5a4433 --- /dev/null +++ b/webpage/contextmenu.js @@ -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) + }); + } +} diff --git a/webpage/index.html b/webpage/index.html index 8454190..b855ca2 100644 --- a/webpage/index.html +++ b/webpage/index.html @@ -10,6 +10,7 @@ + @@ -20,6 +21,7 @@ +

Jank Client is loading

This shouldn't take long

diff --git a/webpage/index.js b/webpage/index.js index bfa0b93..a1ed915 100644 --- a/webpage/index.js +++ b/webpage/index.js @@ -21,18 +21,6 @@ let ws initwebsocket(); 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=""; document.addEventListener('click', function(event) { if(currentmenu==""){ @@ -44,15 +32,19 @@ document.addEventListener('click', function(event) { } }); let replyingto=null; -lacechannel(document.getElementById("channels")); -function lacechannel(c){ - c.addEventListener("contextmenu", (event) => { - event.preventDefault(); - event.stopImmediatePropagation(); - makemenuc.bind(c)(event.currentTarget,event.clientX,event.clientY); - }); +{ + const menu=new contextmenu("create backclick"); + menu.addbutton("Create channel",function(){ + createchannels(thisuser.lookingguild.createChannel.bind(thisuser.lookingguild)); + },null,_=>{return thisuser.isAdmin()}) + + menu.addbutton("Create category",function(){ + createcategory(thisuser.lookingguild.createChannel.bind(thisuser.lookingguild)); + },null,_=>{return thisuser.isAdmin()}) + menu.bind(document.getElementById("channels")) } + function createchannels(fincall){ let name=""; let category=2; @@ -98,139 +90,7 @@ function createcategory(fincall){ channelselect.show(); } 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=[]; function buildprofile(x,y,user,type="author"){ if(currentmenu!=""){ @@ -302,12 +162,15 @@ function profileclick(obj,author){ } var editing=false; -document.getElementById("typebox").addEventListener("keyup",enter); -console.log(document.getElementById("typebox")) -document.getElementById("typebox").onclick=console.log; +const typebox=document.getElementById("typebox") +typebox.addEventListener("keyup",enter); +typebox.addEventListener("keydown",event=>{ + if(event.key === "Enter"&&!event.shiftKey) event.preventDefault(); +}); +console.log(typebox) +typebox.onclick=console.log; async function enter(event){ thisuser.lookingguild.prevchannel.typingstart(); - const tis=document.getElementById("typebox"); if(event.key === "Enter"&&!event.shiftKey){ event.preventDefault(); if(editing){ @@ -317,10 +180,10 @@ async function enter(event){ "Content-type": "application/json; charset=UTF-8", Authorization:token }, - body:JSON.stringify({content:tis.value}) + body:JSON.stringify({content:typebox.value}) }) - tis.value=""; + typebox.value=""; editing=false; }else{ let replyjson=false; @@ -338,7 +201,7 @@ async function enter(event){ if(images.length==0){ const body={ - content:tis.value, + content:typebox.value, nonce:Math.floor(Math.random()*1000000000) }; if(replyjson){ @@ -357,11 +220,11 @@ async function enter(event){ console.log(out,"here it is") } ) - tis.value=""; + typebox.value=""; }else{ let formData = new FormData(); const body={ - content:tis.value, + content:typebox.value, nonce:Math.floor(Math.random()*1000000000), } if(replyjson){ @@ -387,7 +250,7 @@ async function enter(event){ images.pop() pasteimage.removeChild(imageshtml.pop()) } - tis.value=""; + typebox.value=""; } } } diff --git a/webpage/login.js b/webpage/login.js index 27f048b..8d16335 100644 --- a/webpage/login.js +++ b/webpage/login.js @@ -38,12 +38,13 @@ if(instancein){ clearTimeout(timeout); 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){ const options={ diff --git a/webpage/message.js b/webpage/message.js index e7cbd8c..eb2cead 100644 --- a/webpage/message.js +++ b/webpage/message.js @@ -1,4 +1,37 @@ 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){ for(const thing of Object.keys(messagejson)){ this[thing]=messagejson[thing]; @@ -7,11 +40,8 @@ class cmessage{ console.log(this.type) } messageevents(obj){ + cmessage.contextmenu.bind(obj,this) obj.classList.add("messagediv") - obj.addEventListener("contextmenu", (event) => { - event.preventDefault(); - makemenu(event.currentTarget,event.clientX,event.clientY) - }); } buildhtml(premessage){ //premessage??=messages.lastChild; @@ -175,3 +205,4 @@ function formatTime(date) { return `${date.toLocaleDateString()} at ${formatTime(date)}`; } } +cmessage.setupcmenu(); diff --git a/webpage/style.css b/webpage/style.css index 11403fc..b57af28 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -64,7 +64,7 @@ samp { .contextbutton { transition: background .1s ease-in-out; - background-color: var(--message-bg-hover); + background-color: var(--channels-bg); color: var(--primary-text); font-weight: bold; width: 5cm; @@ -72,6 +72,8 @@ samp { text-align: left; font-size: .5cm; cursor: pointer; + border-width: 0px 0px .03in; + margin: .02in .05in; } .infosection { @@ -137,7 +139,8 @@ h2 { .contextmenu { position: absolute; - background-color: var(--profile-bg); + background-color: var(--profile-info-bg); + border-radius: .05in; } #neunence {