Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Add link to next file in the export #10190

Merged
merged 9 commits into from
Feb 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 45 additions & 11 deletions src/utils/exportUtils/HtmlExport.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export default class HTMLExporter extends Exporter {
return renderToStaticMarkup(avatar);
}

protected async wrapHTML(content: string): Promise<string> {
protected async wrapHTML(content: string, currentPage: number, nbPages: number): Promise<string> {
const roomAvatar = await this.getRoomAvatar();
const exportDate = formatFullDateNoDayNoTime(new Date());
const creator = this.room.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
Expand Down Expand Up @@ -128,6 +128,29 @@ export default class HTMLExporter extends Exporter {
);

const topicText = topic ? _t("Topic: %(topic)s", { topic }) : "";
const previousMessagesLink = renderToStaticMarkup(
currentPage !== 0 ? (
<div style={{ textAlign: "center" }}>
<a href={`./messages${currentPage === 1 ? "" : currentPage}.html`} style={{ fontWeight: "bold" }}>
Previous group of messages
</a>
</div>
) : (
<></>
),
);

const nextMessagesLink = renderToStaticMarkup(
currentPage < nbPages - 1 ? (
<div style={{ textAlign: "center", margin: "10px" }}>
<a href={"./messages" + (currentPage + 2) + ".html"} style={{ fontWeight: "bold" }}>
Next group of messages
</a>
</div>
) : (
<></>
),
);

return `
<!DOCTYPE html>
Expand Down Expand Up @@ -168,6 +191,7 @@ export default class HTMLExporter extends Exporter {
<div class="mx_RoomHeader_topic" dir="auto"> ${topic} </div>
</div>
</div>
${previousMessagesLink}
<div class="mx_MainSplit">
<div class="mx_RoomView_body">
<div
Expand All @@ -186,13 +210,17 @@ export default class HTMLExporter extends Exporter {
aria-live="polite"
role="list"
>
<div class="mx_NewRoomIntro">
${roomAvatar}
<h2> ${this.room.name} </h2>
<p> ${createdText} <br/><br/> ${exportedText} </p>
<br/>
<p> ${topicText} </p>
</div>
${
currentPage == 0
? `<div class="mx_NewRoomIntro">
${roomAvatar}
<h2> ${this.room.name} </h2>
<p> ${createdText} <br/><br/> ${exportedText} </p>
<br/>
<p> ${topicText} </p>
</div>`
: ""
}
${content}
</ol>
</div>
Expand All @@ -205,6 +233,7 @@ export default class HTMLExporter extends Exporter {
</div>
</div>
</div>
${nextMessagesLink}
</main>
</div>
</div>
Expand Down Expand Up @@ -381,7 +410,12 @@ export default class HTMLExporter extends Exporter {
return eventTile;
}

protected async createHTML(events: MatrixEvent[], start: number): Promise<string> {
protected async createHTML(
events: MatrixEvent[],
start: number,
currentPage: number,
nbPages: number,
): Promise<string> {
let content = "";
let prevEvent: MatrixEvent | null = null;
for (let i = start; i < Math.min(start + 1000, events.length); i++) {
Expand All @@ -405,7 +439,7 @@ export default class HTMLExporter extends Exporter {
content += body;
prevEvent = event;
}
return this.wrapHTML(content);
return this.wrapHTML(content, currentPage, nbPages);
}

public async export(): Promise<void> {
Expand All @@ -428,7 +462,7 @@ export default class HTMLExporter extends Exporter {

const usedClasses = new Set<string>();
for (let page = 0; page < res.length / 1000; page++) {
const html = await this.createHTML(res, page * 1000);
const html = await this.createHTML(res, page * 1000, page, res.length / 1000);
const document = new DOMParser().parseFromString(html, "text/html");
document.querySelectorAll("*").forEach((element) => {
element.classList.forEach((c) => usedClasses.add(c));
Expand Down
41 changes: 41 additions & 0 deletions test/utils/exportUtils/HTMLExport-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -315,4 +315,45 @@ describe("HTMLExport", () => {
expect(fileName).not.toMatch(/^files\/hello/);
}
});

it("should add link to next and previous file", async () => {
const exporter = new HTMLExporter(
room,
ExportType.LastNMessages,
{
attachmentsIncluded: false,
maxSize: 1_024 * 1_024,
},
() => {},
);

// test link to the first page
//@ts-ignore private access
exporter.wrapHTML("", 0, 3).then((res) => {
expect(res).not.toContain("Previous group of messages");
expect(res).toContain(
'<div style="text-align:center;margin:10px"><a href="./messages2.html" style="font-weight:bold">Next group of messages</a></div>',
);
});

// test link for a middle page
//@ts-ignore private access
exporter.wrapHTML("", 1, 3).then((res) => {
expect(res).toContain(
'<div style="text-align:center"><a href="./messages.html" style="font-weight:bold">Previous group of messages</a></div>',
);
expect(res).toContain(
'<div style="text-align:center;margin:10px"><a href="./messages3.html" style="font-weight:bold">Next group of messages</a></div>',
);
});

// test link for last page
//@ts-ignore private access
exporter.wrapHTML("", 2, 3).then((res) => {
expect(res).toContain(
'<div style="text-align:center"><a href="./messages2.html" style="font-weight:bold">Previous group of messages</a></div>',
);
expect(res).not.toContain("Next group of messages");
});
});
});
14 changes: 8 additions & 6 deletions test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap

Large diffs are not rendered by default.