[myfaces-tobago] 02/02: tobago-select-one-radio: custom elements

[hn...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git

commit e2c3b20d013c80c5956f479d14d48cfdc01be0f9
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Tue Nov 12 16:36:16 2019 +0100

    tobago-select-one-radio: custom elements
    
    Using custom elements for radioGroups
    
    issue: TOBAGO-1633: TS refactoring
---
 .../renderkit/renderer/SelectOneRadioRenderer.java |  4 ++
 .../tobago/renderkit/html/HtmlElements.java        |  1 +
 .../src/main/npm/ts/tobago-select-one-radio.ts     | 84 ++++++++++++----------
 3 files changed, 51 insertions(+), 38 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
index 9439269..6559485 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneRadioRenderer.java
@@ -43,6 +43,10 @@ import java.io.IOException;
 
 public class SelectOneRadioRenderer extends SelectOneRendererBase {
 
+  public HtmlElements getComponentTag() {
+    return HtmlElements.TOBAGO_SELECT_ONE_RADIO;
+  }
+
   @Override
   protected void encodeBeginField(final FacesContext facesContext, final UIComponent component) throws IOException {
     final AbstractUISelectOneRadio select = (AbstractUISelectOneRadio) component;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index 2b586d0..82b99a5 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -147,6 +147,7 @@ public enum HtmlElements {
   TOBAGO_SELECT_MANY_CHECKBOX("tobago-select-many-checkbox"),
   TOBAGO_SELECT_MANY_SHUTTLE("tobago-select-many-shuttle"),
   TOBAGO_SELECT_ONE_LISTBOX("tobago-select-one-listbox"),
+  TOBAGO_SELECT_ONE_RADIO("tobago-select-one-radio"),
   TOBAGO_SHEET("tobago-sheet"),
   TOBAGO_STARS("tobago-stars"),
   TOBAGO_SUGGEST("tobago-suggest"),
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
index 4a7c99b..bb2138f 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-radio.ts
@@ -15,45 +15,53 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
-import {DomUtils} from "./tobago-utils";
-
-class SelectOneRadio {
-
-  static init = function (element: HTMLElement): void {
-    for (const radio of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectOneRadio")) {
-      const id = radio.closest("[id]").id;
-      const quotedId = id.replace(/([:.])/g, "\\$1");
-      const allConnected = document.querySelectorAll("input[name=" + quotedId + "]") as NodeListOf<HTMLInputElement>;
-      for (const connectedRadio of allConnected) {
-        connectedRadio.dataset.tobagoOldValue = String(connectedRadio.checked);
-        connectedRadio.addEventListener("click", (event: Event) => {
-          const target = event.currentTarget as HTMLInputElement;
-          const readOnly = target.readOnly;
-          const required = target.required;
-          if (!required && !readOnly) {
-            if (target.dataset.tobagoOldValue === String(target.checked)) {
-              target.checked = false;
-            }
-            target.dataset.tobagoOldValue = String(target.checked);
-          }
-          if (readOnly) {
-            for (const connectedRadio of allConnected) {
-              connectedRadio.checked = connectedRadio.dataset.tobagoOldValue === "true";
-            }
-          } else {
-            for (const connectedRadio of allConnected) {
-              if (target.id != connectedRadio.id) {
-                connectedRadio.checked = false;
-                connectedRadio.dataset.tobagoOldValue = String(connectedRadio.checked);
-              }
-            }
-          }
-        });
+class SelectOneRadio extends HTMLElement {
+
+  private oldCheckedId: string = "";
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    this.saveSelection();
+    for (const radio of this.radioGroup) {
+      radio.addEventListener("click", this.clickSelection.bind(this));
+    }
+  }
+
+  private clickSelection(event: MouseEvent): void {
+    const radio = event.currentTarget as HTMLInputElement;
+
+    if (radio.readOnly) {
+      this.revertSelection();
+    } else if (!radio.disabled && !radio.required && radio.id === this.oldCheckedId) {
+      radio.checked = false;
+      this.oldCheckedId = "";
+    }
+
+    this.saveSelection();
+  }
+
+  private revertSelection(): void {
+    for (const radio of this.radioGroup) {
+      radio.checked = radio.id === this.oldCheckedId;
+    }
+  }
+
+  private saveSelection(): void {
+    for (const radio of this.radioGroup) {
+      if (radio.checked) {
+        this.oldCheckedId = radio.id;
       }
     }
-  };
+  }
+
+  get radioGroup(): NodeListOf<HTMLInputElement> {
+    return this.querySelectorAll<HTMLInputElement>("input[type='radio'][name='" + this.id + "']");
+  }
 }
 
-Listener.register(SelectOneRadio.init, Phase.DOCUMENT_READY);
-Listener.register(SelectOneRadio.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-select-one-radio", SelectOneRadio);
+});