opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-02 03:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature (plg_application_docx): another docx reader

Browse Source
This commit is contained in:
MickaelK
2025-08-26 13:30:21 +10:00
parent adb51ac8b9
commit ff17bc2732
4 changed files with 98 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
server/plugin/plg_application_docxjs/loader_docx.js Normal file
View File

@ -0,0 +1,55 @@
import { createElement } from "../../lib/skeleton/index.js";
import rxjs, { effect } from "../../lib/rx.js";
import ajax from "../../lib/ajax.js";
import { loadJS, loadCSS } from "../../helpers/loader.js";
import ctrlError from "../../pages/ctrl_error.js";
import { transition } from "../../pages/viewerpage/common.js";
import ctrlDownloader, { init as initDownloader } from "../../pages/viewerpage/application_downloader.js";
import { createLoader } from "../../components/loader.js";
await init();
/*
* This viewer application is for rendering a docx onto an HTML document. To get a smooth UI, the whole
* flow is broken down to these steps:
* 1) show a loading spinner => `... = createLoader($page);`
* 2) fetch the docx file => effect(ajax({ xxxx })).pipe(
* 3) remove the spinner => cancelLoader,
* 4) render + transition => ... renderDocx ...
* 5) fallback on error => ... catchError ... ctrlDownloader(...)
*
* note: you don't have to use rxjs if you don't like it, the same code could be written with plain
* promises instead. We just happen to be rxjs fanboys who enjoy the automatic resource cleanup it
* enforces. In this example, if the user navigates away before the docx is loaded, the ajax call
* is cancelled automatically. Additionally, we prefer thinking in terms of streams rather than
* the classical state management approach used by most frameworks.
*/
export default async function(render, { getDownloadUrl, getFilename, $menubar, acl$ }) {
const $page = createElement(`
<div class="component_docx"></div>
`);
render($page);
const cancelLoader = createLoader($page);
effect(ajax({ url: getDownloadUrl(), responseType: "arraybuffer" }).pipe(
cancelLoader,
rxjs.mergeMap(async ({ response }) => renderDocx(response, $page)),
rxjs.catchError(() => ctrlDownloader(render, { acl$, getFilename, getDownloadUrl, hasMenubar: false })),
));
}
async function renderDocx(response, $page) {
$page.classList.add("hidden");
await window.docx.renderAsync(response, $page)
$page.classList.remove("hidden");
$page.parentElement.classList.add("scroll-y");
transition($page);
}
function init() {
return Promise.all([
loadCSS(import.meta.url, "./loader_docx.css"),
initDownloader(),
loadJS(import.meta.url, "./lib/vendor/jszip.min.js").then(() => loadJS(import.meta.url, "./lib/vendor/docx-preview.js")),
]);
}