Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor the mobile viewer example

Browse Source 
This mostly removes B2G-specific code and adds the styles from the B2G
components.
This commit is contained in:
Tim van der Meij 2016-07-27 17:21:47 +02:00
parent a9dd2ab0ab
commit a20f814265
4 changed files with 72 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
examples/mobile-viewer/README.md Normal file
View File

@ -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.

20
examples/mobile-viewer/viewer.css
View File

@ -1,4 +1,4 @@
/* Copyright 2012 Mozilla Foundation /* Copyright 2016 Mozilla Foundation
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
@ -25,6 +25,23 @@ html {
font-size: 10px; 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 { body {
background: url(images/document_bg.png); background: url(images/document_bg.png);
color: #fff; color: #fff;
@ -57,7 +74,6 @@ footer {
box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75); box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
} }
.toolbarButton { .toolbarButton {
display: block; display: block;
padding: 0; padding: 0;

60
examples/mobile-viewer/viewer.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- <!--
Copyright 2012 Mozilla Foundation Copyright 2016 Mozilla Foundation
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -18,44 +18,22 @@ limitations under the License.
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>PDF.js viewer</title> <title>PDF.js viewer</title>
<script src="../pdfjs-components/build/pdf.js"></script> <link rel="stylesheet" href="../../build/dist/web/pdf_viewer.css">
<script src="../pdfjs-components/web/pdf_viewer.js"></script> <link rel="stylesheet" type="text/css" href="viewer.css">
<script src="/shared/js/l10n.js"></script>
<!-- Localization --> <script src="../../build/dist/build/pdf.js"></script>
<meta name="defaultLanguage" content="en-US"> <script src="../../build/dist/web/pdf_viewer.js"></script>
<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="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> </head>
<body> <body>
<section role="region" id="activityHeader" class="skin-organic theme-settings"> <header>
<gaia-header id="header" action="close"> <h1 id="title"></h1>
<h1 id="activityTitle"></h1> </header>
</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>
<div id="viewerContainer"> <div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div> <div id="viewer" class="pdfViewer"></div>
@ -66,23 +44,33 @@ limitations under the License.
<div class="glimmer"></div> <div class="glimmer"></div>
</div> </div>
<div id="errorWrapper" hidden='true'> <div id="errorWrapper" hidden="true">
<div id="errorMessageLeft"> <div id="errorMessageLeft">
<span id="errorMessage"></span> <span id="errorMessage"></span>
<button id="errorShowMore" data-l10n-id="error_more_info"> <button id="errorShowMore">
More Information More Information
</button> </button>
<button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'> <button id="errorShowLess">
Less Information Less Information
</button> </button>
</div> </div>
<div id="errorMessageRight"> <div id="errorMessageRight">
<button id="errorClose" data-l10n-id="error_close"> <button id="errorClose">
Close Close
</button> </button>
</div> </div>
<div class="clearBoth"></div> <div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea> <textarea id="errorMoreInfo" hidden="true" readonly="readonly"></textarea>
</div> </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> </body>
</html> </html>

60
examples/mobile-viewer/viewer.js
View File

@ -1,4 +1,4 @@
/* Copyright 2014 Mozilla Foundation /* Copyright 2016 Mozilla Foundation
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. * you may not use this file except in compliance with the License.
@ -17,13 +17,19 @@
'use strict'; 'use strict';
if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
alert('Please build the pdfjs-dist library using\n' +
' `gulp dist`');
}
PDFJS.useOnlyCssZoom = true; PDFJS.useOnlyCssZoom = true;
PDFJS.disableTextLayer = true; PDFJS.disableTextLayer = true;
PDFJS.maxImageSize = 1024 * 1024; PDFJS.maxImageSize = 1024 * 1024;
PDFJS.workerSrc = '../pdfjs-components/build/pdf.worker.js'; PDFJS.workerSrc = '../../build/dist/build/pdf.worker.js';
PDFJS.cMapUrl = '../pdfjs-components/cmaps/'; PDFJS.cMapUrl = '../../build/dist/cmaps/';
PDFJS.cMapPacked = true; PDFJS.cMapPacked = true;
var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
var DEFAULT_SCALE_DELTA = 1.1; var DEFAULT_SCALE_DELTA = 1.1;
var MIN_SCALE = 0.25; var MIN_SCALE = 0.25;
var MAX_SCALE = 10.0; var MAX_SCALE = 10.0;
@ -36,9 +42,9 @@ var PDFViewerApplication = {
pdfLinkService: null, pdfLinkService: null,
open: function (params) { open: function (params) {
var url = params.url, originalUrl = params.originalUrl; var url = params.url;
var self = this; var self = this;
this.setTitleUsingUrl(originalUrl); this.setTitleUsingUrl(url);
// Loading document. // Loading document.
var loadingTask = PDFJS.getDocument(url); var loadingTask = PDFJS.getDocument(url);
@ -134,7 +140,7 @@ var PDFViewerApplication = {
setTitle: function pdfViewSetTitle(title) { setTitle: function pdfViewSetTitle(title) {
document.title = title; document.title = title;
document.getElementById('activityTitle').textContent = title; document.getElementById('title').textContent = title;
}, },
error: function pdfViewError(message, moreInfo) { error: function pdfViewError(message, moreInfo) {
@ -273,10 +279,11 @@ var PDFViewerApplication = {
document.getElementById('pageNumber').addEventListener('change', document.getElementById('pageNumber').addEventListener('change',
function() { function() {
// Handle the user inputting a floating point number.
PDFViewerApplication.page = (this.value | 0); 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; 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 // We need to delay opening until all HTML is loaded.
// version is used. PDFViewerApplication.animationStartedPromise.then(function () {
var mozL10n = { PDFViewerApplication.open({
get: function (id, args, fallback) { url: DEFAULT_URL
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');
});
}); });
}); });