diff --git a/src/messages.js b/src/messages.js index efd0aa6..26c8011 100644 --- a/src/messages.js +++ b/src/messages.js @@ -58,15 +58,57 @@ 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 + /* 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) { + 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 @@ -334,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);