You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2022/11/01 09:39:01 UTC
[myfaces-tobago] branch t5_selectMany updated: feat: tc:selectMany
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/t5_selectMany by this push:
new 9313ce3937 feat: tc:selectMany
9313ce3937 is described below
commit 9313ce3937087d3c4547790b5711b2a74598da93
Author: Udo Schnurpfeil <ud...@irian.eu>
AuthorDate: Tue Nov 1 10:38:50 2022 +0100
feat: tc:selectMany
* TS: event mechanics
* no dummy column
* Fix class
* 2 Models in Demo
issue: TOBAGO-2159
---
.../renderkit/renderer/SelectManyRenderer.java | 23 ++++-----
.../tobago/example/demo/SelectManyController.java | 19 ++++++--
.../030-select/80-selectMany/SelectMany.xhtml | 4 +-
.../src/main/ts/tobago-select-many.ts | 56 +++++++++++++++-------
4 files changed, 63 insertions(+), 39 deletions(-)
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 2068262ca3..a31332c75a 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
@@ -107,12 +107,11 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.startElement(HtmlElements.TD);
writer.writeAttribute(HtmlAttributes.VALUE, formattedValue, true);
-
writer.writeText(item.getLabel());
writer.endElement(HtmlElements.TD);
- writer.startElement(HtmlElements.TD);
- writer.writeText("dummy column");
- writer.endElement(HtmlElements.TD);
+// writer.startElement(HtmlElements.TD);
+// writer.writeText("dummy column");
+// writer.endElement(HtmlElements.TD);
writer.endElement(HtmlElements.TR);
}
@@ -174,7 +173,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
final Object[] values = component.getSelectedValues();
final String[] submittedValues = getSubmittedValues(component);
- renderBadges(facesContext, values, submittedValues);
+ renderBadges(facesContext, submittedValues != null ? submittedValues : values);
writer.startElement(HtmlElements.INPUT);
writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.TEXT);
@@ -186,21 +185,15 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.endElement(HtmlElements.DIV);
}
- private void renderBadges(FacesContext facesContext, Object[] values, String[] submittedValues) throws IOException {
+ private void renderBadges(FacesContext facesContext, Object[] values) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
- if (submittedValues != null) {
- for (String submittedValue : submittedValues) {
- writer.startElement(HtmlElements.SPAN);
- writer.writeClassAttribute(BootstrapClass.BADGE, BootstrapClass.TEXT_BG_PRIMARY);
- writer.writeText(submittedValue);
- writer.endElement(HtmlElements.SPAN);
- }
- } else if (values != null) {
+ if (values != null) {
for (Object value : values) {
writer.startElement(HtmlElements.SPAN);
writer.writeClassAttribute(BootstrapClass.BADGE, BootstrapClass.TEXT_BG_PRIMARY);
- writer.writeText(value.toString());
+ writer.writeAttribute(DataAttributes.VALUE, String.valueOf(value), true);
+ writer.writeText(String.valueOf(value));
writer.endElement(HtmlElements.SPAN);
}
}
diff --git a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyController.java b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyController.java
index 9c1eb43666..d76e972ee6 100644
--- a/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyController.java
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/SelectManyController.java
@@ -34,7 +34,8 @@ public class SelectManyController implements Serializable {
private AstroData astroData;
private List<SolarObject> planets;
- private SolarObject[] selectedPlanets = new SolarObject[0];
+ private SolarObject[] selectedPlanetsDropdown = new SolarObject[0];
+ private SolarObject[] selectedPlanetsInline = new SolarObject[0];
@PostConstruct
public void init() {
@@ -45,11 +46,19 @@ public class SelectManyController implements Serializable {
return planets;
}
- public SolarObject[] getSelectedPlanets() {
- return selectedPlanets;
+ public SolarObject[] getSelectedPlanetsDropdown() {
+ return selectedPlanetsDropdown;
}
- public void setSelectedPlanets(final SolarObject[] selectedPlanets) {
- this.selectedPlanets = selectedPlanets;
+ public void setSelectedPlanetsDropdown(final SolarObject[] selectedPlanetsDropdown) {
+ this.selectedPlanetsDropdown = selectedPlanetsDropdown;
+ }
+
+ public SolarObject[] getSelectedPlanetsInline() {
+ return selectedPlanetsInline;
+ }
+
+ public void setSelectedPlanetsInline(SolarObject[] selectedPlanetsInline) {
+ this.selectedPlanetsInline = selectedPlanetsInline;
}
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml
index 9f71e91167..f8ddf7864c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/030-select/80-selectMany/SelectMany.xhtml
@@ -22,13 +22,13 @@
xmlns:tc="http://myfaces.apache.org/tobago/component"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
- <tc:selectMany value="#{selectManyController.selectedPlanets}" filter="contains">
+ <tc:selectMany id="dropdown" value="#{selectManyController.selectedPlanetsDropdown}" filter="contains">
<tc:selectItems value="#{selectManyController.planets}"
var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
</tc:selectMany>
inline:
- <tc:selectMany value="#{selectManyController.selectedPlanets}" filter="contains" inline="true">
+ <tc:selectMany id="inline" value="#{selectManyController.selectedPlanetsInline}" filter="contains" inline="true">
<tc:selectItems value="#{selectManyController.planets}"
var="planet" itemLabel="#{planet.name}" itemValue="#{planet}"/>
</tc:selectMany>
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
index 03f510d740..fbddc7d023 100644
--- 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
@@ -25,8 +25,8 @@ class SelectMany extends HTMLElement {
super();
}
- get hiddenSelect(): HTMLScriptElement {
- return this.root.querySelector(`select[name='${this.id}']`);
+ get hiddenSelect(): HTMLSelectElement {
+ return this.querySelector("select");
}
get selectField(): HTMLDivElement {
@@ -38,15 +38,12 @@ class SelectMany extends HTMLElement {
}
get dropdownMenu(): HTMLDivElement {
- return this.root.querySelector(`.dropdown-menu[name='${this.id}']`);
+ return this.querySelector(".dropdown-menu");
}
get menuStore(): HTMLDivElement {
- return this.root.querySelector(".tobago-page-menuStore");
- }
-
- get root(): ShadowRoot | Document {
- return this.getRootNode() as ShadowRoot | Document;
+ const root = this.getRootNode() as ShadowRoot | Document;
+ return root.querySelector(".tobago-page-menuStore");
}
get tbody(): HTMLElement {
@@ -61,27 +58,52 @@ class SelectMany extends HTMLElement {
this.selectField.addEventListener("click", this.showDropdownMenu.bind(this));
+ // todo: later
+ // this.hiddenSelect.addEventListener("change", ((event: InputEvent) => {
+ // const select = <HTMLSelectElement>event.currentTarget;
+ // select.querySelectorAll("option").forEach((option =>
+ // this.sync(option)).bind(this));
+ // }).bind(this));
+
+ // this.hiddenSelect.classList.remove("d-none");
+
this.initList();
}
select(event: MouseEvent) {
const target = <HTMLElement>event.target;
const row = target.closest("tr");
- row.classList.toggle("table-primary");
const itemValue = row.dataset.tobagoValue;
console.info("itemValue", itemValue);
- if (row.classList.contains("table-primary")) {
- const badge = this.getRowTemplate(itemValue, row.innerText);
- console.info("badge", badge);
- this.filterInput.insertAdjacentHTML("beforebegin", badge);
+ const select = this.hiddenSelect;
+ const option: HTMLOptionElement = select.querySelector(`[value="${itemValue}"]`);
+ option.selected = !option.selected;
+ this.sync(option);
+ }
+
+ sync(option: HTMLOptionElement) {
+ console.log("this", this);
+ console.log("option", option);
+ console.log("ds", option.value);
+ const itemValue = option.value;
+ console.log("itemValue", itemValue);
+ const row: HTMLTableRowElement = this.tbody.querySelector(`[data-tobago-value="${itemValue}"]`);
+ console.log("row", row);
+ if (option.selected) {
+ // create badge
+ this.filterInput.insertAdjacentHTML("beforebegin", this.getRowTemplate(itemValue, row.innerText));
+ // highlight list row
+ row.classList.add("table-active");
} else {
- const selectors = `.badge[data-tobago-value="${itemValue}"]`;
- console.info("selectors", selectors);
- this.selectField.querySelector(selectors).remove();
+ // remove badge
+ const selectField1 = this.selectField;
+ console.log("selectField1", selectField1);
+ selectField1.querySelector(`[data-tobago-value="${itemValue}"]`).remove();
+ // remove highlight list row
}
}
- getRowTemplate(value: string, text: string) : string {
+ getRowTemplate(value: string, text: string): string {
return `<span class="badge text-bg-primary" data-tobago-value="${value}">${text}</span>`;
}