akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #4417 from timvandermeij/examples-style 

Making all examples adhere to the style guide
Jonas Jenwald 11 years ago
parent
fe99743844 1b1a9f1b81
commit
6597fea0da
2 changed files with 94 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      examples/acroforms/forms.js
  2. 170
      examples/text-selection/js/minimal.js

19
examples/acroforms/forms.js
Unescape View File

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

170
examples/text-selection/js/minimal.js
Unescape View File

@ -1,99 +1,95 @@
//Minimal PDF rendering and text-selection example using pdf.js by Vivin Suresh Paliath (http://vivin.net) // 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. // 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 // This demo uses a PDF that only has one page. You can render other pages if you wish, but the focus here is
//with viewer.html and viewer.js. I have extracted the parts I need out of viewer.js into a separate file // just to show you how you can render a PDF with text selection. Hence the code only loads up one page.
//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 // The CSS used here is also very important since it sets up the CSS for the text layer divs overlays that
//just to show you how you can render a PDF with text selection. Hence the code only loads up one page. // 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 () { window.onload = function () {
var scale = 1.5; //Set this to whatever you want. This is basically the "zoom" factor for the PDF.
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';
PDFJS.workerSrc = '../../src/worker_loader.js';
function loadPdf(pdfPath) {
function loadPdf(pdfPath) { var pdf = PDFJS.getDocument(pdfPath);
var pdf = PDFJS.getDocument(pdfPath); pdf.then(renderPdf);
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) { context._scaleX = outputScale.sx;
pdf.getPage(1).then(renderPage); context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
} }
function renderPage(page) { $pdfContainer.append($textLayerDiv);
var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>"); page.getTextContent().then(function (textContent) {
var textLayer = new TextLayerBuilder({
//Set the canvas height and width to the height and width of the viewport textLayerDiv: $textLayerDiv.get(0),
var canvas = $canvas.get(0); pageIndex: 0
var context = canvas.getContext("2d"); });
canvas.height = viewport.height; textLayer.setTextContent(textContent);
canvas.width = viewport.width;
var renderContext = {
//Append the canvas to the pdf container div canvasContext: context,
var $pdfContainer = jQuery("#pdfContainer"); viewport: viewport,
$pdfContainer.css("height", canvas.height + "px").css("width", canvas.width + "px"); textLayer: textLayer
$pdfContainer.append($canvas); };
var canvasOffset = $canvas.offset(); page.render(renderContext);
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%');
}
}
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');
}; };

Write Preview
Loading…
Cancel
Save