[myfaces-tobago] branch master updated: tobago-select-one-listbox: 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


The following commit(s) were added to refs/heads/master by this push:
     new 708155d  tobago-select-one-listbox: custom elements
708155d is described below

commit 708155da52f57dd3807e16571222d26b27a43bdf
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Nov 7 16:07:44 2019 +0100

    tobago-select-one-listbox: custom elements
    
    Using custom elements for tobago-select-one-listbox.ts
    
    issue: TOBAGO-1633: TS refactoring
---
 .../renderer/SelectOneListboxRenderer.java         |  4 ++
 .../tobago/renderkit/html/HtmlElements.java        |  1 +
 .../src/main/npm/ts/tobago-select-one-listbox.ts   | 79 ++++++++++++++++------
 3 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java
index 0773f02..d30b732 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectOneListboxRenderer.java
@@ -38,6 +38,10 @@ import java.util.List;
 
 public class SelectOneListboxRenderer extends SelectOneRendererBase {
 
+  public HtmlElements getComponentTag() {
+    return HtmlElements.TOBAGO_SELECT_ONE_LISTBOX;
+  }
+
   @Override
   public boolean getRendersChildren() {
     return true;
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 abd1dac..2b586d0 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
@@ -146,6 +146,7 @@ public enum HtmlElements {
   TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
   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_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-listbox.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
index 8387958..a3232b6 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-select-one-listbox.ts
@@ -15,29 +15,66 @@
  * limitations under the License.
  */
 
-import {Listener, Phase} from "./tobago-listener";
 import {DomUtils} from "./tobago-utils";
 
-class SelectOneListbox {
-
-  static init = function (element: HTMLElement): void {
-    for (const listbox of DomUtils.selfOrQuerySelectorAll(element, ".tobago-selectOneListbox:not(:required)")) {
-      listbox.addEventListener("change", (event: Event) => {
-        const target = event.currentTarget as HTMLSelectElement;
-        if (!target.dataset.tobagoOldValue) {
-          target.dataset.tobagoOldValue = "-1";
-        }
-      });
-      listbox.addEventListener("click", (event: Event) => {
-        const target = event.currentTarget as HTMLSelectElement;
-        if (!target.dataset.tobagoOldValue || parseInt(target.dataset.tobagoOldValue) === target.selectedIndex) {
-          target.selectedIndex = -1;
-        }
-        target.dataset.tobagoOldValue = String(target.selectedIndex);
-      });
+class SelectOneListbox extends HTMLElement {
+
+  private oldSelectedIndex: number = -1;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    if (!this.select.required) {
+      this.select.addEventListener("click", this.clickSelection.bind(this));
+      this.select.addEventListener("keyup", this.keySelection.bind(this));
     }
-  };
+  }
+
+  private clickSelection(event: MouseEvent): void {
+    const select = event.currentTarget as HTMLSelectElement;
+    if (select.selectedIndex >= 0 && select.selectedIndex === this.oldSelectedIndex) {
+      this.revertSelection(select);
+    } else {
+      this.saveSelection(select);
+    }
+  }
+
+  private keySelection(event: KeyboardEvent): void {
+    const select = event.currentTarget as HTMLSelectElement;
+    if (event.code === "Space") {
+      if (select.selectedIndex >= 0) {
+        this.oldSelectedIndex = select.selectedIndex;
+        select.selectedIndex = -1;
+      } else {
+        select.selectedIndex = this.oldSelectedIndex;
+      }
+    } else {
+      this.saveSelection(select);
+    }
+  }
+
+  private revertSelection(select: HTMLSelectElement): void {
+    if (select.selectedIndex > -1) {
+      this.oldSelectedIndex = select.selectedIndex;
+      select.selectedIndex = -1;
+    } else {
+      select.selectedIndex = this.oldSelectedIndex;
+      this.oldSelectedIndex = -1;
+    }
+  }
+
+  private saveSelection(select: HTMLSelectElement): void {
+    this.oldSelectedIndex = select.selectedIndex;
+  }
+
+  get select(): HTMLSelectElement {
+    const rootNode = this.getRootNode() as ShadowRoot | Document;
+    return rootNode.getElementById(this.id + DomUtils.SUB_COMPONENT_SEP + "field") as HTMLSelectElement;
+  }
 }
 
-Listener.register(SelectOneListbox.init, Phase.DOCUMENT_READY);
-Listener.register(SelectOneListbox.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-select-one-listbox", SelectOneListbox);
+});