From bae4bea33115c562da85675cd649f1539e7dba50 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Thu, 5 Sep 2024 15:18:37 -0500 Subject: [PATCH] added message buttons --- .dist/message.js | 71 +++++++++++++++++++++++++++++++++++++++++++--- webpage/message.ts | 71 +++++++++++++++++++++++++++++++++++++++++++--- webpage/style.css | 29 ++++++++++++++++++- 3 files changed, 162 insertions(+), 9 deletions(-) diff --git a/.dist/message.js b/.dist/message.js index 4b469a9..9a85b7d 100644 --- a/.dist/message.js +++ b/.dist/message.js @@ -6,6 +6,7 @@ import { Embed } from "./embed.js"; import { File } from "./file.js"; import { SnowFlake } from "./snowflake.js"; import { Emoji } from "./emoji.js"; +import { Dialog } from "./dialog.js"; class Message extends SnowFlake { static contextmenu = new Contextmenu("message menu"); owner; @@ -59,10 +60,7 @@ class Message extends SnowFlake { }); }); Message.contextmenu.addbutton("Edit", function () { - this.channel.editing = this; - const markdown = document.getElementById("typebox")["markdown"]; - markdown.txt = this.content.rawString.split(""); - markdown.boxupdate(document.getElementById("typebox")); + this.setEdit(); }, null, function () { return this.author.id === this.localuser.user.id; }); @@ -72,6 +70,12 @@ class Message extends SnowFlake { return this.canDelete(); }); } + setEdit() { + this.channel.editing = this; + const markdown = document.getElementById("typebox")["markdown"]; + markdown.txt = this.content.rawString.split(""); + markdown.boxupdate(document.getElementById("typebox")); + } constructor(messagejson, owner) { super(messagejson.id); this.owner = owner; @@ -478,8 +482,67 @@ class Message extends SnowFlake { this.reactdiv = new WeakRef(reactions); this.updateReactions(); div.append(reactions); + this.bindButtonEvent(); return (div); } + bindButtonEvent() { + if (this.div) { + let buttons; + this.div.onmouseenter = _ => { + if (buttons) { + buttons.remove(); + buttons = undefined; + } + if (this.div) { + buttons = document.createElement("div"); + buttons.classList.add("messageButtons", "flexltr"); + if (this.channel.hasPermission("SEND_MESSAGES")) { + const container = document.createElement("div"); + const reply = document.createElement("span"); + reply.classList.add("svgtheme", "svg-reply", "svgicon"); + container.append(reply); + buttons.append(container); + container.onclick = _ => { + this.channel.setReplying(this); + }; + } + if (this.author === this.localuser.user) { + const container = document.createElement("div"); + const edit = document.createElement("span"); + edit.classList.add("svgtheme", "svg-edit", "svgicon"); + container.append(edit); + buttons.append(container); + container.onclick = _ => { + this.setEdit(); + }; + } + if (this.canDelete()) { + const container = document.createElement("div"); + const reply = document.createElement("span"); + reply.classList.add("svgtheme", "svg-delete", "svgicon"); + container.append(reply); + buttons.append(container); + container.onclick = _ => { + if (_.shiftKey) { + this.delete(); + return; + } + const diaolog = new Dialog(["hdiv", ["title", "are you sure you want to delete this?"], ["button", "", "yes", () => { this.delete(); diaolog.hide(); }], ["button", "", "no", () => { diaolog.hide(); }]]); + diaolog.show(); + }; + } + console.log(buttons); + this.div.append(buttons); + } + }; + this.div.onmouseleave = _ => { + if (buttons) { + buttons.remove(); + buttons = undefined; + } + }; + } + } updateReactions() { const reactdiv = this.reactdiv.deref(); if (!reactdiv) diff --git a/webpage/message.ts b/webpage/message.ts index ddcbd75..dbeb1e8 100644 --- a/webpage/message.ts +++ b/webpage/message.ts @@ -10,6 +10,7 @@ import{File}from"./file.js"; import{ SnowFlake }from"./snowflake.js"; import{ memberjson, messagejson }from"./jsontypes.js"; import{Emoji}from"./emoji.js"; +import { Dialog } from "./dialog.js"; class Message extends SnowFlake{ static contextmenu=new Contextmenu("message menu"); @@ -64,10 +65,7 @@ class Message extends SnowFlake{ }); }); Message.contextmenu.addbutton("Edit",function(this:Message){ - this.channel.editing=this; - const markdown=(document.getElementById("typebox") as HTMLDivElement)["markdown"] as MarkDown; - markdown.txt=this.content.rawString.split(""); - markdown.boxupdate(document.getElementById("typebox") as HTMLDivElement); + this.setEdit(); },null,function(){ return this.author.id===this.localuser.user.id; }); @@ -77,6 +75,12 @@ class Message extends SnowFlake{ return this.canDelete(); }); } + setEdit(){ + this.channel.editing=this; + const markdown=(document.getElementById("typebox") as HTMLDivElement)["markdown"] as MarkDown; + markdown.txt=this.content.rawString.split(""); + markdown.boxupdate(document.getElementById("typebox") as HTMLDivElement); + } constructor(messagejson:messagejson,owner:Channel){ super(messagejson.id); this.owner=owner; @@ -473,8 +477,67 @@ class Message extends SnowFlake{ this.reactdiv=new WeakRef(reactions); this.updateReactions(); div.append(reactions); + this.bindButtonEvent(); return(div); } + bindButtonEvent(){ + if(this.div){ + let buttons:HTMLDivElement|undefined; + this.div.onmouseenter=_=>{ + if(buttons){ + buttons.remove(); + buttons=undefined; + } + if(this.div){ + buttons=document.createElement("div"); + buttons.classList.add("messageButtons","flexltr"); + if(this.channel.hasPermission("SEND_MESSAGES")){ + const container=document.createElement("div"); + const reply=document.createElement("span"); + reply.classList.add("svgtheme", "svg-reply", "svgicon"); + container.append(reply); + buttons.append(container); + container.onclick=_=>{ + this.channel.setReplying(this); + } + } + if(this.author===this.localuser.user){ + const container=document.createElement("div"); + const edit=document.createElement("span"); + edit.classList.add("svgtheme", "svg-edit", "svgicon"); + container.append(edit); + buttons.append(container); + container.onclick=_=>{ + this.setEdit(); + } + } + if(this.canDelete()){ + const container=document.createElement("div"); + const reply=document.createElement("span"); + reply.classList.add("svgtheme", "svg-delete", "svgicon"); + container.append(reply); + buttons.append(container); + container.onclick=_=>{ + if(_.shiftKey){ + this.delete(); + return; + } + const diaolog=new Dialog(["hdiv",["title","are you sure you want to delete this?"],["button","","yes",()=>{this.delete();diaolog.hide()}],["button","","no",()=>{diaolog.hide()}]]); + diaolog.show(); + } + } + console.log(buttons); + this.div.append(buttons); + } + } + this.div.onmouseleave=_=>{ + if(buttons){ + buttons.remove(); + buttons=undefined; + } + } + } + } updateReactions(){ const reactdiv=this.reactdiv.deref(); if(!reactdiv)return; diff --git a/webpage/style.css b/webpage/style.css index be0fa6b..e495a17 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -91,7 +91,6 @@ video{ } } .messagediv{ - overflow: hidden; max-width:100%; /* width: 9%; */ /* display: inline-block; */ @@ -103,6 +102,7 @@ video{ flex-shrink: 0; width: 100%; box-sizing: border-box; + position: relative; } pre { background: var(--code-bg); @@ -1577,6 +1577,15 @@ form div{ .svg-announce{ mask: url(/icons/announce.svg); } +.svg-edit{ + mask: url(/icons/edit.svg); +} +.svg-reply{ + mask: url(/icons/reply.svg); +} +.svg-delete{ + mask: url(/icons/delete.svg); +} .svg-category{ mask: url(/icons/category.svg); } @@ -2087,3 +2096,21 @@ form div{ margin-left:.05in; } +.messageButtons{ + height:.24in; + position:absolute; + top:-.075in; + right:4px; + background:var(--settings-hover); + padding:.02in; + div{ + span{ + display:block; + width:.175in; + height:.175in; + } + padding:.0in; + margin:.02in; + box-sizing:border-box; + } +}