myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From lof...@apache.org
Subject [myfaces-tobago] 02/02: tobago-panel, tobago-split-layout: custom elements
Date Fri, 23 Aug 2019 18:45:47 GMT
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 <lofwyr@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);
+});


Mime
View raw message