From 165fb8d6a0303b5c993047d9861747c6a5d0a49c Mon Sep 17 00:00:00 2001 From: Carlos Sanchez Date: Mon, 19 Dec 2022 19:13:14 -0500 Subject: [PATCH 1/3] Added rethread drawer, log element only --- src/messages.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/messages.js b/src/messages.js index efd0aa6..7737419 100644 --- a/src/messages.js +++ b/src/messages.js @@ -58,6 +58,25 @@ class MessageList { } } + // Added to showcase how to detect a rethreaded message, and what you might want to show below the message + // part. But I didn't know how you wanted to handle the display, so I only log it to the console. Feel + // free to do whatever with the message! y wants to see it! + draw_rethread(msg) { + // Fields are 'date', 'count', 'position' (start or end, or 'start|end' if single message), and 'lastContentId'. + // Generally, 'lastContentId' is enough, but you may want to display where it came from originally if the value + // differs from 'originalContentId'. See: https://github.com/randomouscrap98/contentapi/wiki/Breaking-Changes#december-19th-2022 + var r = msg.values.rethread + var rethread = document.createElement("div") + rethread.className = "rethread" + rethread.innerHTML = `${r.position.toUpperCase()}: Rethreaded ${r.count} messages from page ${r.lastContentId}` + if(r.lastContentId !== msg.values.originalContentId) + rethread.innerHTML += ` (orig: page ${msg.values.originalContentId})` + rethread.innerHTML += ` - ${(new Date(r.date)).toLocaleString()}` + fragment.appendChild(rethread) + + return rethread + } + // draw a message // msg: Message // return: Element @@ -67,6 +86,9 @@ class MessageList { if (msg.edited) e.className += " edited" Markup.convert_lang(msg.text, msg.values.m, e, {intersection_observer: View.observer}) + // Do something with the rethread info! + if(msg.values.rethread) + console.log(draw_rethread(msg)) return e } // draw a message and insert it into the linked list From 53781512f2aca6e93ba1b794bfe06bd83661f9e0 Mon Sep 17 00:00:00 2001 From: Carlos Sanchez Date: Mon, 19 Dec 2022 19:26:42 -0500 Subject: [PATCH 2/3] removed leftover fragment append --- src/messages.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/messages.js b/src/messages.js index 7737419..907f857 100644 --- a/src/messages.js +++ b/src/messages.js @@ -72,7 +72,6 @@ class MessageList { if(r.lastContentId !== msg.values.originalContentId) rethread.innerHTML += ` (orig: page ${msg.values.originalContentId})` rethread.innerHTML += ` - ${(new Date(r.date)).toLocaleString()}` - fragment.appendChild(rethread) return rethread } From 9e33fbd010cbb911a3803f349f286a5321d90fe4 Mon Sep 17 00:00:00 2001 From: ilovecherries Date: Mon, 19 Dec 2022 20:43:39 -0500 Subject: [PATCH 3/3] damage them in snow (lie) --- src/messages.js | 53 ++++++++++++++++++++++++++++++++++++------------- src/style.css | 8 ++++++++ 2 files changed, 47 insertions(+), 14 deletions(-) diff --git a/src/messages.js b/src/messages.js index 907f857..26c8011 100644 --- a/src/messages.js +++ b/src/messages.js @@ -65,29 +65,50 @@ class MessageList { // Fields are 'date', 'count', 'position' (start or end, or 'start|end' if single message), and 'lastContentId'. // Generally, 'lastContentId' is enough, but you may want to display where it came from originally if the value // differs from 'originalContentId'. See: https://github.com/randomouscrap98/contentapi/wiki/Breaking-Changes#december-19th-2022 - var r = msg.values.rethread - var rethread = document.createElement("div") - rethread.className = "rethread" - rethread.innerHTML = `${r.position.toUpperCase()}: Rethreaded ${r.count} messages from page ${r.lastContentId}` - if(r.lastContentId !== msg.values.originalContentId) - rethread.innerHTML += ` (orig: page ${msg.values.originalContentId})` - rethread.innerHTML += ` - ${(new Date(r.date)).toLocaleString()}` - - return rethread + /* if you didn't make your html templating system so hard to use outside your + * slot thing maybe i could actually use it. but here we ar e >:(. + * making this your responsibility to refactor :smile: */ + const { rethread:r } = msg.values + const e = 𐀶`
+ : Rethreaded messages from + + +
`() + e.children[0].innerText = r.position.toUpperCase() + e.children[1].innerText = r.count + const pageLink = e.children[2] + pageLink.href = `#page/${r.lastContentId}` + pageLink.innerText = `page ${r.lastContentId}` + if (r.lastContentId !== msg.values.originalContentId) { + const origE = 𐀶`(orig: )`() + const origPageLink = origE.firstChild + origPageLink.href = `#page/${msg.values.originalContentId}` + origPageLink.innerText = `page ${msg.value.originalContentId}` + e.children[3].fill(origE) + } + e.children[4].innerText = ` - ${(new Date(r.date)).toLocaleString()}` + return e } // draw a message // msg: Message // return: Element draw_part(msg) { - let e = MessageList.part_template() + const e = MessageList.part_template() + const extraTop = e.children[0] + const content = e.children[1] + const extraBottom = e.children[2] e.dataset.id = msg.id if (msg.edited) e.className += " edited" - Markup.convert_lang(msg.text, msg.values.m, e, {intersection_observer: View.observer}) + Markup.convert_lang(msg.text, msg.values.m, content, {intersection_observer: View.observer}) // Do something with the rethread info! - if(msg.values.rethread) - console.log(draw_rethread(msg)) + if(msg.values.rethread) { + const position = msg.values.rethread.position.toUpperCase() + const rethread = this.draw_rethread(msg) + const extra = (position === "START" ? extraTop : extraBottom) + extra.fill(rethread) + } return e } // draw a message and insert it into the linked list @@ -355,7 +376,11 @@ class MessageList { } } } -MessageList.part_template = 𐀶`` +MessageList.part_template = 𐀶` +
+
+
+` MessageList.controls = null MessageList.controls_message = null MessageList.prototype.max_parts = 500 diff --git a/src/style.css b/src/style.css index 36d15bd..a522f8b 100644 --- a/src/style.css +++ b/src/style.css @@ -725,6 +725,14 @@ message-controls:hover + message-part { background: var(--message-hover-bg); } +.rethread { + font-style: italic; + color: var(--chat-dim-color); + margin: 0.25em; + padding: 0.25em; + border: 1px solid var(--T-border-color); +} + /* chat input pane */ .inputPane { background: var(--bar-bg);