fix #517 allow the slider to show the current value

DominoKit · Nov 10, 2024 · cbe309b · cbe309b
1 parent c496ae8
commit cbe309b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 10 deletions.
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java b/domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java
@@ -27,4 +27,12 @@ public interface SlidersConfig extends ComponentConfig {
   default CssClass getDefaultSliderThumbStyle() {
     return SliderStyles.dui_slider_thumb_rounded;
   }
+
+  /**
+   * @return a boolean to set if the slider thumb disappears or not after finishes dragging the
+   *     slider
+   */
+  default boolean autoHideThumb() {
+    return true;
+  }
 }
diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java
@@ -30,6 +30,8 @@
 import elemental2.dom.HTMLDivElement;
 import java.util.HashSet;
 import java.util.Set;
+import org.dominokit.domino.ui.config.HasComponentConfig;
+import org.dominokit.domino.ui.config.SlidersConfig;
 import org.dominokit.domino.ui.elements.DivElement;
 import org.dominokit.domino.ui.elements.InputElement;
 import org.dominokit.domino.ui.elements.SpanElement;
@@ -58,7 +60,7 @@
  * @see BaseDominoElement
  */
 public class Slider extends BaseDominoElement<HTMLDivElement, Slider>
-    implements HasChangeListeners<Slider, Double>, SliderStyles {
+    implements HasChangeListeners<Slider, Double>, SliderStyles, HasComponentConfig<SlidersConfig> {
   private final DivElement root;
   private final InputElement input;
   private final SpanElement thumb;
@@ -70,6 +72,7 @@ public class Slider extends BaseDominoElement<HTMLDivElement, Slider>
   private boolean changeListenersPaused;
   private SwapCssClass dui_thumb_style =
       SwapCssClass.of(DominoUIConfig.CONFIG.getUIConfig().getDefaultSliderThumbStyle());
+  private boolean autoHideThumb = DominoUIConfig.CONFIG.getUIConfig().autoHideThumb();
 
   /**
    * Creates a slider with a specified maximum value.
@@ -128,13 +131,7 @@ public Slider(double max, double min, double value) {
     setValue(value);
     EventListener downEvent =
         mouseDownEvent -> {
-          this.oldValue = getValue();
-          input.addCss(dui_active);
-          this.mouseDown = true;
-          if (withThumb) {
-            showThumb();
-            evaluateThumbPosition();
-          }
+          startSliding();
         };
     EventListener moveMouseListener =
         mouseMoveEvent -> {
@@ -145,13 +142,20 @@ public Slider(double max, double min, double value) {
             }
           }
         };
-    EventListener leaveMouseListener = evt -> hideThumb();
+    EventListener leaveMouseListener =
+        evt -> {
+          if (isAutoHideThumb()) {
+            hideThumb();
+          }
+        };
 
     EventListener upEvent =
         mouseUpEvent -> {
           mouseDown = false;
           input.removeCss(dui_active);
-          hideThumb();
+          if (isAutoHideThumb()) {
+            hideThumb();
+          }
         };
     input.addEventListener(change.getName(), evt -> triggerChangeListeners(oldValue, getValue()));
 
@@ -170,6 +174,22 @@ public Slider(double max, double min, double value) {
     input.addEventListener(blur.getName(), leaveMouseListener);
 
     init(this);
+    onAttached(
+        mutationRecord -> {
+          if (!autoHideThumb) {
+            startSliding();
+          }
+        });
+  }
+
+  private void startSliding() {
+    this.oldValue = getValue();
+    input.addCss(dui_active);
+    this.mouseDown = true;
+    if (withThumb) {
+      showThumb();
+      evaluateThumbPosition();
+    }
   }
 
   /**
@@ -408,6 +428,15 @@ public Slider setShowThumb(boolean withThumb) {
     return this;
   }
 
+  public Slider setAutoHideThumb(boolean autoHideThumb) {
+    this.autoHideThumb = autoHideThumb;
+    return this;
+  }
+
+  public boolean isAutoHideThumb() {
+    return this.autoHideThumb;
+  }
+
   /**
    * Returns the root HTML div element of the slider.
    *