From a20f814265cb9fea8f2c613a3d8c93b3e6525df0 Mon Sep 17 00:00:00 2001
From: Tim van der Meij <timvandermeij@gmail.com>
Date: Wed, 27 Jul 2016 17:21:47 +0200
Subject: [PATCH] Refactor the mobile viewer example
This mostly removes B2G-specific code and adds the styles from the B2G
components.
---
examples/mobile-viewer/README.md | 11 ++++++
examples/mobile-viewer/viewer.css | 20 +++++++++-
examples/mobile-viewer/viewer.html | 60 ++++++++++++------------------
examples/mobile-viewer/viewer.js | 60 ++++++++++--------------------
4 files changed, 72 insertions(+), 79 deletions(-)
create mode 100644 examples/mobile-viewer/README.md
diff --git a/examples/mobile-viewer/README.md b/examples/mobile-viewer/README.md
new file mode 100644
index 000000000..767f915d4
--- /dev/null
+++ 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/examples/mobile-viewer/viewer.css b/examples/mobile-viewer/viewer.css
index 2d494e91f..bd0b7790c 100644
--- a/examples/mobile-viewer/viewer.css
+++ b/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
index 7baa1f7f4..9c2eee125 100644
--- a/examples/mobile-viewer/viewer.html
+++ b/examples/mobile-viewer/viewer.html
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<!--
-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.
@@ -18,44 +18,22 @@ limitations under the License.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
<title>PDF.js viewer</title>
- <script src="../pdfjs-components/build/pdf.js"></script>
- <script src="../pdfjs-components/web/pdf_viewer.js"></script>
- <script src="/shared/js/l10n.js"></script>
+ <link rel="stylesheet" href="../../build/dist/web/pdf_viewer.css">
+ <link rel="stylesheet" type="text/css" href="viewer.css">
- <!-- Localization -->
- <meta name="defaultLanguage" content="en-US">
- <meta name="availableLanguages" content="ach,af,ak,an,ar,as,ast,az,be,bg,bn-BD,bn-IN,br,bs,ca,cs,csb,cy,da,de,el,en-GB,en-ZA,eo,es-AR,es-CL,es-ES,es-MX,et,eu,fa,ff,fi,fr,fy-NL,ga-IE,gd,gl,gu-IN,he,hi-IN,hr,hu,hy-AM,id,is,it,ja,ka,kk,km,kn,ko,ku,lg,lij,lt,lv,mai,mk,ml,mn,mr,ms,my,nb-NO,nl,nn-NO,nso,oc,or,pa-IN,pl,pt-BR,pt-PT,rm,ro,ru,rw,sah,si,sk,sl,son,sq,sr,sv-SE,sw,ta,ta-LK,te,th,tl,tn,tr,uk,ur,vi,wo,xh,zh-CN,zh-TW,zu">
- <link rel="localization" href="locale/{locale}/viewer.properties">
+ <script src="../../build/dist/build/pdf.js"></script>
+ <script src="../../build/dist/web/pdf_viewer.js"></script>
<script src="viewer.js"></script>
-
- <!-- Web Components -->
- <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-theme/gaia-theme.css">
- <script src="/shared/elements/config.js" defer></script>
- <script src="/shared/elements/gaia-header/dist/gaia-header.js" defer></script>
-
- <link rel="stylesheet" type="text/css" href="../pdfjs-components/web/pdf_viewer.css">
- <link rel="stylesheet" type="text/css" href="viewer.css">
</head>
<body>
- <section role="region" id="activityHeader" class="skin-organic theme-settings">
- <gaia-header id="header" action="close">
- <h1 id="activityTitle"></h1>
- </gaia-header>
-
- <footer id="open-toolbar">
- <button class="toolbarButton pageUp" title="Previous Page" id="previous" data-l10n-id="previous"></button>
- <button class="toolbarButton pageDown" title="Next Page" id="next" data-l10n-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" data-l10n-id="zoom_out"></button>
- <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" data-l10n-id="zoom_in"></button>
- </footer>
- </section>
+ <header>
+ <h1 id="title"></h1>
+ </header>
<div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div>
@@ -66,23 +44,33 @@ limitations under the License.
<div class="glimmer"></div>
</div>
- <div id="errorWrapper" hidden='true'>
+ <div id="errorWrapper" hidden="true">
<div id="errorMessageLeft">
<span id="errorMessage"></span>
- <button id="errorShowMore" data-l10n-id="error_more_info">
+ <button id="errorShowMore">
More Information
</button>
- <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
+ <button id="errorShowLess">
Less Information
</button>
</div>
<div id="errorMessageRight">
- <button id="errorClose" data-l10n-id="error_close">
+ <button id="errorClose">
Close
</button>
</div>
<div class="clearBoth"></div>
- <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+ <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/examples/mobile-viewer/viewer.js b/examples/mobile-viewer/viewer.js
index 49a2007c7..2521ee6d3 100644
--- a/examples/mobile-viewer/viewer.js
+++ b/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
});
});