Add scroll rate slider, with proper pug support (#131)

3 files changed, 27 insertions, 5 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 3b996f31..44779b01 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -276,6 +276,13 @@
                   </td>
                   <td class="value-number" id="hid-mouse-sens-value"></td>
                 </tr>
+                <tr>
+                  <td>Mouse Scroll Rate:</td>
+                  <td class="value-slider">
+                    <input class="slider" type="range" id="hid-mouse-scroll-slider">
+                  </td>
+                  <td class="value-number" id="hid-mouse-scroll-value"></td>
+                </tr>
                 <tr class="feature-disabled" id="hid-mouse-squash">
                       <td>Squash relative moves:</td>
                       <td align="right">
diff --git a/web/kvm/navbar-system.pug b/web/kvm/navbar-system.pug
index ea8cd6b8..fa1b47f3 100644
--- a/web/kvm/navbar-system.pug
+++ b/web/kvm/navbar-system.pug
@@ -80,6 +80,10 @@ li(id="system-dropdown" class="right")
 						td Relative sensitivity:
 						td(class="value-slider") #[input(disabled type="range" id="hid-mouse-sens-slider" class="slider")]
 						td(id="hid-mouse-sens-value" class="value-number")
+					tr
+						td Mouse Scroll Rate:
+						td(class="value-slider") #[input(type="range" id="hid-mouse-scroll-slider" class="slider")]
+						td(id="hid-mouse-scroll-value" class="value-number")
 					tr(id="hid-mouse-squash" class="feature-disabled")
 						+menu_switch_notable("hid-mouse-squash-switch", "Squash relative moves", true, true)
 					tr
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index e21d52a8..08cea815 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -44,6 +44,7 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 	var __relative_deltas = [];
 	var __relative_touch_pos = null;
 	var __relative_sens = 1.0;
+	var __relative_scroll_rate = 5;
 	var __wheel_delta = {"x": 0, "y": 0};
 
 	var __stream_hovered = false;
@@ -70,6 +71,7 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 		tools.storage.bindSimpleSwitch($("hid-mouse-reverse-scrolling-switch"), "hid.mouse.reverse_scrolling", false);
 		tools.slider.setParams($("hid-mouse-sens-slider"), 0.1, 1.9, 0.1, tools.storage.get("hid.mouse.sens", 1.0), __updateRelativeSens);
 		tools.slider.setParams($("hid-mouse-rate-slider"), 10, 100, 10, tools.storage.get("hid.mouse.rate", 100), __updateRate); // set __timer
+		tools.slider.setParams($("hid-mouse-scroll-slider"), 1, 100, 1, tools.storage.get("hid.mouse.scroll_rate", 5), __updateScrollRate);
 	};
 
 	/************************************************************************/
@@ -113,6 +115,12 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 		__timer = setInterval(__sendPlannedMove, value);
 	};
 
+	var __updateScrollRate = function(value) {
+		$("hid-mouse-scroll-value").innerHTML = value + " #";
+		tools.storage.set("hid.mouse.scroll_rate", value);
+		__relative_scroll_rate = value;
+	};
+
 	var __updateRelativeSens = function(value) {
 		$("hid-mouse-sens-value").innerHTML = value.toFixed(1);
 		tools.storage.set("hid.mouse.sens", value);
@@ -250,30 +258,33 @@ export function Mouse(__getGeometry, __recordWsEvent) {
 
 		event.preventDefault();
 
+		//set default rate of -5, but allow localStorage hid.mouse.scroll_rate value to be used.
+		var rate = -(__relative_scroll_rate);
 		if (!__absolute && !__isRelativeCaptured()) {
 			return;
 		}
 
 		let delta = {"x": 0, "y": 0};
-		if (tools.browser.is_firefox && !tools.browser.is_mac) {
+		//This is for firefox and chrome, but not on mac. Mac uses 5-lines-per-scroll.
+		if ((tools.browser.is_firefox || tools.browser.is_chrome) && !tools.browser.is_mac) {
 			if (event.deltaX !== 0) {
-				delta.x = event.deltaX / Math.abs(event.deltaX) * (-5);
+				delta.x = event.deltaX / Math.abs(event.deltaX) * (rate);
 			}
 			if (event.deltaY !== 0) {
-				delta.y = event.deltaY / Math.abs(event.deltaY) * (-5);
+				delta.y = event.deltaY / Math.abs(event.deltaY) * (rate);
 			}
 		} else {
 			let factor = (tools.browser.is_mac ? 5 : 1);
 
 			__wheel_delta.x += event.deltaX * factor; // Horizontal scrolling
 			if (Math.abs(__wheel_delta.x) >= 100) {
-				delta.x = __wheel_delta.x / Math.abs(__wheel_delta.x) * (-5);
+				delta.x = __wheel_delta.x / Math.abs(__wheel_delta.x) * (rate);
 				__wheel_delta.x = 0;
 			}
 
 			__wheel_delta.y += event.deltaY * factor; // Vertical scrolling
 			if (Math.abs(__wheel_delta.y) >= 100) {
-				delta.y = __wheel_delta.y / Math.abs(__wheel_delta.y) * (-5);
+				delta.y = __wheel_delta.y / Math.abs(__wheel_delta.y) * (rate);
 				__wheel_delta.y = 0;
 			}
 		}