diff --git a/examples/components/pageviewer.html b/examples/components/pageviewer.html new file mode 100644 index 000000000..ac49d273c --- /dev/null +++ b/examples/components/pageviewer.html @@ -0,0 +1,46 @@ + + + + + + + + PDF.js page viewer using built components + + + + + + + + + + + + +
+ + + + + diff --git a/examples/components/pageviewer.js b/examples/components/pageviewer.js new file mode 100644 index 000000000..41c1b35da --- /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 6a1124484..000000000 --- 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 fc1e43ba1..000000000 --- a/examples/text-selection/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - Minimal pdf.js text-selection demo - - - - - - - - - - - - - - - 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.

-
-
- - diff --git a/examples/text-selection/js/minimal.js b/examples/text-selection/js/minimal.js deleted file mode 100644 index e87bb837a..000000000 --- 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 843fd9d2b..000000000 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 494ceffb0..b5ef814ec 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 22c483854..8c1223ab7 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 32f7c497b..f5a55df10 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 066b12aeb..5fcb3f0fd 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;