Merge pull request #7511 from timvandermeij/b2g-example

Convert the B2G viewer from an extension to an example
mozilla · Jul 27, 2016 · 19105f0 · 19105f0
2 parents df0d217 + a20f814
commit 19105f0
Show file tree

Hide file tree

Showing 23 changed files with 124 additions and 180 deletions.
diff --git a/examples/mobile-viewer/README.md b/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` 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.
diff --git a/extensions/b2g/images/div_line_left.png → ...es/mobile-viewer/images/div_line_left.png b/extensions/b2g/images/div_line_left.png → ...es/mobile-viewer/images/div_line_left.png
diff --git a/extensions/b2g/images/div_line_left@1.5x.png → ...bile-viewer/images/div_line_left@1.5x.png b/extensions/b2g/images/div_line_left@1.5x.png → ...bile-viewer/images/div_line_left@1.5x.png
diff --git a/extensions/b2g/images/div_line_left@2x.png → ...mobile-viewer/images/div_line_left@2x.png b/extensions/b2g/images/div_line_left@2x.png → ...mobile-viewer/images/div_line_left@2x.png
diff --git a/extensions/b2g/images/div_line_right.png → ...s/mobile-viewer/images/div_line_right.png b/extensions/b2g/images/div_line_right.png → ...s/mobile-viewer/images/div_line_right.png
diff --git a/...nsions/b2g/images/div_line_right@1.5x.png → ...ile-viewer/images/div_line_right@1.5x.png b/...nsions/b2g/images/div_line_right@1.5x.png → ...ile-viewer/images/div_line_right@1.5x.png
diff --git a/extensions/b2g/images/div_line_right@2x.png → ...obile-viewer/images/div_line_right@2x.png b/extensions/b2g/images/div_line_right@2x.png → ...obile-viewer/images/div_line_right@2x.png
diff --git a/extensions/b2g/images/document_bg.png → ...ples/mobile-viewer/images/document_bg.png b/extensions/b2g/images/document_bg.png → ...ples/mobile-viewer/images/document_bg.png
diff --git a/extensions/b2g/images/icon_next_page.png → ...s/mobile-viewer/images/icon_next_page.png b/extensions/b2g/images/icon_next_page.png → ...s/mobile-viewer/images/icon_next_page.png
diff --git a/...nsions/b2g/images/icon_next_page@1.5x.png → ...ile-viewer/images/icon_next_page@1.5x.png b/...nsions/b2g/images/icon_next_page@1.5x.png → ...ile-viewer/images/icon_next_page@1.5x.png
diff --git a/extensions/b2g/images/icon_previous_page.png → ...bile-viewer/images/icon_previous_page.png b/extensions/b2g/images/icon_previous_page.png → ...bile-viewer/images/icon_previous_page.png
diff --git a/...ns/b2g/images/icon_previous_page@1.5x.png → ...viewer/images/icon_previous_page@1.5x.png b/...ns/b2g/images/icon_previous_page@1.5x.png → ...viewer/images/icon_previous_page@1.5x.png
diff --git a/extensions/b2g/images/icon_zoom_in.png → ...les/mobile-viewer/images/icon_zoom_in.png b/extensions/b2g/images/icon_zoom_in.png → ...les/mobile-viewer/images/icon_zoom_in.png
diff --git a/extensions/b2g/images/icon_zoom_in@1.5x.png → ...obile-viewer/images/icon_zoom_in@1.5x.png b/extensions/b2g/images/icon_zoom_in@1.5x.png → ...obile-viewer/images/icon_zoom_in@1.5x.png
diff --git a/extensions/b2g/images/icon_zoom_out.png → ...es/mobile-viewer/images/icon_zoom_out.png b/extensions/b2g/images/icon_zoom_out.png → ...es/mobile-viewer/images/icon_zoom_out.png
diff --git a/extensions/b2g/images/icon_zoom_out@1.5x.png → ...bile-viewer/images/icon_zoom_out@1.5x.png b/extensions/b2g/images/icon_zoom_out@1.5x.png → ...bile-viewer/images/icon_zoom_out@1.5x.png
diff --git a/extensions/b2g/images/spinner.png → examples/mobile-viewer/images/spinner.png b/extensions/b2g/images/spinner.png → examples/mobile-viewer/images/spinner.png
diff --git a/extensions/b2g/images/toolbar_background.png → ...bile-viewer/images/toolbar_background.png b/extensions/b2g/images/toolbar_background.png → ...bile-viewer/images/toolbar_background.png
diff --git a/extensions/b2g/viewer.css → examples/mobile-viewer/viewer.css b/extensions/b2g/viewer.css → examples/mobile-viewer/viewer.css
@@ -1,4 +1,4 @@
-/* Copyright 2012 Mozilla Foundation
+/* 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.
@@ -25,6 +25,23 @@ html {
   font-size: 10px;
 }
 
+header {
+  background-color: #f4f4f4;
+}
+
+header h1 {
+  border-bottom: 1px solid #d8d8d8;
+  color: #858585;
+  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: #fff;
@@ -57,7 +74,6 @@ footer {
   box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
 }
 
-
 .toolbarButton {
   display: block;
   padding: 0;

diff --git a/examples/mobile-viewer/viewer.html b/examples/mobile-viewer/viewer.html
@@ -0,0 +1,76 @@
+<!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="../../build/dist/web/pdf_viewer.css">
+    <link rel="stylesheet" type="text/css" href="viewer.css">
+
+    <script src="../../build/dist/build/pdf.js"></script>
+    <script src="../../build/dist/web/pdf_viewer.js"></script>
+
+    <script src="viewer.js"></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>
+
+    <div id="errorWrapper" hidden="true">
+      <div id="errorMessageLeft">
+        <span id="errorMessage"></span>
+        <button id="errorShowMore">
+          More Information
+        </button>
+        <button id="errorShowLess">
+          Less Information
+        </button>
+      </div>
+      <div id="errorMessageRight">
+        <button id="errorClose">
+          Close
+        </button>
+      </div>
+      <div class="clearBoth"></div>
+      <textarea id="errorMoreInfo" hidden="true" readonly="readonly"></textarea>
+    </div>
+
+    <footer>
+      <button class="toolbarButton pageUp" title="Previous Page" id="previous"></button>
+      <button class="toolbarButton pageDown" title="Next Page" id="next"></button>
+
+      <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
+
+      <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut"></button>
+      <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn"></button>
+    </footer>
+  </body>
+</html>
diff --git a/extensions/b2g/viewer.js → examples/mobile-viewer/viewer.js b/extensions/b2g/viewer.js → examples/mobile-viewer/viewer.js
@@ -1,4 +1,4 @@
-/* Copyright 2014 Mozilla Foundation
+/* 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.
@@ -17,13 +17,19 @@
 
 'use strict';
 
+if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
+  alert('Please build the pdfjs-dist library using\n' +
+        '  `gulp dist`');
+}
+
 PDFJS.useOnlyCssZoom = true;
 PDFJS.disableTextLayer = true;
 PDFJS.maxImageSize = 1024 * 1024;
-PDFJS.workerSrc = '../pdfjs-components/build/pdf.worker.js';
-PDFJS.cMapUrl = '../pdfjs-components/cmaps/';
+PDFJS.workerSrc = '../../build/dist/build/pdf.worker.js';
+PDFJS.cMapUrl = '../../build/dist/cmaps/';
 PDFJS.cMapPacked = true;
 
+var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
 var DEFAULT_SCALE_DELTA = 1.1;
 var MIN_SCALE = 0.25;
 var MAX_SCALE = 10.0;
@@ -36,9 +42,9 @@ var PDFViewerApplication = {
   pdfLinkService: null,
 
   open: function (params) {
-    var url = params.url, originalUrl = params.originalUrl;
+    var url = params.url;
     var self = this;
-    this.setTitleUsingUrl(originalUrl);
+    this.setTitleUsingUrl(url);
 
     // Loading document.
     var loadingTask = PDFJS.getDocument(url);
@@ -134,7 +140,7 @@ var PDFViewerApplication = {
 
   setTitle: function pdfViewSetTitle(title) {
     document.title = title;
-    document.getElementById('activityTitle').textContent = title;
+    document.getElementById('title').textContent = title;
   },
 
   error: function pdfViewError(message, moreInfo) {
@@ -273,10 +279,11 @@ var PDFViewerApplication = {
 
     document.getElementById('pageNumber').addEventListener('change',
         function() {
-      // Handle the user inputting a floating point number.
       PDFViewerApplication.page = (this.value | 0);
 
-      if (this.value !== (this.value | 0).toString()) {
+      // 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;
       }
     });
@@ -310,38 +317,9 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 })();
 
-// Support of the new version of navigator.mozL10n -- in PDF.js older/custom
-// version is used.
-var mozL10n = {
-  get: function (id, args, fallback) {
-    var s = (navigator.mozL10n && navigator.mozL10n.get(id)) || fallback;
-    s = s.replace(/\{\{\s*(\w+)\s*\}\}/g, function (all, key) {
-      return args[key] || '';
-    });
-    return s;
-  },
-
-  translate: function (fragment) {
-    if (navigator.mozL10n) {
-      navigator.mozL10n.translateFragment(fragment);
-    }
-  }
-};
-
-window.navigator.mozSetMessageHandler('activity', function(activity) {
-  var blob = activity.source.data.blob;
-  var fileURL = activity.source.data.url ||
-                activity.source.data.filename ||
-                ' '; // if no url or filename, use a non-empty string
-
-  var url = URL.createObjectURL(blob);
-  // We need to delay opening until all HTML is loaded.
-  PDFViewerApplication.animationStartedPromise.then(function () {
-    PDFViewerApplication.open({url: url, originalUrl: fileURL});
-
-    var header = document.getElementById('header');
-    header.addEventListener('action', function() {
-      activity.postResult('close');
-    });
+// We need to delay opening until all HTML is loaded.
+PDFViewerApplication.animationStartedPromise.then(function () {
+  PDFViewerApplication.open({
+    url: DEFAULT_URL
   });
 });
diff --git a/extensions/b2g/viewer.html b/extensions/b2g/viewer.html