Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Making all examples adhere to the style guide

Browse Source
This commit is contained in:
Tim van der Meij 2014-03-08 23:04:30 +01:00
parent ca612e51ae
commit 1b1a9f1b81
2 changed files with 89 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
examples/acroforms/forms.js
View File

@ -13,16 +13,18 @@ function setupForm(div, content, viewport) {
function bindInputItem(input, item) {
if (input.name in formFields) {
var value = formFields[input.name];
if (input.type == 'checkbox')
if (input.type == 'checkbox') {
input.checked = value;
else if (!input.type || input.type == 'text')
} else if (!input.type || input.type == 'text') {
input.value = value;
}
}
input.onchange = function pageViewSetupInputOnBlur() {
if (input.type == 'checkbox')
if (input.type == 'checkbox') {
formFields[input.name] = input.checked;
else if (!input.type || input.type == 'text')
} else if (!input.type || input.type == 'text') {
formFields[input.name] = input.value;
}
};
}
function createElementWithStyle(tagName, item) {
@ -39,7 +41,7 @@ function setupForm(div, content, viewport) {
var fontStyles = '';
if ('fontSize' in item) {
fontStyles += 'font-size: ' + Math.round(item.fontSize *
viewport.fontScale) + 'px;';
viewport.fontScale) + 'px;';
}
switch (item.textAlignment) {
case 0:
@ -61,8 +63,9 @@ function setupForm(div, content, viewport) {
switch (item.subtype) {
case 'Widget':
if (item.fieldType != 'Tx' && item.fieldType != 'Btn' &&
item.fieldType != 'Ch')
item.fieldType != 'Ch') {
break;
}
var inputDiv = createElementWithStyle('div', item);
inputDiv.className = 'inputHint';
div.appendChild(inputDiv);
@ -119,7 +122,6 @@ function renderPage(div, pdf, pageNumber, callback) {
canvas.height = pageDisplayHeight;
pageDivHolder.appendChild(canvas);
// Render PDF page into canvas context
var renderContext = {
canvasContext: context,
@ -141,8 +143,9 @@ PDFJS.getDocument(pdfWithFormsPath).then(function getPdfForm(pdf) {
var viewer = document.getElementById('viewer');
var pageNumber = 1;
renderPage(viewer, pdf, pageNumber++, function pageRenderingComplete() {
if (pageNumber > pdf.numPages)
if (pageNumber > pdf.numPages) {
return; // All pages rendered
}
// Continue rendering of the next page
renderPage(viewer, pdf, pageNumber++, pageRenderingComplete);
});

160
examples/text-selection/js/minimal.js
View File

@ -1,99 +1,95 @@
//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.
// 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.
//
//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.
//
//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.
// 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.
window.onload = function () {
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
PDFJS.workerSrc = '../../src/worker_loader.js';
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
PDFJS.workerSrc = '../../src/worker_loader.js';
function loadPdf(pdfPath) {
var pdf = PDFJS.getDocument(pdfPath);
pdf.then(renderPdf);
}
function loadPdf(pdfPath) {
var pdf = PDFJS.getDocument(pdfPath);
pdf.then(renderPdf);
function renderPdf(pdf) {
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");
canvas.height = viewport.height;
canvas.width = viewport.width;
// Append the canvas to the pdf container div
var $pdfContainer = jQuery("#pdfContainer");
$pdfContainer.css("height", canvas.height + "px").css("width", canvas.width + "px");
$pdfContainer.append($canvas);
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", viewport.height + "px")
.css("width", viewport.width + "px")
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
// The following few lines of code set up scaling on the context if we are on a HiDPI display
var outputScale = getOutputScale(context);
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform', canvas, cssScale);
CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
if ($textLayerDiv.get(0)) {
CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale);
CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%');
}
}
function renderPdf(pdf) {
pdf.getPage(1).then(renderPage);
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
function renderPage(page) {
var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>");
$pdfContainer.append($textLayerDiv);
//Set the canvas height and width to the height and width of the viewport
var canvas = $canvas.get(0);
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
page.getTextContent().then(function (textContent) {
var textLayer = new TextLayerBuilder({
textLayerDiv: $textLayerDiv.get(0),
pageIndex: 0
});
textLayer.setTextContent(textContent);
//Append the canvas to the pdf container div
var $pdfContainer = jQuery("#pdfContainer");
$pdfContainer.css("height", canvas.height + "px").css("width", canvas.width + "px");
$pdfContainer.append($canvas);
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", viewport.height + "px")
.css("width", viewport.width + "px")
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
page.render(renderContext);
});
}
//The following few lines of code set up scaling on the context if we are on a HiDPI display
var outputScale = getOutputScale(context);
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform', canvas, cssScale);
CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
if ($textLayerDiv.get(0)) {
CustomStyle.setProp('transform', $textLayerDiv.get(0), cssScale);
CustomStyle.setProp('transformOrigin', $textLayerDiv.get(0), '0% 0%');
}
}
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
$pdfContainer.append($textLayerDiv);
page.getTextContent().then(function (textContent) {
var textLayer = new TextLayerBuilder({
textLayerDiv: $textLayerDiv.get(0),
pageIndex: 0
});
textLayer.setTextContent(textContent);
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
page.render(renderContext);
});
}
loadPdf('pdf/TestDocument.pdf');
loadPdf('pdf/TestDocument.pdf');
};