Skip to content

Commit

Permalink
Update the examples/-folder to account for outputting of JavaScript…
Browse files Browse the repository at this point in the history
… modules

*Please note:* These changes probably need to land *just after* the first release that introduces JavaScript modules, such that the examples aren't broken in the meantime.

This patch also changes most examples to use "top level await", since that's now supported and slightly simplifies the code.
  • Loading branch information
Snuffleupagus committed Oct 7, 2023
1 parent 927e50f commit 0b5f70d
Show file tree
Hide file tree
Showing 18 changed files with 229 additions and 249 deletions.
6 changes: 3 additions & 3 deletions examples/components/pageviewer.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@

<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">

<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>

<body tabindex="1">
<div id="pageContainer" class="pdfViewer singlePageView"></div>

<script src="pageviewer.js"></script>
<script src="pageviewer.mjs" type="module"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
* limitations under the License.
*/

"use strict";

if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
Expand All @@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFPageView) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";

// Some PDFs need external cmaps.
//
Expand All @@ -47,20 +45,19 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
(async function () {
const pdfDocument = await loadingTask.promise;
// Document loaded, retrieving the page.
const pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW);

// Creating the page view with default parameters.
const pdfPageView = new pdfjsViewer.PDFPageView({
container,
id: PAGE_TO_VIEW,
scale: SCALE,
defaultViewport: pdfPage.getViewport({ scale: SCALE }),
eventBus,
});
// Associate the actual page with the view, and draw it.
pdfPageView.setPdfPage(pdfPage);
return pdfPageView.draw();
})();
const pdfDocument = await loadingTask.promise;
// Document loaded, retrieving the page.
const pdfPage = await pdfDocument.getPage(PAGE_TO_VIEW);

// Creating the page view with default parameters.
const pdfPageView = new pdfjsViewer.PDFPageView({
container,
id: PAGE_TO_VIEW,
scale: SCALE,
defaultViewport: pdfPage.getViewport({ scale: SCALE }),
eventBus,
});
// Associate the actual page with the view, and draw it.
pdfPageView.setPdfPage(pdfPage);
pdfPageView.draw();
6 changes: 3 additions & 3 deletions examples/components/simpleviewer.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@

<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">

<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>

<body tabindex="1">
<div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div>
</div>

<script src="simpleviewer.js"></script>
<script src="simpleviewer.mjs" type="module"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
* limitations under the License.
*/

"use strict";

if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
Expand All @@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";

// Some PDFs need external cmaps.
//
Expand All @@ -37,7 +35,10 @@ const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const ENABLE_XFA = true;
const SEARCH_FOR = ""; // try "Mozilla";

const SANDBOX_BUNDLE_SRC = "../../node_modules/pdfjs-dist/build/pdf.sandbox.js";
const SANDBOX_BUNDLE_SRC = new URL(
"../../node_modules/pdfjs-dist/build/pdf.sandbox.mjs",
window.location
);

const container = document.getElementById("viewerContainer");

Expand Down Expand Up @@ -87,11 +88,10 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
(async function () {
const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfViewer.setDocument(pdfDocument);

pdfLinkService.setDocument(pdfDocument, null);
})();

const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfViewer.setDocument(pdfDocument);

pdfLinkService.setDocument(pdfDocument, null);
6 changes: 3 additions & 3 deletions examples/components/singlepageviewer.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@

<link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">

<script src="../../node_modules/pdfjs-dist/build/pdf.js"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
<script src="../../node_modules/pdfjs-dist/build/pdf.mjs" type="module"></script>
<script src="../../node_modules/pdfjs-dist/web/pdf_viewer.mjs" type="module"></script>
</head>

<body tabindex="1">
<div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div>
</div>

<script src="singlepageviewer.js"></script>
<script src="singlepageviewer.mjs" type="module"></script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@
* limitations under the License.
*/

"use strict";

if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
Expand All @@ -23,7 +21,7 @@ if (!pdfjsLib.getDocument || !pdfjsViewer.PDFSinglePageViewer) {
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
"../../node_modules/pdfjs-dist/build/pdf.worker.js";
"../../node_modules/pdfjs-dist/build/pdf.worker.mjs";

// Some PDFs need external cmaps.
//
Expand All @@ -37,7 +35,10 @@ const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
const ENABLE_XFA = true;
const SEARCH_FOR = ""; // try "Mozilla";

const SANDBOX_BUNDLE_SRC = "../../node_modules/pdfjs-dist/build/pdf.sandbox.js";
const SANDBOX_BUNDLE_SRC = new URL(
"../../node_modules/pdfjs-dist/build/pdf.sandbox.mjs",
window.location
);

const container = document.getElementById("viewerContainer");

Expand Down Expand Up @@ -87,10 +88,10 @@ const loadingTask = pdfjsLib.getDocument({
cMapPacked: CMAP_PACKED,
enableXfa: ENABLE_XFA,
});
loadingTask.promise.then(function (pdfDocument) {
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfSinglePageViewer.setDocument(pdfDocument);

pdfLinkService.setDocument(pdfDocument, null);
});
const pdfDocument = await loadingTask.promise;
// Document loaded, specifying document for the viewer and
// the (optional) linkService.
pdfSinglePageViewer.setDocument(pdfDocument);

pdfLinkService.setDocument(pdfDocument, null);
4 changes: 2 additions & 2 deletions examples/image_decoders/jpeg_viewer.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
}
</style>

<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.js"></script>
<script src="../../node_modules/pdfjs-dist/image_decoders/pdf.image_decoders.mjs" type="module"></script>
</head>

<body tabindex="1">
<canvas id="jpegCanvas" width="0" height="0"></canvas>

<script src="jpeg_viewer.js"></script>
<script src="jpeg_viewer.mjs" type="module"></script>
</body>
</html>
63 changes: 0 additions & 63 deletions examples/image_decoders/jpeg_viewer.js

This file was deleted.

59 changes: 59 additions & 0 deletions examples/image_decoders/jpeg_viewer.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* Copyright 2018 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

if (!pdfjsImageDecoders.JpegImage) {
// eslint-disable-next-line no-alert
alert("Please build the pdfjs-dist library using `gulp dist-install`");
}

const JPEG_IMAGE = "fish.jpg";

const jpegCanvas = document.getElementById("jpegCanvas");
const jpegCtx = jpegCanvas.getContext("2d");

// Load the image data, and convert it to a Uint8Array.
//
const response = await fetch(JPEG_IMAGE);
if (!response.ok) {
throw new Error(response.statusText);
}
const typedArrayImage = new Uint8Array(await response.arrayBuffer());

// Parse the image data using `JpegImage`.
//
const jpegImage = new pdfjsImageDecoders.JpegImage();
jpegImage.parse(typedArrayImage);

const width = jpegImage.width,
height = jpegImage.height;
const jpegData = jpegImage.getData({
width,
height,
forceRGB: true,
});

// Render the JPEG image on a <canvas>.
//
const imageData = jpegCtx.createImageData(width, height);
const imageBytes = imageData.data;
for (let j = 0, k = 0, jj = width * height * 4; j < jj; ) {
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = jpegData[k++];
imageBytes[j++] = 255;
}
jpegCanvas.width = width;
jpegCanvas.height = height;
jpegCtx.putImageData(imageData, 0, 0);
Loading

0 comments on commit 0b5f70d

Please sign in to comment.