Add: Custom HTML attributes

Author: RapDoodle

gui.html

@@ -23,7 +23,7 @@ <h1 id="gui-title"></h1>
   <script src="gui.manifest.js"></script>
 
   <script>
-    // Functions
+    // Function definitions
 
     /**
      * Process values. It does the following things:
@@ -130,26 +130,33 @@ <h1 id="gui-title"></h1>
      * @param {object} The input element.
      * @param {object} The attributes (blueprint).
      */
-    const setInputAttributes = (input, attributes) => {
+    const setInputAttributes = (input, bp) => {
       // Placeholder attribute
-      if (attributes.placeholder) {
-        input.setAttribute('placeholder', attributes.placeholder)
+      if (bp.placeholder) {
+        input.setAttribute('placeholder', bp.placeholder)
       }
 
       // Required attribute
-      if (attributes.required) {
+      if (bp.required) {
         input.setAttribute('required', '')
       }
 
       // Checked attribute. Only for radio
-      if (attributes.checked) {
+      if (bp.checked) {
         input.setAttribute('checked', '')
       }
 
       // Disabled attribute
-      if (attributes.disabled) {
+      if (bp.disabled) {
         input.setAttribute('disabled', '')
       }
+
+      // Custom attributes
+      if (bp.attributes) {
+        for (const attr in bp.attributes) {
+          input.setAttribute(attr, bp.attributes[attr])
+        }
+      }
     }
 
     /**

gui.manifest.js

@@ -1,6 +1,7 @@
 const blueprint = {
   meta: {
     title: "Demo GUI",
+    apiVersion: "0.1.0"
   },
   command: {
     prefix: "executable",
@@ -414,5 +415,24 @@ const blueprint = {
         },
       ],
     },
+    {
+      type: "fieldset",
+      title: "Advanced Features",
+      form: [
+        {
+          type: "text",
+          label: "Custom attributes",
+          help: "Some help message",
+          attributes: {
+            "data-username": "myusername"
+          },
+          command: {
+            order: 50,
+            type: "str",
+            arg: "--af1",
+          },
+        },
+      ],
+    },
   ],
 }