[myfaces-tobago] 01/02: tobago-select-many-checkbox: 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 df175929cf09533798b07418d316064203bac3a9
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Nov 4 09:28:10 2019 +0100

    tobago-select-many-checkbox: custom elements
    
    Using custom elements for tobago-select-many-checkbox.ts
    
    issue: TOBAGO-1633: TS refactoring
---
 .../renderer/SelectManyCheckboxRenderer.java       |  4 +++
 .../tobago/renderkit/html/HtmlElements.java        |  1 +
 .../src/main/npm/ts/tobago-select-many-checkbox.ts | 32 +++++++++++++++-------
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
index 3af82f7..ca8ede2 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyCheckboxRenderer.java
@@ -42,6 +42,10 @@ import java.io.IOException;
 
 public class SelectManyCheckboxRenderer extends SelectManyRendererBase {
 
+  public HtmlElements getComponentTag() {
+    return HtmlElements.TOBAGO_SELECT_MANY_CHECKBOX;
+  }
+
   @Override
   public void encodeBeginField(final FacesContext facesContext, final UIComponent component) throws IOException {
     final AbstractUISelectManyCheckbox select = (AbstractUISelectManyCheckbox) 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 870eeb6..3b1a990 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
@@ -144,6 +144,7 @@ public enum HtmlElements {
   TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
   TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
   TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
+  TOBAGO_SELECT_MANY_CHECKBOX("tobago-select-many-checkbox"),
   TOBAGO_STARS("tobago-stars"),
   TOBAGO_SUGGEST("tobago-suggest"),
   TOBAGO_TAB("tobago-tab"),
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
index 01a04c0..a9f74ef 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-many-checkbox.ts
@@ -15,20 +15,32 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
-import {DomUtils} from "./tobago-utils";
+class SelectManyCheckbox extends HTMLElement {
 
-class SelectManyCheckbox {
+  constructor() {
+    super();
+  }
 
-  static init = function (element: HTMLElement): void {
-    for (const checkbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectManyCheckbox input[readonly]")) {
-      checkbox.addEventListener("click", (event: Event) => {
+  connectedCallback(): void {
+    for (const input of this.inputs) {
+      if (input.readOnly) {
+        input.addEventListener("click", preventClick);
+      }
+
+      function preventClick(event: MouseEvent): void {
         // in the "readonly" case, prevent the default, which is changing the "checked" state
         event.preventDefault();
-      });
+        console.log("slectmanycheckbox bubb.");
+      }
     }
-  };
+  }
+
+  get inputs(): NodeListOf<HTMLInputElement> {
+    const rootNode = this.getRootNode() as ShadowRoot | Document;
+    return rootNode.querySelectorAll("input[name='" + this.id + "']");
+  }
 }
 
-Listener.register(SelectManyCheckbox.init, Phase.DOCUMENT_READY);
-Listener.register(SelectManyCheckbox.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-select-many-checkbox", SelectManyCheckbox);
+});