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 2020/03/23 16:30:38 UTC
[myfaces-tobago] branch master updated (f403184 -> cbd3371)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git.
from f403184 fix demo: flexLayout column size
new 8bd9abd add getTransitionTime() method to DomUtils
new 9bb1846 cleanup
new cbd3371 tobago-bar: custom element
The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../internal/renderkit/renderer/BarRenderer.java | 9 +--
.../tobago/renderkit/html/HtmlElements.java | 1 +
tobago-core/src/main/resources/scss/_tobago.scss | 4 +
.../src/main/npm/ts/tobago-all.ts | 1 +
.../src/main/npm/ts/tobago-bar.ts | 86 ++++++++++++++++++++++
.../src/main/npm/ts/tobago-popup.ts | 18 ++---
.../src/main/npm/ts/tobago-utils.ts | 11 +++
7 files changed, 113 insertions(+), 17 deletions(-)
create mode 100644 tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-bar.ts
[myfaces-tobago] 02/03: cleanup
Posted by 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
commit 9bb1846c458da311dbefb5517a042da988e68975
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Fri Mar 20 15:51:41 2020 +0100
cleanup
remove IOException
---
.../apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
index a7e6a77..936e086 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
@@ -115,7 +115,7 @@ public class BarRenderer extends RendererBase {
}
}
- private void setRenderTypes(final UIComponent component) throws IOException {
+ private void setRenderTypes(final UIComponent component) {
for (final UIComponent child : component.getChildren()) {
if (child.isRendered()) {
if (child instanceof AbstractUIForm) {
[myfaces-tobago] 03/03: tobago-bar: custom element
Posted by 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
commit cbd337123ead71da3854d23f23391cc220b8334e
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Fri Mar 20 15:52:10 2020 +0100
tobago-bar: custom element
Add a custom element for tc:bar.
This also fix: tc:bar mobile menu doesn't open
Issue: TOBAGO-1633
Issue: TOBAGO-2020
---
.../internal/renderkit/renderer/BarRenderer.java | 7 +-
.../tobago/renderkit/html/HtmlElements.java | 1 +
tobago-core/src/main/resources/scss/_tobago.scss | 4 +
.../src/main/npm/ts/tobago-all.ts | 1 +
.../src/main/npm/ts/tobago-bar.ts | 86 ++++++++++++++++++++++
5 files changed, 95 insertions(+), 4 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
index 936e086..bba61c7 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/BarRenderer.java
@@ -54,12 +54,11 @@ public class BarRenderer extends RendererBase {
final String navbarId = clientId + "::navbar";
final Markup markup = bar.getMarkup();
- writer.startElement(HtmlElements.NAV);
+ writer.startElement(HtmlElements.TOBAGO_BAR);
writer.writeIdAttribute(clientId);
writer.writeClassAttribute(
- TobagoClass.BAR,
- TobagoClass.BAR.createMarkup(bar.getMarkup()),
BootstrapClass.NAVBAR,
+ TobagoClass.BAR.createMarkup(bar.getMarkup()),
getNavbarExpand(markup),
getNavbarColorScheme(markup),
bar.getCustomClass());
@@ -143,7 +142,7 @@ public class BarRenderer extends RendererBase {
writer.endElement(HtmlElements.DIV);
}
writer.endElement(HtmlElements.DIV);
- writer.endElement(HtmlElements.NAV);
+ writer.endElement(HtmlElements.TOBAGO_BAR);
}
private void encodeOpener(
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 e6d396e..946f495 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
@@ -133,6 +133,7 @@ public enum HtmlElements {
VIDEO("video"),
WBR("wbr", Qualifier.VOID),
+ TOBAGO_BAR("tobago-bar"),
TOBAGO_BEHAVIOR("tobago-behavior"),
TOBAGO_DATE("tobago-date"),
TOBAGO_DROPDOWN("tobago-dropdown"),
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index e792703..41e112b 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -114,7 +114,11 @@ $form-disabled-alpha: 0.5;
}
/* bar -------------------------------------------------------------- */
+// todo: remove CSS class
.tobago-bar {
+}
+
+tobago-bar {
&.navbar-light .navbar-brand > .tobago-link {
color: $navbar-light-active-color;
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
index fb506e0..6549ba7 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-all.ts
@@ -16,6 +16,7 @@
*/
import "./tobago-listener";
+import "./tobago-bar";
import "./tobago-core";
import "./tobago-dropdown";
// import "@vaadin/vaadin-date-picker";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-bar.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-bar.ts
new file mode 100644
index 0000000..ff83c23
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-bar.ts
@@ -0,0 +1,86 @@
+/*
+ * 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.
+ */
+
+import {DomUtils} from "./tobago-utils";
+
+class Bar extends HTMLElement {
+
+ private readonly CssClass = {
+ SHOW: "show",
+ COLLAPSE: "collapse",
+ COLLAPSING: "collapsing"
+ };
+ private readonly ariaExpanded: string = "aria-expanded";
+ private timeout: number;
+ private expanded: boolean;
+
+ constructor() {
+ super();
+ this.toggleButton.addEventListener("click", this.toggleCollapse.bind(this));
+ }
+
+ connectedCallback(): void {
+ this.expanded = this.toggleButton.getAttribute(this.ariaExpanded) === "true";
+ }
+
+ private toggleCollapse(event: MouseEvent): void {
+ window.clearTimeout(this.timeout);
+
+ if (this.expanded) {
+ this.expanded = false;
+ this.navbarContent.style.height = this.navbarContent.scrollHeight + "px";
+ this.navbarContent.offsetHeight; //force reflow, to make sure height is set
+ this.navbarContent.classList.add(this.CssClass.COLLAPSING);
+ this.navbarContent.classList.remove(this.CssClass.COLLAPSE);
+ this.navbarContent.classList.remove(this.CssClass.SHOW);
+ this.navbarContent.style.height = null;
+
+ this.timeout = window.setTimeout(() => {
+ this.navbarContent.classList.remove(this.CssClass.COLLAPSING);
+ this.navbarContent.classList.add(this.CssClass.COLLAPSE);
+ this.toggleButton.setAttribute(this.ariaExpanded, "false");
+ }, DomUtils.getTransitionTime(this.navbarContent));
+ } else {
+ this.expanded = true;
+ this.navbarContent.classList.remove(this.CssClass.COLLAPSE);
+ this.navbarContent.classList.add(this.CssClass.COLLAPSING);
+ this.navbarContent.style.height = this.navbarContent.scrollHeight + "px";
+
+ this.timeout = window.setTimeout(() => {
+ this.navbarContent.classList.remove(this.CssClass.COLLAPSING);
+ this.navbarContent.classList.add(this.CssClass.COLLAPSE);
+ this.navbarContent.classList.add(this.CssClass.SHOW);
+ this.navbarContent.style.height = null;
+ this.toggleButton.setAttribute(this.ariaExpanded, "true");
+ }, DomUtils.getTransitionTime(this.navbarContent));
+ }
+ }
+
+ private get toggleButton(): HTMLButtonElement {
+ const root = this.getRootNode() as ShadowRoot | Document;
+ return root.querySelector(".navbar-toggler");
+ }
+
+ private get navbarContent(): HTMLDivElement {
+ const root = this.getRootNode() as ShadowRoot | Document;
+ return root.querySelector(".navbar-collapse");
+ }
+}
+
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+ window.customElements.define("tobago-bar", Bar);
+});
[myfaces-tobago] 01/03: add getTransitionTime() method to DomUtils
Posted by 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
commit 8bd9abdc4020408b4590dbef50b252a749a4ab8e
Author: Henning Nöth <hn...@apache.org>
AuthorDate: Fri Mar 20 15:46:23 2020 +0100
add getTransitionTime() method to DomUtils
Calculate the CSS transition time of an element.
Popup now use getTransitionTime() instead of own implementation.
---
.../src/main/npm/ts/tobago-popup.ts | 18 ++++++------------
.../src/main/npm/ts/tobago-utils.ts | 11 +++++++++++
2 files changed, 17 insertions(+), 12 deletions(-)
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-popup.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-popup.ts
index 51ba4a1..7a215bf 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-popup.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-popup.ts
@@ -15,8 +15,9 @@
* limitations under the License.
*/
+import {DomUtils} from "./tobago-utils";
+
const ESCAPE_KEYCODE = 27; // KeyboardEvent.which value for Escape (Esc) key
-const MILLISECONDS_MULTIPLIER = 1000;
const Default = {
backdrop: true,
@@ -252,7 +253,7 @@ export class Popup extends HTMLElement {
this._element.classList.add(ClassName.STATIC);
- const modalTransitionDuration = Util.getTransitionDurationFromElement(this._element)
+ const modalTransitionDuration = DomUtils.getTransitionTime(this._element)
$(this._element).one(Util.TRANSITION_END, () => {
this._element.classList.remove(ClassName.STATIC)
@@ -303,7 +304,7 @@ export class Popup extends HTMLElement {
// };
// if (transition) {
- // const transitionDuration = Util.getTransitionDurationFromElement(this._dialog)
+ // const transitionDuration = DomUtils.getTransitionTime(this._dialog)
//
// $(this._dialog)
// .one(Util.TRANSITION_END, transitionComplete)
@@ -405,7 +406,7 @@ export class Popup extends HTMLElement {
return;
}
- const backdropTransitionDuration: number = this.getTransitionDurationFromElement(this._backdrop);
+ const backdropTransitionDuration: number = DomUtils.getTransitionTime(this._backdrop);
this.addOnetimeEventListener(this._backdrop, Event.TRANSITION_END, callback);
this.emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
@@ -420,7 +421,7 @@ export class Popup extends HTMLElement {
};
if (this.classList.contains(ClassName.FADE)) {
- const backdropTransitionDuration = this.getTransitionDurationFromElement(this._backdrop);
+ const backdropTransitionDuration = DomUtils.getTransitionTime(this._backdrop);
this.addOnetimeEventListener(this._backdrop, Event.TRANSITION_END, callbackRemove);
this.emulateTransitionEnd(this._backdrop, backdropTransitionDuration);
@@ -557,13 +558,6 @@ export class Popup extends HTMLElement {
})
}*/
- private getTransitionDurationFromElement(element: HTMLDivElement): number {
- const computedStyle = getComputedStyle(element);
- let transitionDuration: number = parseFloat(computedStyle.transitionDuration);
- let transitionDelay: number = parseFloat(computedStyle.transitionDelay);
- return (transitionDuration + transitionDelay) * MILLISECONDS_MULTIPLIER;
- }
-
private emulateTransitionEnd(element: HTMLElement, duration: number): void {
this.emulateTransitionEndCalled = false;
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
index 30153a0..cfe7853 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-utils.ts
@@ -156,4 +156,15 @@ export class DomUtils {
}
return id.substring(0, id.lastIndexOf(DomUtils.COMPONENT_SEP));
}
+
+ /**
+ * @param element with transition
+ * @return transition time in milliseconds
+ */
+ static getTransitionTime(element: HTMLElement): number {
+ const style = getComputedStyle(element);
+ let delay: number = parseFloat(style.transitionDelay);
+ let duration: number = parseFloat(style.transitionDuration);
+ return (delay + duration) * 1000;
+ }
}