akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactor the mobile viewer example 

This mostly removes B2G-specific code and adds the styles from the B2G
components.
Tim van der Meij 9 years ago
parent
a9dd2ab0ab
commit
a20f814265
4 changed files with 72 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      examples/mobile-viewer/README.md
  2. 20
      examples/mobile-viewer/viewer.css
  3. 60
      examples/mobile-viewer/viewer.html
  4. 60
      examples/mobile-viewer/viewer.js

11
examples/mobile-viewer/README.md
Unescape View File

@ -0,0 +1,11 @@ @@ -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
Unescape View File

@ -1,4 +1,4 @@ @@ -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 { @@ -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 { @@ -57,7 +74,6 @@ footer {
box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
}
.toolbarButton {
display: block;
padding: 0;

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

@ -1,6 +1,6 @@ @@ -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. @@ -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. @@ -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>

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

@ -1,4 +1,4 @@ @@ -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 @@ @@ -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 = { @@ -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 = { @@ -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 = { @@ -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 () { @@ -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
});
});

Write Preview
Loading…
Cancel
Save