Merge pull request #7511 from timvandermeij/b2g-example
Convert the B2G viewer from an extension to an example
Yury Delendik
GitHub
11
examples/mobile-viewer/README.md
Normal 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.
|
||||
|
Before Width: | Height: | Size: 169 B After Width: | Height: | Size: 169 B |
|
Before Width: | Height: | Size: 185 B After Width: | Height: | Size: 185 B |
|
Before Width: | Height: | Size: 295 B After Width: | Height: | Size: 295 B |
|
Before Width: | Height: | Size: 166 B After Width: | Height: | Size: 166 B |
|
Before Width: | Height: | Size: 184 B After Width: | Height: | Size: 184 B |
|
Before Width: | Height: | Size: 295 B After Width: | Height: | Size: 295 B |
|
Before Width: | Height: | Size: 560 B After Width: | Height: | Size: 560 B |
|
Before Width: | Height: | Size: 310 B After Width: | Height: | Size: 310 B |
|
Before Width: | Height: | Size: 338 B After Width: | Height: | Size: 338 B |
|
Before Width: | Height: | Size: 372 B After Width: | Height: | Size: 372 B |
|
Before Width: | Height: | Size: 395 B After Width: | Height: | Size: 395 B |
|
Before Width: | Height: | Size: 640 B After Width: | Height: | Size: 640 B |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 564 B After Width: | Height: | Size: 564 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
@ -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;
|
||||
76
examples/mobile-viewer/viewer.html
Normal file
@ -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>
|
||||
@ -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
|
||||
});
|
||||
});
|
||||
@ -1,88 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright 2012 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>
|
||||
|
||||
<script src="../pdfjs-components/build/pdf.js"></script>
|
||||
<script src="../pdfjs-components/web/pdf_viewer.js"></script>
|
||||
<script src="/shared/js/l10n.js"></script>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<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" data-l10n-id="error_more_info">
|
||||
More Information
|
||||
</button>
|
||||
<button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
|
||||
Less Information
|
||||
</button>
|
||||
</div>
|
||||
<div id="errorMessageRight">
|
||||
<button id="errorClose" data-l10n-id="error_close">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="clearBoth"></div>
|
||||
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
49
make.js
@ -40,7 +40,6 @@ var ROOT_DIR = __dirname + '/', // absolute path to project's root
|
||||
BUILD_TARGETS = [BUILD_TARGET, BUILD_WORKER_TARGET],
|
||||
FIREFOX_BUILD_DIR = BUILD_DIR + '/firefox/',
|
||||
CHROME_BUILD_DIR = BUILD_DIR + '/chromium/',
|
||||
B2G_BUILD_DIR = BUILD_DIR + '/b2g/',
|
||||
JSDOC_DIR = BUILD_DIR + 'jsdoc',
|
||||
EXTENSION_SRC_DIR = 'extensions/',
|
||||
FIREFOX_CONTENT_DIR = EXTENSION_SRC_DIR + '/firefox/content/',
|
||||
@ -226,7 +225,6 @@ target.jsdoc = function() {
|
||||
target.web = function() {
|
||||
target.generic();
|
||||
target.extension();
|
||||
target.b2g();
|
||||
target.jsdoc();
|
||||
|
||||
echo();
|
||||
@ -241,7 +239,6 @@ target.web = function() {
|
||||
mkdir('-p', GH_PAGES_DIR + BUILD_DIR);
|
||||
mkdir('-p', GH_PAGES_DIR + EXTENSION_SRC_DIR + '/firefox');
|
||||
mkdir('-p', GH_PAGES_DIR + EXTENSION_SRC_DIR + '/chromium');
|
||||
mkdir('-p', GH_PAGES_DIR + EXTENSION_SRC_DIR + '/b2g');
|
||||
mkdir('-p', GH_PAGES_DIR + '/api/draft/');
|
||||
mkdir('-p', GH_PAGES_DIR + '/examples/');
|
||||
|
||||
@ -252,7 +249,6 @@ target.web = function() {
|
||||
GH_PAGES_DIR + EXTENSION_SRC_DIR + 'chromium/');
|
||||
cp('-R', 'test/features', GH_PAGES_DIR);
|
||||
cp('-R', 'examples/learning', GH_PAGES_DIR + '/examples/');
|
||||
cp('-R', B2G_BUILD_DIR, GH_PAGES_DIR + EXTENSION_SRC_DIR + 'b2g/');
|
||||
cp('-R', JSDOC_DIR + '/*', GH_PAGES_DIR + '/api/draft/');
|
||||
|
||||
var wintersmith = require('wintersmith');
|
||||
@ -881,51 +877,6 @@ target.mozcentral = function() {
|
||||
MOZCENTRAL_CONTENT_DIR + 'PdfjsChromeUtils.jsm');
|
||||
};
|
||||
|
||||
target.b2g = function() {
|
||||
target.generic();
|
||||
target.components();
|
||||
|
||||
echo();
|
||||
echo('### Building B2G (Firefox OS App)');
|
||||
var B2G_BUILD_CONTENT_DIR = B2G_BUILD_DIR + '/content/';
|
||||
|
||||
// Clear out everything in the b2g build directory
|
||||
cd(ROOT_DIR);
|
||||
rm('-Rf', B2G_BUILD_DIR);
|
||||
mkdir('-p', B2G_BUILD_CONTENT_DIR);
|
||||
mkdir('-p', B2G_BUILD_CONTENT_DIR + '/web');
|
||||
// Simulating pdfjs-dist structure in the pdfjs-components folder.
|
||||
mkdir('-p', B2G_BUILD_CONTENT_DIR + '/pdfjs-components/web');
|
||||
mkdir('-p', B2G_BUILD_CONTENT_DIR + '/pdfjs-components/build');
|
||||
mkdir('-p', B2G_BUILD_CONTENT_DIR + '/pdfjs-components/cmaps');
|
||||
|
||||
var setup = {
|
||||
defines: DEFINES,
|
||||
copy: [
|
||||
['extensions/b2g/images', B2G_BUILD_CONTENT_DIR + '/web'],
|
||||
['extensions/b2g/viewer.html', B2G_BUILD_CONTENT_DIR + '/web'],
|
||||
['extensions/b2g/viewer.css', B2G_BUILD_CONTENT_DIR + '/web'],
|
||||
['extensions/b2g/viewer.js', B2G_BUILD_CONTENT_DIR + '/web'],
|
||||
['web/locale', B2G_BUILD_CONTENT_DIR + '/web'],
|
||||
['build/generic/build/pdf.js',
|
||||
B2G_BUILD_CONTENT_DIR + '/pdfjs-components/build'],
|
||||
['build/generic/build/pdf.worker.js',
|
||||
B2G_BUILD_CONTENT_DIR + '/pdfjs-components/build'],
|
||||
['build/components/pdf_viewer.js',
|
||||
B2G_BUILD_CONTENT_DIR + '/pdfjs-components/web'],
|
||||
['build/components/pdf_viewer.css',
|
||||
B2G_BUILD_CONTENT_DIR + '/pdfjs-components/web'],
|
||||
['build/components/images',
|
||||
B2G_BUILD_CONTENT_DIR + '/pdfjs-components/web'],
|
||||
['external/bcmaps/*', B2G_BUILD_CONTENT_DIR + '/pdfjs-components/cmaps']
|
||||
],
|
||||
preprocess: []
|
||||
};
|
||||
builder.build(setup);
|
||||
|
||||
cleanupJSSource(B2G_BUILD_CONTENT_DIR + '/web/viewer.js');
|
||||
};
|
||||
|
||||
//
|
||||
// make chrome
|
||||
//
|
||||
|
||||