Skip to content

Commit

Permalink
better web app
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulocoutinhox
paulocoutinhox committed Aug 16, 2024
1 parent 697a50f commit 792ad11
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 67 deletions.
16 changes: 9 additions & 7 deletions docs/BUILD_WASM.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,27 @@
2. Get Emscripten SDK:
```python3 make.py build-emsdk```

3. Get PDFium:
3. Execute EMSDK environment file "emsdk_env" according to your system.

4. Get PDFium:
```python3 make.py build-pdfium-wasm```

4. Patch:
5. Patch:
```python3 make.py patch-wasm```

5. PDFium Linux dependencies
6. PDFium Linux dependencies
```./build/wasm32/pdfium/build/install-build-deps.sh```

6. Compile:
7. Compile:
```python3 make.py build-wasm```

7. Install libraries:
8. Install libraries:
```python3 make.py install-wasm```

8. Test:
9. Test:
```python3 make.py test-wasm```

9. Generate javascript libraries:
10. Generate javascript libraries:
```python3 make.py generate-wasm```

Obs:
Expand Down
121 changes: 61 additions & 60 deletions extras/wasm/template/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,23 @@
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

<title>PDF Viewer</title>
<title>PDFium PDF Viewer</title>
<meta name="description"
content="Quickly view your PDF files with the PDFium PDF Viewer. Easy, fast, and secure, all within your browser.">
<meta name="keywords"
content="pdfium, pdf viewer, view pdf, pdf reader, browser, webassembly, fast pdf, secure pdf">

<meta property="og:title" content="PDFium PDF Viewer">
<meta property="og:description"
content="Quickly view your PDF files with the PDFium PDF Viewer. Easy, fast, and secure, all within your browser.">
<meta property="og:image" content="https://pdfium-lib.s3.amazonaws.com/others/logo.png">
<meta property="og:url" content="https://pdfviewer.github.io">
<meta property="og:type" content="website">

<link rel="shortcut icon"
href="data:image/x-icon;base64,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" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">

<script src="pdfium.js?v={pdfium-branch}"></script>

Expand Down Expand Up @@ -103,7 +114,7 @@

image.id = "pageImage" + (pageIndex + 1);
image.src = '';
image.className = "is-invisible page-list-item";
image.className = "is-hidden page-list-item";

return image;
}
Expand All @@ -115,17 +126,17 @@
let pageIndex = this.index;
let image = document.getElementById("pageImage" + (pageIndex + 1));
image.src = dataUri;
image.classList.remove("is-invisible");
image.classList.remove("is-hidden");
image.onclick = function () {
openModal();
changeCurrentPageItem(pageIndex + 1);
};

const container = image.closest('.column');
const container = image.closest('.cell');
const loaderWrapper = container.querySelector('.page-loader-wrapper');

if (loaderWrapper) {
container.removeChild(loaderWrapper);
loaderWrapper.remove();
}
}

Expand Down Expand Up @@ -245,37 +256,26 @@
return page;
}

