From d7b8b2b8464f02381dc77c43497f6a8255fbd61d Mon Sep 17 00:00:00 2001
From: Alexandre Colucci <alexandre.colucci@corsair.com>
Date: Mon, 27 May 2019 13:22:06 +0200
Subject: [PATCH] Add floating tooltip with suffix

---
 .../css/sdpi.css                              | 20 +++++++++++++++++++
 .../index_pi.html                             |  2 +-
 .../com.elgato.pisamples.sdPlugin/index_pi.js | 10 +++++-----
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css b/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css
index 254cf66..7dfbdf6 100644
--- a/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css
+++ b/Sources/com.elgato.pisamples.sdPlugin/css/sdpi.css
@@ -643,6 +643,26 @@ details.message h1 {
   color: var(--sdpi-color);
 }
 
+.sdpi-bottom-bar {
+  display: flex;
+  align-self: right;
+  margin-left: auto;
+  position: fixed;
+  right: 17px;
+  bottom: 0px;
+  user-select: none;
+}
+
+.sdpi-bottom-bar.right {
+  right: 0px;
+}
+
+.sdpi-bottom-bar button {
+  min-height: 20px !important;
+  height: 20px !important;
+}
+
+
 .sdpi-more-info-button {
   display: flex;
   align-self: right;
diff --git a/Sources/com.elgato.pisamples.sdPlugin/index_pi.html b/Sources/com.elgato.pisamples.sdPlugin/index_pi.html
index b58fc42..5a6c52f 100644
--- a/Sources/com.elgato.pisamples.sdPlugin/index_pi.html
+++ b/Sources/com.elgato.pisamples.sdPlugin/index_pi.html
@@ -204,7 +204,7 @@
                 <div class="sdpi-item-label">Range (with label)</div>
                 <div class="sdpi-item-value">
                     <span class="clickable" value=0>0</span>
-                    <input class="floating-tooltip" type="range" min="0" max="100" value=74>
+                    <input class="floating-tooltip" data-suffix="K" type="range" min="5" max="100" value=74>
                     <span class="clickable" value="100">100</span>
                 </div>
             </div>
diff --git a/Sources/com.elgato.pisamples.sdPlugin/index_pi.js b/Sources/com.elgato.pisamples.sdPlugin/index_pi.js
index 2857fc1..f22e30d 100644
--- a/Sources/com.elgato.pisamples.sdPlugin/index_pi.js
+++ b/Sources/com.elgato.pisamples.sdPlugin/index_pi.js
@@ -705,7 +705,7 @@ function prettify(node, level) {
 }
 
 function rangeToPercent(value, min, max) {
-    return ((value - min) / (max - min));
+    return (value / (max - min));
 };
 function initToolTips() {
     console.log("INITTOOLTIPS")
@@ -723,12 +723,12 @@ function initToolTip(element, tooltip) {
     const suffix = element.getAttribute('data-suffix') || '';
 
     const fn = () => {
-        const elementRect = element.getBoundingClientRect();
-        const w = elementRect.width - tw / 2;
+      const elementRect = element.getBoundingClientRect();
+      const w = elementRect.width - tw / 2;
       const percnt = rangeToPercent(element.value, element.min, element.max);
       tooltip.textContent = suffix != "" ? `${element.value} ${suffix}` : String(element.value);
-        tooltip.style.left = `${elementRect.left + Math.round(w * percnt) - tw / 4}px`;
-        tooltip.style.top = `${elementRect.top - 32}px`;
+      tooltip.style.left = `${elementRect.left + Math.round(w * percnt) - tw / 4}px`;
+      tooltip.style.top = `${elementRect.top - 32}px`;
     };
 
     if (element) {