From 6011b5b4db5597fff08d72e85293c23986dbc742 Mon Sep 17 00:00:00 2001 From: notmasteryet Date: Mon, 19 Dec 2011 20:00:50 -0600 Subject: [PATCH] Moving forms UI into examples --- examples/acroforms/forms.js | 141 ++++++++++++++++++++++++++++++++++ examples/acroforms/index.html | 51 ++++++++++++ web/viewer.css | 11 --- web/viewer.js | 67 ---------------- 4 files changed, 192 insertions(+), 78 deletions(-) create mode 100644 examples/acroforms/forms.js create mode 100644 examples/acroforms/index.html diff --git a/examples/acroforms/forms.js b/examples/acroforms/forms.js new file mode 100644 index 000000000..6ec92766d --- /dev/null +++ b/examples/acroforms/forms.js @@ -0,0 +1,141 @@ +/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ +/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ + +// +// Basic AcroForms input controls rendering +// + +'use strict'; + +var formFields = {}; + +function setupForm(div, content, scale) { + function bindInputItem(input, item) { + if (input.name in formFields) { + var value = formFields[input.name]; + if (input.type == 'checkbox') + input.checked = value; + else if (!input.type || input.type == 'text') + input.value = value; + } + input.onchange = function pageViewSetupInputOnBlur() { + if (input.type == 'checkbox') + formFields[input.name] = input.checked; + else if (!input.type || input.type == 'text') + formFields[input.name] = input.value; + }; + } + function createElementWithStyle(tagName, item) { + var element = document.createElement(tagName); + element.style.left = (item.x * scale) + 'px'; + element.style.top = (item.y * scale) + 'px'; + element.style.width = Math.ceil(item.width * scale) + 'px'; + element.style.height = Math.ceil(item.height * scale) + 'px'; + return element; + } + function assignFontStyle(element, item) { + var fontStyles = ''; + if ('fontSize' in item) + fontStyles += 'font-size: ' + Math.round(item.fontSize * scale) + 'px;'; + switch (item.textAlignment) { + case 0: + fontStyles += 'text-align: left;'; + break; + case 1: + fontStyles += 'text-align: center;'; + break; + case 2: + fontStyles += 'text-align: right;'; + break; + } + element.setAttribute('style', element.getAttribute('style') + fontStyles); + } + + var items = content.getAnnotations(); + for (var i = 0; i < items.length; i++) { + var item = items[i]; + switch (item.type) { + case 'Widget': + if (item.fieldType != 'Tx' && item.fieldType != 'Btn' && + item.fieldType != 'Ch') + break; + var inputDiv = createElementWithStyle('div', item); + inputDiv.className = 'inputHint'; + div.appendChild(inputDiv); + var input; + if (item.fieldType == 'Tx') { + input = createElementWithStyle('input', item); + } + if (item.fieldType == 'Btn') { + input = createElementWithStyle('input', item); + if (item.flags & 32768) { + input.type = 'radio'; + // radio button is not supported + } else if (item.flags & 65536) { + input.type = 'button'; + // pushbutton is not supported + } else { + input.type = 'checkbox'; + } + } + if (item.fieldType == 'Ch') { + input = createElementWithStyle('select', item); + // select box is not supported + } + input.className = 'inputControl'; + input.name = item.fullName; + input.title = item.alternativeText; + assignFontStyle(input, item); + bindInputItem(input, item); + div.appendChild(input); + break; + } + } +} + +function renderPage(div, pdf, pageNumber, callback) { + var page = pdf.getPage(pageNumber); + var scale = 1.5; + + var pageDisplayWidth = page.width * scale; + var pageDisplayHeight = page.height * scale; + + var pageDivHolder = document.createElement('div'); + pageDivHolder.className = 'pdfpage'; + pageDivHolder.style.width = pageDisplayWidth + 'px'; + pageDivHolder.style.height = pageDisplayHeight + 'px'; + div.appendChild(pageDivHolder); + + // Prepare canvas using PDF page dimensions + var canvas = document.createElement('canvas'); + var context = canvas.getContext('2d'); + canvas.width = pageDisplayWidth; + canvas.height = pageDisplayHeight; + pageDivHolder.appendChild(canvas); + + + // Render PDF page into canvas context + page.startRendering(context, callback); + + // Prepare and populate form elements layer + var formDiv = document.createElement('div'); + pageDivHolder.appendChild(formDiv); + + setupForm(formDiv, page, scale); +} + +PDFJS.getPdf(pdfWithFormsPath, function getPdfForm(data) { + // Instantiate PDFDoc with PDF data + var pdf = new PDFJS.PDFDoc(data); + + // Rendering all pages starting from first + var viewer = document.getElementById('viewer'); + var pageNumber = 1; + renderPage(viewer, pdf, pageNumber++, function pageRenderingComplete() { + if (pageNumber > pdf.numPages) + return; // All pages rendered + // Continue rendering of the next page + renderPage(viewer, pdf, pageNumber++, pageRenderingComplete); + }); +}); + diff --git a/examples/acroforms/index.html b/examples/acroforms/index.html new file mode 100644 index 000000000..d07121167 --- /dev/null +++ b/examples/acroforms/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/web/viewer.css b/web/viewer.css index 28418f290..8b2b0cc4d 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -238,17 +238,6 @@ canvas { position: absolute; } -.page > .inputControl { - background: transparent; - border: 0px none; - position: absolute; - margin: auto; -} - -.page > .inputControl[type='checkbox'] { - margin: 0px; -} - .textLayer { position: absolute; left: 0; diff --git a/web/viewer.js b/web/viewer.js index e52d56acd..e1ca9ee36 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -33,7 +33,6 @@ var PDFView = { thumbnails: [], currentScale: kDefaultScale, initialBookmark: document.location.hash.substring(1), - formFields: [], setScale: function pdfViewSetScale(val, resetAutoSettings) { var pages = this.pages; @@ -468,21 +467,6 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, return false; }; } - function bindInputItem(input, item) { - if (input.name in PDFView.formFields) { - var value = PDFView.formFields[input.name]; - if (input.type == 'checkbox') - input.checked = value; - else if (!input.type || input.type == 'text') - input.value = value; - } - input.onchange = function pageViewSetupInputOnBlur() { - if (input.type == 'checkbox') - PDFView.formFields[input.name] = input.checked; - else if (!input.type || input.type == 'text') - PDFView.formFields[input.name] = input.value; - }; - } function createElementWithStyle(tagName, item) { var element = document.createElement(tagName); element.style.left = (Math.floor(item.x - view.x) * scale) + 'px'; @@ -491,23 +475,6 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, element.style.height = Math.ceil(item.height * scale) + 'px'; return element; } - function assignFontStyle(element, item) { - var fontStyles = ''; - if ('fontSize' in item) - fontStyles += 'font-size: ' + Math.round(item.fontSize * scale) + 'px;'; - switch (item.textAlignment) { - case 0: - fontStyles += 'text-align: left;'; - break; - case 1: - fontStyles += 'text-align: center;'; - break; - case 2: - fontStyles += 'text-align: right;'; - break; - } - element.setAttribute('style', element.getAttribute('style') + fontStyles); - } var items = content.getAnnotations(); for (var i = 0; i < items.length; i++) { @@ -520,40 +487,6 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, bindLink(link, ('dest' in item) ? item.dest : null); div.appendChild(link); break; - case 'Widget': - if (item.fieldType != 'Tx' && item.fieldType != 'Btn' && - item.fieldType != 'Ch') - break; - var inputDiv = createElementWithStyle('div', item); - inputDiv.className = 'inputHint'; - div.appendChild(inputDiv); - var input; - if (item.fieldType == 'Tx') { - input = createElementWithStyle('input', item); - } - if (item.fieldType == 'Btn') { - input = createElementWithStyle('input', item); - if (item.flags & 32768) { - input.type = 'radio'; - TODO('radio button is not supported'); - } else if (item.flags & 65536) { - input.type = 'button'; - TODO('pushbutton is not supported'); - } else { - input.type = 'checkbox'; - } - } - if (item.fieldType == 'Ch') { - input = createElementWithStyle('select', item); - TODO('select box is not supported'); - } - input.className = 'inputControl'; - input.name = item.fullName; - input.title = item.alternativeText; - assignFontStyle(input, item); - bindInputItem(input, item); - div.appendChild(input); - break; } } }