From c8522b9b81238e805ef9e07c9c3f0563db9de4ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20M=C3=B8nster?= <tobias.m@hey.com>
Date: Thu, 18 Aug 2022 09:06:04 +0200
Subject: [PATCH] Makes active pip text darker to contrast with non-active pips
 (#12807)

* Makes active pip text darker to contrast with non-active pips

* Adds active class to slider component and updates functionality to accommodate multiple pips

* Update umbrangeslider.directive.js

* Adds click handler,accommodates decimal values and moves styles to single file
---
 .../components/umbrangeslider.directive.js    | 25 ++++++++++-
 .../src/installer/steps/user.controller.js    | 13 ++++++
 .../src/installer/steps/user.html             |  2 +-
 .../src/less/components/umb-range-slider.less |  7 +++
 .../src/less/installer.less                   | 43 +------------------
 5 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
index 262f70f62b..8f6ad20fea 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
@@ -139,6 +139,8 @@ For extra details about options and events take a look here: https://refreshless
             });
 
             setUpCallbacks();
+            setUpActivePipsHandling();
+            addPipClickHandler();
 
             // Refresh the scope
             $scope.$applyAsync();
@@ -299,7 +301,28 @@ For extra details about options and events take a look here: https://refreshless
                 });
             });
         }
-
+      function setUpActivePipsHandling() {
+        let activePip = [null, null];
+        sliderInstance.noUiSlider.on('update', function (values,handle) {
+          if(activePip[handle]){
+            activePip[handle].classList.remove("noUi-value-active");
+          }
+          sliderInstance.querySelectorAll('.noUi-value').forEach(pip => {
+            if (Number(values[handle]) === Number(pip.getAttribute('data-value'))) {
+              activePip[handle] = pip;
+            }
+          });
+          activePip[handle].classList.add("noUi-value-active");
+        });
+      }
+      function addPipClickHandler(){
+          sliderInstance.querySelectorAll('.noUi-value').forEach(function(pip){
+            pip.addEventListener('click', function () {
+              const value = pip.getAttribute('data-value');
+              sliderInstance.noUiSlider.set(value);
+            });
+          });
+      }
     }
 
     angular.module('umbraco.directives').component('umbRangeSlider', umbRangeSlider);
diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js b/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js
index b4aa8eedf5..6028fb48c5 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.controller.js
@@ -58,6 +58,19 @@ angular.module("umbraco.install").controller("Umbraco.Install.UserController", f
 
       const pips = consentSlider.querySelectorAll('.noUi-value');
 
+      let activePip = [null, null];
+      consentSlider.noUiSlider.on('update', function (values,handle) {
+        if(activePip[handle]){
+          activePip[handle].classList.remove("noUi-value-active");
+        }
+        consentSlider.querySelectorAll('.noUi-value').forEach(pip => {
+          if (Number(values[handle]) === Number(pip.getAttribute('data-value'))) {
+            activePip[handle] = pip;
+          }
+        });
+        activePip[handle].classList.add("noUi-value-active");
+      });
+
       $(consentSlider).on('$destroy', function () {
         consentSlider.noUiSlider.off();
       });
diff --git a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
index 9049512c8c..7f9d568d70 100644
--- a/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
+++ b/src/Umbraco.Web.UI.Client/src/installer/steps/user.html
@@ -47,7 +47,7 @@
             <label class="control-label">Telemetry</label>
             <div class="controls">
               <div id="consentSliderWrapper">
-                <div id="consentSlider"></div>
+                <div id="consentSlider" class="umb-range-slider"></div>
 
                 <umb-tooltip ng-if="consentTooltip.show" event="consentTooltip.event">
                   <div ng-bind-html="consentTooltip.description"></div>
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
index 42a13c7dda..57273a6a4e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
@@ -52,3 +52,10 @@
 .umb-range-slider .noUi-marker.noUi-marker-horizontal {
     width: 1px;
 }
+
+.noUi-value {
+  cursor: pointer;
+  &-active{
+    color: @black;
+  }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/installer.less b/src/Umbraco.Web.UI.Client/src/less/installer.less
index 61895ff793..da67217037 100644
--- a/src/Umbraco.Web.UI.Client/src/less/installer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/installer.less
@@ -18,6 +18,7 @@
 // Umbraco Components
 @import "components/umb-loader.less";
 @import "components/tooltip/umb-tooltip.less";
+@import "components/umb-range-slider.less";
 
 
 [ng\:cloak],
@@ -285,45 +286,3 @@ select {
   margin-bottom: 40px;
 }
 
-#consentSlider {
-  .noUi-target {
-    background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%);
-    box-shadow: none;
-    border-radius: 20px;
-    height: 8px;
-    border: 1px solid @inputBorder;
-
-    &:focus,
-    &:focus-within {
-      border-color: @inputBorderFocus;
-    }
-  }
-
-  .noUi-handle {
-    cursor: grab;
-    border-radius: 100px;
-    border: none;
-    box-shadow: none;
-    width: 20px !important;
-    height: 20px !important;
-    right: -10px !important; // half the handle width
-    top: -1px;
-    background-color: @blueExtraDark;
-  }
-
-  .noUi-handle::before {
-    display: none;
-  }
-
-  .noUi-handle::after {
-    display: none;
-  }
-
-  .noUi-value {
-    cursor: pointer;
-  }
-
-  .noUi-pips-horizontal {
-    height: 40px;
-  }
-}