[myfaces-tobago] 01/02: feat(selectMany): dummy typescript

[hn...@apache.org]

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

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

commit 917e602d2d7841f10218d9e20d10faa003902381
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Thu Oct 27 12:16:57 2022 +0200

    feat(selectMany): dummy typescript
    
    * add typescript file (there is only a dummy click-event to open the dropdown-menu)
    
    Issue: TOBAGO-2159
---
 .../renderkit/renderer/SelectManyRenderer.java     |  2 +
 .../src/main/ts/tobago-all.ts                      |  1 +
 .../src/main/ts/tobago-select-many.ts              | 70 ++++++++++++++++++++++
 3 files changed, 73 insertions(+)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
index 09bcf9360b..2b592c6ec3 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
@@ -67,6 +67,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
 
     writer.startElement(HtmlElements.DIV);
     writer.writeClassAttribute(BootstrapClass.DROPDOWN_MENU);
+    writer.writeNameAttribute(clientId);
 
     writer.startElement(HtmlElements.TABLE);
     writer.writeClassAttribute(BootstrapClass.TABLE, BootstrapClass.TABLE_HOVER, BootstrapClass.TABLE_SM);
@@ -165,6 +166,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
     writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.TEXT);
     writer.writeIdAttribute(filterId);
     writer.writeClassAttribute(TobagoClass.FILTER, BootstrapClass.FORM_CONTROL);
+    writer.writeAttribute(HtmlAttributes.AUTOCOMPLETE, "off", false);
     writer.endElement(HtmlElements.INPUT);
 
     writer.endElement(HtmlElements.DIV);
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts
index 15bd6e250a..913c8cd499 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-all.ts
@@ -36,6 +36,7 @@ import "./tobago-reload";
 import "./tobago-scroll";
 import "./tobago-select-boolean-checkbox";
 import "./tobago-select-boolean-toggle";
+import "./tobago-select-many";
 import "./tobago-select-many-checkbox";
 import "./tobago-select-many-listbox";
 import "./tobago-select-many-shuttle";
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
new file mode 100644
index 0000000000..68ff5fc38d
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
@@ -0,0 +1,70 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class SelectMany extends HTMLElement {
+
+  private readonly CssClass = {
+    SHOW: "show"
+  };
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    // todo: implement open/close dropdown-menu
+    // todo: position/size of dropdown-menu
+    // todo: implement select/deselect options
+    // todo: implement remove badge
+
+    this.selectField.addEventListener("click", this.showDropdownMenu.bind(this));
+  }
+
+  private showDropdownMenu(event: MouseEvent): void {
+    this.dropdownMenu.classList.add(this.CssClass.SHOW);
+  }
+
+  get hiddenSelect(): HTMLScriptElement {
+    return this.root.querySelector(`select[name='${this.id}']`);
+  }
+
+  get selectField(): HTMLInputElement {
+    return this.root.querySelector(`.tobago-filter-wrapper[name='${this.id}']`);
+  }
+
+  get filterInput(): HTMLInputElement {
+    return this.root.querySelector(".tobago-filter");
+  }
+
+  get dropdownMenu(): HTMLDivElement {
+    return this.root.querySelector(`.dropdown-menu[name='${this.id}']`);
+  }
+
+  get menuStore(): HTMLDivElement {
+    return this.root.querySelector(".tobago-page-menuStore");
+  }
+
+  get root(): ShadowRoot | Document {
+    return this.getRootNode() as ShadowRoot | Document;
+  }
+}
+
+document.addEventListener("tobago.init", function (event: Event): void {
+  if (window.customElements.get("tobago-select-many") == null) {
+    window.customElements.define("tobago-select-many", SelectMany);
+  }
+});