slider bubble improvements

closes #1570
wled · Jan 23, 2021 · e0e6082 · e0e6082
1 parent 1f8d530
commit e0e6082
Show file tree

Hide file tree

Showing 4 changed files with 2,094 additions and 2,078 deletions.
diff --git a/wled00/data/index.css b/wled00/data/index.css
@@ -298,7 +298,7 @@ button {
 	top: -1px;
 	z-index: 1;
 	margin-top: 1px;
-	width: 274px;
+	width: auto;
 	margin: auto;
 	border-radius: 25px;
 }
@@ -432,20 +432,23 @@ img {
 }
 
 .sliderbubble {
-  width: 36px;
-  line-height: 24px;
-  background: var(--c-3);
-  position: absolute;
-  transform: translateX(-50%);
-  border-radius: 12px;
-  margin-left: 12px;
-  margin-top: 3px;
-  padding: 0px;
-  display: inline;
-}
-
-.hidden {
-	display: none;
+	width: 24px;
+	position: relative;
+	display: inline-block;
+	border-radius: 4px;
+	background: var(--c-3);
+	color: white;
+	padding: 2px 5px;
+	font-size: 14px;
+	right: 5px;
+	transition: visibility 0.25s ease, opacity 0.25s ease;
+	opacity: 0;
+	visibility: hidden;
+}
+
+output.sliderbubbleshow {
+	visibility: visible;
+	opacity: 1;
 }
 
 input[type=range] {
@@ -487,10 +490,6 @@ input[type=range]::-moz-range-thumb {
 	background: var(--c-f);
 	transform: translateY(7px);
 }
-input[type=range]:active + .sliderbubble {
-	display: inline;
-	transform: translateX(-50%);
-}
 
 #wwrap {
 	display: none;
@@ -904,6 +903,13 @@ input[type=number]::-webkit-outer-spin-button {
 	background: var(--c-sbh);
 }
 
+@media not all and (hover: none) {
+	.sliderwrap:hover + output.sliderbubble {
+		visibility: visible;
+		opacity: 1;
+	}
+}
+
 @media all and (max-width: 335px) {
 	.sliderbubble {
 		display: none;

diff --git a/wled00/data/index.htm b/wled00/data/index.htm
@@ -35,6 +35,7 @@
 					<input id="sliderBri" onchange="setBri()" oninput="updateTrail(this)" max="255" min="1" type="range" value="128" />
 					<div class="sliderdisplay"></div>
 				</div>
+				<output class="sliderbubble"></output>
 			</div>
 		</div>
 		<iframe id="liveview" src="about:blank"></iframe>
@@ -45,25 +46,38 @@
 	<div id="Colors" class="tabcontent">
 		<div id="picker" class="noslide"></div>
 		<div id="rgbwrap">
-			<div class="sliderwrap il">
-				<input id="sliderR" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,1)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
-			</div><br>
-			<div class="sliderwrap il">
-				<input id="sliderG" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,2)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
-			</div><br>
-			<div class="sliderwrap il">
-				<input id="sliderB" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,3)" max="255" min="0" type="range" value="128" />
-				<div class="sliderdisplay"></div>
-			</div><br>
+			<div id="rwrap" class="il">
+				<div class="sliderwrap il">
+					<input id="sliderR" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,1)" max="255" min="0" type="range" value="128" />
+					<div class="sliderdisplay"></div>
+				</div>
+				<output class="sliderbubble"></output>
+		  </div>
+			<br>
+			<div id="gwrap" class="il">
+				<div class="sliderwrap il">
+					<input id="sliderG" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,2)" max="255" min="0" type="range" value="128" />
+					<div class="sliderdisplay"></div>
+				</div>
+				<output class="sliderbubble"></output>
+			</div>
+			<br>
+			<div id="bwrap" class="il">
+				<div class="sliderwrap il">
+					<input id="sliderB" class="noslide" onchange="fromRgb()" oninput="updateTrail(this,3)" max="255" min="0" type="range" value="128" />
+					<div class="sliderdisplay"></div>
+				</div>
+				<output class="sliderbubble"></output>
+			</div>
+			<br>
 		</div>
 		<div id="wwrap">
 			<p class="labels">White channel</p>
 			<div class="sliderwrap il">
 				<input id="sliderW" class="noslide" onchange="setColor(0)" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
 				<div class="sliderdisplay"></div>
 			</div>
