Merge pull request #13427 from calixteman/xfa_storage

XFA - Add a storage to save fields values

src/core/xfa/template.js

@@ -941,11 +941,14 @@ class CheckButton extends XFAObject {
       style.height = size;
     }
 
+    const fieldId = this[$getParent]()[$getParent]()[$uid];
     const input = {
       name: "input",
       attributes: {
         class: "xfaCheckbox",
+        fieldId,
         type: "radio",
+        id: `${fieldId}-radio`,
       },
     };
 
@@ -1023,6 +1026,7 @@ class ChoiceList extends XFAObject {
 
     const selectAttributes = {
       class: "xfaSelect",
+      fieldId: this[$getParent]()[$getParent]()[$uid],
       style,
     };
 
@@ -1249,6 +1253,7 @@ class DateTimeEdit extends XFAObject {
       name: "input",
       attributes: {
         type: "text",
+        fieldId: this[$getParent]()[$getParent]()[$uid],
         class: "xfaTextfield",
         style,
       },
@@ -3012,6 +3017,7 @@ class NumericEdit extends XFAObject {
       name: "input",
       attributes: {
         type: "text",
+        fieldId: this[$getParent]()[$getParent]()[$uid],
         class: "xfaTextfield",
         style,
       },
@@ -4550,6 +4556,7 @@ class TextEdit extends XFAObject {
       html = {
         name: "textarea",
         attributes: {
+          fieldId: this[$getParent]()[$getParent]()[$uid],
           class: "xfaTextfield",
           style,
         },
@@ -4559,6 +4566,7 @@ class TextEdit extends XFAObject {
         name: "input",
         attributes: {
           type: "text",
+          fieldId: this[$getParent]()[$getParent]()[$uid],
           class: "xfaTextfield",
           style,
         },

src/display/xfa_layer.js

@@ -14,9 +14,60 @@
  */
 
 class XfaLayer {
-  static setAttributes(html, attrs) {
-    for (const [key, value] of Object.entries(attrs)) {
-      if (value === null || value === undefined) {
+  static setupStorage(html, fieldId, element, storage) {
+    const storedData = storage.getValue(fieldId, { value: null });
+    switch (element.name) {
+      case "textarea":
+        html.textContent = storedData.value !== null ? storedData.value : "";
+        html.addEventListener("input", event => {
+          storage.setValue(fieldId, { value: event.target.value });
+        });
+        break;
+      case "input":
+        if (storedData.value !== null) {
+          html.setAttribute("value", storedData.value);
+        }
+        if (element.attributes.type === "radio") {
+          html.addEventListener("change", event => {
+            const { target } = event;
+            for (const radio of document.getElementsByName(target.name)) {
+              if (radio !== target) {
+                const id = radio.id;
+                storage.setValue(id.split("-")[0], { value: false });
+              }
+            }
+            storage.setValue(fieldId, { value: target.checked });
+          });
+        } else {
+          html.addEventListener("input", event => {
+            storage.setValue(fieldId, { value: event.target.value });
+          });
+        }
+        break;
+      case "select":
+        if (storedData.value !== null) {
+          for (const option of element.children) {
+            if (option.attributes.value === storedData.value) {
+              option.attributes.selected = true;
+            }
+          }
+        }
+        html.addEventListener("input", event => {
+          const options = event.target.options;
+          const value =
+            options.selectedIndex === -1
+              ? null
+              : options[options.selectedIndex].value;
+          storage.setValue(fieldId, { value });
+        });
+        break;
+    }
+  }
+
+  static setAttributes(html, element, storage) {
+    const { attributes } = element;
+    for (const [key, value] of Object.entries(attributes)) {
+      if (value === null || value === undefined || key === "fieldId") {
         continue;
       }
 
@@ -30,13 +81,20 @@ class XfaLayer {
         Object.assign(html.style, value);
       }
     }
+
+    // Set the value after the others to be sure overwrite
+    // any other values.
+    if (storage && attributes.fieldId !== undefined) {
+      this.setupStorage(html, attributes.fieldId, element, storage);
+    }
   }
 
   static render(parameters) {
+    const storage = parameters.annotationStorage;
     const root = parameters.xfa;
     const rootHtml = document.createElement(root.name);
     if (root.attributes) {
-      XfaLayer.setAttributes(rootHtml, root.attributes);
+      this.setAttributes(rootHtml, root);
     }
     const stack = [[root, -1, rootHtml]];
 
@@ -69,7 +127,7 @@ class XfaLayer {
       const childHtml = document.createElement(name);
       html.appendChild(childHtml);
       if (child.attributes) {
-        XfaLayer.setAttributes(childHtml, child.attributes);
+        this.setAttributes(childHtml, child, storage);
       }
 
       if (child.children && child.children.length > 0) {