Redo context menus work and make them not ugly
This commit is contained in:
MathMan05
parent
bf9062bfc8
commit
44c0b3b3cc
8 changed files with 144 additions and 174 deletions
4
index.js
4
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})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
43
webpage/contextmenu.js
Normal file
43
webpage/contextmenu.js
Normal 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)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<body class="Dark-theme">
|
||||
<script src="/login.js"></script>
|
||||
<script src="/contextmenu.js"></script>
|
||||
<script src="/member.js"></script>
|
||||
<script src="/user.js"></script>
|
||||
<script src="/message.js"></script>
|
||||
|
|
@ -20,6 +21,7 @@
|
|||
<script src="/localuser.js"></script>
|
||||
<script src="/markdown.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>
|
||||
<table id="page">
|
||||
<tr>
|
||||
|
|
|
|||
185
webpage/index.js
185
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="";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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={
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue