Add 'auto-id' generation

ledgersmb · Apr 4, 2023 · 397aaed · 397aaed
1 parent 79e06a4
commit 397aaed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/UI/src/elements/lsmb-base-input.js b/UI/src/elements/lsmb-base-input.js
@@ -6,6 +6,7 @@ import { LsmbDijit } from "@/elements/lsmb-dijit";
 const registry = require("dijit/registry");
 
 export class LsmbBaseInput extends LsmbDijit {
+    static idRegex = /[^\p{IsAlnum}]/g;
 
     dojoLabel = null;
 
@@ -37,6 +38,13 @@ export class LsmbBaseInput extends LsmbDijit {
         );
     }
 
+    _setIdProp(props) {
+        if (props.name) {
+            /* eslint-disable no-param-reassign */
+            props.id = props.name.replaceAll(LsmbBaseInput.idRegex, "-");
+        }
+    }
+
     static get observedAttributes() {
         /* "disabled" prop is inherited */
         return ["disabled", "readonly", "required", "value"];
@@ -87,6 +95,9 @@ export class LsmbBaseInput extends LsmbDijit {
             props.id = this.getAttribute('id');
             this.removeAttribute('id');
         }
+        if (!props.id) {
+            this._setIdProp(props);
+        }
         let widgetElm = document.createElement("span");
         [ ...this.children ].forEach((c) => { widgetElm.appendChild(c); });
         this._widgetRoot().appendChild(widgetElm);
@@ -100,6 +111,7 @@ export class LsmbBaseInput extends LsmbDijit {
             this.dojoLabel.innerHTML = this.getAttribute("label");
             this.dojoLabel.classList.add("label");
             this.dojoLabel.setAttribute('for', props.id);
+            this.dojoLabel.setAttribute('id', props.id + '-label');
 
             // without this handler, we bubble 2 events "to the outside"
             this.dojoLabel.addEventListener("click", (e) =>

diff --git a/UI/src/elements/lsmb-button.js b/UI/src/elements/lsmb-button.js
@@ -7,21 +7,33 @@ const Button = require("dijit/form/Button");
 const registry = require("dijit/registry");
 
 export class LsmbButton extends LsmbDijit {
+    static idRegex = /[^\p{IsAlnum}]/g;
+
     label = null;
 
     constructor() {
         super();
     }
 
     _valueAttrs() {
-        return ["type"];
+        return ["name", "type", "value"];
     }
 
     connectedCallback() {
         this.label = this.innerHTML;
         this.innerHTML = "";
         let props = this._collectProps();
         props.label = this.label;
+        if (this.hasAttribute('id')) {
+            // move the ID property to the widget we're creating
+            // in order to correctly link any labels
+            props.id = this.getAttribute('id');
+            this.removeAttribute('id');
+        }
+        if (!props.id && props.name && props.value) {
+            /* eslint-disable no-param-reassign */
+            props.id = (props.name + "-" + props.value).replaceAll(LsmbButton.idRegex, "-");
+        }
 
         this.dojoWidget = new Button(props);
         this.appendChild(this.dojoWidget.domNode);

diff --git a/UI/src/elements/lsmb-radio.js b/UI/src/elements/lsmb-radio.js
@@ -8,6 +8,13 @@ const dojoRadioButton = require("dijit/form/RadioButton");
 export class LsmbRadioButton extends LsmbBaseChecked {
     widgetWrapper = null;
 
+    _setIdProp(props) {
+        if (props.name && props.value) {
+            /* eslint-disable no-param-reassign */
+            props.id = (props.name + "-" + props.value).replaceAll(LsmbRadioButton.idRegex, "-");
+        }
+    }
+
     _widgetRoot() {
         if (this.widgetWrapper) {
             return this.widgetWrapper;