myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From lof...@apache.org
Subject [myfaces-tobago] 01/02: TOBAGO-1840: Range/Slider component
Date Wed, 02 Sep 2020 18:52:25 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 8f2f46ce37a19a7e5bf94086fb2fa948a6d7fa20
Author: Udo Schnurpfeil <udo.schnurpfeil@irian.eu>
AuthorDate: Wed Sep 2 20:51:50 2020 +0200

    TOBAGO-1840: Range/Slider component
    
    First implementation
---
 .../myfaces/tobago/component/Attributes.java       |   1 +
 .../myfaces/tobago/component/RendererTypes.java    |   2 +
 .../org/apache/myfaces/tobago/component/Tags.java  |   2 +
 .../tobago/internal/component/AbstractUIDate.java  |   2 +
 .../tobago/internal/component/AbstractUIIn.java    |   2 +
 .../tobago/internal/component/AbstractUIInput.java |   2 -
 .../{AbstractUIIn.java => AbstractUIRange.java}    |   7 +-
 .../internal/component/AbstractUITextarea.java     |   2 +
 .../internal/renderkit/renderer/InRenderer.java    |   3 +-
 .../internal/renderkit/renderer/RangeRenderer.java | 136 +++++++++++++++++++++
 .../taglib/component/RangeTagDeclaration.java      |  99 +++++++++++++++
 .../tobago/renderkit/html/HtmlElements.java        |   1 +
 tobago-core/src/main/resources/scss/_tobago.scss   |   4 +
 .../tobago/example/demo/RangeController.java       |  40 ++++--
 .../20-component/010-input/45-range/Range.xhtml    |  55 +++++++++
 .../src/main/npm/ts/tobago-all.ts                  |   1 +
 .../src/main/npm/ts/tobago-range.ts                |  78 ++++++++++++
 17 files changed, 424 insertions(+), 13 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
