imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement animated scroll to base event for replies

Browse source
This commit is contained in:
Jaiwanth 2021-05-26 18:00:27 +05:30
parent 7286aa28e1
commit 334b7ef04a
2 changed files with 39 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/utils/exportUtils/HtmlExport.ts
View file

@ -39,7 +39,7 @@ body {
} }
.mx_page_wrap a { .mx_page_wrap a {
color: #168acd; color: #238CF5;
text-decoration: none; text-decoration: none;
} }
@ -126,11 +126,11 @@ a.mx_block_link:hover {
.mx_message { .mx_message {
margin: 0 -10px; margin: 0 -10px;
transition: background-color 2.0s ease; transition: background-color 1.3s ease;
} }
div.mx_selected { div.mx_selected {
background-color: rgba(242,246,250,255); background-color: #eeeeee;
transition: background-color 0.5s ease; transition: background-color 0.5s ease;
} }
@ -276,6 +276,20 @@ div.mx_selected {
} }
`; `;
const js = `
function scrollToElement(replyId){
let el = document.getElementById(replyId);
el.scrollIntoViewIfNeeded({
behaviour: "smooth",
block: "start",
});
el.classList.add("mx_selected");
setTimeout(() => {
el.classList.remove("mx_selected");
}, 1000);
}
`
export default class HTMLExporter extends Exporter { export default class HTMLExporter extends Exporter {
protected zip: JSZip; protected zip: JSZip;
protected avatars: Map<string, boolean>; protected avatars: Map<string, boolean>;
@ -295,6 +309,7 @@ export default class HTMLExporter extends Exporter {
<title>Exported Data</title> <title>Exported Data</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="css/style.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" />
<script src="js/script.js"></script>
</head> </head>
<body> <body>
<div class="mx_page_wrap"> <div class="mx_page_wrap">
@ -459,6 +474,10 @@ export default class HTMLExporter extends Exporter {
break; break;
} }
if (isReply) {
messageBody = event.getContent().formatted_body.replace(/<mx-reply>.*<\/mx-reply>/, '')
}
return ` return `
<div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}"> <div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``} ${!joined ? userPic : ``}
@ -472,7 +491,7 @@ export default class HTMLExporter extends Exporter {
</div>`: ``} </div>`: ``}
${isReply ? ${isReply ?
` <div class="mx_reply_to mx_details"> ` <div class="mx_reply_to mx_details">
In reply to <a href="#${replyId}">this message</a> In reply to <a href="#${replyId}" onclick="scrollToElement('${replyId}')">this message</a>
</div>`: ``} </div>`: ``}
${messageBody} ${messageBody}
</div> </div>
@ -515,7 +534,7 @@ export default class HTMLExporter extends Exporter {
this.zip.file("index.html", html); this.zip.file("index.html", html);
this.zip.file("css/style.css", css); this.zip.file("css/style.css", css);
this.zip.file("js/script.js", js);
const filename = `matrix-export-${new Date().toISOString()}.zip`; const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously //Generate the zip file asynchronously

30
src/utils/exportUtils/StreamToZip.ts
View file

@ -1,17 +1,17 @@
/*Not to be reviewed now*/ /*Not to be reviewed now*/
class fileCheckSum { // class fileCheckSum {
protected CRC32: number; // protected CRC32: number;
public table: any[]; // public table: any[];
constructor() { // constructor() {
this.CRC32 = -1 // this.CRC32 = -1
} // }
protected append(data: any[]) { // protected append(data: any[]) {
let crc = this.CRC32 | 0; // let crc = this.CRC32 | 0;
const table = this.table; // const table = this.table;
for (let offset = 0, len = data.length | 0; offset < len; offset++) { // for (let offset = 0, len = data.length | 0; offset < len; offset++) {
crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF] // crc = (crc >>> 8) ^ table[(crc ^ data[offset]) & 0xFF]
} // }
this.CRC32 = crc // this.CRC32 = crc
} // }
} // }