From 1b1a9f1b81bfce2d4dae585378d532ff9de7ed15 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sat, 8 Mar 2014 23:04:30 +0100 Subject: [PATCH] Making all examples adhere to the style guide --- examples/acroforms/forms.js | 19 +-- examples/text-selection/js/minimal.js | 160 +++++++++++++------------- 2 files changed, 89 insertions(+), 90 deletions(-) diff --git a/examples/acroforms/forms.js b/examples/acroforms/forms.js index 7ce9a5cf4..ecf258614 100644 --- a/examples/acroforms/forms.js +++ b/examples/acroforms/forms.js @@ -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); }); diff --git a/examples/text-selection/js/minimal.js b/examples/text-selection/js/minimal.js index 80a34cc4e..b25bf4fc6 100644 --- a/examples/text-selection/js/minimal.js +++ b/examples/text-selection/js/minimal.js @@ -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(""); + + // 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("
") + .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(""); + $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("
") - .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'); };