Button widget annotations: implement checkboxes and radio buttons

src/core/annotation.js

@@ -106,6 +106,8 @@ AnnotationFactory.prototype = /** @lends AnnotationFactory.prototype */ {
         switch (fieldType) {
           case 'Tx':
             return new TextWidgetAnnotation(parameters);
+          case 'Btn':
+            return new ButtonWidgetAnnotation(parameters);
           case 'Ch':
             return new ChoiceWidgetAnnotation(parameters);
         }
@@ -767,6 +769,59 @@ var TextWidgetAnnotation = (function TextWidgetAnnotationClosure() {
   return TextWidgetAnnotation;
 })();
 
+var ButtonWidgetAnnotation = (function ButtonWidgetAnnotationClosure() {
+  function ButtonWidgetAnnotation(params) {
+    WidgetAnnotation.call(this, params);
+
+    this.data.pushbutton = this.hasFieldFlag(AnnotationFieldFlag.PUSHBUTTON);
+    this.data.radio = !this.data.pushbutton &&
+                      this.hasFieldFlag(AnnotationFieldFlag.RADIO);
+    if (isName(this.data.fieldValue)) {
+      this.data.fieldValue = this.data.fieldValue.name;
+    }
+    // Get the value of the radio button
+    if (this.data.radio) {
+      // Generate a unique ID in case no value is found
+      this.data.buttonValue = Math.random().toString(16).slice(2);
+      var appearanceState = params.dict.get('AP');
+      if (isDict(appearanceState)) {
+        var appearances = appearanceState.get('N');
+        if (isDict(appearances) && appearances.has('Off')) {
+          var keys = appearances.getKeys();
+          for (var i = 0, ii = keys.length; i < ii; i++) {
+            if (keys[i] !== 'Off') {
+              this.data.buttonValue = keys[i];
+              break;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  Util.inherit(ButtonWidgetAnnotation, WidgetAnnotation, {
+    getOperatorList:
+        function ButtonWidgetAnnotation_getOperatorList(evaluator, task,
+                                                        renderForms) {
+      var operatorList = new OperatorList();
+
+      // Do not render form elements on the canvas when interactive forms are
+      // enabled. The display layer is responsible for rendering them instead.
+      if (renderForms) {
+        return Promise.resolve(operatorList);
+      }
+
+      if (this.appearance) {
+        return Annotation.prototype.getOperatorList.call(this, evaluator, task,
+                                                        renderForms);
+      }
+      return Promise.resolve(operatorList);
+    }
+  });
+
+  return ButtonWidgetAnnotation;
+})();
+
 var ChoiceWidgetAnnotation = (function ChoiceWidgetAnnotationClosure() {
   function ChoiceWidgetAnnotation(params) {
     WidgetAnnotation.call(this, params);

src/display/annotation_layer.js

@@ -76,6 +76,17 @@ AnnotationElementFactory.prototype =
         switch (fieldType) {
           case 'Tx':
             return new TextWidgetAnnotationElement(parameters);
+          case 'Btn':
+            if (!parameters.data.pushbutton) {
+              if (parameters.data.radio) {
+                return new RadioButtonWidgetAnnotationElement(parameters);
+              } else {
+                return new CheckboxWidgetAnnotationElement(parameters);
+              }
+            } else {
+              warn('Unimplemented push button');
+            }
+            break;
           case 'Ch':
             return new ChoiceWidgetAnnotationElement(parameters);
         }
@@ -141,6 +152,7 @@ var AnnotationElement = (function AnnotationElementClosure() {
       var height = data.rect[3] - data.rect[1];
 
       container.setAttribute('data-annotation-id', data.id);
+      container.setAttribute('data-annotation-name', data.fieldName);
 
       // Do *not* modify `data.rect`, since that will corrupt the annotation
       // position on subsequent calls to `_createContainer` (see issue 6804).
@@ -531,6 +543,91 @@ var TextWidgetAnnotationElement = (
 })();
 
 /**
+ * @class
+ * @alias CheckboxWidgetAnnotationElement
+ */
+var CheckboxWidgetAnnotationElement =
+    (function CheckboxWidgetAnnotationElementClosure() {
+  function CheckboxWidgetAnnotationElement(parameters) {
+    WidgetAnnotationElement.call(this, parameters,
+                                 parameters.renderInteractiveForms);
+  }
+
+  Util.inherit(CheckboxWidgetAnnotationElement, WidgetAnnotationElement, {
+    /**
+     * Render the checkbox widget annotation's HTML element
+     * in the empty container.
+     *
+     * @public
+     * @memberof CheckboxWidgetAnnotationElement
+     * @returns {HTMLSectionElement}
+     */
+    render: function CheckboxWidgetAnnotationElement_render() {
+      this.container.className = 'checkboxWidgetAnnotation';
+
+      var element = document.createElement('input');
+      element.type = 'checkbox';
+      element.id = this.data.fieldName;
+      if (this.data.fieldValue && this.data.fieldValue !== 'Off') {
+        element.checked = true;
+      }
+      this.container.appendChild(element);
+      element = document.createElement('label');
+      element.htmlFor = this.data.fieldName;
+      this.container.appendChild(element);
+
+      return this.container;
+    }
+  });
+
+  return CheckboxWidgetAnnotationElement;
+})();
+
+/**
+ * @class
+ * @alias RadioButtonWidgetAnnotationElement
+ */
+var RadioButtonWidgetAnnotationElement =
+    (function RadioButtonWidgetAnnotationElementClosure() {
+  function RadioButtonWidgetAnnotationElement(parameters) {
+    WidgetAnnotationElement.call(this, parameters,
+                                 parameters.renderInteractiveForms);
+  }
+
+  Util.inherit(RadioButtonWidgetAnnotationElement, WidgetAnnotationElement, {
+    /**
+     * Render the radio button widget annotation's HTML element
+     * in the empty container.
+     *
+     * @public
+     * @memberof RadioButtonWidgetAnnotationElement
+     * @returns {HTMLSectionElement}
+     */
+    render: function RadioButtonWidgetAnnotationElement_render() {
+      this.container.className = 'radioButtonWidgetAnnotation';
+
+      var element = document.createElement('input');
+      var id = this.data.fieldName + '.' + this.data.buttonValue;
+      element.type = 'radio';
+      element.id = id;
+      element.name = this.data.fieldName;
+      element.value = this.data.buttonValue;
+      if (this.data.fieldValue === this.data.buttonValue) {
+        element.checked = true;
+      }
+      this.container.appendChild(element);
+      element = document.createElement('label');
+      element.htmlFor = id;
+      this.container.appendChild(element);
+
+      return this.container;
+    },
+  });
+
+  return RadioButtonWidgetAnnotationElement;
+})();
+
+ /**
  * @class
  * @alias ChoiceWidgetAnnotationElement
  */