From 60ef6f933298dd5da932d30097762d464d4263a6 Mon Sep 17 00:00:00 2001 From: Jaiwanth Date: Thu, 27 May 2021 14:06:04 +0530 Subject: [PATCH] Add emote support and show a toast if the message isn't exported --- src/utils/exportUtils/HtmlExport.ts | 77 +++++++++++++++++++++++++++-- 1 file changed, 72 insertions(+), 5 deletions(-) diff --git a/src/utils/exportUtils/HtmlExport.ts b/src/utils/exportUtils/HtmlExport.ts index 1e3984e34e..aaa6d5fadb 100644 --- a/src/utils/exportUtils/HtmlExport.ts +++ b/src/utils/exportUtils/HtmlExport.ts @@ -41,6 +41,7 @@ body { .mx_page_wrap a { color: #238CF5; text-decoration: none; + cursor: pointer; } .mx_page_wrap a:hover { @@ -274,20 +275,78 @@ div.mx_selected { .mx_initials_wrap.mx_Username_color8{ background-color: #74d12c; } + +#snackbar { + display: flex; + visibility: hidden; + min-width: 250px; + margin-left: -125px; + background-color: #333; + color: #fff; + text-align: center; + position: fixed; + z-index: 1; + left: 50%; + bottom: 30px; + font-size: 17px; + padding: 6px 16px; + font-size: 0.875rem; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400; + line-height: 1.43; + border-radius: 4px; + letter-spacing: 0.01071em; +} + +#snackbar.show { + visibility: visible; + -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; + animation: fadein 0.5s, fadeout 0.5s 2.5s; +} + +@-webkit-keyframes fadein { + from {bottom: 0; opacity: 0;} + to {bottom: 30px; opacity: 1;} +} + +@keyframes fadein { + from {bottom: 0; opacity: 0;} + to {bottom: 30px; opacity: 1;} +} + +@-webkit-keyframes fadeout { + from {bottom: 30px; opacity: 1;} + to {bottom: 0; opacity: 0;} +} + +@keyframes fadeout { + from {bottom: 30px; opacity: 1;} + to {bottom: 0; opacity: 0;} +} `; const js = ` function scrollToElement(replyId){ let el = document.getElementById(replyId); - el.scrollIntoViewIfNeeded({ - behaviour: "smooth", - block: "start", - }); + if(!el) { + showToast("The message you're looking for wasn't exported"); + return; + }; + el.scrollIntoView({ behavior: 'smooth', block: 'center' }); el.classList.add("mx_selected"); setTimeout(() => { el.classList.remove("mx_selected"); }, 1000); } + +function showToast(text) { + let el = document.getElementById("snackbar"); + el.innerHTML = text; + el.className = "show"; + setTimeout(() => { + el.className = el.className.replace("show", ""); + }, 2000); +} ` export default class HTMLExporter extends Exporter { @@ -324,6 +383,7 @@ export default class HTMLExporter extends Exporter { +
` @@ -427,6 +487,13 @@ export default class HTMLExporter extends Exporter { ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)}
`; break; + case "m.emote": + messageBody = ` +
+ * ${event.sender ? event.sender.name : event.getSender()} + ${sanitizeHtml(event.getContent().body, sanitizeHtmlParams)} +
`; + break; case "m.image": { const blob = await this.getMediaBlob(event); const fileName = `${event.getId()}.${blob.type.replace("image/", "")}`; @@ -491,7 +558,7 @@ export default class HTMLExporter extends Exporter { `: ``} ${isReply ? `
- In reply to this message + In reply to this message
`: ``} ${messageBody}