index 0f3a7fa..2f9d38a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Attributes.java
@@ -395,6 +395,7 @@ public enum Attributes {
   stateChangeListener,
   stateChangeListenerExpression,
   statePreview,
+  step,
   style,
   suggestMethod,
   suggestMethodExpression,
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
index 4ca29b4..3d65de6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/RendererTypes.java
@@ -68,6 +68,7 @@ public enum RendererTypes {
   Panel,
   Popup,
   Progress,
+  Range,
   Row,
   Script,
   Section,
@@ -154,6 +155,7 @@ public enum RendererTypes {
   public static final String PANEL = "Panel";
   public static final String POPUP = "Popup";
   public static final String PROGRESS = "Progress";
+  public static final String RANGE = "Range";
   public static final String ROW = "Row";
   public static final String SCRIPT = "Script";
   public static final String SECTION = "Section";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java
index 9fb85bd..58bac7b 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/component/Tags.java
@@ -64,6 +64,7 @@ public enum Tags {
   progress,
   reload,
   row,
+  range,
   script,
   section,
   segmentLayout,
@@ -135,6 +136,7 @@ public enum Tags {
   public static final String PROGRESS = "progress";
   public static final String RELOAD = "reload";
   public static final String ROW = "row";
+  public static final String RANGE = "range";
   public static final String SCRIPT = "script";
   public static final String SECTION = "section";
   public static final String SEGMENT_LAYOUT = "segmentLayout";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
index 0683da7..d818c22 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIDate.java
@@ -37,6 +37,8 @@ public abstract class AbstractUIDate extends AbstractUIInput {
 
   private static final Logger LOG = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
 
+  public abstract String getPlaceholder();
+
   public String getPattern() {
     final FacesContext facesContext = getFacesContext();
     Converter converter = ComponentUtils.getConverter(facesContext, this, getSubmittedValue());
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
index e4caab4..d30e2d6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
@@ -24,4 +24,6 @@ package org.apache.myfaces.tobago.internal.component;
  */
 public abstract class AbstractUIIn extends AbstractUIInput {
 
+  public abstract String getPlaceholder();
+
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
index 885d3c3..a029ea8 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIInput.java
@@ -43,8 +43,6 @@ public abstract class AbstractUIInput extends javax.faces.component.UIInput
 
   public abstract boolean isReadonly();
 
-  public abstract String getPlaceholder();
-
   @Override
   public String getFieldId(final FacesContext facesContext) {
     return getClientId(facesContext) + ComponentUtils.SUB_SEPARATOR + "field";
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIRange.java
similarity index 77%
copy from tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
copy to tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIRange.java
index e4caab4..b843391 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIIn.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUIRange.java
@@ -20,8 +20,11 @@
 package org.apache.myfaces.tobago.internal.component;
 
 /**
- * {@link org.apache.myfaces.tobago.internal.taglib.component.InTagDeclaration}
+ * {@link org.apache.myfaces.tobago.internal.taglib.component.RangeTagDeclaration}
  */
-public abstract class AbstractUIIn extends AbstractUIInput {
+public abstract class AbstractUIRange extends AbstractUIInput {
 
+  public abstract Integer getMin();
+  public abstract Integer getMax();
+  public abstract Integer getStep();
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
index b030f1e..a83bc52 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
@@ -29,4 +29,6 @@ public abstract class AbstractUITextarea extends AbstractUIInput {
   public abstract SanitizeMode getSanitize();
 
   public abstract Integer getRows();
+
+  public abstract String getPlaceholder();
 }
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
index d7b5d1d..9cd6bca 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/InRenderer.java
@@ -23,6 +23,7 @@ import org.apache.myfaces.tobago.component.Attributes;
 import org.apache.myfaces.tobago.component.Facets;
 import org.apache.myfaces.tobago.component.RendererTypes;
 import org.apache.myfaces.tobago.internal.component.AbstractUIButton;
+import org.apache.myfaces.tobago.internal.component.AbstractUIIn;
 import org.apache.myfaces.tobago.internal.component.AbstractUIInput;
 import org.apache.myfaces.tobago.internal.component.AbstractUIOut;
 import org.apache.myfaces.tobago.internal.component.AbstractUISelectOneChoice;
@@ -61,7 +62,7 @@ public class InRenderer extends MessageLayoutRendererBase {
   @Override
   protected void encodeBeginField(final FacesContext facesContext, final UIComponent component)
       throws IOException {
-    final AbstractUIInput input = (AbstractUIInput) component;
+    final AbstractUIIn input = (AbstractUIIn) component;
     final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, input);
     final String currentValue = getCurrentValue(facesContext, input);
     final boolean password = ComponentUtils.getBooleanAttribute(input, Attributes.password);
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/RangeRenderer.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/RangeRenderer.java
new file mode 100644
index 0000000..d6a681b
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/RangeRenderer.java
@@ -0,0 +1,136 @@
+/*
+ * 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.
+ */
+
+package org.apache.myfaces.tobago.internal.renderkit.renderer;
+
+import org.apache.myfaces.tobago.internal.component.AbstractUIRange;
+import org.apache.myfaces.tobago.internal.util.AccessKeyLogger;
+import org.apache.myfaces.tobago.internal.util.HtmlRendererUtils;
+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.HtmlAttributes;
+import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
+import org.apache.myfaces.tobago.renderkit.html.HtmlInputTypes;
+import org.apache.myfaces.tobago.util.ComponentUtils;
+import org.apache.myfaces.tobago.webapp.TobagoResponseWriter;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import javax.faces.component.UIComponent;
+import javax.faces.context.FacesContext;
+import java.io.IOException;
+import java.lang.invoke.MethodHandles;
+
+public class RangeRenderer extends MessageLayoutRendererBase {
+
+  private static final Logger LOG = LoggerFactory.getLogger(MethodHandles.lookup().lookupClass());
+
+  @Override
+  public HtmlElements getComponentTag() {
+    return HtmlElements.TOBAGO_RANGE;
+  }
+
+  @Override
+  protected void encodeBeginField(final FacesContext facesContext, final UIComponent component)
+      throws IOException {
+    final AbstractUIRange range = (AbstractUIRange) component;
+    final String title = HtmlRendererUtils.getTitleFromTipAndMessages(facesContext, range);
+    final String currentValue = getCurrentValue(facesContext, range);
+    final String clientId = range.getClientId(facesContext);
+    final String fieldId = range.getFieldId(facesContext);
+    final boolean readonly = range.isReadonly();
+    final boolean disabled = range.isDisabled();
+    final int min = range.getMin();
+    final int max = range.getMax();
+    final int step = range.getStep();
+
+    final TobagoResponseWriter writer = getResponseWriter(facesContext);
+
+    writer.startElement(HtmlElements.INPUT);
+
+    if (range.getAccessKey() != null) {
+      writer.writeAttribute(HtmlAttributes.ACCESSKEY, Character.toString(range.getAccessKey()),
false);
+      AccessKeyLogger.addAccessKey(facesContext, range.getAccessKey(), clientId);
+    }
+
+    writer.writeAttribute(HtmlAttributes.TYPE, HtmlInputTypes.RANGE);
+    writer.writeNameAttribute(clientId);
+    writer.writeIdAttribute(fieldId);
+    HtmlRendererUtils.writeDataAttributes(facesContext, writer, range);
+    if (currentValue != null) {
+      writer.writeAttribute(HtmlAttributes.VALUE, currentValue, true);
+    }
+    if (title != null) {
+      writer.writeAttribute(HtmlAttributes.TITLE, title, true);
+    }
+    writer.writeAttribute(HtmlAttributes.READONLY, readonly);
+    writer.writeAttribute(HtmlAttributes.DISABLED, disabled);
+    writer.writeAttribute(HtmlAttributes.TABINDEX, range.getTabIndex());
+    writer.writeAttribute(HtmlAttributes.MIN, min);
+    writer.writeAttribute(HtmlAttributes.MAX, max);
+    writer.writeAttribute(HtmlAttributes.STEP, step);
+
+    final CssItem rendererCssClass = getRendererCssClass();
+    writer.writeClassAttribute(
+        rendererCssClass,
+        BootstrapClass.borderColor(ComponentUtils.getMaximumSeverity(range)),
+        BootstrapClass.FORM_CONTROL,
+        range.getCustomClass());
+
+    HtmlRendererUtils.renderFocus(clientId, range.isFocus(), ComponentUtils.isError(range),
facesContext, writer);
+
+    writer.endElement(HtmlElements.INPUT);
+
+    encodeTooltip(writer, currentValue);
+
+    encodeBehavior(writer, facesContext, range);
+  }
+
+  private void encodeTooltip(final TobagoResponseWriter writer, final String content) throws
IOException {
+    writer.startElement(HtmlElements.DIV);
+//    writer.writeClassAttribute(TobagoClass.POPOVER__BOX, BootstrapClass.POPOVER);
+    writer.writeClassAttribute(BootstrapClass.POPOVER, BootstrapClass.D_NONE);
+//    writer.writeNameAttribute(popoverId);
+    writer.startElement(HtmlElements.DIV);
+    writer.writeClassAttribute(BootstrapClass.ARROW);
+    writer.endElement(HtmlElements.DIV);
+    writer.startElement(HtmlElements.DIV);
+    writer.writeClassAttribute(BootstrapClass.POPOVER_BODY);
+    if (content != null) {
+      writer.writeText(content);
+    }
+    writer.endElement(HtmlElements.DIV);
+    writer.endElement(HtmlElements.DIV);
+  }
+
+  @Override
+  protected void encodeEndField(final FacesContext facesContext, final UIComponent component)
throws IOException {
+  }
+
+  protected CssItem getRendererCssClass() {
+    return TobagoClass.IN;
+  }
+
+  @Override
+  protected String getFieldId(final FacesContext facesContext, final UIComponent component)
{
+    final AbstractUIRange range = (AbstractUIRange) component;
+    return range.getFieldId(facesContext);
+  }
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/RangeTagDeclaration.java
b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/RangeTagDeclaration.java
new file mode 100644
index 0000000..e7a2cce
--- /dev/null
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/taglib/component/RangeTagDeclaration.java
@@ -0,0 +1,99 @@
+/*
+ * 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.
+ */
+
+package org.apache.myfaces.tobago.internal.taglib.component;
+
+import org.apache.myfaces.tobago.apt.annotation.Behavior;
+import org.apache.myfaces.tobago.apt.annotation.BodyContentDescription;
+import org.apache.myfaces.tobago.apt.annotation.Tag;
+import org.apache.myfaces.tobago.apt.annotation.TagAttribute;
+import org.apache.myfaces.tobago.apt.annotation.UIComponentTag;
+import org.apache.myfaces.tobago.apt.annotation.UIComponentTagAttribute;
+import org.apache.myfaces.tobago.component.ClientBehaviors;
+import org.apache.myfaces.tobago.component.RendererTypes;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasAccessKey;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasConverter;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasConverterMessage;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasHelp;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasIdBindingAndRendered;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasLabel;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasLabelLayout;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasTabIndex;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasTip;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValidator;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValidatorMessage;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValue;
+import org.apache.myfaces.tobago.internal.taglib.declaration.HasValueChangeListener;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsDisabled;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsFocus;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsReadonly;
+import org.apache.myfaces.tobago.internal.taglib.declaration.IsVisual;
+
+import javax.faces.component.UIInput;
+
+/**
+ * Renders a input field with type range.
+ */
+@Tag(name = "range")
+@BodyContentDescription(anyTagOf = "facestag")
+@UIComponentTag(
+    uiComponent = "org.apache.myfaces.tobago.component.UIRange",
+    uiComponentFacesClass = "javax.faces.component.UIInput",
+    componentFamily = UIInput.COMPONENT_FAMILY,
+    rendererType = RendererTypes.RANGE,
+    behaviors = {
+        @Behavior(
+            name = ClientBehaviors.CHANGE,
+            isDefault = true),
+        @Behavior(
+            name = ClientBehaviors.CLICK),
+        @Behavior(
+            name = ClientBehaviors.DBLCLICK),
+        @Behavior(
+            name = ClientBehaviors.FOCUS),
+        @Behavior(
+            name = ClientBehaviors.BLUR)
+    })
+public interface RangeTagDeclaration
+    extends HasIdBindingAndRendered, HasConverter, IsReadonly, IsDisabled, HasHelp, HasTip,
+    HasAccessKey, HasValidator, HasValue, HasValueChangeListener, HasTabIndex, IsFocus, IsVisual,
+    HasValidatorMessage, HasConverterMessage, HasLabel, HasLabelLayout {
+
+    /**
+     * Sets the minimum value of the range.
+     */
+    @TagAttribute
+    @UIComponentTagAttribute(type = "java.lang.Integer", defaultValue = "0")
+    void setMin(String min);
+
+    /**
+     * Sets the maximum value of the range.
+     */
+    @TagAttribute
+    @UIComponentTagAttribute(type = "java.lang.Integer", defaultValue = "100")
+    void setMax(String max);
+
+    /**
+     * Sets the step size of the range.
+     */
+    @TagAttribute
+    @UIComponentTagAttribute(type = "java.lang.Integer", defaultValue = "1")
+    void setStep(String step);
+
+}
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 46304f7..495e683 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
@@ -148,6 +148,7 @@ public enum HtmlElements {
   TOBAGO_PANEL("tobago-panel"),
   TOBAGO_POPOVER("tobago-popover"),
   TOBAGO_POPUP("tobago-popup"),
+  TOBAGO_RANGE("tobago-range"),
   TOBAGO_SPLIT_LAYOUT("tobago-split-layout"),
   TOBAGO_SELECT_BOOLEAN_CHECKBOX("tobago-select-boolean-checkbox"),
   TOBAGO_SELECT_BOOLEAN_TOGGLE("tobago-select-boolean-toggle"),
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 4f6bcd9..f8ecfb5 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -872,6 +872,10 @@ tobago-popup {
 .tobago-progress {
 }
 
+/* range ---------------------------------------------------------- */
+.tobago-range {
+}
+
 /* stars rating ------------------------------------------------------------ */
 tobago-stars {
   display: block;
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/RangeController.java
similarity index 58%
copy from tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
copy to tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/RangeController.java
index b030f1e..c629881 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/component/AbstractUITextarea.java
+++ b/tobago-example/tobago-example-demo/src/main/java/org/apache/myfaces/tobago/example/demo/RangeController.java
@@ -17,16 +17,40 @@
  * under the License.
  */
 
-package org.apache.myfaces.tobago.internal.component;
+package org.apache.myfaces.tobago.example.demo;
 
-import org.apache.myfaces.tobago.sanitizer.SanitizeMode;
+import javax.enterprise.context.RequestScoped;
+import javax.inject.Named;
 
-/**
- * {@link org.apache.myfaces.tobago.internal.taglib.component.TextareaTagDeclaration}
- */
-public abstract class AbstractUITextarea extends AbstractUIInput {
+@RequestScoped
+@Named
+public class RangeController {
+
+  private Integer one = 10;
+  private Double two = 20.0d;
+  private int three = 30;
+
+  public Integer getOne() {
+    return one;
+  }
+
+  public void setOne(Integer one) {
+    this.one = one;
+  }
+
+  public Double getTwo() {
+    return two;
+  }
+
+  public void setTwo(Double two) {
+    this.two = two;
+  }
 
-  public abstract SanitizeMode getSanitize();
+  public int getThree() {
+    return three;
+  }
 
-  public abstract Integer getRows();
+  public void setThree(int three) {
+    this.three = three;
+  }
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/45-range/Range.xhtml
b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/45-range/Range.xhtml
new file mode 100644
index 0000000..58e80c6
--- /dev/null
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/45-range/Range.xhtml
@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+
+<!--
+ * 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.
+-->
+
+<ui:composition template="/main.xhtml"
+                xmlns="http://www.w3.org/1999/xhtml"
+                xmlns:tc="http://myfaces.apache.org/tobago/component"
+                xmlns:ui="http://java.sun.com/jsf/facelets"
+                xmlns:f="http://java.sun.com/jsf/core">
+
+  <tc:section label="Input Type Range">
+
+    <tc:range label="0 to 100" min="0" max="100" value="#{rangeController.one}"/>
+
+    <tc:range label="0 to 100 step 10" min="0" max="100" step="10" value="#{rangeController.two}"/>
+
+    <tc:label value="without label"/>
+    <tc:range value="#{rangeController.three}" />
+
+    <tc:button label="Submit"/>
+
+    Values on server:
+    "#{rangeController.one}" (Integer), "#{rangeController.two}" (Double), "#{rangeController.three}"
(int)
+
+  </tc:section>
+
+  <tc:section>
+    <f:facet name="label">Input Type Range with Datalist <tc:badge value="Not implemented
yet!" markup="warning"/></f:facet>
+
+    <input type="range" list="datalist" class="form-control-range"/>
+    <datalist id="datalist">
+      <option value="0" label="0 %"/>
+      <option value="25" label="25 %"/>
+      <option value="50" label="50 %"/>
+      <option value="75" label="75 %"/>
+      <option value="100" label="100 %"/>
+    </datalist>
+
+  </tc:section>
+</ui:composition>
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 33b5670..b2c91ce 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
@@ -32,6 +32,7 @@ import "./tobago-overlay";
 import "./tobago-panel";
 import "./tobago-popover";
 import "./tobago-popup";
+import "./tobago-range";
 import "./tobago-reload";
 import "./tobago-scroll";
 import "./tobago-select-boolean-checkbox";
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-range.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-range.ts
new file mode 100644
index 0000000..ef9a97a
--- /dev/null
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-range.ts
@@ -0,0 +1,78 @@
+/*
+ * 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 Popper from "popper.js";
+
+class Range extends HTMLElement {
+
+  private popper: Popper;
+  private timeout: number;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    let range = this.range;
+    let listener = this.showPopper.bind(this);
+    range.addEventListener("input", listener);
+    range.addEventListener("focus", listener);
+  }
+
+  get range(): HTMLInputElement {
+    return this.querySelector("input[type=range]");
+  }
+
+  get tooltip(): HTMLElement {
+    return this.querySelector(".popover");
+  }
+
+  get tooltipBody(): HTMLElement {
+    return this.querySelector(".popover-body");
+  }
+
+  showPopper(): void {
+    let tooltip = this.tooltip;
+    let range = this.range;
+
+    // update value to display
+    this.tooltipBody.innerHTML = `${range.value}`; // todo: use html from lit-html
+
+    // init
+    if (!this.popper) {
+      this.popper = new Popper(range, tooltip, {
+        placement: "right"
+      });
+    }
+
+    // show
+    tooltip.classList.remove("d-none");
+
+    // hide after some seconds
+    if (this.timeout) {
+      window.clearTimeout(this.timeout);
+    }
+    this.timeout = window.setTimeout(() => {
+      tooltip.classList.add("d-none");
+      console.log("timeout");
+    }, 5_000);
+  }
+}
+
+document.addEventListener("DOMContentLoaded", function (event: Event): void {
+  window.customElements.define("tobago-range", Range);
+});


Mime
View raw message