Feature/keyboard multiplier (#1151)

* Dockerize the documentation * Fix linting rule * Add keyboardMultiplier option * Polishing the readme and documentation * Formatting * Remove dockerisation
leongersen · Aug 10, 2021 · 4e55971 · 4e55971
1 parent 0d3fc23
commit 4e55971
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 16 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -14,7 +14,8 @@
         "one-var": ["error", "never"],
         "no-var": "off",
         "no-console": "error",
-        "prefer-spread": "off"
+        "prefer-spread": "off",
+        "@typescript-eslint/no-explicit-any": "off"
     },
     "env": {
         "browser": true,

diff --git a/documentation/slider-options.php b/documentation/slider-options.php
@@ -450,32 +450,60 @@
 
         <p>Handles in the slider can receive keyboard focus and be moved by arrow keys.</p>
 
+		<p>Keyboard support can be disabled by setting the <code>keyboardSupport</code> option to <code>false</code>.</p>
+
         <p>When moved by the arrow keys on a keyboard, handles obey the <code>step</code> value for the range they are in.
             When moving in a range that has no <code>step</code> value set, handles move by 10% <i>of the range they are in</i>.
-            This default can be changed using the <code>keyboardDefaultStep</code> option.</p>
+            This default can be changed using the <code>keyboardDefaultStep</code> option. (<a href="#kb-support-example-1">view example 1</a>)</p>
+
+		<p>Changing the <code>keyboardMultiplier</code> option will multiply the default step by the set amount.
+			This is useful when dealing with larger value ranges but smaller step size. (<a href="#kb-support-example-2">view example 2</a>)</p>
 
-        <p>The Page Up and Page Down keys can be used to make larger steps through the slider range. By default, the page keys
-            multiply the default step by 5. This can be changed using the <code>keyboardPageMultiplier</code> option.</p>
+		<p>The Page Up and Page Down keys can be used to make larger steps through the slider range. By default, the page keys
+            multiply the default step by 5. This can be changed using the <code>keyboardPageMultiplier</code> option. (<a href="#kb-support-example-2">view example 2</a>)</p>
 
-        <p>Keyboard support can be disabled by setting the <code>keyboardSupport</code> option to <code>false</code>.</p>
+		<h3 id="kb-support-example-1"><br>Example 1</h3>
+
+		<p>
+			Here the keyboard step size is <code>20</code> which is equal to <code>range / keyboardDefaultStep</code>.
+		</p>
 
         <div class="example overflow">
             <div id="slider-keyboard"></div>
-            <?php run('keyboard-support'); ?>
+			<p class="example-val" id="slider-keyboard-value"></p>
+		</div>
+
+		<h3 id="kb-support-example-2">Example 2</h3>
+
+		<p>
+			Here the keyboard step size is <code>50</code> which is equal to <code>step * keyboardMultiplier</code>.
+		</p>
+
+		<div class="example overflow">
+			<div id="slider-keyboard-2"></div>
+			<p class="example-val" id="slider-keyboard-2-value"></p>
         </div>
 
+		<?php run('keyboard-support'); ?>
+		<?php run('keyboard-support-link'); ?>
+
         <div class="options">
+			<strong>keyboardSupport</strong>
             <strong>Default</strong>
             <div><code>true</code></div>
-
             <strong>Accepted values</strong>
             <div><code>true</code>, <code>false</code></div>
         </div>
     </div>
 
     <div class="side">
-
         <?php code('keyboard-support'); ?>
+
+		<div class="viewer-header">Show the slider value</div>
+
+		<div class="viewer-content">
+			<?php code('keyboard-support-link'); ?>
+		</div>
     </div>
 
 </section>

diff --git a/documentation/slider-options/keyboard-support-link.js b/documentation/slider-options/keyboard-support-link.js
@@ -0,0 +1,9 @@
+var keyboardSupportValue = document.getElementById('slider-keyboard-value');
+keyboardSupport.noUiSlider.on('update', function (values, handle) {
+    keyboardSupportValue.innerHTML = values[handle];
+});
+
+var keyboardSupport2Value = document.getElementById('slider-keyboard-2-value');
+keyboardSupport2.noUiSlider.on('update', function (values, handle) {
+    keyboardSupport2Value.innerHTML = values[handle];
+});
diff --git a/documentation/slider-options/keyboard-support.js b/documentation/slider-options/keyboard-support.js
@@ -1,12 +1,33 @@
-var keyboardSlider = document.getElementById('slider-keyboard');
+/**
+ * Example 1
+ */
+var keyboardSupport = document.getElementById('slider-keyboard')
 
-noUiSlider.create(keyboardSlider, {
-    start: [10, 90],
-    keyboardSupport: true, // Default true
+noUiSlider.create(keyboardSupport, {
+    start: 10,
+    keyboardSupport: true,      // Default true
+    keyboardDefaultStep: 5,     // Default 10
     keyboardPageMultiplier: 10, // Default 5
-    keyboardDefaultStep: 5, // Default 10
     range: {
         'min': 0,
         'max': 100
     }
 });
+
+/**
+ * Example 2
+ */
+var keyboardSupport2 = document.getElementById('slider-keyboard-2')
+
+noUiSlider.create(keyboardSupport2, {
+    start: 100,
+    step: 1,
+    keyboardSupport: true,      // Default true
+    keyboardDefaultStep: 5,     // Default 10
+    keyboardPageMultiplier: 100,// Default 5
+    keyboardMultiplier: 50,     // Default 1
+    range: {
+        'min': 0,
+        'max': 1000
+    }
+});
diff --git a/src/nouislider.ts b/src/nouislider.ts
@@ -136,6 +136,7 @@ export interface Options extends UpdatableOptions {
     behaviour?: string;
     keyboardSupport?: boolean;
     keyboardPageMultiplier?: number;
+    keyboardMultiplier?: number;
     keyboardDefaultStep?: number;
     documentElement?: HTMLElement;
     cssPrefix?: string;
@@ -166,6 +167,7 @@ interface ParsedOptions {
     tooltips?: (boolean | PartialFormatter)[];
     keyboardSupport: boolean;
     keyboardPageMultiplier: number;
+    keyboardMultiplier: number;
     keyboardDefaultStep: number;
     documentElement?: HTMLElement;
     cssPrefix?: string | false;
@@ -916,6 +918,14 @@ function testKeyboardPageMultiplier(parsed: ParsedOptions, entry: unknown): void
     parsed.keyboardPageMultiplier = entry;
 }
 
+function testKeyboardMultiplier(parsed: ParsedOptions, entry: unknown): void {
+    if (!isNumeric(entry)) {
+        throw new Error("noUiSlider: 'keyboardMultiplier' is not numeric.");
+    }
+
+    parsed.keyboardMultiplier = entry;
+}
+
 function testKeyboardDefaultStep(parsed: ParsedOptions, entry: unknown): void {
     if (!isNumeric(entry)) {
         throw new Error("noUiSlider: 'keyboardDefaultStep' is not numeric.");
@@ -1249,6 +1259,7 @@ function testOptions(options: Options): ParsedOptions {
     const tests: { [key in keyof Options]: { r: boolean; t: (parsed: ParsedOptions, entry: unknown) => void } } = {
         step: { r: false, t: testStep },
         keyboardPageMultiplier: { r: false, t: testKeyboardPageMultiplier },
+        keyboardMultiplier: { r: false, t: testKeyboardMultiplier },
         keyboardDefaultStep: { r: false, t: testKeyboardDefaultStep },
         start: { r: true, t: testStart },
         connect: { r: true, t: testConnect },
@@ -1280,6 +1291,7 @@ function testOptions(options: Options): ParsedOptions {
         cssPrefix: "noUi-",
         cssClasses: cssClasses,
         keyboardPageMultiplier: 5,
+        keyboardMultiplier: 1,
         keyboardDefaultStep: 10
     } as UpdatableOptions;
 
@@ -2239,7 +2251,6 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         let to;
 
         if (isUp || isDown) {
-            const multiplier = options.keyboardPageMultiplier;
             const direction = isDown ? 0 : 1;
             const steps = getNextStepsForHandle(handleNumber);
             let step = steps[direction];
@@ -2259,7 +2270,9 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
             }
 
             if (isLargeUp || isLargeDown) {
-                step *= multiplier;
+                step *= options.keyboardPageMultiplier;
+            } else {
+                step *= options.keyboardMultiplier;
             }
 
             // Step over zero-length ranges (#948);
@@ -2482,7 +2495,13 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
 
     // Moves handle(s) by a percentage
     // (bool, % to move, [% where handle started, ...], [index in scope_Handles, ...])
-    function moveHandles(upward: boolean, proposal: number, locations: number[], handleNumbers: number[], connect?: HTMLElement): void {
+    function moveHandles(
+        upward: boolean,
+        proposal: number,
+        locations: number[],
+        handleNumbers: number[],
+        connect?: HTMLElement
+    ): void {
         const proposals = locations.slice();
 
         // Store first handle now, so we still have it in case handleNumbers is reversed