renderPages() {
async renderPages() {
const wasmBuffer = this.processor.wasmData.wasmBuffer;
const wasm = this.processor.wasmData.wasm;

doc.pages.forEach(async function (page, index) {
if (!page.loaded) {
setTimeout(function () {
const renderNextPage = async (index) => {
if (index < doc.pages.length) {
let page = doc.getPage(index);
if (!page.loaded) {
await new Promise(requestAnimationFrame);
page.render();

if (index === doc.pages.length - 1) {
Module.wasmExports.free(wasmBuffer);

FPDF.CloseDocument(wasm);
FPDF.DestroyLibrary();
}
});
}
setTimeout(() => renderNextPage(index + 1), 100);
} else {
Module.wasmExports.free(wasmBuffer);
FPDF.CloseDocument(wasm);
FPDF.DestroyLibrary();
}
})
}

setLoading(pageList) {
let images = pageList.querySelectorAll(".column img");
let width = images[0].offsetWidth + "px";
let height = images[0].offsetHeight + "px";
}

images.forEach((img) => {
if (!img.getAttribute("src")) {
img.style.width = width;
img.style.height = height;
}
})
await renderNextPage(0);
}
}

Expand Down Expand Up @@ -414,10 +414,22 @@

const image = doc.getPage(x).createImage();

// add content item
let content = document.createElement('div');
content.className = "content";
content.appendChild(image);

// add loader content
let loaderContent = document.createElement('span');
loaderContent.className = "loader";

// add loader
let loader = document.createElement('div');
loader.className = "page-loader-wrapper";
loader.appendChild(loaderContent);
content.appendChild(loader);

// add card
let cardContent = document.createElement('div');
cardContent.className = "card-content";
cardContent.appendChild(content);
Expand All @@ -426,20 +438,12 @@
card.className = "card";
card.appendChild(cardContent);

let loaderContent = document.createElement('span');
loaderContent.className = "loader";

let loader = document.createElement('div');
loader.className = "page-loader-wrapper";
loader.appendChild(loaderContent);

let column = document.createElement('div');
column.className = "column is-half-mobile is-one-third-tablet is-one-third-desktop is-one-third-widescreen is-one-quarter-fullhd";
column.style.position = "relative";
column.appendChild(card);
column.appendChild(loader);
let cell = document.createElement('div');
cell.className = "cell";
cell.style.position = "relative";
cell.appendChild(card);

pageList.appendChild(column);
pageList.appendChild(cell);

// show results
console.log('Page ' + (x + 1) + ' rendered');
Expand All @@ -448,10 +452,6 @@
let firstPage = await doc.getPage(0);
firstPage.render();

setTimeout(function () {
doc.setLoading(pageList);
})

pageListTitle.innerHTML = "Number of pages: " + pages;

pageListContainer.style.display = "block";
Expand Down Expand Up @@ -956,10 +956,6 @@
cursor: pointer;
}

.page-list-item img {
max-width: 70%;
}

/* modal */
.modal {
display: none;
Expand Down Expand Up @@ -1018,6 +1014,10 @@
padding: 0;
}

.page-loader-wrapper {
padding: 30px 10px;
}

.page-loader-wrapper .loader {
-webkit-animation: spinAround .5s infinite linear;
animation: spinAround .5s infinite linear;
Expand All @@ -1029,9 +1029,6 @@
display: block;
height: 2em;
width: 2em;
position: absolute;
left: calc(50% - 1em);
top: calc(50% - 1em);
}

/* modal */
Expand Down Expand Up @@ -1063,7 +1060,7 @@
left: 0;
height: 100%;
width: 100%;
background: #fff;
background-color: var(--bulma-box-background-color);
opacity: 0;
z-index: -1;
transition: opacity .3s;
Expand Down Expand Up @@ -1099,8 +1096,10 @@
<body>
<!-- loading -->
<div id="loadingContainer">
<div class="loader-wrapper is-active">
<div class="loader is-loading"></div>
<div class="box">
<div class="loader-wrapper is-active">
<div class="loader is-loading"></div>
</div>
</div>
</div>

Expand Down Expand Up @@ -1153,8 +1152,10 @@ <h1 id="fileTitle" class="title" style="display: none;">PDF Viewer</h1>
<div id="pageListContainer" style="display: none;">
<p style="font-weight: bold;" id="pageListTitle">Number of pages: 0</p>

<!-- page as a column -->
<div class="columns is-multiline is-mobile" id="pageList"></div>
<!-- page as a cell -->
<div class="fixed-grid has-auto-count">
<div class="grid" id="pageList"></div>
</div>

<div class="modal" id="pageModal">
<div class="modal-background" onclick="closeModal()"></div>
Expand Down
7 changes: 7 additions & 0 deletions modules/common.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,13 @@ def run_task_build_emsdk():
command = " ".join(["source", "emsdk_env.sh"])
r.run(command, cwd=cwd, shell=True)

l.colored(
"Execute on your terminal the following file according to your system:",
l.PURPLE,
)
l.m("File: emsdk_env")
l.m("Directory: " + cwd)

l.ok()


Expand Down

0 comments on commit 792ad11

Please sign in to comment.