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

Reply GUI

Browse source
This commit is contained in:
MathMan05 2024-06-28 19:53:48 -05:00
parent a05c74bb3c
commit e49360fba1
8 changed files with 116 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

33
.dist/channel.js
View file

@ -404,6 +404,38 @@ class Channel {
headers: this.headers
});
}
setReplying(message) {
if (this.replyingto) {
this.replyingto.div.classList.remove("replying");
}
this.replyingto = message;
console.log(message);
this.replyingto.div.classList.add("replying");
this.makereplybox();
}
makereplybox() {
const replybox = document.getElementById("replybox");
if (this.replyingto) {
replybox.innerHTML = "";
const span = document.createElement("span");
span.textContent = "Replying to " + this.replyingto.author.username;
const X = document.createElement("button");
X.onclick = _ => {
this.replyingto.div.classList.remove("replying");
replybox.classList.add("hideReplyBox");
this.replyingto = null;
replybox.innerHTML = "";
};
replybox.classList.remove("hideReplyBox");
X.textContent = "⦻";
X.classList.add("cancelReply");
replybox.append(span);
replybox.append(X);
}
else {
replybox.classList.add("hideReplyBox");
}
}
async getmessage(id) {
if (this.messageids[id]) {
return this.messageids[id];
@ -427,6 +459,7 @@ class Channel {
const prom = Message.wipeChanel();
await this.putmessages();
await prom;
this.makereplybox();
this.buildmessages();
history.pushState(null, null, "/channels/" + this.guild_id + "/" + this.id);
document.getElementById("channelname").textContent = "#" + this.name;

9
.dist/index.js
View file

@ -11,14 +11,14 @@ async function waitforload() {
}
await waitforload();
function setDynamicHeight() {
var servertdHeight = document.getElementById('servertd').offsetHeight + document.getElementById('typebox').offsetHeight + document.getElementById('pasteimage').offsetHeight;
var servertdHeight = document.getElementById('servertd').offsetHeight + document.getElementById('typediv').offsetHeight + document.getElementById('pasteimage').offsetHeight;
document.documentElement.style.setProperty('--servertd-height', servertdHeight + 'px');
}
const resizeObserver = new ResizeObserver(() => {
setDynamicHeight();
});
resizeObserver.observe(document.getElementById('servertd'));
resizeObserver.observe(document.getElementById('typebox'));
resizeObserver.observe(document.getElementById('replybox'));
resizeObserver.observe(document.getElementById('pasteimage'));
setDynamicHeight();
const users = getBulkUsers();
@ -129,15 +129,16 @@ async function enter(event) {
}
else {
replyingto = thisuser.channelfocus.replyingto;
let replying = replyingto?.all;
let replying = replyingto;
if (replyingto) {
replyingto.classList.remove("replying");
replyingto.div.classList.remove("replying");
}
thisuser.channelfocus.replyingto = null;
channel.sendMessage(typebox.value, {
attachments: images,
replyingto: replying,
});
thisuser.channelfocus.makereplybox();
}
while (images.length != 0) {
images.pop();

10
.dist/message.js
View file

@ -36,12 +36,7 @@ class Message {
navigator.clipboard.writeText(this.content);
});
Message.contextmenu.addbutton("Reply", function (div) {
if (this.channel.replyingto) {
this.channel.replyingto.classList.remove("replying");
}
this.channel.replyingto = div;
console.log(div);
this.channel.replyingto.classList.add("replying");
this.channel.setReplying(this);
});
Message.contextmenu.addbutton("Copy message id", function () {
navigator.clipboard.writeText(this.id);
@ -163,6 +158,9 @@ class Message {
premessage = this.channel.messages[this.channel.messages.indexOf(this) + 1];
}
const div = this.div;
if (this === this.channel.replyingto) {
div.classList.add("replying");
}
div.innerHTML = "";
const build = document.createElement('table');
if (this.message_reference) {

35
webpage/channel.ts
View file

@ -39,7 +39,7 @@ class Channel{
message_notifications:number;
allthewayup:boolean;
static contextmenu=new Contextmenu("channel menu");
replyingto:HTMLDivElement;
replyingto:Message;
static setupcontextmenu(){
Channel.contextmenu.addbutton("Copy channel id",function(){
console.log(this)
@ -412,6 +412,38 @@ class Channel{
headers:this.headers
})
}
setReplying(message:Message){
if(this.replyingto){
this.replyingto.div.classList.remove("replying");
}
this.replyingto=message;
console.log(message);
this.replyingto.div.classList.add("replying");
this.makereplybox();
}
makereplybox(){
const replybox=document.getElementById("replybox");
if(this.replyingto){
replybox.innerHTML="";
const span=document.createElement("span");
span.textContent="Replying to "+this.replyingto.author.username;
const X=document.createElement("button");
X.onclick=_=>{
this.replyingto.div.classList.remove("replying");
replybox.classList.add("hideReplyBox");
this.replyingto=null;
replybox.innerHTML="";
}
replybox.classList.remove("hideReplyBox");
X.textContent="⦻";
X.classList.add("cancelReply");
replybox.append(span);
replybox.append(X);
}else{
replybox.classList.add("hideReplyBox");
}
}
async getmessage(id:string):Promise<Message>{
if(this.messageids[id]){
return this.messageids[id];
@ -434,6 +466,7 @@ class Channel{
const prom=Message.wipeChanel();
await this.putmessages();
await prom;
this.makereplybox();
this.buildmessages();
history.pushState(null, null,"/channels/"+this.guild_id+"/"+this.id);
document.getElementById("channelname").textContent="#"+this.name;

1
webpage/index.html
View file

@ -57,6 +57,7 @@
</div>
<div id="pasteimage"></div>
<div id="typediv">
<div id="replybox" class="hideReplyBox"></div>
<textarea id="typebox"></textarea>
<div id="typing" class="hidden">
<p id="typingtext">typing</p>

9
webpage/index.ts
View file

@ -12,14 +12,14 @@ async function waitforload(){
await waitforload();
function setDynamicHeight() {
var servertdHeight = document.getElementById('servertd').offsetHeight+document.getElementById('typebox').offsetHeight+document.getElementById('pasteimage').offsetHeight;
var servertdHeight = document.getElementById('servertd').offsetHeight+document.getElementById('typediv').offsetHeight+document.getElementById('pasteimage').offsetHeight;
document.documentElement.style.setProperty('--servertd-height', servertdHeight + 'px');
}
const resizeObserver = new ResizeObserver(() => {
setDynamicHeight();
});
resizeObserver.observe(document.getElementById('servertd'));
resizeObserver.observe(document.getElementById('typebox'));
resizeObserver.observe(document.getElementById('replybox'));
resizeObserver.observe(document.getElementById('pasteimage'));
setDynamicHeight();
@ -143,15 +143,16 @@ async function enter(event){
channel.editing=null;
}else{
replyingto= thisuser.channelfocus.replyingto;
let replying=replyingto?.all;
let replying=replyingto;
if(replyingto){
replyingto.classList.remove("replying");
replyingto.div.classList.remove("replying");
}
thisuser.channelfocus.replyingto=null;
channel.sendMessage(typebox.value,{
attachments:images,
replyingto:replying,
})
thisuser.channelfocus.makereplybox();
}
while(images.length!=0){
images.pop();

12
webpage/message.ts
View file

@ -40,13 +40,8 @@ class Message{
Message.contextmenu.addbutton("Copy raw text",function(){
navigator.clipboard.writeText(this.content);
});
Message.contextmenu.addbutton("Reply",function(div){
if(this.channel.replyingto){
this.channel.replyingto.classList.remove("replying");
}
this.channel.replyingto=div;
console.log(div);
this.channel.replyingto.classList.add("replying");
Message.contextmenu.addbutton("Reply",function(this:Message,div:HTMLDivElement){
this.channel.setReplying(this);
});
Message.contextmenu.addbutton("Copy message id",function(){
navigator.clipboard.writeText(this.id);
@ -168,6 +163,9 @@ class Message{
premessage=this.channel.messages[this.channel.messages.indexOf(this)+1];
}
const div=this.div;
if(this===this.channel.replyingto){
div.classList.add("replying");
}
div.innerHTML="";
const build = document.createElement('table');
if(this.message_reference){

29
webpage/style.css
View file

@ -404,6 +404,7 @@ p {
/* Move down out of view */
opacity: 0;
/* Fade out */
display: none;
}
@keyframes fade {
@ -1054,3 +1055,31 @@ span {
width: fit-content;
box-shadow:.02in .02in .05in black;
}
#replybox{
display:flex;
background:var(--reply-bg);
height:.25in;
transition: height .2s, padding .2s;
border-radius:.1in .1in 0 0;
padding-left:.05in;
justify-content: space-between;
flex-direction: row;
align-items: flex-end;
padding-top: .05in;
}
#replybox span{
align-self:stretch;
}
.cancelReply{
align-self:flex-start;
color:red;
margin-right: .1in;
height: .25in;
width: .25in;
text-align: center;
padding: 0in;
}
#replybox.hideReplyBox{
height: 0in;
padding: 0in;
}