Rename keyboardPageMultiplier, add keyboardDefaultStep, add docs, fix…

… test
leongersen · Jun 27, 2020 · f442a1d · f442a1d
1 parent ef9bf78
commit f442a1d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 20 deletions.
diff --git a/documentation/reference.php b/documentation/reference.php
@@ -117,6 +117,18 @@
                 <td><code>false</code></td>
                 <td><code>true</code></td>
             </tr>
+            <tr>
+                <td><a href="/nouislider/slider-options/#section-keyboard-support">keywordDefaultStep</a></td>
+                <td><code>number</code></td>
+                <td><code>false</code></td>
+                <td><code>10</code></td>
+            </tr>
+            <tr>
+                <td><a href="/nouislider/slider-options/#section-keyboard-support">keywordPageMultiplier</a></td>
+                <td><code>number</code></td>
+                <td><code>false</code></td>
+                <td><code>5</code></td>
+            </tr>
             <tr>
                 <td><a href="/nouislider/behaviour-option/">behaviour</a></td>
                 <td><code>string</code></td>

diff --git a/documentation/slider-options.php b/documentation/slider-options.php
@@ -451,9 +451,13 @@
         <p>Handles in the slider can receive keyboard focus and be moved by arrow keys.</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% of the range they are in.</p>
+            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>
 
-        <p>Keyboard support can be disabled:</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>keywordPageMultiplier</code> option.</p>
+
+        <p>Keyboard support can be disabled by setting the <code>keyboardSupport</code> option to <code>false</code>.</p>
 
         <div class="example overflow">
             <div id="slider-keyboard"></div>

diff --git a/documentation/slider-options/keyboard-support.js b/documentation/slider-options/keyboard-support.js
@@ -2,7 +2,9 @@ var keyboardSlider = document.getElementById('slider-keyboard');
 
 noUiSlider.create(keyboardSlider, {
     start: [10, 90],
-    keyboardSupport: false,
+    keyboardSupport: true, // Default true
+    keywordPageMultiplier: 10, // Default 5
+    keywordDefaultStep: 5, // Default 10
     range: {
         'min': 0,
         'max': 100

diff --git a/src/nouislider.js b/src/nouislider.js
@@ -653,12 +653,20 @@
         parsed.singleStep = entry;
     }
 
-    function testPageStep(parsed, entry) {
+    function testKeyboardPageMultiplier(parsed, entry) {
         if (!isNumeric(entry)) {
-            throw new Error("noUiSlider (" + VERSION + "): 'pageStep' is not numeric.");
+            throw new Error("noUiSlider (" + VERSION + "): 'keyboardPageMultiplier' is not numeric.");
         }
 
-        parsed.pageStep = entry;
+        parsed.keyboardPageMultiplier = entry;
+    }
+
+    function testKeyboardDefaultStep(parsed, entry) {
+        if (!isNumeric(entry)) {
+            throw new Error("noUiSlider (" + VERSION + "): 'keyboardDefaultStep' is not numeric.");
+        }
+
+        parsed.keyboardDefaultStep = entry;
     }
 
     function testRange(parsed, entry) {
@@ -994,7 +1002,8 @@
         // Tests are executed in the order they are presented here.
         var tests = {
             step: { r: false, t: testStep },
-            pageStep: { r: false, t: testPageStep },
+            keyboardPageMultiplier: { r: false, t: testKeyboardPageMultiplier },
+            keyboardDefaultStep: { r: false, t: testKeyboardDefaultStep },
             start: { r: true, t: testStart },
             connect: { r: true, t: testConnect },
             direction: { r: true, t: testDirection },
@@ -1024,7 +1033,8 @@
             keyboardSupport: true,
             cssPrefix: "noUi-",
             cssClasses: cssClasses,
-            pageStep: 5
+            keyboardPageMultiplier: 5,
+            keyboardDefaultStep: 10
         };
 
         // AriaFormat defaults to regular format, if any.
@@ -1865,8 +1875,8 @@
 
         // Move closest handle to tapped location.
         function eventTap(event) {
-            // Erroneous events seem to be passed in occasionally on iOS/iPadOS after user finishes interacting with 
-            // the slider. They appear to be of type MouseEvent, yet they don't have usual properties set. Ignore tap 
+            // Erroneous events seem to be passed in occasionally on iOS/iPadOS after user finishes interacting with
+            // the slider. They appear to be of type MouseEvent, yet they don't have usual properties set. Ignore tap
             // events that have no touches or buttons associated with them.
             if (!event.buttons && !event.touches) {
                 return false;
@@ -1959,7 +1969,7 @@
             var to;
 
             if (isUp || isDown) {
-                var multiplier = options.pageStep;
+                var multiplier = options.keyboardPageMultiplier;
                 var direction = isDown ? 0 : 1;
                 var steps = getNextStepsForHandle(handleNumber);
                 var step = steps[direction];
@@ -1971,7 +1981,11 @@
 
                 // No step set, use the default of 10% of the sub-range
                 if (step === false) {
-                    step = scope_Spectrum.getDefaultStep(scope_Locations[handleNumber], isDown, 10);
+                    step = scope_Spectrum.getDefaultStep(
+                        scope_Locations[handleNumber],
+                        isDown,
+                        options.keyboardDefaultStep
+                    );
                 }
 
                 if (isLargeUp || isLargeDown) {

diff --git a/tests/slider.html b/tests/slider.html
@@ -31,13 +31,13 @@
 
     <script>
         function simulateMousedown(clickTarget, x, y) {
-            // Based on https://stackoverflow.com/a/19570419/1367431
-            var clickEvent = document.createEvent('MouseEvents');
-            clickEvent.initMouseEvent(
-                'mousedown', true, true, window, 0,
-                0, 0, x, y, false, false,
-                false, false, 0, null
-            );
+            var clickEvent = new MouseEvent('mousedown', {
+                clientX: x,
+                clientY: y,
+                bubbles: true,
+                buttons: 1
+            });
+
             clickTarget.dispatchEvent(clickEvent);
         }
     </script>

diff --git a/tests/slider_keyboard.js b/tests/slider_keyboard.js
@@ -126,7 +126,7 @@ QUnit.test("Keyboard support", function (assert) {
             'min': 0,
             'max': 10
         },
-        pageStep: 2
+        keyboardPageMultiplier: 2
     });
 
     assert.deepEqual(slider.noUiSlider.get(), '5.00');