[Pkg-javascript-commits] [pdf.js] 133/246: Simplify text-selection example.
David Prévot
taffit at moszumanska.debian.org
Sun Sep 7 15:36:33 UTC 2014
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to branch master
in repository pdf.js.
commit c6f8244ce5bd3a50699af40496a224286f130e7c
Author: Yury Delendik <ydelendik at mozilla.com>
Date: Wed Aug 6 10:56:05 2014 -0500
Simplify text-selection example.
---
examples/text-selection/css/minimal.css | 40 ++++++----------
examples/text-selection/index.html | 3 +-
examples/text-selection/js/minimal.js | 81 +++++++++++++++++----------------
3 files changed, 57 insertions(+), 67 deletions(-)
diff --git a/examples/text-selection/css/minimal.css b/examples/text-selection/css/minimal.css
index 9a2451f..6a11244 100644
--- a/examples/text-selection/css/minimal.css
+++ b/examples/text-selection/css/minimal.css
@@ -2,13 +2,24 @@ body {
font-family: arial, verdana, sans-serif;
}
-.pdf-content {
+/* 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! */
+/* 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); }
@@ -30,28 +41,3 @@ body {
white-space: pre;
cursor: text;
}
-
-.textLayer .highlight {
- margin: -1px;
- padding: 1px;
-
- background-color: rgba(180, 0, 170, 0.2);
- border-radius: 4px;
-}
-
-.textLayer .highlight.begin {
- border-radius: 4px 0px 0px 4px;
-}
-
-.textLayer .highlight.end {
- border-radius: 0px 4px 4px 0px;
-}
-
-.textLayer .highlight.middle {
- border-radius: 0px;
-}
-
-.textLayer .highlight.selected {
- background-color: rgba(0, 100, 0, 0.2);
-}
-
diff --git a/examples/text-selection/index.html b/examples/text-selection/index.html
index be2921f..fc1e43b 100644
--- a/examples/text-selection/index.html
+++ b/examples/text-selection/index.html
@@ -2,7 +2,6 @@
<head>
<title>Minimal pdf.js text-selection demo</title>
<link href="css/minimal.css" rel="stylesheet" media="screen" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- you will need to run "node make generic" first before you can use this -->
<script src="../../build/generic/build/pdf.js"></script>
@@ -21,7 +20,7 @@
<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" class="pdf-content">
+ <div id="pdfContainer">
</div>
</body>
</html>
diff --git a/examples/text-selection/js/minimal.js b/examples/text-selection/js/minimal.js
index 2faf337..e87bb83 100644
--- a/examples/text-selection/js/minimal.js
+++ b/examples/text-selection/js/minimal.js
@@ -12,6 +12,8 @@
//
// 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') {
@@ -24,67 +26,70 @@ window.onload = function () {
function loadPdf(pdfPath) {
var pdf = PDFJS.getDocument(pdfPath);
- pdf.then(renderPdf);
+ return pdf.then(renderPdf);
}
function renderPdf(pdf) {
- pdf.getPage(1).then(renderPage);
+ return pdf.getPage(1).then(renderPage);
}
function renderPage(page) {
var viewport = page.getViewport(scale);
- var $canvas = jQuery("<canvas></canvas>");
- // Set the canvas height and width to the height and width of the viewport
- var canvas = $canvas.get(0);
- var context = canvas.getContext("2d");
+ // 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
+ // 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;
- canvas.style.width = Math.floor(viewport.width) + 'px';
- canvas.style.height = Math.floor(viewport.height) + 'px';
-
- // Append the canvas to the pdf container div
- var $pdfContainer = jQuery("#pdfContainer");
- $pdfContainer.css("height", canvas.style.height)
- .css("width", canvas.style.width);
- $pdfContainer.append($canvas);
-
- var canvasOffset = $canvas.offset();
- var $textLayerDiv = jQuery("<div />")
- .addClass("textLayer")
- .css("height", canvas.style.height)
- .css("width", canvas.style.width)
- .offset({
- top: canvasOffset.top,
- left: canvasOffset.left
- });
-
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
- $pdfContainer.append($textLayerDiv);
+ // 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';
- page.getTextContent().then(function (textContent) {
- var textLayer = new TextLayerBuilder({
- textLayerDiv: $textLayerDiv.get(0),
+ 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
});
- textLayer.setTextContent(textContent);
-
- var renderContext = {
- canvasContext: context,
- viewport: viewport
- };
-
- page.render(renderContext);
+ 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');
--
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