From 3792a7b5a478133550022d465223d2181ec0a55a Mon Sep 17 00:00:00 2001 From: Leon Gersen Date: Wed, 6 May 2020 17:48:34 +0200 Subject: [PATCH] Add example for merging overlapping tooltips (#1032) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Ömür Yıldırım --- documentation/_run/index.php | 2 +- documentation/assets/base.css | 2 +- .../examples-content/merging-tooltips.php | 29 +++++++ documentation/examples.php | 4 +- .../examples/merging-tooltips-slider.js | 13 +++ documentation/examples/merging-tooltips.js | 79 +++++++++++++++++++ documentation/slider-options.php | 2 + 7 files changed, 128 insertions(+), 3 deletions(-) create mode 100644 documentation/examples-content/merging-tooltips.php create mode 100644 documentation/examples/merging-tooltips-slider.js create mode 100644 documentation/examples/merging-tooltips.js diff --git a/documentation/_run/index.php b/documentation/_run/index.php index 538c1c24..1b80418a 100644 --- a/documentation/_run/index.php +++ b/documentation/_run/index.php @@ -10,7 +10,7 @@ - + diff --git a/documentation/assets/base.css b/documentation/assets/base.css index 8401b43e..9ceb36b9 100644 --- a/documentation/assets/base.css +++ b/documentation/assets/base.css @@ -120,7 +120,7 @@ content: ""; } .viewer-header.open + .viewer-content { - max-height: 2000px; + max-height: 2500px; } .options { diff --git a/documentation/examples-content/merging-tooltips.php b/documentation/examples-content/merging-tooltips.php new file mode 100644 index 00000000..a31053c3 --- /dev/null +++ b/documentation/examples-content/merging-tooltips.php @@ -0,0 +1,29 @@ + +

Merging overlapping tooltips

+ +
+ +
+

Issue #1032 asks to merge overlapping tooltips. As this feature is outside the scope of the tooltips-feature in noUiSlider, this example can be used to implement this feature using the event system.

+ +
+
+ + +
+
+ +
+
Initializing the slider
+ +
+ +
+ +
Merging overlapping tooltips
+ +
+ +
+
+
diff --git a/documentation/examples.php b/documentation/examples.php index b28efe8b..be4f2438 100644 --- a/documentation/examples.php +++ b/documentation/examples.php @@ -6,8 +6,9 @@
    -
  • Color Picker
    • +
  • Color picker
  • Using dates
    • +
  • Merging overlapping tooltips
  • Working with HTML5 input types
  • Using non linear ranges
  • Locking two sliders together
    • @@ -29,6 +30,7 @@ + diff --git a/documentation/examples/merging-tooltips-slider.js b/documentation/examples/merging-tooltips-slider.js new file mode 100644 index 00000000..cf67ad92 --- /dev/null +++ b/documentation/examples/merging-tooltips-slider.js @@ -0,0 +1,13 @@ +var mergingTooltipSlider = document.getElementById('merging-tooltips'); + +noUiSlider.create(mergingTooltipSlider, { + start: [20, 32, 50, 70, 80, 90], + connect: true, + tooltips: [false, true, true, true, true, true], + range: { + 'min': 0, + 'max': 100 + } +}); + +mergeTooltips(mergingTooltipSlider, 15, ' - '); diff --git a/documentation/examples/merging-tooltips.js b/documentation/examples/merging-tooltips.js new file mode 100644 index 00000000..8349767b --- /dev/null +++ b/documentation/examples/merging-tooltips.js @@ -0,0 +1,79 @@ +/** + * @param slider HtmlElement with an initialized slider + * @param threshold Minimum proximity (in percentages) to merge tooltips + * @param separator String joining tooltips + */ +function mergeTooltips(slider, threshold, separator) { + + var textIsRtl = getComputedStyle(slider).direction === 'rtl'; + var isRtl = slider.noUiSlider.options.direction === 'rtl'; + var isVertical = slider.noUiSlider.options.orientation === 'vertical'; + var tooltips = slider.noUiSlider.getTooltips(); + var origins = slider.noUiSlider.getOrigins(); + + // Move tooltips into the origin element. The default stylesheet handles this. + tooltips.forEach(function (tooltip, index) { + if (tooltip) { + origins[index].appendChild(tooltip); + } + }); + + slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { + + var pools = [[]]; + var poolPositions = [[]]; + var poolValues = [[]]; + var atPool = 0; + + // Assign the first tooltip to the first pool, if the tooltip is configured + if (tooltips[0]) { + pools[0][0] = 0; + poolPositions[0][0] = positions[0]; + poolValues[0][0] = values[0]; + } + + for (var i = 1; i < positions.length; i++) { + if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) { + atPool++; + pools[atPool] = []; + poolValues[atPool] = []; + poolPositions[atPool] = []; + } + + if (tooltips[i]) { + pools[atPool].push(i); + poolValues[atPool].push(values[i]); + poolPositions[atPool].push(positions[i]); + } + } + + pools.forEach(function (pool, poolIndex) { + var handlesInPool = pool.length; + + for (var j = 0; j < handlesInPool; j++) { + var handleNumber = pool[j]; + + if (j === handlesInPool - 1) { + var offset = 0; + + poolPositions[poolIndex].forEach(function (value) { + offset += 1000 - 10 * value; + }); + + var direction = isVertical ? 'bottom' : 'right'; + var last = isRtl ? 0 : handlesInPool - 1; + var lastOffset = 1000 - 10 * poolPositions[poolIndex][last]; + offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset; + + // Center this tooltip over the affected handles + tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator); + tooltips[handleNumber].style.display = 'block'; + tooltips[handleNumber].style[direction] = offset + '%'; + } else { + // Hide this tooltip + tooltips[handleNumber].style.display = 'none'; + } + } + }); + }); +} diff --git a/documentation/slider-options.php b/documentation/slider-options.php index 8a968371..f3331b66 100644 --- a/documentation/slider-options.php +++ b/documentation/slider-options.php @@ -358,6 +358,8 @@

    Tooltips can be removed from a slider using the removeTooltips() method.

    +

    To merge overlapping tooltips, refer to this example.

    +