From 78fd7f462209a1bae27da44f44e53948176bdc5f Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Thu, 4 Jul 2024 17:28:22 -0500 Subject: [PATCH] got rid of message tables and fixed pre reply bug --- .dist/localuser.js | 2 +- .dist/markdown.js | 49 +++++++++++++++++++++++++++++++++ .dist/message.js | 42 ++++++++++++++++++---------- webpage/localuser.ts | 2 +- webpage/markdown.ts | 5 ++++ webpage/message.ts | 48 ++++++++++++++++++-------------- webpage/style.css | 65 ++++++++++++++++++++++++++++++++++++++++---- 7 files changed, 170 insertions(+), 43 deletions(-) diff --git a/.dist/localuser.js b/.dist/localuser.js index 500cf0d..b7c9d94 100644 --- a/.dist/localuser.js +++ b/.dist/localuser.js @@ -425,7 +425,7 @@ class Localuser { content.textContent = "Loading..."; const full = new Fullscreen(["html", content]); full.show(); - const res = await fetch(this.info.api.toString() + "/v9/discoverable-guilds?limit=16", { + const res = await fetch(this.info.api.toString() + "/v9/discoverable-guilds?limit=50", { headers: this.headers }); const json = await res.json(); diff --git a/.dist/markdown.js b/.dist/markdown.js index bbf11bf..2521580 100644 --- a/.dist/markdown.js +++ b/.dist/markdown.js @@ -120,6 +120,11 @@ function markdown(text, { keep = false, stdsize = false } = {}) { build += txt[j]; } } + if (stdsize) { + console.log(build); + build = build.replaceAll("\n", ""); + console.log(build, JSON.stringify(build)); + } if (find === count) { appendcurrent(); i = j; @@ -350,6 +355,50 @@ function markdown(text, { keep = false, stdsize = false } = {}) { continue; } } + if (txt[i] === "<" && txt[i + 1] === "t" && txt[i + 2] === ":") { + let found = false; + const build = ["<", "t", ":"]; + let j = i + 3; + for (; txt[j] !== void 0; j++) { + build.push(txt[j]); + if (txt[j] === ">") { + found = true; + break; + } + } + if (found) { + appendcurrent(); + i = j; + const parts = build.join("").match(/^$/); + const dateInput = new Date(Number.parseInt(parts[1]) * 1000); + let time = ""; + if (Number.isNaN(dateInput.getTime())) + time = build.join(""); + else { + if (parts[3] === "d") + time = dateInput.toLocaleString(void 0, { day: "2-digit", month: "2-digit", year: "numeric" }); + else if (parts[3] === "D") + time = dateInput.toLocaleString(void 0, { day: "numeric", month: "long", year: "numeric" }); + else if (!parts[3] || parts[3] === "f") + time = dateInput.toLocaleString(void 0, { day: "numeric", month: "long", year: "numeric" }) + " " + + dateInput.toLocaleString(void 0, { hour: "2-digit", minute: "2-digit" }); + else if (parts[3] === "F") + time = dateInput.toLocaleString(void 0, { day: "numeric", month: "long", year: "numeric", weekday: "long" }) + " " + + dateInput.toLocaleString(void 0, { hour: "2-digit", minute: "2-digit" }); + else if (parts[3] === "t") + time = dateInput.toLocaleString(void 0, { hour: "2-digit", minute: "2-digit" }); + else if (parts[3] === "T") + time = dateInput.toLocaleString(void 0, { hour: "2-digit", minute: "2-digit", second: "2-digit" }); + else if (parts[3] === "R") + time = Math.round((Date.now() - (Number.parseInt(parts[1]) * 1000)) / 1000 / 60) + " minutes ago"; + } + const timeElem = document.createElement("span"); + timeElem.classList.add("markdown-timestamp"); + timeElem.textContent = time; + span.appendChild(timeElem); + continue; + } + } current.textContent += txt[i]; } appendcurrent(); diff --git a/.dist/message.js b/.dist/message.js index cd6e004..f6f43b3 100644 --- a/.dist/message.js +++ b/.dist/message.js @@ -153,7 +153,8 @@ class Message { div.classList.add("replying"); } div.innerHTML = ""; - const build = document.createElement('table'); + const build = document.createElement('div'); + build.classList.add("flexltr"); if (this.message_reference) { const replyline = document.createElement("div"); const line = document.createElement("hr"); @@ -206,7 +207,8 @@ class Message { build.classList.add("message"); div.appendChild(build); if ({ 0: true, 19: true }[this.type] || this.attachments.length !== 0) { - const pfpRow = document.createElement('th'); + const pfpRow = document.createElement('div'); + pfpRow.classList.add("flexltr"); let pfpparent, current; if (premessage != null) { pfpparent ??= premessage; @@ -227,16 +229,19 @@ class Message { } pfpRow.classList.add("pfprow"); build.appendChild(pfpRow); - const text = document.createElement("th"); - const texttxt = document.createElement("table"); - texttxt.classList.add("commentrow"); + const text = document.createElement("div"); + text.classList.add("flexttb"); + const texttxt = document.createElement("div"); + texttxt.classList.add("commentrow", "flexttb"); text.appendChild(texttxt); if (combine) { const username = document.createElement("span"); username.classList.add("username"); this.author.bind(username, this.guild); + div.classList.add("topMessage"); username.textContent = this.author.username; - const userwrap = document.createElement("tr"); + const userwrap = document.createElement("div"); + userwrap.classList.add("flexltr"); userwrap.appendChild(username); if (this.author.bot) { const username = document.createElement("span"); @@ -250,22 +255,28 @@ class Message { userwrap.appendChild(time); texttxt.appendChild(userwrap); } + else { + div.classList.remove("topMessage"); + } const messaged = markdown(this.content); div["txt"] = messaged; - const messagedwrap = document.createElement("tr"); + const messagedwrap = document.createElement("div"); + messagedwrap.classList.add("flexttb"); messagedwrap.appendChild(messaged); texttxt.appendChild(messagedwrap); build.appendChild(text); if (this.attachments.length) { console.log(this.attachments); - const attach = document.createElement("tr"); + const attach = document.createElement("div"); + attach.classList.add("flexltr"); for (const thing of this.attachments) { attach.appendChild(thing.getHTML()); } messagedwrap.appendChild(attach); } if (this.embeds.length) { - const embeds = document.createElement("tr"); + const embeds = document.createElement("div"); + embeds.classList.add("flexltr"); for (const thing of this.embeds) { embeds.appendChild(thing.generateHTML()); } @@ -274,20 +285,21 @@ class Message { // } else if (this.type === 7) { - const text = document.createElement("th"); - const texttxt = document.createElement("table"); + const text = document.createElement("div"); + text.classList.add("flexttb"); + const texttxt = document.createElement("div"); text.appendChild(texttxt); build.appendChild(text); + texttxt.classList.add("flexltr"); const messaged = document.createElement("p"); div["txt"] = messaged; messaged.textContent = "welcome: " + this.author.username; - const messagedwrap = document.createElement("tr"); - messagedwrap.appendChild(messaged); + texttxt.appendChild(messaged); const time = document.createElement("span"); time.textContent = " " + formatTime(new Date(this.timestamp)); time.classList.add("timestamp"); - messagedwrap.append(time); - texttxt.appendChild(messagedwrap); + texttxt.append(time); + div.classList.add("topMessage"); } div["all"] = this; return (div); diff --git a/webpage/localuser.ts b/webpage/localuser.ts index f327476..9ca8b11 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -445,7 +445,7 @@ class Localuser{ const full=new Fullscreen(["html", content]); full.show(); - const res=await fetch(this.info.api.toString()+"/v9/discoverable-guilds?limit=16", { + const res=await fetch(this.info.api.toString()+"/v9/discoverable-guilds?limit=50", { headers: this.headers }); const json=await res.json(); diff --git a/webpage/markdown.ts b/webpage/markdown.ts index 41aad61..bc0eac7 100644 --- a/webpage/markdown.ts +++ b/webpage/markdown.ts @@ -118,6 +118,11 @@ function markdown(text : string|string[],{keep=false,stdsize=false} = {}){ build+=txt[j]; } } + if(stdsize){ + console.log(build); + build=build.replaceAll("\n",""); + console.log(build,JSON.stringify(build)); + } if(find===count){ appendcurrent(); i=j; diff --git a/webpage/message.ts b/webpage/message.ts index 0a49a6d..9a7f02b 100644 --- a/webpage/message.ts +++ b/webpage/message.ts @@ -157,7 +157,8 @@ class Message{ div.classList.add("replying"); } div.innerHTML=""; - const build = document.createElement('table'); + const build = document.createElement('div'); + build.classList.add("flexltr"); if(this.message_reference){ const replyline=document.createElement("div"); const line=document.createElement("hr"); @@ -213,8 +214,8 @@ class Message{ build.classList.add("message"); div.appendChild(build); if({0:true,19:true}[this.type]||this.attachments.length!==0){ - const pfpRow = document.createElement('th'); - + const pfpRow = document.createElement('div'); + pfpRow.classList.add("flexltr"); let pfpparent, current if(premessage!=null){ pfpparent??=premessage; @@ -234,18 +235,19 @@ class Message{ } pfpRow.classList.add("pfprow") build.appendChild(pfpRow); - const text=document.createElement("th"); - - const texttxt=document.createElement("table"); - texttxt.classList.add("commentrow") + const text=document.createElement("div"); + text.classList.add("flexttb") + const texttxt=document.createElement("div"); + texttxt.classList.add("commentrow","flexttb"); text.appendChild(texttxt); if(combine){ const username=document.createElement("span"); username.classList.add("username") this.author.bind(username,this.guild); - + div.classList.add("topMessage"); username.textContent=this.author.username; - const userwrap=document.createElement("tr") + const userwrap=document.createElement("div"); + userwrap.classList.add("flexltr"); userwrap.appendChild(username) if(this.author.bot){ const username=document.createElement("span"); @@ -259,24 +261,29 @@ class Message{ userwrap.appendChild(time); texttxt.appendChild(userwrap) + }else{ + div.classList.remove("topMessage"); } const messaged=markdown(this.content); div["txt"]=messaged; - const messagedwrap=document.createElement("tr") + const messagedwrap=document.createElement("div"); + messagedwrap.classList.add("flexttb") messagedwrap.appendChild(messaged) texttxt.appendChild(messagedwrap) build.appendChild(text) if(this.attachments.length){ console.log(this.attachments) - const attach = document.createElement("tr") + const attach = document.createElement("div"); + attach.classList.add("flexltr"); for(const thing of this.attachments){ attach.appendChild(thing.getHTML()) } messagedwrap.appendChild(attach) } if(this.embeds.length){ - const embeds = document.createElement("tr") + const embeds = document.createElement("div") + embeds.classList.add("flexltr"); for(const thing of this.embeds){ embeds.appendChild(thing.generateHTML()); } @@ -285,24 +292,23 @@ class Message{ // }else if(this.type===7){ - const text=document.createElement("th"); - - const texttxt=document.createElement("table"); + const text=document.createElement("div"); + text.classList.add("flexttb") + const texttxt=document.createElement("div"); text.appendChild(texttxt); - build.appendChild(text) - + build.appendChild(text); + texttxt.classList.add("flexltr"); const messaged=document.createElement("p"); div["txt"]=messaged; messaged.textContent="welcome: "+this.author.username; - const messagedwrap=document.createElement("tr") - messagedwrap.appendChild(messaged); + texttxt.appendChild(messaged); const time=document.createElement("span"); time.textContent=" "+formatTime(new Date(this.timestamp)); time.classList.add("timestamp"); - messagedwrap.append(time); + texttxt.append(time); + div.classList.add("topMessage") - texttxt.appendChild(messagedwrap) } div["all"]=this; return(div) diff --git a/webpage/style.css b/webpage/style.css index dfbe199..bc044b7 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -70,6 +70,10 @@ th { max-width:100%; /* width: 9%; */ /* display: inline-block; */ + display: flex; + flex-wrap: nowrap; + flex-direction: column; + max-height: 20in; } pre { background-color: var(--code-bg); @@ -222,33 +226,38 @@ img { .message { width: 100%; + flex-wrap: nowrap !important; + overflow: auto !important; } .pfprow { width: .5in; + flex-shrink: 0; } .commentrow { width: 100%; - height: 100%; - vertical-align: top; + height: 100%; + vertical-align: top; word-wrap: break-word; text-align: left; font-weight: normal; } #messagecontainer { - overflow: auto; + overflow-y: auto; display: flex; max-width: 100%; flex-shrink: 1; width: 100%; /* flex-grow: 1; */ + overflow-x: clip; } #messages { max-width: 100%; /* height: 100%; */ + width: 100%; } p { @@ -331,7 +340,7 @@ div { p { transition: background .1s ease-in-out, color .1s ease-in-out; - width: 100%; + /* width: 100%; */ } .username { @@ -385,6 +394,7 @@ p { #typediv { position: relative; /* display: flex; */ + width: 99%; } .loading-indicator { @@ -480,6 +490,7 @@ p { .timestamp { color: var(--timestamp-color); font-size: .14in; + padding-left: .05in; } .replyflex { @@ -537,7 +548,22 @@ p { width: 25vw; grid-column: 2; } - +.replytext pre { + padding: 0 .05in; + color: var(--reply-text); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: fit-content; + /* display: block; */ + /* flex-grow: 1; */ + flex: 1 1 auto; + width: fit-content; + min-width: 0; + /* display: inline-block !important; */ + width: 25vw; + grid-column: 2; +} ::-webkit-scrollbar { width: .1in; height: .1in; @@ -1143,6 +1169,7 @@ span { overflow: auto; /* margin-bottom: 1in; */ /* padding-bottom: .1in; */ + align-items: flex-start; } .settingbuttons{ padding-top:.075in; @@ -1296,4 +1323,32 @@ span { width:80vw; display: flex; flex-direction: column; +} +.flex{ + display:flex; + h3{ + width: fit-content; + } +; +} +.pfprow .pfp{ + width:.4in; + height:.4in; +} +.topMessage{ + padding-top:.1in +} +.messagediv .flexltr{ + display:flex; + flex-wrap:wrap; + overflow:hidden !important; + max-height:100in; +} +.messagediv .flexttb{ + display:flex; + overflow: hidden; + flex-wrap: wrap; + width: 100%; + flex-direction: row; + max-height:100in; } \ No newline at end of file