OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Implement animated scroll to base event for replies

pull/21833/head
Jaiwanth 2021-05-26 18:00:27 +05:30
parent 7286aa28e1
commit 334b7ef04a
2 changed files with 39 additions and 20 deletions
Show Stats 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 {
color: #168acd;
color: #238CF5;
text-decoration: none;
}
@ -126,11 +126,11 @@ a.mx_block_link:hover {
.mx_message {
margin: 0 -10px;
transition: background-color 2.0s ease;
transition: background-color 1.3s ease;
}
div.mx_selected {
background-color: rgba(242,246,250,255);
background-color: #eeeeee;
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 {
protected zip: JSZip;
protected avatars: Map<string, boolean>;
@ -295,6 +309,7 @@ export default class HTMLExporter extends Exporter {
<title>Exported Data</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/script.js"></script>
</head>
<body>
<div class="mx_page_wrap">
@ -459,6 +474,10 @@ export default class HTMLExporter extends Exporter {
break;
}
if (isReply) {
messageBody = event.getContent().formatted_body.replace(/<mx-reply>.*<\/mx-reply>/, '')
}
return `
<div class="mx_message mx_default mx_clearfix ${joined ? `mx_joined` : ``}" id="${event.getId()}">
${!joined ? userPic : ``}
@ -472,7 +491,7 @@ export default class HTMLExporter extends Exporter {
</div>`: ``}
${isReply ?
` <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>`: ``}
${messageBody}
</div>
@ -515,7 +534,7 @@ export default class HTMLExporter extends Exporter {
this.zip.file("index.html", html);
this.zip.file("css/style.css", css);
this.zip.file("js/script.js", js);
const filename = `matrix-export-${new Date().toISOString()}.zip`;
//Generate the zip file asynchronously

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

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