You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2022/11/04 08:56:50 UTC
[myfaces-tobago] branch t5_selectMany updated: feat(selectMany): disabled
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
The following commit(s) were added to refs/heads/t5_selectMany by this push:
new ec79da4d12 feat(selectMany): disabled
ec79da4d12 is described below
commit ec79da4d12783fc602218cd5a491e6b5150d274a
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Nov 4 09:56:42 2022 +0100
feat(selectMany): disabled
* remove badge only with close button
* disabled component only show badge (without close button)
* add tobago-disabled CSS class to style the select field
Issue: TOBAGO-2159
---
.../renderkit/renderer/SelectManyRenderer.java | 16 ++++-----
.../myfaces/tobago/renderkit/css/TobagoClass.java | 1 +
tobago-theme/src/main/scss/_tobago.scss | 7 ++++
.../src/main/ts/tobago-select-many.ts | 42 +++++++++++-----------
4 files changed, 35 insertions(+), 31 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 512a1fdf6b..8e02772d5e 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
@@ -66,8 +66,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
final String fieldId = component.getFieldId(facesContext);
final String filterId = clientId + ComponentUtils.SUB_SEPARATOR + "filter";
final List<SelectItem> items = SelectItemUtils.getItemList(facesContext, component);
- final boolean readonly = component.isReadonly();
- final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || readonly;
+ final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || component.isReadonly();
final String filter = component.getFilter();
final boolean inline = component.isInline();
final Markup markup = component.getMarkup();
@@ -135,14 +134,12 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
final String clientId = component.getClientId(facesContext);
final String selectedId = clientId + ComponentUtils.SUB_SEPARATOR + "selected";
final List<SelectItem> items = SelectItemUtils.getItemList(facesContext, component);
- final boolean readonly = component.isReadonly();
- final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || readonly;
+ final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || component.isReadonly();
writer.startElement(HtmlElements.SELECT);
writer.writeIdAttribute(selectedId);
writer.writeNameAttribute(clientId);
writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
- writer.writeAttribute(HtmlAttributes.READONLY, readonly);
writer.writeAttribute(HtmlAttributes.REQUIRED, component.isRequired());
writer.writeClassAttribute(BootstrapClass.D_NONE);
writer.writeAttribute(HtmlAttributes.MULTIPLE, true);
@@ -160,8 +157,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
final String fieldId = component.getFieldId(facesContext);
final String filterId = clientId + ComponentUtils.SUB_SEPARATOR + "filter";
final List<SelectItem> items = SelectItemUtils.getItemList(facesContext, component);
- final boolean readonly = component.isReadonly();
- final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || readonly;
+ final boolean disabled = !items.iterator().hasNext() || component.isDisabled() || component.isReadonly();
final String filter = component.getFilter();
final boolean inline = component.isInline();
final Markup markup = component.getMarkup();
@@ -175,6 +171,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
inline ? BootstrapClass.FORM_CONTROL : BootstrapClass.FORM_SELECT,
TobagoClass.SELECT__FIELD,
inline ? BootstrapClass.LIST_GROUP_ITEM : BootstrapClass.DROPDOWN_TOGGLE,
+ disabled ? TobagoClass.DISABLED : null,
BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
component.getCustomClass());
writer.writeAttribute(HtmlAttributes.TITLE, title, true);
@@ -182,15 +179,14 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.writeAttribute(DataAttributes.BS_TOGGLE, "dropdown", false);
}
writer.writeAttribute(Arias.EXPANDED, Boolean.FALSE.toString(), false);
+ writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
writer.startElement(HtmlElements.INPUT);
writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.TEXT);
writer.writeIdAttribute(filterId);
writer.writeClassAttribute(TobagoClass.FILTER, BootstrapClass.FORM_CONTROL);
writer.writeAttribute(HtmlAttributes.AUTOCOMPLETE, "off", false);
-
- // todo: check real readonly
- writer.writeAttribute(HtmlAttributes.READONLY, filter == null);
+ writer.writeAttribute(HtmlAttributes.READONLY, filter == null || disabled);
writer.endElement(HtmlElements.INPUT);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index 02ca850768..3bff2ffe0e 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -49,6 +49,7 @@ public enum TobagoClass implements CssItem {
// DATE__PICKER("tobago-date-picker"),
DELETED("tobago-deleted"),
DESCENDING("tobago-descending"),
+ DISABLED("tobago-disabled"),
DISPLAY__INLINE__BLOCK("tobago-display-inline-block"),
DROPDOWN__SUBMENU("tobago-dropdown-submenu"),
EXPANDED("tobago-expanded"),
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index 272a59ac8c..998aac2a65 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1222,6 +1222,12 @@ tobago-select-many {
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
}
+ &.tobago-disabled {
+ color: $form-select-disabled-color;
+ background-color: $form-select-disabled-bg;
+ border-color: $form-select-disabled-border-color;
+ }
+
.btn-group + .tobago-filter {
margin-left: 0.25rem;
}
@@ -1237,6 +1243,7 @@ tobago-select-many {
padding: 0;
flex: 1 0 0;
min-width: 8rem;
+ background-color: transparent;
&:focus {
box-shadow: none;
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 4821d19dda..44e5cc7aba 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
@@ -70,11 +70,6 @@ class SelectMany extends HTMLElement {
}
connectedCallback(): void {
- // todo: implement open/close dropdown-menu
- // todo: position/size of dropdown-menu
- // todo: implement select/deselect options
- // todo: implement remove badge
-
if (this.dropdownMenu) {
window.addEventListener("resize", this.resizeEvent.bind(this));
document.addEventListener("keydown", this.keydownEvent.bind(this));
@@ -138,13 +133,15 @@ class SelectMany extends HTMLElement {
console.log("row", row);
if (option.selected) {
// create badge
- this.filterInput.insertAdjacentHTML("beforebegin", this.getRowTemplate(itemValue, row.innerText));
+ this.filterInput.insertAdjacentHTML("beforebegin",
+ this.getRowTemplate(itemValue, row.innerText, option.disabled || this.hiddenSelect.disabled));
// todo: nicer adding the @click with lit-html
- const current = this.filterInput.parentElement.querySelector(".btn-group[data-tobago-value='" + itemValue + "']");
- current.addEventListener("click", this.removeBadge.bind(this));
- this.selectField.querySelector("button.btn.badge").addEventListener("focus", this.focusEvent.bind(this));
- this.selectField.querySelector("button.btn.badge").addEventListener("blur", this.blurEvent.bind(this));
+ const closeButton = this.selectField
+ .querySelector(".btn-group[data-tobago-value='" + itemValue + "'] button.btn.badge");
+ closeButton?.addEventListener("click", this.removeBadge.bind(this));
+ closeButton?.addEventListener("focus", this.focusEvent.bind(this));
+ closeButton?.addEventListener("blur", this.blurEvent.bind(this));
// highlight list row
row.classList.add("table-active");
@@ -166,11 +163,13 @@ class SelectMany extends HTMLElement {
}
}
- getRowTemplate(value: string, text: string): string {
+ getRowTemplate(value: string, text: string, disabled: boolean): string {
return `
<span class="btn-group" role="group" data-tobago-value="${value}">
- <tobago-badge class="badge text-bg-primary btn">${text}</tobago-badge>
- <button type="button" class="tobago-button btn btn-secondary badge"><i class="bi-x-lg"></i></button>
+ <tobago-badge class="badge text-bg-primary btn
+ ${disabled ? "disabled" : ""}">${text}</tobago-badge>
+ ${disabled ? ""
+ : "<button type='button' class='tobago-button btn btn-secondary badge'><i class='bi-x-lg'></i></button>"}
</span>`;
}
@@ -193,12 +192,11 @@ class SelectMany extends HTMLElement {
}
private showDropdown(event: Event): void {
- console.log("### showDropdown");
+ // console.log("### showDropdown");
}
private shownDropdown(event: Event): void {
this.setDropdownMenuWidth();
- console.log("### shownDropdown");
}
private preventBootstrapHide(event: CustomEvent): void {
@@ -207,7 +205,7 @@ class SelectMany extends HTMLElement {
}
private clickEvent(event: MouseEvent): void {
- if (this.isPartOfFilterWrapper(event.target as Element)) {
+ if (this.isPartOfSelectField(event.target as Element)) {
this.filterInput.focus();
} else if (this.isPartOfComponent(event.target as Element)) {
this.filterInput.focus();
@@ -237,12 +235,12 @@ class SelectMany extends HTMLElement {
}
}
- private isPartOfFilterWrapper(element: Element): boolean {
+ private isPartOfSelectField(element: Element): boolean {
if (element) {
if (this.selectField.id === element.id) {
return true;
} else {
- return element.parentElement ? this.isPartOfFilterWrapper(element.parentElement) : false;
+ return element.parentElement ? this.isPartOfSelectField(element.parentElement) : false;
}
} else {
return false;
@@ -259,7 +257,7 @@ class SelectMany extends HTMLElement {
}
private hiddenDropdown(event: Event): void {
- console.log("### hiddenDropdown");
+ // console.log("### hiddenDropdown");
}
private resizeEvent(event: UIEvent): void {
@@ -273,14 +271,16 @@ class SelectMany extends HTMLElement {
}
private focusEvent(event: FocusEvent): void {
- this.setFocus(true);
+ if (!this.hiddenSelect.disabled) {
+ this.setFocus(true);
+ }
}
private blurEvent(event: FocusEvent): void {
if (event.relatedTarget === null) {
//this must be a mouse click; if tabbed out the relatedTarget is the new focused element
} else {
- if (this.isPartOfFilterWrapper(event.relatedTarget as Element)) {
+ if (this.isPartOfSelectField(event.relatedTarget as Element)) {
//to nothing
} else if (this.isPartOfComponent(event.relatedTarget as Element)) {
this.filterInput.focus();