Merge pull request #9904 from RonLek/master

Modified Examples to work without systemjs
mozilla · Jul 22, 2018 · 1aaeaf3 · 1aaeaf3
2 parents 2ce489c + 8afc4ce
commit 1aaeaf3
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -102,11 +102,7 @@ You can play with the PDF.js API directly from your browser using the live demos
 
 + [Interactive examples](http://mozilla.github.io/pdf.js/examples/index.html#interactive-examples)
 
-The repository contains a hello world example that you can run locally:
-
-+ [examples/helloworld/](https://github.com/mozilla/pdf.js/blob/master/examples/helloworld/)
-
-More examples can be found in the examples folder. Some of them are using the pdfjs-dist package, which can be built and installed in this repo directory via `gulp dist-install` command.
+More examples can be found in the [examples folder](https://github.com/mozilla/pdf.js/tree/master/examples/). Some of them are using the pdfjs-dist package, which can be built and installed in this repo directory via `gulp dist-install` command.
 
 For an introduction to the PDF.js code, check out the presentation by our
 contributor Julian Viereck:

diff --git a/docs/contents/examples/index.md b/docs/contents/examples/index.md
@@ -5,7 +5,7 @@ template: layout.jade
 
 ## Hello World Walkthrough
 
-[Full source](https://github.com/mozilla/pdf.js/tree/master/examples/helloworld)
+[Full source](https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html)
 
 PDF.js heavily relies on the use of [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). If promises are new to you, it's recommended you become familiar with them before continuing on.
 

diff --git a/examples/helloworld/README.md b/examples/helloworld/README.md
diff --git a/examples/helloworld/hello.js b/examples/helloworld/hello.js
diff --git a/examples/helloworld/helloworld.pdf b/examples/helloworld/helloworld.pdf
diff --git a/examples/helloworld/index.html b/examples/helloworld/index.html
diff --git a/examples/svgviewer/index.html b/examples/svgviewer/index.html
@@ -1,29 +1,51 @@
 <!DOCTYPE html>
-<html>
+<!--
+Copyright 2014 Mozilla Foundation
 
-<head>
-  <meta charset="utf-8">
+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
 
-  <title>PDF.js SVG viewer example</title>
+    http://www.apache.org/licenses/LICENSE-2.0
 
-  <script src="../../node_modules/systemjs/dist/system.js"></script>
-  <script src="../../systemjs.config.js"></script>
-  <script src="viewer.js"></script>
+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" mozdisallowselectionprint>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <meta name="google" content="notranslate">
+  <title>PDF.js SVG viewer using built components</title>
 
   <style>
     body {
-      background-color: #404040;
+      background-color: #808080;
+      margin: 0;
+      padding: 0;
     }
-
-    .pageContainer {
-      border: 1px solid #000;
-      margin: 5px auto;
-      background-color: #FFF;
+    #viewerContainer {
+      overflow: auto;
+      position: absolute;
+      width: 100%;
+      height: 100%;
     }
   </style>
+
+  <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>
 </head>
 
-<body>
-</body>
+<body tabindex="1">
+  <div id="viewerContainer">
+    <div id="viewer" class="pdfViewer"></div>
+  </div>
 
+  <script src="viewer.js"></script>
+</body>
 </html>
diff --git a/examples/svgviewer/viewer.js b/examples/svgviewer/viewer.js
@@ -1,68 +1,75 @@
+/* Copyright 2014 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.
+ */
+
 'use strict';
 
-var DEFAULT_SCALE = 1.5;
+if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer)  {
+  alert('Please build the pdfjs-dist library using\n' +
+        '  `gulp dist-install`');
+}
 
-// Parse query string to extract some parameters (it can fail for some input)
-var query = document.location.href.replace(/^[^?]*(\?([^#]*))?(#.*)?/, '$2');
-var queryParams = query ? JSON.parse('{' + query.split('&').map(function (a) {
-  return a.split('=').map(decodeURIComponent).map(JSON.stringify).join(': ');
-}).join(',') + '}') : {};
+// The workerSrc property shall be specified.
+//
+pdfjsLib.GlobalWorkerOptions.workerSrc =
+  '../../node_modules/pdfjs-dist/build/pdf.worker.js';
 
-var url = queryParams.file || '../../web/compressed.tracemonkey-pldi-09.pdf';
+// Some PDFs need external cmaps.
+//
+var CMAP_URL = '../../node_modules/pdfjs-dist/cmaps/';
+var CMAP_PACKED = true;
 
-function renderDocument(pdf, svgLib) {
-  var promise = Promise.resolve();
-  for (var i = 1; i <= pdf.numPages; i++) {
-    // Using promise to fetch and render the next page
-    promise = promise.then(function (pageNum) {
-      return pdf.getPage(pageNum).then(function (page) {
-        var viewport = page.getViewport(DEFAULT_SCALE);
+var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
+var SEARCH_FOR = ''; // try 'Mozilla';
 
-        var container = document.createElement('div');
-        container.id = 'pageContainer' + pageNum;
-        container.className = 'pageContainer';
-        container.style.width = viewport.width + 'px';
-        container.style.height = viewport.height + 'px';
-        document.body.appendChild(container);
+var container = document.getElementById('viewerContainer');
 
-        return page.getOperatorList().then(function (opList) {
-          var svgGfx = new svgLib.SVGGraphics(page.commonObjs, page.objs);
-          return svgGfx.getSVG(opList, viewport).then(function (svg) {
-            container.appendChild(svg);
-          });
-        });
-      });
-    }.bind(null, i));
-  }
-}
+// (Optionally) enable hyperlinks within PDF files.
+var pdfLinkService = new pdfjsViewer.PDFLinkService();
+
+var pdfViewer = new pdfjsViewer.PDFViewer({
+  container: container,
+  linkService: pdfLinkService,
+  renderer: 'svg',
+  textLayerMode: 0,
+});
+pdfLinkService.setViewer(pdfViewer);
+
+// (Optionally) enable find controller.
+var pdfFindController = new pdfjsViewer.PDFFindController({
+  pdfViewer: pdfViewer,
+});
+pdfViewer.setFindController(pdfFindController);
 
-Promise.all([System.import('pdfjs/display/api'),
-             System.import('pdfjs/display/svg'),
-             System.import('pdfjs/display/worker_options'),
-             System.import('pdfjs/display/network'),
-             System.resolve('pdfjs/worker_loader')])
-       .then(function (modules) {
-  var api = modules[0];
-  var svg = modules[1];
-  var GlobalWorkerOptions = modules[2].GlobalWorkerOptions;
-  var network = modules[3];
-  api.setPDFNetworkStreamFactory((params) => {
-    return new network.PDFNetworkStream(params);
-  });
+container.addEventListener('pagesinit', function () {
+  // We can use pdfViewer now, e.g. let's change default scale.
+  pdfViewer.currentScaleValue = 'page-width';
 
-  // In production, change this to point to the built `pdf.worker.js` file.
-  GlobalWorkerOptions.workerSrc = modules[4];
+  if (SEARCH_FOR) { // We can try search for things
+    pdfFindController.executeCommand('find', {query: SEARCH_FOR});
+  }
+});
 
-  // In production, change this to point to where the cMaps are placed.
-  var CMAP_URL = '../../external/bcmaps/';
-  var CMAP_PACKED = true;
+// Loading document.
+pdfjsLib.getDocument({
+  url: DEFAULT_URL,
+  cMapUrl: CMAP_URL,
+  cMapPacked: CMAP_PACKED,
+}).then(function(pdfDocument) {
+  // Document loaded, specifying document for the viewer and
+  // the (optional) linkService.
+  pdfViewer.setDocument(pdfDocument);
 
-  // Fetch the PDF document from the URL using promises.
-  api.getDocument({
-    url: url,
-    cMapUrl: CMAP_URL,
-    cMapPacked: CMAP_PACKED,
-  }).then(function(doc) {
-    renderDocument(doc, svg);
-  });
+  pdfLinkService.setDocument(pdfDocument, null);
 });