From e686db250cdb37647f6ba9c05be6b26fc9a07ea6 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Tue, 6 Sep 2016 22:26:57 +0200 Subject: [PATCH] Render interactive form (AcroForm) text widget annotations This patch is the first step towards implementing support for interactive forms (AcroForms). It makes it possible to render text widget annotations exactly like Adobe Reader/Acrobat. Everything we implement for AcroForms is disabled by default using a preference, mainly because it is not ready to use yet, but has to implemented in many steps to avoid complexity. The preference allows us to work with the code while not exposing the behavior by default. Mainly storing entered values and printing them is still absent, which would be minimal requirements for enabling this by default. --- extensions/chromium/preferences_schema.json | 4 +++ src/display/annotation_layer.js | 37 +++++++++++++++------ src/display/global.js | 7 ++++ web/annotation_layer_builder.css | 20 +++++++++++ web/annotation_layer_builder.js | 3 +- web/app.js | 3 ++ web/default_preferences.json | 3 +- 7 files changed, 64 insertions(+), 13 deletions(-) diff --git a/extensions/chromium/preferences_schema.json b/extensions/chromium/preferences_schema.json index c4ea9488..36f2766a 100644 --- a/extensions/chromium/preferences_schema.json +++ b/extensions/chromium/preferences_schema.json @@ -94,6 +94,10 @@ "type": "boolean", "description": "Whether to prevent the extension from reporting the extension and browser version to the extension developers.", "default": false + }, + "renderInteractiveForms": { + "type": "boolean", + "default": false } } } diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index ec5bde70..df23d941 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -45,6 +45,8 @@ var getDefaultSetting = displayDOMUtils.getDefaultSetting; * @property {PageViewport} viewport * @property {IPDFLinkService} linkService * @property {DownloadManager} downloadManager + * @property {string} imageResourcesPath + * @property {boolean} renderInteractiveForms */ /** @@ -115,6 +117,7 @@ var AnnotationElement = (function AnnotationElementClosure() { this.linkService = parameters.linkService; this.downloadManager = parameters.downloadManager; this.imageResourcesPath = parameters.imageResourcesPath; + this.renderInteractiveForms = parameters.renderInteractiveForms; if (isRenderable) { this.container = this._createContainer(); @@ -437,18 +440,28 @@ var TextWidgetAnnotationElement = ( * @returns {HTMLSectionElement} */ render: function TextWidgetAnnotationElement_render() { - var content = document.createElement('div'); - content.textContent = this.data.fieldValue; - var textAlignment = this.data.textAlignment; - content.style.textAlign = ['left', 'center', 'right'][textAlignment]; - content.style.verticalAlign = 'middle'; - content.style.display = 'table-cell'; + this.container.className = 'textWidgetAnnotation'; - var font = (this.data.fontRefName ? - this.page.commonObjs.getData(this.data.fontRefName) : null); - this._setTextStyle(content, font); + if (this.renderInteractiveForms) { + var input = document.createElement('input'); + input.type = 'text'; + input.value = this.data.fieldValue; - this.container.appendChild(content); + this.container.appendChild(input); + } else { + var content = document.createElement('div'); + content.textContent = this.data.fieldValue; + var textAlignment = this.data.textAlignment; + content.style.textAlign = ['left', 'center', 'right'][textAlignment]; + content.style.verticalAlign = 'middle'; + content.style.display = 'table-cell'; + + var font = (this.data.fontRefName ? + this.page.commonObjs.getData(this.data.fontRefName) : null); + this._setTextStyle(content, font); + + this.container.appendChild(content); + } return this.container; }, @@ -875,6 +888,7 @@ var FileAttachmentAnnotationElement = ( * @property {PDFPage} page * @property {IPDFLinkService} linkService * @property {string} imageResourcesPath + * @property {boolean} renderInteractiveForms */ /** @@ -907,7 +921,8 @@ var AnnotationLayer = (function AnnotationLayerClosure() { linkService: parameters.linkService, downloadManager: parameters.downloadManager, imageResourcesPath: parameters.imageResourcesPath || - getDefaultSetting('imageResourcesPath') + getDefaultSetting('imageResourcesPath'), + renderInteractiveForms: parameters.renderInteractiveForms || false, }; var element = annotationElementFactory.create(properties); if (element.isRenderable) { diff --git a/src/display/global.js b/src/display/global.js index 70def4c7..044a09e8 100644 --- a/src/display/global.js +++ b/src/display/global.js @@ -243,6 +243,13 @@ PDFJS.isEvalSupported = (PDFJS.isEvalSupported === undefined ? true : PDFJS.isEvalSupported); + /** + * Renders interactive form elements. + * @var {boolean} + */ + PDFJS.renderInteractiveForms = (PDFJS.renderInteractiveForms === undefined ? + false : PDFJS.renderInteractiveForms); + //#if !MOZCENTRAL var savedOpenExternalLinksInNewWindow = PDFJS.openExternalLinksInNewWindow; delete PDFJS.openExternalLinksInNewWindow; diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css index 03494430..36b62b06 100644 --- a/web/annotation_layer_builder.css +++ b/web/annotation_layer_builder.css @@ -41,6 +41,26 @@ cursor: pointer; } +.annotationLayer .textWidgetAnnotation input { + background-color: rgba(0, 54, 255, 0.13); + border: 1px solid transparent; + box-sizing: border-box; + font-size: 9px; + height: 100%; + padding: 0 3px; + vertical-align: top; + width: 100%; +} + +.annotationLayer .textWidgetAnnotation input:hover { + border: 1px solid #000; +} + +.annotationLayer .textWidgetAnnotation input:focus { + background: none; + border: 1px solid transparent; +} + .annotationLayer .popupWrapper { position: absolute; width: 20em; diff --git a/web/annotation_layer_builder.js b/web/annotation_layer_builder.js index ceca000b..5d8dd03b 100644 --- a/web/annotation_layer_builder.js +++ b/web/annotation_layer_builder.js @@ -78,7 +78,8 @@ var AnnotationLayerBuilder = (function AnnotationLayerBuilderClosure() { annotations: annotations, page: self.pdfPage, linkService: self.linkService, - downloadManager: self.downloadManager + downloadManager: self.downloadManager, + renderInteractiveForms: pdfjsLib.PDFJS.renderInteractiveForms, }; if (self.div) { diff --git a/web/app.js b/web/app.js index a192bfbc..81e440db 100644 --- a/web/app.js +++ b/web/app.js @@ -359,6 +359,9 @@ var PDFViewerApplication = { } PDFJS.externalLinkTarget = value; }), + Preferences.get('renderInteractiveForms').then(function resolved(value) { + PDFJS.renderInteractiveForms = value; + }), // TODO move more preferences and other async stuff here ]).catch(function (reason) { }); diff --git a/web/default_preferences.json b/web/default_preferences.json index ebc1b428..6102064e 100644 --- a/web/default_preferences.json +++ b/web/default_preferences.json @@ -11,5 +11,6 @@ "disableFontFace": false, "disableTextLayer": false, "useOnlyCssZoom": false, - "externalLinkTarget": 0 + "externalLinkTarget": 0, + "renderInteractiveForms": false }