From f9167916779542bf800226aa1792abca12954de2 Mon Sep 17 00:00:00 2001 From: egorrishe Date: Fri, 12 Jul 2019 18:07:44 +0300 Subject: [PATCH 1/4] feature: margin as array - custom for each handle --- documentation/slider-options.php | 18 +++++-- documentation/slider-options/margin-array.js | 12 +++++ src/nouislider.js | 52 ++++++++++++++++++-- 3 files changed, 74 insertions(+), 8 deletions(-) create mode 100644 documentation/slider-options/margin-array.js diff --git a/documentation/slider-options.php b/documentation/slider-options.php index 36b559f4..ba5efc26 100644 --- a/documentation/slider-options.php +++ b/documentation/slider-options.php @@ -82,7 +82,7 @@

The connect option can be used to control the bar between the handles or the edges of the slider.

-

If you are using one handle, set the value to either 'upper' or 'lower'. +

If you are using one handle, set the value to either 'upper' or 'lower'.

@@ -129,7 +129,7 @@
-

When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.

+

When using two handles or more, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.

@@ -139,12 +139,21 @@
+

When using more than 2 handles, you can specify custom margin for each range.

+ +
+
+ +
+
Default
none
Accepted values -
number
+
number,
+ array[number] +
@@ -156,6 +165,9 @@
+ +
+
diff --git a/documentation/slider-options/margin-array.js b/documentation/slider-options/margin-array.js new file mode 100644 index 00000000..74da63e4 --- /dev/null +++ b/documentation/slider-options/margin-array.js @@ -0,0 +1,12 @@ +var marginSlider2 = document.getElementById('slider-margin2'); + +noUiSlider.create(marginSlider2, { + start: [10, 50, 90], + margin: [15, 30], + tooltips: true, + step: 1, + range: { + 'min': 0, + 'max': 100 + } +}); diff --git a/src/nouislider.js b/src/nouislider.js index 9bb9cf71..bf410640 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -625,8 +625,25 @@ } function testMargin(parsed, entry) { + if (Array.isArray(entry)) { + if (!entry.length || entry.length !== parsed.handles - 1) { + throw new Error("noUiSlider (" + VERSION + "): 'margin' option doesn't match handle count."); + } + + parsed.margin = []; + for (var i = 0; i < entry.length; ++i) { + if (!isNumeric(entry[i])) { + throw new Error("noUiSlider (" + VERSION + "): 'margin' option must be either number or array of numbers."); + } + + testMargin(parsed, entry[i]); + } + + return; + } + if (!isNumeric(entry)) { - throw new Error("noUiSlider (" + VERSION + "): 'margin' option must be numeric."); + throw new Error("noUiSlider (" + VERSION + "): 'margin' option must be either number or array of numbers."); } // Issue #582 @@ -634,9 +651,14 @@ return; } - parsed.margin = parsed.spectrum.getMargin(entry); + var parsedMargin = parsed.spectrum.getMargin(entry); + if (Array.isArray(parsed.margin)) { + parsed.margin.push(parsedMargin); + } else { + parsed.margin = parsedMargin; + } - if (!parsed.margin) { + if (!parsedMargin) { throw new Error("noUiSlider (" + VERSION + "): 'margin' option is only supported on linear sliders."); } } @@ -1963,12 +1985,15 @@ // For sliders with multiple handles, limit movement to the other handle. // Apply the margin option by adding it to the handle positions. if (scope_Handles.length > 1 && !options.events.unconstrained) { + var isIncrese = reference[handleNumber] < to, + margin = getMargin(handleNumber, isIncrese); + if (lookBackward && handleNumber > 0) { - to = Math.max(to, reference[handleNumber - 1] + options.margin); + to = Math.max(to, reference[handleNumber - 1] + margin); } if (lookForward && handleNumber < scope_Handles.length - 1) { - to = Math.min(to, reference[handleNumber + 1] - options.margin); + to = Math.min(to, reference[handleNumber + 1] - margin); } } @@ -2010,6 +2035,23 @@ return to; } + function getMargin(handleNumber, isIncrese) { + if (!Array.isArray(options.margin)) + return options.margin; + + var i; + + if (handleNumber === 0) { + i = 0; + } else if (options.margin.length === handleNumber) { + i = handleNumber - 1; + } else { + i = isIncrese ? handleNumber : handleNumber - 1; + } + + return options.margin[i]; + } + // Uses slider orientation to create CSS rules. a = base value; function inRuleOrder(v, a) { var o = options.ort; From 07ff850334238a73d844ec0608d3bbfa50ed9e32 Mon Sep 17 00:00:00 2001 From: egorrishe Date: Fri, 12 Jul 2019 18:53:12 +0300 Subject: [PATCH 2/4] margin as array: refactoring --- src/nouislider.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/nouislider.js b/src/nouislider.js index bf410640..35c28444 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -626,22 +626,24 @@ function testMargin(parsed, entry) { if (Array.isArray(entry)) { - if (!entry.length || entry.length !== parsed.handles - 1) { - throw new Error("noUiSlider (" + VERSION + "): 'margin' option doesn't match handle count."); - } - - parsed.margin = []; - for (var i = 0; i < entry.length; ++i) { - if (!isNumeric(entry[i])) { - throw new Error("noUiSlider (" + VERSION + "): 'margin' option must be either number or array of numbers."); - } + testMarginArray(parsed, entry); + } else { + testMarginNumeric(parsed, entry); + } + } - testMargin(parsed, entry[i]); - } + function testMarginArray(parsed, entry) { + if (!entry.length || entry.length !== parsed.handles - 1) { + throw new Error("noUiSlider (" + VERSION + "): 'margin' option doesn't match handle count."); + } - return; + parsed.margin = []; + for (var i = 0; i < entry.length; ++i) { + testMarginNumeric(parsed, entry[i]); } + } + function testMarginNumeric(parsed, entry) { if (!isNumeric(entry)) { throw new Error("noUiSlider (" + VERSION + "): 'margin' option must be either number or array of numbers."); } From 67a2d39b88583f15ead0c97df8f8134e566d3b87 Mon Sep 17 00:00:00 2001 From: egorrishe Date: Mon, 15 Jul 2019 14:56:51 +0300 Subject: [PATCH 3/4] margin as array: fix logic --- src/nouislider.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/nouislider.js b/src/nouislider.js index 35c28444..41b24c51 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -1987,14 +1987,15 @@ // For sliders with multiple handles, limit movement to the other handle. // Apply the margin option by adding it to the handle positions. if (scope_Handles.length > 1 && !options.events.unconstrained) { - var isIncrese = reference[handleNumber] < to, - margin = getMargin(handleNumber, isIncrese); + var margin; if (lookBackward && handleNumber > 0) { + margin = getMargin(handleNumber, false); to = Math.max(to, reference[handleNumber - 1] + margin); } if (lookForward && handleNumber < scope_Handles.length - 1) { + margin = getMargin(handleNumber, true); to = Math.min(to, reference[handleNumber + 1] - margin); } } @@ -2037,7 +2038,7 @@ return to; } - function getMargin(handleNumber, isIncrese) { + function getMargin(handleNumber, lookForward) { if (!Array.isArray(options.margin)) return options.margin; @@ -2048,7 +2049,7 @@ } else if (options.margin.length === handleNumber) { i = handleNumber - 1; } else { - i = isIncrese ? handleNumber : handleNumber - 1; + i = lookForward ? handleNumber : handleNumber - 1; } return options.margin[i]; From 3a66bd02c9eedb872d8344cf3f14649a37606c62 Mon Sep 17 00:00:00 2001 From: egorrishe Date: Wed, 17 Jul 2019 00:09:17 +0300 Subject: [PATCH 4/4] format changes --- src/nouislider.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/nouislider.js b/src/nouislider.js index 41b24c51..db76f0da 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -2039,8 +2039,7 @@ } function getMargin(handleNumber, lookForward) { - if (!Array.isArray(options.margin)) - return options.margin; + if (!Array.isArray(options.margin)) return options.margin; var i;