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/01 12:17:22 UTC
[myfaces-tobago] branch t5_selectMany updated: feat(selectMany): dropdown menu show/hide/position
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 8c3b78cce4 feat(selectMany): dropdown menu show/hide/position
8c3b78cce4 is described below
commit 8c3b78cce414dddc09c2950b8dabb2d9b7031414
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Oct 28 10:52:44 2022 +0200
feat(selectMany): dropdown menu show/hide/position
* use bootstrap dropdown-toggle mechanism
* separate BootstrapEvents
Issue: TOBAGO-2159
---
.../renderkit/renderer/SelectManyRenderer.java | 9 +++-
.../tobago/renderkit/html/DataAttributes.java | 2 +
tobago-theme/src/main/scss/_tobago.scss | 5 +--
.../src/main/ts/BootstrapEvents.ts | 25 +++++++++++
.../src/main/ts/tobago-dropdown.ts | 26 +++++------
.../src/main/ts/tobago-select-many.ts | 50 +++++++++++++++++++++-
6 files changed, 98 insertions(+), 19 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 a31332c75a..94605a51a7 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
@@ -27,6 +27,7 @@ import org.apache.myfaces.tobago.internal.util.SelectItemUtils;
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
import org.apache.myfaces.tobago.renderkit.css.CssItem;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.Arias;
import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -48,7 +49,7 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
@Override
protected CssItem[] getComponentCss(final FacesContext facesContext, final T component) {
final boolean inline = component.isInline();
- return inline ? new CssItem[]{BootstrapClass.LIST_GROUP} : null;
+ return inline ? new CssItem[]{BootstrapClass.LIST_GROUP} : new CssItem[]{BootstrapClass.DROPDOWN};
}
@Override
@@ -165,10 +166,14 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
writer.writeClassAttribute(
BootstrapClass.FORM_SELECT,
TobagoClass.FILTER__WRAPPER,
- inline ? BootstrapClass.LIST_GROUP_ITEM : null,
+ inline ? BootstrapClass.LIST_GROUP_ITEM : BootstrapClass.DROPDOWN_TOGGLE,
BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(component)),
component.getCustomClass());
writer.writeAttribute(HtmlAttributes.TITLE, title, true);
+ writer.writeAttribute(DataAttributes.BS_TOGGLE, "dropdown", false);
+ writer.writeAttribute(DataAttributes.BS_AUTO_CLOSE, "outside", false);
+ writer.writeAttribute(DataAttributes.BS_REFERENCE, "parent", false);
+ writer.writeAttribute(Arias.EXPANDED, Boolean.FALSE.toString(), false);
final Object[] values = component.getSelectedValues();
final String[] submittedValues = getSubmittedValues(component);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
index 40fc01f11c..6d14adbead 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/DataAttributes.java
@@ -26,7 +26,9 @@ package org.apache.myfaces.tobago.renderkit.html;
*/
public enum DataAttributes implements MarkupLanguageAttributes {
+ BS_AUTO_CLOSE("data-bs-auto-close"),
BS_CONTENT("data-bs-content"),
+ BS_REFERENCE("data-bs-reference"),
BS_TOGGLE("data-bs-toggle"),
BS_TRIGGER("data-bs-trigger"),
diff --git a/tobago-theme/src/main/scss/_tobago.scss b/tobago-theme/src/main/scss/_tobago.scss
index d885565308..962084e7e1 100644
--- a/tobago-theme/src/main/scss/_tobago.scss
+++ b/tobago-theme/src/main/scss/_tobago.scss
@@ -1175,6 +1175,8 @@ tobago-select-one-radio {
}
tobago-select-many {
+ display: block;
+
.tobago-filter-wrapper {
display: flex;
flex-wrap: wrap;
@@ -1204,9 +1206,6 @@ tobago-select-many {
min-width: 8rem;
&:focus {
- margin: 0;
- border: 0;
- padding: 0;
box-shadow: none;
}
}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/BootstrapEvents.ts b/tobago-theme/tobago-theme-standard/src/main/ts/BootstrapEvents.ts
new file mode 100644
index 0000000000..7e5136c81c
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/BootstrapEvents.ts
@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+export enum BootstrapEvents {
+ DROPDOWN_HIDE= "hide.bs.dropdown",
+ DROPDOWN_HIDDEN= "hidden.bs.dropdown",
+ DROPDOWN_SHOW= "show.bs.dropdown",
+ DROPDOWN_SHOWN= "shown.bs.dropdown"
+}
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
index d542a0925b..c05adf9ba4 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
@@ -15,12 +15,7 @@
* limitations under the License.
*/
-const TobagoDropdownEvent = {
- HIDE: "tobago.dropdown.hide",
- HIDDEN: "tobago.dropdown.hidden",
- SHOW: "tobago.dropdown.show",
- SHOWN: "tobago.dropdown.shown"
-};
+import {BootstrapEvents} from "./BootstrapEvents";
/**
* The dropdown implementation of Bootstrap does not move the menu to the tobago-page-menuStore. This behavior is
@@ -28,11 +23,18 @@ const TobagoDropdownEvent = {
*/
class Dropdown extends HTMLElement {
+ private readonly TobagoEvents = {
+ HIDE: "tobago.dropdown.hide",
+ HIDDEN: "tobago.dropdown.hidden",
+ SHOW: "tobago.dropdown.show",
+ SHOWN: "tobago.dropdown.shown"
+ };
+
constructor() {
super();
if (!this.classList.contains("tobago-dropdown-submenu")) { // ignore submenus
- this.addEventListener("shown.bs.dropdown", this.openDropdown.bind(this));
- this.addEventListener("hidden.bs.dropdown", this.closeDropdown.bind(this));
+ this.addEventListener(BootstrapEvents.DROPDOWN_SHOWN, this.openDropdown.bind(this));
+ this.addEventListener(BootstrapEvents.DROPDOWN_HIDDEN, this.closeDropdown.bind(this));
}
// the click should not sort the column of a table - XXX not very nice - may look for a better solution
if (this.closest("tr") != null) {
@@ -43,21 +45,21 @@ class Dropdown extends HTMLElement {
}
openDropdown(): void {
- this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.SHOW));
+ this.dispatchEvent(new CustomEvent(this.TobagoEvents.SHOW));
if (!this.insideNavbar()) {
this.menuStore.appendChild(this.dropdownMenu);
}
- this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.SHOWN));
+ this.dispatchEvent(new CustomEvent(this.TobagoEvents.SHOWN));
}
closeDropdown(): void {
- this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.HIDE));
+ this.dispatchEvent(new CustomEvent(this.TobagoEvents.HIDE));
if (!this.insideNavbar()) {
this.appendChild(this.dropdownMenu);
}
- this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.HIDDEN));
+ this.dispatchEvent(new CustomEvent(this.TobagoEvents.HIDDEN));
}
/**
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 fbddc7d023..84d4bb0a27 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
@@ -15,6 +15,8 @@
* limitations under the License.
*/
+import {BootstrapEvents} from "./BootstrapEvents";
+
class SelectMany extends HTMLElement {
private readonly CssClass = {
@@ -38,7 +40,8 @@ class SelectMany extends HTMLElement {
}
get dropdownMenu(): HTMLDivElement {
- return this.querySelector(".dropdown-menu");
+ const root = this.getRootNode() as ShadowRoot | Document;
+ return root.querySelector(`.dropdown-menu[name='${this.id}']`);
}
get menuStore(): HTMLDivElement {
@@ -56,7 +59,11 @@ class SelectMany extends HTMLElement {
// todo: implement select/deselect options
// todo: implement remove badge
- this.selectField.addEventListener("click", this.showDropdownMenu.bind(this));
+ window.addEventListener("resize", this.resizeEvent.bind(this));
+ this.addEventListener(BootstrapEvents.DROPDOWN_SHOW, this.showDropdown.bind(this));
+ this.addEventListener(BootstrapEvents.DROPDOWN_SHOWN, this.shownDropdown.bind(this));
+ this.addEventListener(BootstrapEvents.DROPDOWN_HIDE, this.hideDropdown.bind(this));
+ this.addEventListener(BootstrapEvents.DROPDOWN_HIDDEN, this.HiddenDropdown.bind(this));
// todo: later
// this.hiddenSelect.addEventListener("change", ((event: InputEvent) => {
@@ -111,6 +118,45 @@ class SelectMany extends HTMLElement {
this.dropdownMenu.classList.add(this.CssClass.SHOW);
}
+ private showDropdown(event: Event): void {
+ // console.log("### showDropdown");
+ }
+
+ private shownDropdown(event: Event): void {
+ this.setDropdownMenuWidth();
+ // console.log("### shownDropdown");
+ }
+
+ private hideDropdown(event: Event): void {
+ // console.log("### hideDropdown");
+ }
+
+ private HiddenDropdown(event: Event): void {
+ // console.log("### HiddenDropdown");
+ }
+
+ private resizeEvent(event: UIEvent): void {
+ this.setDropdownMenuWidth();
+ }
+
+ private setDropdownMenuWidth(): void {
+ if (this.dropdownMenu) {
+ this.dropdownMenu.style.width = `${this.offsetWidth}px`;
+ }
+ }
+
+ private focusFilter(event: MouseEvent): void {
+ // console.log("### focusFilter");
+ }
+
+ private blurFilter(event: MouseEvent): void {
+ // console.log("### blurFilter");
+ }
+
+ private blurSelect(event: MouseEvent): void {
+ // console.log("### blurSelect");
+ }
+
private initList() {
const tbody = this.tbody;
tbody.addEventListener("click", this.select.bind(this));