Moving forms UI into examples

diff --git a/examples/acroforms/forms.js b/examples/acroforms/forms.js
new file mode 100644 (file)
index 0000000..6ec9276
--- /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 (file)
index 0000000..d071211
--- /dev/null
+++ b/examples/acroforms/index.html
@@ -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>

diff --git a/web/viewer.css b/web/viewer.css
index 28418f290480cc80e638037435e7304429d05f49..8b2b0cc4d8c54a645d0b9e52ab606b8f7749daa9 100644 (file)
--- 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 e52d56acdad4723fb94f096f4192d5bc7cba65a8..e1ca9ee36b545461664eded59fcc1a81d6537c59 100644 (file)
--- 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;
       }
     }
   }