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 2019/08/23 18:45:47 UTC
[myfaces-tobago] 02/02: tobago-panel,
tobago-split-layout: custom elements
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 57547425098582777a295cd6d43f8f5f94fd8f39
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Fri Aug 23 20:45:30 2019 +0200
tobago-panel, tobago-split-layout: custom elements
issue: TOBAGO-1633: TS refactoring
---
.../internal/renderkit/renderer/PanelRenderer.java | 7 +--
.../renderkit/renderer/SplitLayoutRenderer.java | 40 +++----------
.../myfaces/tobago/renderkit/css/TobagoClass.java | 3 -
.../tobago/renderkit/html/CustomAttributes.java | 3 +-
.../tobago/renderkit/html/HtmlElements.java | 2 +
tobago-core/src/main/resources/scss/_tobago.scss | 12 +++-
.../src/main/npm/ts/tobago-panel.ts | 7 +++
.../src/main/npm/ts/tobago-split-layout.ts | 67 +++++++++++++---------
8 files changed, 71 insertions(+), 70 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PanelRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PanelRenderer.java
index 9a7fa75..f4ad0d5 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PanelRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/PanelRenderer.java
@@ -49,14 +49,13 @@ public class PanelRenderer extends PanelRendererBase {
final Markup markup = panel.getMarkup();
final AbstractUIReload reload = ComponentUtils.getReloadFacet(panel);
- writer.startElement(HtmlElements.DIV);
+ writer.startElement(HtmlElements.TOBAGO_PANEL);
writer.writeIdAttribute(clientId);
writer.writeAttribute(DataAttributes.MARKUP, JsonUtils.encode(markup), false);
writer.writeClassAttribute(
- TobagoClass.PANEL,
- TobagoClass.PANEL.createMarkup(markup),
collapsed ? TobagoClass.COLLAPSED : null,
+ TobagoClass.PANEL.createMarkup(markup),
panel.getCustomClass(),
markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
@@ -80,6 +79,6 @@ public class PanelRenderer extends PanelRendererBase {
@Override
public void encodeEnd(final FacesContext facesContext, final UIComponent component) throws IOException {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
- writer.endElement(HtmlElements.DIV);
+ writer.endElement(HtmlElements.TOBAGO_PANEL);
}
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SplitLayoutRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SplitLayoutRenderer.java
index 5087862..684a7bc 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SplitLayoutRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SplitLayoutRenderer.java
@@ -23,9 +23,11 @@ import org.apache.myfaces.tobago.apt.annotation.Preliminary;
import org.apache.myfaces.tobago.context.Markup;
import org.apache.myfaces.tobago.internal.component.AbstractUISplitLayout;
import org.apache.myfaces.tobago.internal.util.JsonUtils;
+import org.apache.myfaces.tobago.layout.Orientation;
import org.apache.myfaces.tobago.renderkit.RendererBase;
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.CustomAttributes;
import org.apache.myfaces.tobago.renderkit.html.DataAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlAttributes;
import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
@@ -39,7 +41,6 @@ import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import java.io.IOException;
import java.lang.invoke.MethodHandles;
-import java.util.List;
/**
* <p>
@@ -73,54 +74,29 @@ public class SplitLayoutRenderer extends RendererBase {
final TobagoResponseWriter writer = getResponseWriter(facesContext);
final Markup markup = splitLayout.getMarkup();
- writer.startElement(HtmlElements.DIV);
+ writer.startElement(HtmlElements.TOBAGO_SPLIT_LAYOUT);
writer.writeIdAttribute(splitLayout.getClientId(facesContext));
writer.writeAttribute(DataAttributes.MARKUP, JsonUtils.encode(splitLayout.getMarkup()), false);
writer.writeClassAttribute(
- TobagoClass.SPLIT_LAYOUT,
BootstrapClass.D_FLEX,
splitLayout.isHorizontal() ? BootstrapClass.FLEX_ROW : BootstrapClass.FLEX_COLUMN,
markup != null && markup.contains(Markup.SPREAD) ? TobagoClass.SPREAD : null);
+ writer.writeAttribute(CustomAttributes.ORIENTATION,
+ splitLayout.isHorizontal() ? Orientation.HORIZONTAL : Orientation.VERTICAL, false);
}
@Override
public void encodeEnd(final FacesContext facesContext, final UIComponent component) throws IOException {
- final TobagoResponseWriter writer = getResponseWriter(facesContext);
- writer.endElement(HtmlElements.DIV);
- }
-
- @Override
- public boolean getRendersChildren() {
- return true;
- }
- @Override
- public void encodeChildren(final FacesContext facesContext, final UIComponent component) throws IOException {
- final TobagoResponseWriter writer = getResponseWriter(facesContext);
final AbstractUISplitLayout splitLayout = (AbstractUISplitLayout) component;
- final List<UIComponent> components = ComponentUtils.findLayoutChildren(splitLayout);
-
- boolean somethingWasRendered = false;
- for (final UIComponent current : components) {
- if (current.isRendered()) {
- if (somethingWasRendered) {
- // render splitter
- writer.startElement(HtmlElements.DIV);
- writer.writeClassAttribute(
- splitLayout.isHorizontal() ? TobagoClass.SPLIT_LAYOUT__HORIZONTAL : TobagoClass.SPLIT_LAYOUT__VERTICAL);
- writer.endElement(HtmlElements.DIV);
- }
- // render component
- current.encodeAll(facesContext);
-
- somethingWasRendered = true;
- }
- }
+ final TobagoResponseWriter writer = getResponseWriter(facesContext);
writer.startElement(HtmlElements.INPUT);
writer.writeNameAttribute(splitLayout.getClientId(facesContext) + SUFFIX_SIZES);
writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.HIDDEN);
// writer.writeAttribute(HtmlAttributes.VALUE, sizes);
writer.endElement(HtmlElements.INPUT);
+
+ writer.endElement(HtmlElements.TOBAGO_SPLIT_LAYOUT);
}
}
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 0419b9f..f07f3e6 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
@@ -200,9 +200,6 @@ public enum TobagoClass implements CssItem {
SHEET__PAGING_INPUT("tobago-sheet-pagingInput"),
SHEET__PAGING_OUTPUT("tobago-sheet-pagingOutput"),
SHEET__ROW("tobago-sheet-row"),
- SPLIT_LAYOUT("tobago-splitLayout"),
- SPLIT_LAYOUT__HORIZONTAL("tobago-splitLayout-horizontal"),
- SPLIT_LAYOUT__VERTICAL("tobago-splitLayout-vertical"),
STARS("tobago-stars"),
STARS__CONTAINER("tobago-stars-container"),
STARS__FOCUS_BOX("tobago-stars-focusBox"),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
index abb5266..2955d36 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/CustomAttributes.java
@@ -27,7 +27,8 @@ public enum CustomAttributes implements MarkupLanguageAttributes {
UPDATE("update"),
TOTAL_COUNT("total-count"),
LOCAL_MENU("local-menu"),
- DATA("data");
+ DATA("data"),
+ ORIENTATION("orientation");
private final String value;
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 3ec4203..7c05b17 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
@@ -134,6 +134,8 @@ public enum HtmlElements {
WBR("wbr", Qualifier.VOID),
TOBAGO_IN("tobago-in"),
+ TOBAGO_PANEL("tobago-panel"),
+ TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
TOBAGO_STARS("tobago-stars"),
TOBAGO_SUGGEST("tobago-suggest");
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index cf909d9..d517229 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -200,7 +200,7 @@ button.tobago-button {
.tobago-collapsed.tobago-box .card-body,
.tobago-collapsed.tobago-section .tobago-section-content,
-.tobago-collapsed.tobago-panel {
+tobago-panel.tobago-collapsed {
display: none;
}
@@ -725,7 +725,7 @@ span.tobago-out:empty:before {
.tobago-spread {
height: 100%;
- &.tobago-panel {
+ &tobago-panel {
overflow-x: hidden;
overflow-y: auto;
}
@@ -733,6 +733,14 @@ span.tobago-out:empty:before {
/* panel ------------------------------------------------------------- */
+// todo: remove
+.tobago-panel {
+}
+
+tobago-panel {
+ display: block;
+}
+
/* popup ------------------------------------------------------------- */
.tobago-popup {
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-panel.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-panel.ts
index ae6f28c..91620db 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-panel.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-panel.ts
@@ -14,3 +14,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+class Panel extends HTMLElement {
+}
+
+document.addEventListener("DOMContentLoaded", function (event) {
+ window.customElements.define('tobago-panel', Panel);
+});
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-split-layout.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-split-layout.ts
index 93bcef2..a18e9b0 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-split-layout.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-split-layout.ts
@@ -15,61 +15,71 @@
* limitations under the License.
*/
-import {Listener, Phase} from "./tobago-listener";
import {DomUtils} from "./tobago-utils";
-class SplitLayout {
+class SplitLayout extends HTMLElement {
- private readonly element: HTMLDivElement;
- private readonly horizontal: boolean;
private offset: number;
- static init = function (element: HTMLElement): void {
- for (const splitLayout of DomUtils.selfOrElementsByClassName(element, "tobago-splitLayout")) {
- new SplitLayout(splitLayout as HTMLDivElement);
- }
- };
-
- constructor(element: HTMLDivElement) {
- this.element = element;
+ constructor() {
+ super();
- let splitters = this.element.getElementsByClassName("tobago-splitLayout-horizontal");
- for (let i = 0; i < splitters.length; i++) {
- splitters.item(i).addEventListener("mousedown", this.start.bind(this));
- this.horizontal = true;
+ let first = true;
+ let justAdded = false;
+ for (let child of this.children) {
+ if (justAdded) { // skip, because the just added had enlarges the list of children
+ justAdded = false;
+ continue;
+ }
+ if (child.matches("input[type=hidden]")) {
+ continue;
+ }
+ if (first) { // the first needs no splitter handle
+ first = false;
+ continue;
+ }
+ const splitter = document.createElement("div");
+ splitter.classList.add(
+ this.orientation === "horizontal" ? "tobago-splitLayout-horizontal" : "tobago-splitLayout-vertical"
+ );
+ justAdded = true;
+ splitter.addEventListener("mousedown", this.start.bind(this));
+ child.parentElement.insertBefore(splitter, child);
}
+ }
- splitters = this.element.getElementsByClassName("tobago-splitLayout-vertical");
- for (let i = 0; i < splitters.length; i++) {
- splitters.item(i).addEventListener("mousedown", this.start.bind(this));
- this.horizontal = false;
- }
+ get orientation(): string {
+ return this.getAttribute("orientation");
+ }
+
+ set orientation(orientation: string) {
+ this.setAttribute("orientation", orientation);
}
start(event: MouseEvent) {
event.preventDefault();
const splitter = event.target as HTMLElement;
const previous = DomUtils.previousElementSibling(splitter);
- this.offset = this.horizontal ? event.pageX - previous.offsetWidth : event.pageY - previous.offsetHeight;
+ this.offset = this.orientation === "horizontal" ? event.pageX - previous.offsetWidth : event.pageY - previous.offsetHeight;
const mousedown = SplitLayoutMousedown.save(event, splitter);
document.addEventListener("mousemove", this.move.bind(this));
document.addEventListener("mouseup", this.stop.bind(this));
const previousArea = mousedown.previous;
- if (this.horizontal) {
+ if (this.orientation === "horizontal") {
previousArea.style.width = String(previousArea.offsetWidth + "px");
} else {
previousArea.style.height = String(previousArea.offsetHeight + "px");
}
previousArea.style.flexGrow = "inherit";
previousArea.style.flexBasis = "auto";
- console.debug("initial width/height = '%s'", (this.horizontal ? previousArea.style.width : previousArea.style.height));
- };
+ console.debug("initial width/height = '%s'", (this.orientation === "horizontal" ? previousArea.style.width : previousArea.style.height));
+ }
move(event: MouseEvent): void {
event.preventDefault();
const data = SplitLayoutMousedown.load();
const previousArea = data.previous;
- if (this.horizontal) {
+ if (this.orientation === "horizontal") {
previousArea.style.width = String(event.pageX - this.offset) + "px";
} else {
previousArea.style.height = String(event.pageY - this.offset) + "px";
@@ -143,5 +153,6 @@ class SplitLayoutMousedown {
}
-Listener.register(SplitLayout.init, Phase.DOCUMENT_READY);
-Listener.register(SplitLayout.init, Phase.AFTER_UPDATE);
+document.addEventListener("DOMContentLoaded", function (event) {
+ window.customElements.define('tobago-split-layout', SplitLayout);
+});