[Pkg-javascript-commits] [pdf.js] 11/116: Replaces text selection example
David Prévot
taffit at moszumanska.debian.org
Fri Mar 6 16:19:55 UTC 2015
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository pdf.js.
commit 513a3d8c91c2948fcc95d2f1f297d787f45fa416
Author: Yury Delendik <ydelendik at mozilla.com>
Date: Fri Dec 19 18:10:57 2014 -0600
Replaces text selection example
---
examples/components/pageviewer.html | 46 +++++++++++++
examples/components/pageviewer.js | 58 ++++++++++++++++
examples/text-selection/css/minimal.css | 43 ------------
examples/text-selection/index.html | 26 -------
examples/text-selection/js/minimal.js | 97 ---------------------------
examples/text-selection/pdf/TestDocument.pdf | Bin 35153 -> 0 bytes
web/annotations_layer_builder.js | 4 +-
web/pdf_viewer.component.js | 9 ++-
web/text_layer_builder.css | 4 ++
web/viewer.css | 7 --
10 files changed, 119 insertions(+), 175 deletions(-)
diff --git a/examples/components/pageviewer.html b/examples/components/pageviewer.html
new file mode 100644
index 0000000..ac49d27
--- /dev/null
+++ b/examples/components/pageviewer.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!--
+Copyright 2014 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" mozdisallowselectionprint moznomarginboxes>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <meta name="google" content="notranslate">
+ <title>PDF.js page viewer using built components</title>
+
+ <style>
+ body {
+ background-color: #808080;
+ margin: 0;
+ padding: 0;
+ }
+ </style>
+
+ <link rel="stylesheet" href="../../build/components/pdf_viewer.css">
+
+ <!-- for legacy browsers -->
+ <script src="../../build/components/compatibility.js"></script>
+ <script src="../../build/pdf.js"></script>
+ <script src="../../build/components/pdf_viewer.js"></script>
+</head>
+
+<body tabindex="1">
+ <div id="pageContainer" class="pdfPage"></div>
+
+ <script src="pageviewer.js"></script>
+</body>
+</html>
+
diff --git a/examples/components/pageviewer.js b/examples/components/pageviewer.js
new file mode 100644
index 0000000..41c1b35
--- /dev/null
+++ b/examples/components/pageviewer.js
@@ -0,0 +1,58 @@
+/* Copyright 2014 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.
+ */
+
+'use strict';
+
+if (!PDFJS.PDFViewer || !PDFJS.getDocument) {
+ alert('Please build the library and components using\n' +
+ ' `node make generic components`');
+}
+
+// In cases when the pdf.worker.js is located at the different folder than the
+// pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
+// shall be specified.
+//
+// PDFJS.workerSrc = '../../build/pdf.worker.js';
+
+// Some PDFs need external cmaps.
+//
+// PDFJS.cMapUrl = '../../external/bcmaps/';
+// PDFJS.cMapPacked = true;
+
+var DEFAULT_URL = '../../web/compressed.tracemonkey-pldi-09.pdf';
+var PAGE_TO_VIEW = 1;
+var SCALE = 1.0;
+
+var container = document.getElementById('pageContainer');
+
+// Loading document.
+PDFJS.getDocument(DEFAULT_URL).then(function (pdfDocument) {
+ // Document loaded, retrieving the page.
+ return pdfDocument.getPage(PAGE_TO_VIEW).then(function (pdfPage) {
+ // Creating the page view with default parameters.
+ var pdfPageView = new PDFJS.PDFPageView({
+ container: container,
+ id: PAGE_TO_VIEW,
+ scale: SCALE,
+ defaultViewport: pdfPage.getViewport(SCALE),
+ // We can enable text/annotations layers, if needed
+ textLayerFactory: new PDFJS.DefaultTextLayerFactory(),
+ annotationsLayerFactory: new PDFJS.DefaultAnnotationsLayerFactory()
+ });
+ // Associates the actual page with the view, and drawing it
+ pdfPageView.setPdfPage(pdfPage);
+ return pdfPageView.draw();
+ });
+});
diff --git a/examples/text-selection/css/minimal.css b/examples/text-selection/css/minimal.css
deleted file mode 100644
index 6a11244..0000000
--- a/examples/text-selection/css/minimal.css
+++ /dev/null
@@ -1,43 +0,0 @@
-body {
- font-family: arial, verdana, sans-serif;
-}
-
-/* Allow absolute positioning of the canvas and textLayer in the page. They
- will be the same size and will be placed on top of each other. */
-.pdfPage {
- position: relative;
- overflow: visible;
- border: 1px solid #000000;
-}
-
-.pdfPage > canvas {
- position: absolute;
- top: 0;
- left: 0;
-}
-
-/* CSS classes used by TextLayerBuilder to style the text layer divs */
-
-/* This stuff is important! Otherwise when you select the text,
- the text in the divs will show up! */
-::selection { background:rgba(0,0,255,0.3); }
-::-moz-selection { background:rgba(0,0,255,0.3); }
-
-.textLayer {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- color: #000;
- font-family: sans-serif;
- overflow: hidden;
-}
-
-.textLayer > div {
- color: transparent;
- position: absolute;
- line-height: 1;
- white-space: pre;
- cursor: text;
-}
diff --git a/examples/text-selection/index.html b/examples/text-selection/index.html
deleted file mode 100644
index fc1e43b..0000000
--- a/examples/text-selection/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<html>
- <head>
- <title>Minimal pdf.js text-selection demo</title>
- <link href="css/minimal.css" rel="stylesheet" media="screen" />
-
- <!-- you will need to run "node make generic" first before you can use this -->
- <script src="../../build/generic/build/pdf.js"></script>
-
- <!-- These files are viewer components that you will need to get text-selection to work -->
- <script src="../../web/ui_utils.js"></script>
- <script src="../../web/text_layer_builder.js"></script>
-
- <script>
- // Specify the main script used to create a new PDF.JS web worker.
- // In production, change this to point to the combined `pdf.js` file.
- </script>
-
- <script src="js/minimal.js"></script>
- </head>
- <body>
- This is a minimal pdf.js text-selection demo. The existing minimal-example shows you how to render a PDF, but not
- how to enable text-selection. This example shows you how to do both. <br /><br />
- <div id="pdfContainer">
- </div>
- </body>
-</html>
diff --git a/examples/text-selection/js/minimal.js b/examples/text-selection/js/minimal.js
deleted file mode 100644
index e87bb83..0000000
--- a/examples/text-selection/js/minimal.js
+++ /dev/null
@@ -1,97 +0,0 @@
-// Minimal PDF rendering and text-selection example using PDF.js by Vivin Suresh Paliath (http://vivin.net)
-// This example uses a built version of PDF.js that contains all modules that it requires.
-//
-// The problem with understanding text selection was that the text selection code has heavily intertwined
-// with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file
-// which contains the bare minimum required to implement text selection. The key component is TextLayerBuilder,
-// which is the object that handles the creation of text-selection divs. I have added this code as an external
-// resource.
-//
-// This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
-// just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
-//
-// The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
-// you actually end up selecting.
-//
-// NOTE: The original example was changed to remove jQuery usage, re-structure and add more comments.
-
-window.onload = function () {
- if (typeof PDFJS === 'undefined') {
- alert('Built version of pdf.js is not found\nPlease run `node make generic`');
- return;
- }
-
- var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
- PDFJS.workerSrc = '../../build/generic/build/pdf.worker.js';
-
- function loadPdf(pdfPath) {
- var pdf = PDFJS.getDocument(pdfPath);
- return pdf.then(renderPdf);
- }
-
- function renderPdf(pdf) {
- return pdf.getPage(1).then(renderPage);
- }
-
- function renderPage(page) {
- var viewport = page.getViewport(scale);
-
- // Create and append the 'pdf-page' div to the pdf container.
- var pdfPage = document.createElement('div');
- pdfPage.className = 'pdfPage';
- var pdfContainer = document.getElementById('pdfContainer');
- pdfContainer.appendChild(pdfPage);
-
- // Set the canvas height and width to the height and width of the viewport.
- var canvas = document.createElement('canvas');
- var context = canvas.getContext('2d');
-
- // The following few lines of code set up scaling on the context, if we are
- // on a HiDPI display.
- var outputScale = getOutputScale(context);
- canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
- canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
- context._scaleX = outputScale.sx;
- context._scaleY = outputScale.sy;
- if (outputScale.scaled) {
- context.scale(outputScale.sx, outputScale.sy);
- }
-
- // The page, canvas and text layer elements will have the same size.
- canvas.style.width = Math.floor(viewport.width) + 'px';
- canvas.style.height = Math.floor(viewport.height) + 'px';
-
- pdfPage.style.width = canvas.style.width;
- pdfPage.style.height = canvas.style.height;
- pdfPage.appendChild(canvas);
-
- var textLayerDiv = document.createElement('div');
- textLayerDiv.className = 'textLayer';
- textLayerDiv.style.width = canvas.style.width;
- textLayerDiv.style.height = canvas.style.height;
- pdfPage.appendChild(textLayerDiv);
-
- // Painting the canvas...
- var renderContext = {
- canvasContext: context,
- viewport: viewport
- };
- var renderTask = page.render(renderContext);
-
- // ... and at the same time, getting the text and creating the text layer.
- var textLayerPromise = page.getTextContent().then(function (textContent) {
- var textLayerBuilder = new TextLayerBuilder({
- textLayerDiv: textLayerDiv,
- viewport: viewport,
- pageIndex: 0
- });
- textLayerBuilder.setTextContent(textContent);
- });
-
- // We might be interested when rendering complete and text layer is built.
- return Promise.all([renderTask.promise, textLayerPromise]);
- }
-
- loadPdf('pdf/TestDocument.pdf');
-};
-
diff --git a/examples/text-selection/pdf/TestDocument.pdf b/examples/text-selection/pdf/TestDocument.pdf
deleted file mode 100644
index 843fd9d..0000000
Binary files a/examples/text-selection/pdf/TestDocument.pdf and /dev/null differ
diff --git a/web/annotations_layer_builder.js b/web/annotations_layer_builder.js
index 494ceff..b5ef814 100644
--- a/web/annotations_layer_builder.js
+++ b/web/annotations_layer_builder.js
@@ -103,7 +103,9 @@ var AnnotationsLayerBuilder = (function AnnotationsLayerBuilderClosure() {
element = PDFJS.AnnotationUtils.getHtmlElement(data,
pdfPage.commonObjs);
element.setAttribute('data-annotation-id', data.id);
- mozL10n.translate(element);
+ if (typeof mozL10n !== 'undefined') {
+ mozL10n.translate(element);
+ }
var rect = data.rect;
var view = pdfPage.view;
diff --git a/web/pdf_viewer.component.js b/web/pdf_viewer.component.js
index 22c4838..8c1223a 100644
--- a/web/pdf_viewer.component.js
+++ b/web/pdf_viewer.component.js
@@ -15,7 +15,9 @@
* limitations under the License.
*/
/*jshint globalstrict: false */
-/* globals PDFJS, PDFViewer */
+/* globals PDFJS, PDFViewer, PDFPageView, TextLayerBuilder,
+ DefaultTextLayerFactory, AnnotationsLayerBuilder,
+ DefaultAnnotationsLayerFactory */
// Initializing PDFJS global object (if still undefined)
if (typeof PDFJS === 'undefined') {
@@ -29,4 +31,9 @@ if (typeof PDFJS === 'undefined') {
//#include pdf_viewer.js
PDFJS.PDFViewer = PDFViewer;
+ PDFJS.PDFPageView = PDFPageView;
+ PDFJS.TextLayerBuilder = TextLayerBuilder;
+ PDFJS.DefaultTextLayerFactory = DefaultTextLayerFactory;
+ PDFJS.AnnotationsLayerBuilder = AnnotationsLayerBuilder;
+ PDFJS.DefaultAnnotationsLayerFactory = DefaultAnnotationsLayerFactory;
}).call((typeof window === 'undefined') ? this : window);
diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
index 32f7c49..f5a55df 100644
--- a/web/text_layer_builder.css
+++ b/web/text_layer_builder.css
@@ -20,6 +20,7 @@
right: 0;
bottom: 0;
overflow: hidden;
+ opacity: 0.2;
}
.textLayer > div {
@@ -57,3 +58,6 @@
.textLayer .highlight.selected {
background-color: rgb(0, 100, 0);
}
+
+.textLayer ::selection { background: rgb(0,0,255); }
+.textLayer ::-moz-selection { background: rgb(0,0,255); }
diff --git a/web/viewer.css b/web/viewer.css
index 066b12a..5fcb3f0 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -1258,19 +1258,12 @@ html[dir='rtl'] .attachmentsItem > button {
cursor: default;
}
-
/* TODO: file FF bug to support ::-moz-selection:window-inactive
so we can override the opaque grey background when the window is inactive;
see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */
::selection { background: rgba(0,0,255,0.3); }
::-moz-selection { background: rgba(0,0,255,0.3); }
-.textLayer ::selection { background: rgb(0,0,255); }
-.textLayer ::-moz-selection { background: rgb(0,0,255); }
-.textLayer {
- opacity: 0.2;
-}
-
#errorWrapper {
background: none repeat scroll 0 0 #FF5555;
color: white;
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/pdf.js.git
More information about the Pkg-javascript-commits
mailing list