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

Moving forms UI into examples

notmasteryet 14 years ago
parent
b010f293a2
commit
6011b5b4db
4 changed files with 192 additions and 78 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. 141
      examples/acroforms/forms.js
  2. 51
      examples/acroforms/index.html
  3. 11
      web/viewer.css
  4. 67
      web/viewer.js

141
examples/acroforms/forms.js
Unescape View File

@ -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);
});
});

51
examples/acroforms/index.html
Unescape View File

@ -0,0 +1,51 @@
<!doctype html>
<html>
<head>
<!-- In production, only one script (pdf.js) is necessary -->
<!-- In production, change the content of PDFJS.workerSrc below -->
<script type="text/javascript" src="../../src/core.js"></script>
<script type="text/javascript" src="../../src/util.js"></script>
<script type="text/javascript" src="../../src/canvas.js"></script>
<script type="text/javascript" src="../../src/obj.js"></script>
<script type="text/javascript" src="../../src/function.js"></script>
<script type="text/javascript" src="../../src/charsets.js"></script>
<script type="text/javascript" src="../../src/cidmaps.js"></script>
<script type="text/javascript" src="../../src/colorspace.js"></script>
<script type="text/javascript" src="../../src/crypto.js"></script>
<script type="text/javascript" src="../../src/evaluator.js"></script>
<script type="text/javascript" src="../../src/fonts.js"></script>
<script type="text/javascript" src="../../src/glyphlist.js"></script>
<script type="text/javascript" src="../../src/image.js"></script>
<script type="text/javascript" src="../../src/metrics.js"></script>
<script type="text/javascript" src="../../src/parser.js"></script>
<script type="text/javascript" src="../../src/pattern.js"></script>
<script type="text/javascript" src="../../src/stream.js"></script>
<script type="text/javascript" src="../../src/worker.js"></script>
<script type="text/javascript" src="../../external/jpgjs/jpg.js"></script>
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
PDFJS.workerSrc = '../../src/worker_loader.js';
// Specify the PDF with AcroForm here
var pdfWithFormsPath = '../../test/pdfs/f1040.pdf';
</script>
<style>
.pdfpage { position:relative; top: 0; left: 0; border: solid 1px black; margin: 10px; }
.pdfpage > canvas { position: absolute; top: 0; left: 0; }
.pdfpage > div { position: absolute; top: 0; left: 0; }
.inputControl { background: transparent; border: 0px none; position: absolute; margin: auto; }
.inputControl[type='checkbox'] { margin: 0px; }
</style>
<script type="text/javascript" src="forms.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>

11
web/viewer.css
Unescape View File

@ -238,17 +238,6 @@ canvas {
position: absolute; position: absolute;
} }
.page > .inputControl {
background: transparent;
border: 0px none;
position: absolute;
margin: auto;
}
.page > .inputControl[type='checkbox'] {
margin: 0px;
}
.textLayer { .textLayer {
position: absolute; position: absolute;
left: 0; left: 0;

67
web/viewer.js
Unescape View File

@ -33,7 +33,6 @@ var PDFView = {
thumbnails: [], thumbnails: [],
currentScale: kDefaultScale, currentScale: kDefaultScale,
initialBookmark: document.location.hash.substring(1), initialBookmark: document.location.hash.substring(1),
formFields: [],
setScale: function pdfViewSetScale(val, resetAutoSettings) { setScale: function pdfViewSetScale(val, resetAutoSettings) {
var pages = this.pages; var pages = this.pages;
@ -468,21 +467,6 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
return false; 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) { function createElementWithStyle(tagName, item) {
var element = document.createElement(tagName); var element = document.createElement(tagName);
element.style.left = (Math.floor(item.x - view.x) * scale) + 'px'; 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'; element.style.height = Math.ceil(item.height * scale) + 'px';
return element; 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(); var items = content.getAnnotations();
for (var i = 0; i < items.length; i++) { 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); bindLink(link, ('dest' in item) ? item.dest : null);
div.appendChild(link); div.appendChild(link);
break; 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;
} }
} }
} }

Write Preview
Loading…
Cancel
Save