+			<output class="sliderbubble"></output>
 		</div>
 		<div id="qcs-w">
 			<div class="qcs" onclick="pC('#ff0000');" style="background-color:#ff0000;"></div>
@@ -87,7 +101,7 @@
 			<input id="hexc" type="text" class="noslide" onkeydown="hexEnter(this)" autocomplete="off" maxlength="8" />
 			<button id="hexcnf" class="xxs btn" onclick="fromHex();"><i class="icons btna-icon">&#xe390;</i></button>
 		</div>
-		<p class="labels">Color palette</p> 
+		<p class="labels">Color palette</p>
 		<div class="il">
 			<i class="icons sel-icon" onclick="tglHex()">&#xe2b3;</i>
 			<select class="btn sel" id="selectPalette" onchange="setPalette()">
@@ -103,18 +117,18 @@
 			<i class="icons slider-icon">&#xe325;</i>
 			<div class="sliderwrap il">
 				<input id="sliderSpeed" class="noslide" onchange="setSpeed()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
-				<output class="sliderbubble hidden"></output>
 				<div class="sliderdisplay"></div>
 			</div>
+			<output class="sliderbubble"></output>
 		</div>
 		<p class="labels">Effect intensity</p>
 		<div class="staytop" id="staytop1">
 			<i class="icons slider-icon" onclick="tglLabels()">&#xe409;</i>
 			<div class="sliderwrap il">
 				<input id="sliderIntensity" class="noslide" onchange="setIntensity()" oninput="updateTrail(this)" max="255" min="0" type="range" value="128" />
-				<output class="sliderbubble hidden"></output>
 				<div class="sliderdisplay"></div>
 			</div>
+			<output class="sliderbubble"></output>
 		</div>
 		<p class="labels">Effect mode</p>
 		<div class="staytop" id="staytop2">
@@ -125,13 +139,13 @@
 		</div>
 		<br>
 	</div>
-	
+
 	<div id="Segments" class="tabcontent">
 		<div id="segcont">
 			Loading...
 		</div>
 		<div id="segutil">
-			
+
 		</div>
 		<div id="segutil2">
 			<button class="btn btn-s" id="rsbtn" onclick="rSegs()">Reset segments</button>
@@ -140,7 +154,7 @@
 
 	<div id="Favorites" class="tabcontent">
 		<div id="putil">
-			
+
 		</div>
 		<div id="pql">
 
@@ -196,4 +210,4 @@
 <script src="rangetouch.js"></script>
 <script src="index.js"></script>
 </body>
-</html>
+</html>
diff --git a/wled00/data/index.js b/wled00/data/index.js
@@ -201,7 +201,6 @@ function onLoad() {
 	if (localStorage.getItem('pcm') == "true") togglePcMode(true);
 	var sls = d.querySelectorAll('input[type="range"]');
 	for (var sl of sls) {
-		sl.addEventListener('input', updateBubble, true);
 		sl.addEventListener('touchstart', toggleBubble);
 		sl.addEventListener('touchend', toggleBubble);
 	}
@@ -580,20 +579,14 @@ function updateTrail(e, slidercol)
 	}
 	var val = `linear-gradient(90deg, ${scol} ${progress}%, var(--c-4) ${progress}%)`;
 	e.parentNode.getElementsByClassName('sliderdisplay')[0].style.background = val;
-}
-
-function updateBubble(e)
-{
-	var bubble = e.target.parentNode.getElementsByTagName('output')[0];
-
-	if (bubble) {
-		bubble.innerHTML = e.target.value;
-	}
+	var bubble = e.parentNode.parentNode.getElementsByTagName('output')[0];
+	if (bubble) bubble.innerHTML = e.value;
 }
 
 function toggleBubble(e)
 {
-	e.target.parentNode.querySelector('output').classList.toggle('hidden');
+	var bubble = e.target.parentNode.parentNode.getElementsByTagName('output')[0];
+	bubble.classList.toggle('sliderbubbleshow');
 }
 
 function updateLen(s)