first commit

examples/mobile-viewer/README.md

@@ -0,0 +1,11 @@
+## Overview
+
+Example to demonstrate PDF.js library usage with a viewer optimized for mobile usage.
+
+## Getting started
+
+Build PDF.js using `gulp dist-install` and run `gulp server` to start a web server.
+You can then work with the mobile viewer at
+http://localhost:8888/examples/mobile-viewer/viewer.html.
+
+Refer to `viewer.js` for the source code of the mobile viewer.

examples/mobile-viewer/viewer.css

@@ -0,0 +1,242 @@
+/* Copyright 2016 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.
+ */
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-size: 10px;
+}
+
+header {
+  background-color: rgb(244 244 244 / 1);
+}
+
+header h1 {
+  border-bottom: 1px solid rgb(216 216 216 / 1);
+  color: rgb(133 133 133 / 1);
+  font-size: 23px;
+  font-style: italic;
+  font-weight: normal;
+  overflow: hidden;
+  padding: 10px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body {
+  background: url(images/document_bg.png);
+  color: rgb(255 255 255 / 1);
+  font-family: sans-serif;
+  font-size: 10px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 5rem;
+}
+
+section {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: 2rem;
+}
+
+footer {
+  background-image: url(images/toolbar_background.png);
+  height: 4rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  box-shadow: 0 -0.2rem 0.5rem rgb(50 50 50 / 0.75);
+}
+
+.toolbarButton {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: rgb(0 0 0 / 0);
+}
+
+.toolbarButton.pageUp {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 0;
+  background-image: url(images/icon_previous_page.png);
+  background-size: 2rem;
+}
+
+.toolbarButton.pageDown {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 18%;
+  background-image: url(images/icon_next_page.png);
+  background-size: 2rem;
+}
+
+#pageNumber {
+  -moz-appearance: textfield; /* hides the spinner in moz */
+  position: absolute;
+  width: 28%;
+  height: 100%;
+  left: 36%;
+  text-align: center;
+  border: 0;
+  background-color: rgb(0 0 0 / 0);
+  font-size: 1.2rem;
+  color: rgb(255 255 255 / 1);
+  background-image:
+    url(images/div_line_left.png), url(images/div_line_right.png);
+  background-repeat: no-repeat;
+  background-position: left, right;
+  background-size: 0.2rem, 0.2rem;
+}
+
+.toolbarButton.zoomOut {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 64%;
+  background-image: url(images/icon_zoom_out.png);
+  background-size: 2.4rem;
+}
+
+.toolbarButton.zoomIn {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 82%;
+  background-image: url(images/icon_zoom_in.png);
+  background-size: 2.4rem;
+}
+
+.toolbarButton[disabled] {
+  opacity: 0.3;
+}
+
+.hidden {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+
+#viewerContainer {
+  position: absolute;
+  overflow: auto;
+  width: 100%;
+  inset: 5rem 0 4rem;
+}
+
+canvas {
+  margin: auto;
+  display: block;
+}
+
+.pdfViewer .page .loadingIcon {
+  width: 2.9rem;
+  height: 2.9rem;
+  background: url("images/spinner.png") no-repeat left top / 38rem;
+  border: medium none;
+  animation: 1s steps(10, end) 0s normal none infinite moveDefault;
+  display: block;
+  position: absolute;
+  top: calc((100% - 2.9rem) / 2);
+  left: calc((100% - 2.9rem) / 2);
+}
+
+@keyframes moveDefault {
+  from {
+    background-position: 0 top;
+  }
+
+  to {
+    background-position: -39rem top;
+  }
+}
+
+#loadingBar {
+  /* Define this variable here, and not in :root, to avoid reflowing the
+     entire viewer when updating progress (see issue 15958). */
+  --progressBar-percent: 0%;
+
+  position: relative;
+  height: 0.6rem;
+  background-color: rgb(51 51 51 / 1);
+  border-bottom: 1px solid rgb(51 51 51 / 1);
+}
+
+#loadingBar .progress {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  transform: scaleX(var(--progressBar-percent));
+  transform-origin: 0 0;
+  height: 100%;
+  background-color: rgb(221 221 221 / 1);
+  overflow: hidden;
+  transition: transform 200ms;
+}
+
+@keyframes progressIndeterminate {
+  0% {
+    transform: translateX(0%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+#loadingBar.indeterminate .progress {
+  transform: none;
+  background-color: rgb(153 153 153 / 1);
+  transition: none;
+}
+
+#loadingBar.indeterminate .progress .glimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 5rem;
+  background-image: linear-gradient(
+    to right,
+    rgb(153 153 153 / 1) 0%,
+    rgb(255 255 255 / 1) 50%,
+    rgb(153 153 153 / 1) 100%
+  );
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  animation: progressIndeterminate 2s linear infinite;
+}

examples/mobile-viewer/viewer.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!--
+Copyright 2016 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.
+-->
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+    <title>PDF.js viewer</title>
+
+    <link rel="stylesheet" href="../../node_modules/pdfjs-dist/web/pdf_viewer.css">
+    <link rel="stylesheet" type="text/css" href="viewer.css">
+
+    <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>
+    <header>
+      <h1 id="title"></h1>
+    </header>
+
+    <div id="viewerContainer">
+      <div id="viewer" class="pdfViewer"></div>
+    </div>
+
+    <div id="loadingBar">
+      <div class="progress"></div>
+      <div class="glimmer"></div>
+    </div>
+
+    <footer>
+      <button class="toolbarButton pageUp" title="Previous Page" id="previous" type="button"></button>
+      <button class="toolbarButton pageDown" title="Next Page" id="next" type="button"></button>
+
+      <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
+
+      <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" type="button"></button>
+      <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" type="button"></button>
+    </footer>
+
+     <script src="viewer.mjs" type="module"></script>
+  </body>
+</html>

examples/mobile-viewer/viewer.mjs

@@ -0,0 +1,371 @@
+/* Copyright 2016 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 (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
+  // eslint-disable-next-line no-alert
+  alert("Please build the pdfjs-dist library using\n `gulp dist-install`");
+}
+
+const MAX_CANVAS_PIXELS = 0; // CSS-only zooming.
+const TEXT_LAYER_MODE = 0; // DISABLE
+const MAX_IMAGE_SIZE = 1024 * 1024;
+const CMAP_URL = "../../node_modules/pdfjs-dist/cmaps/";
+const CMAP_PACKED = true;
+
+pdfjsLib.GlobalWorkerOptions.workerSrc =
+  "../../node_modules/pdfjs-dist/build/pdf.worker.mjs";
+
+const DEFAULT_URL = "../../web/compressed.tracemonkey-pldi-09.pdf";
+const DEFAULT_SCALE_DELTA = 1.1;
+const MIN_SCALE = 0.25;
+const MAX_SCALE = 10.0;
+const DEFAULT_SCALE_VALUE = "auto";
+
+const PDFViewerApplication = {
+  pdfLoadingTask: null,
+  pdfDocument: null,
+  pdfViewer: null,
+  pdfHistory: null,
+  pdfLinkService: null,
+  eventBus: null,
+
+  /**
+   * Opens PDF document specified by URL.
+   * @returns {Promise} - Returns the promise, which is resolved when document
+   *                      is opened.
+   */
+  open(params) {
+    if (this.pdfLoadingTask) {
+      // We need to destroy already opened document
+      return this.close().then(
+        function () {
+          // ... and repeat the open() call.
+          return this.open(params);
+        }.bind(this)
+      );
+    }
+
+    const url = params.url;
+    const self = this;
+    this.setTitleUsingUrl(url);
+
+    // Loading document.
+    const loadingTask = pdfjsLib.getDocument({
+      url,
+      maxImageSize: MAX_IMAGE_SIZE,
+      cMapUrl: CMAP_URL,
+      cMapPacked: CMAP_PACKED,
+    });
+    this.pdfLoadingTask = loadingTask;
+
+    loadingTask.onProgress = function (progressData) {
+      self.progress(progressData.loaded / progressData.total);
+    };
+
+    return loadingTask.promise.then(
+      function (pdfDocument) {
+        // Document loaded, specifying document for the viewer.
+        self.pdfDocument = pdfDocument;
+        self.pdfViewer.setDocument(pdfDocument);
+        self.pdfLinkService.setDocument(pdfDocument);
+        self.pdfHistory.initialize({
+          fingerprint: pdfDocument.fingerprints[0],
+        });
+
+        self.loadingBar.hide();
+        self.setTitleUsingMetadata(pdfDocument);
+      },
+      function (reason) {
+        let key = "pdfjs-loading-error";
+        if (reason instanceof pdfjsLib.InvalidPDFException) {
+          key = "pdfjs-invalid-file-error";
+        } else if (reason instanceof pdfjsLib.ResponseException) {
+          key = reason.missing
+            ? "pdfjs-missing-file-error"
+            : "pdfjs-unexpected-response-error";
+        }
+        self.l10n.get(key).then(msg => {
+          self.error(msg, { message: reason?.message });
+        });
+        self.loadingBar.hide();
+      }
+    );
+  },
+
+  /**
+   * Closes opened PDF document.
+   * @returns {Promise} - Returns the promise, which is resolved when all
+   *                      destruction is completed.
+   */
+  close() {
+    if (!this.pdfLoadingTask) {
+      return Promise.resolve();
+    }
+
+    const promise = this.pdfLoadingTask.destroy();
+    this.pdfLoadingTask = null;
+
+    if (this.pdfDocument) {
+      this.pdfDocument = null;
+
+      this.pdfViewer.setDocument(null);
+      this.pdfLinkService.setDocument(null, null);
+
+      if (this.pdfHistory) {
+        this.pdfHistory.reset();
+      }
+    }
+
+    return promise;
+  },
+
+  get loadingBar() {
+    const bar = document.getElementById("loadingBar");
+    return pdfjsLib.shadow(
+      this,
+      "loadingBar",
+      new pdfjsViewer.ProgressBar(bar)
+    );
+  },
+
+  setTitleUsingUrl: function pdfViewSetTitleUsingUrl(url) {
+    this.url = url;
+    let title = pdfjsLib.getFilenameFromUrl(url) || url;
+    try {
+      title = decodeURIComponent(title);
+    } catch {
+      // decodeURIComponent may throw URIError,
+      // fall back to using the unprocessed url in that case
+    }
+    this.setTitle(title);
+  },
+
+  setTitleUsingMetadata(pdfDocument) {
+    const self = this;
+    pdfDocument.getMetadata().then(function (data) {
+      const info = data.info,
+        metadata = data.metadata;
+      self.documentInfo = info;
+      self.metadata = metadata;
+
+      // Provides some basic debug information
+      console.log(
+        "PDF " +
+          pdfDocument.fingerprints[0] +
+          " [" +
+          info.PDFFormatVersion +
+          " " +
+          (info.Producer || "-").trim() +
+          " / " +
+          (info.Creator || "-").trim() +
+          "]" +
+          " (PDF.js: " +
+          (pdfjsLib.version || "-") +
+          ")"
+      );
+
+      let pdfTitle;
+      if (metadata && metadata.has("dc:title")) {
+        const title = metadata.get("dc:title");
+        // Ghostscript sometimes returns 'Untitled', so prevent setting the
+        // title to 'Untitled.
+        if (title !== "Untitled") {
+          pdfTitle = title;
+        }
+      }
+
+      if (!pdfTitle && info && info.Title) {
+        pdfTitle = info.Title;
+      }
+
+      if (pdfTitle) {
+        self.setTitle(pdfTitle + " - " + document.title);
+      }
+    });
+  },
+
+  setTitle: function pdfViewSetTitle(title) {
+    document.title = title;
+    document.getElementById("title").textContent = title;
+  },
+
+  error: function pdfViewError(message, moreInfo) {
+    const moreInfoText = [
+      `PDF.js v${pdfjsLib.version || "?"} (build: ${pdfjsLib.build || "?"})`,
+    ];
+    if (moreInfo) {
+      moreInfoText.push(`Message: ${moreInfo.message}`);
+
+      if (moreInfo.stack) {
+        moreInfoText.push(`Stack: ${moreInfo.stack}`);
+      } else {
+        if (moreInfo.filename) {
+          moreInfoText.push(`File: ${moreInfo.filename}`);
+        }
+        if (moreInfo.lineNumber) {
+          moreInfoText.push(`Line: ${moreInfo.lineNumber}`);
+        }
+      }
+    }
+
+    console.error(`${message}\n\n${moreInfoText.join("\n")}`);
+  },
+
+  progress: function pdfViewProgress(level) {
+    const percent = Math.round(level * 100);
+    // Updating the bar if value increases.
+    if (percent > this.loadingBar.percent || isNaN(percent)) {
+      this.loadingBar.percent = percent;
+    }
+  },
+
+  get pagesCount() {
+    return this.pdfDocument.numPages;
+  },
+
+  get page() {
+    return this.pdfViewer.currentPageNumber;
+  },
+
+  set page(val) {
+    this.pdfViewer.currentPageNumber = val;
+  },
+
+  zoomIn: function pdfViewZoomIn(ticks) {
+    let newScale = this.pdfViewer.currentScale;
+    do {
+      newScale = (newScale * DEFAULT_SCALE_DELTA).toFixed(2);
+      newScale = Math.ceil(newScale * 10) / 10;
+      newScale = Math.min(MAX_SCALE, newScale);
+    } while (--ticks && newScale < MAX_SCALE);
+    this.pdfViewer.currentScaleValue = newScale;
+  },
+
+  zoomOut: function pdfViewZoomOut(ticks) {
+    let newScale = this.pdfViewer.currentScale;
+    do {
+      newScale = (newScale / DEFAULT_SCALE_DELTA).toFixed(2);
+      newScale = Math.floor(newScale * 10) / 10;
+      newScale = Math.max(MIN_SCALE, newScale);
+    } while (--ticks && newScale > MIN_SCALE);
+    this.pdfViewer.currentScaleValue = newScale;
+  },
+
+  initUI: function pdfViewInitUI() {
+    const eventBus = new pdfjsViewer.EventBus();
+    this.eventBus = eventBus;
+
+    const linkService = new pdfjsViewer.PDFLinkService({
+      eventBus,
+    });
+    this.pdfLinkService = linkService;
+
+    this.l10n = new pdfjsViewer.GenericL10n();
+
+    const container = document.getElementById("viewerContainer");
+    const pdfViewer = new pdfjsViewer.PDFViewer({
+      container,
+      eventBus,
+      linkService,
+      l10n: this.l10n,
+      maxCanvasPixels: MAX_CANVAS_PIXELS,
+      textLayerMode: TEXT_LAYER_MODE,
+    });
+    this.pdfViewer = pdfViewer;
+    linkService.setViewer(pdfViewer);
+
+    this.pdfHistory = new pdfjsViewer.PDFHistory({
+      eventBus,
+      linkService,
+    });
+    linkService.setHistory(this.pdfHistory);
+
+    document.getElementById("previous").addEventListener("click", function () {
+      PDFViewerApplication.page--;
+    });
+
+    document.getElementById("next").addEventListener("click", function () {
+      PDFViewerApplication.page++;
+    });
+
+    document.getElementById("zoomIn").addEventListener("click", function () {
+      PDFViewerApplication.zoomIn();
+    });
+
+    document.getElementById("zoomOut").addEventListener("click", function () {
+      PDFViewerApplication.zoomOut();
+    });
+
+    document
+      .getElementById("pageNumber")
+      .addEventListener("click", function () {
+        this.select();
+      });
+
+    document
+      .getElementById("pageNumber")
+      .addEventListener("change", function () {
+        PDFViewerApplication.page = this.value | 0;
+
+        // Ensure that the page number input displays the correct value,
+        // even if the value entered by the user was invalid
+        // (e.g. a floating point number).
+        if (this.value !== PDFViewerApplication.page.toString()) {
+          this.value = PDFViewerApplication.page;
+        }
+      });
+
+    eventBus.on("pagesinit", function () {
+      // We can use pdfViewer now, e.g. let's change default scale.
+      pdfViewer.currentScaleValue = DEFAULT_SCALE_VALUE;
+    });
+
+    eventBus.on(
+      "pagechanging",
+      function (evt) {
+        const page = evt.pageNumber;
+        const numPages = PDFViewerApplication.pagesCount;
+
+        document.getElementById("pageNumber").value = page;
+        document.getElementById("previous").disabled = page <= 1;
+        document.getElementById("next").disabled = page >= numPages;
+      },
+      true
+    );
+  },
+};
+
+window.PDFViewerApplication = PDFViewerApplication;
+
+document.addEventListener(
+  "DOMContentLoaded",
+  function () {
+    PDFViewerApplication.initUI();
+  },
+  true
+);
+
+// The offsetParent is not set until the PDF.js iframe or object is visible;
+// waiting for first animation.
+const animationStarted = new Promise(function (resolve) {
+  window.requestAnimationFrame(resolve);
+});
+
+// We need to delay opening until all HTML is loaded.
+animationStarted.then(function () {
+  PDFViewerApplication.open({
+    url: DEFAULT_URL,
+  });
+});