From 4e55971068895c9d215789f110ff42a01158b6a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=C5=A0a=C5=A1ko?= Date: Tue, 10 Aug 2021 19:09:23 +0200 Subject: [PATCH] Feature/keyboard multiplier (#1151) * Dockerize the documentation * Fix linting rule * Add keyboardMultiplier option * Polishing the readme and documentation * Formatting * Remove dockerisation --- .eslintrc.json | 3 +- documentation/slider-options.php | 42 +++++++++++++++---- .../slider-options/keyboard-support-link.js | 9 ++++ .../slider-options/keyboard-support.js | 31 +++++++++++--- src/nouislider.ts | 25 +++++++++-- 5 files changed, 94 insertions(+), 16 deletions(-) create mode 100644 documentation/slider-options/keyboard-support-link.js diff --git a/.eslintrc.json b/.eslintrc.json index 67d9aade..ff3c8b3e 100644 --- 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 index af14c64c..33326b76 100644 --- a/documentation/slider-options.php +++ b/documentation/slider-options.php @@ -450,32 +450,60 @@

Handles in the slider can receive keyboard focus and be moved by arrow keys.

+

Keyboard support can be disabled by setting the keyboardSupport option to false.

+

When moved by the arrow keys on a keyboard, handles obey the step value for the range they are in. When moving in a range that has no step value set, handles move by 10% of the range they are in. - This default can be changed using the keyboardDefaultStep option.

+ This default can be changed using the keyboardDefaultStep option. (view example 1)

+ +

Changing the keyboardMultiplier option will multiply the default step by the set amount. + This is useful when dealing with larger value ranges but smaller step size. (view example 2)

-

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 keyboardPageMultiplier option.

+

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 keyboardPageMultiplier option. (view example 2)

-

Keyboard support can be disabled by setting the keyboardSupport option to false.

+


Example 1

+ +

+ Here the keyboard step size is 20 which is equal to range / keyboardDefaultStep. +

- +

+
+ +

Example 2

+ +

+ Here the keyboard step size is 50 which is equal to step * keyboardMultiplier. +

+ +
+
+

+ + +
+ keyboardSupport Default
true
- Accepted values
true, false
- + +
Show the slider value
+ +
+ +
diff --git a/documentation/slider-options/keyboard-support-link.js b/documentation/slider-options/keyboard-support-link.js new file mode 100644 index 00000000..94c50455 --- /dev/null +++ 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 index 8fd5b840..85499128 100644 --- 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 index d14287a2..f9143e90 100644 --- 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