From c619b5edbc8d41b381234535de933c3097824a69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9on=20Gersen?= Date: Sun, 1 May 2022 14:43:45 +0200 Subject: [PATCH] Add smooth-steps behaviour flag (#627) --- documentation/behaviour-option.php | 35 +++++++++++++++- documentation/behaviour-option/combined.js | 3 +- .../behaviour-option/smooth-steps.js | 17 ++++++++ src/nouislider.ts | 41 ++++++++++++++++--- 4 files changed, 88 insertions(+), 8 deletions(-) create mode 100644 documentation/behaviour-option/smooth-steps.js diff --git a/documentation/behaviour-option.php b/documentation/behaviour-option.php index f7f03673..fb56890f 100644 --- a/documentation/behaviour-option.php +++ b/documentation/behaviour-option.php @@ -26,6 +26,19 @@ +
+ +
+

Example configurations

@@ -212,13 +225,33 @@ + +

Smooth steps

+ +
+ +
+

With this option set, handles will ignore step values while dragging. Steps are applied when a handle is released. The "update" event fires when a handle is released.

+
+
+ + +
+
+ +
+ +
+
+ +

Combined options

-

Most 'behaviour' flags can be combined.

+

Most 'behaviour' flags can be combined. This example combines 'tap', 'drag' and 'smooth-steps'.

diff --git a/documentation/behaviour-option/combined.js b/documentation/behaviour-option/combined.js index 3654b366..f5e59fa4 100644 --- a/documentation/behaviour-option/combined.js +++ b/documentation/behaviour-option/combined.js @@ -2,7 +2,8 @@ var dragTapSlider = document.getElementById('combined'); noUiSlider.create(dragTapSlider, { start: [40, 60], - behaviour: 'drag-tap', + behaviour: 'drag-smooth-steps-tap', + step: 10, connect: true, range: { 'min': 20, diff --git a/documentation/behaviour-option/smooth-steps.js b/documentation/behaviour-option/smooth-steps.js new file mode 100644 index 00000000..87cc83c6 --- /dev/null +++ b/documentation/behaviour-option/smooth-steps.js @@ -0,0 +1,17 @@ +var smoothStepsSlider = document.getElementById('smooth-steps'); +var smoothStepsValues = document.getElementById('smooth-steps-values'); + +noUiSlider.create(smoothStepsSlider, { + start: [0, 100], + behaviour: 'smooth-steps', + step: 15, + connect: true, + range: { + 'min': 0, + 'max': 100 + } +}); + +smoothStepsSlider.noUiSlider.on('update', function (values) { + smoothStepsValues.innerHTML = values.join(' :: '); +}); diff --git a/src/nouislider.ts b/src/nouislider.ts index ea504300..727b0efc 100644 --- a/src/nouislider.ts +++ b/src/nouislider.ts @@ -152,6 +152,7 @@ interface Behaviour { tap: boolean; drag: boolean; dragAll: boolean; + smoothSteps: boolean; fixed: boolean; snap: boolean; hover: boolean; @@ -1126,6 +1127,7 @@ function testBehaviour(parsed: ParsedOptions, entry: unknown): void { const hover = entry.indexOf("hover") >= 0; const unconstrained = entry.indexOf("unconstrained") >= 0; const dragAll = entry.indexOf("drag-all") >= 0; + const smoothSteps = entry.indexOf("smooth-steps") >= 0; if (fixed) { if (parsed.handles !== 2) { @@ -1144,6 +1146,7 @@ function testBehaviour(parsed: ParsedOptions, entry: unknown): void { tap: tap || snap, drag: drag, dragAll: dragAll, + smoothSteps: smoothSteps, fixed: fixed, snap: snap, hover: hover, @@ -2081,6 +2084,16 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O } } + if (options.events.smoothSteps) { + data.handleNumbers.forEach(function (handleNumber) { + setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false); + }); + + data.handleNumbers.forEach(function (handleNumber: number) { + fireEvent("update", handleNumber); + }); + } + data.handleNumbers.forEach(function (handleNumber: number) { fireEvent("change", handleNumber); fireEvent("set", handleNumber); @@ -2448,7 +2461,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O to: number, lookBackward: boolean, lookForward: boolean, - getValue: boolean + getValue: boolean, + smoothSteps?: boolean ): number | false { let distance; @@ -2495,7 +2509,9 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O } } - to = scope_Spectrum.getStep(to); + if (!smoothSteps) { + to = scope_Spectrum.getStep(to); + } // Limit percentage to the 0 - 100 range to = limit(to); @@ -2528,6 +2544,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O // Store first handle now, so we still have it in case handleNumbers is reversed const firstHandle = handleNumbers[0]; + const smoothSteps = options.events.smoothSteps; + let b = [!upward, upward]; let f = [upward, !upward]; @@ -2549,7 +2567,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O proposals[handleNumber] + proposal, b[o], f[o], - false + false, + smoothSteps ); // Stop if one of the handles can't move. @@ -2571,7 +2590,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O // Step 2: Try to set the handles with the found percentage handleNumbers.forEach(function (handleNumber, o) { - state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state; + state = + setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state; }); // Step 3: If a handle moved, fire events @@ -2631,10 +2651,19 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O to: number | false, lookBackward: boolean, lookForward: boolean, - exactInput?: boolean + exactInput?: boolean, + smoothSteps?: boolean ): boolean { if (!exactInput) { - to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false); + to = checkHandlePosition( + scope_Locations, + handleNumber, + to, + lookBackward, + lookForward, + false, + smoothSteps + ); } if (to === false) {