|
| 1 | +/** |
| 2 | + * @param slider HtmlElement with an initialized slider |
| 3 | + * @param threshold Minimum proximity (in percentages) to merge tooltips |
| 4 | + * @param separator String joining tooltips |
| 5 | + */ |
| 6 | +function mergeTooltips(slider, threshold, separator) { |
| 7 | + |
| 8 | + var textIsRtl = getComputedStyle(slider).direction === 'rtl'; |
| 9 | + var isRtl = slider.noUiSlider.options.direction === 'rtl'; |
| 10 | + var isVertical = slider.noUiSlider.options.orientation === 'vertical'; |
| 11 | + var tooltips = slider.noUiSlider.getTooltips(); |
| 12 | + var origins = slider.noUiSlider.getOrigins(); |
| 13 | + |
| 14 | + // Move tooltips into the origin element. The default stylesheet handles this. |
| 15 | + tooltips.forEach(function (tooltip, index) { |
| 16 | + if (tooltip) { |
| 17 | + origins[index].appendChild(tooltip); |
| 18 | + } |
| 19 | + }); |
| 20 | + |
| 21 | + slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) { |
| 22 | + |
| 23 | + var pools = [[]]; |
| 24 | + var poolPositions = [[]]; |
| 25 | + var poolValues = [[]]; |
| 26 | + var atPool = 0; |
| 27 | + |
| 28 | + // Assign the first tooltip to the first pool, if the tooltip is configured |
| 29 | + if (tooltips[0]) { |
| 30 | + pools[0][0] = 0; |
| 31 | + poolPositions[0][0] = positions[0]; |
| 32 | + poolValues[0][0] = values[0]; |
| 33 | + } |
| 34 | + |
| 35 | + for (var i = 1; i < positions.length; i++) { |
| 36 | + if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) { |
| 37 | + atPool++; |
| 38 | + pools[atPool] = []; |
| 39 | + poolValues[atPool] = []; |
| 40 | + poolPositions[atPool] = []; |
| 41 | + } |
| 42 | + |
| 43 | + if (tooltips[i]) { |
| 44 | + pools[atPool].push(i); |
| 45 | + poolValues[atPool].push(values[i]); |
| 46 | + poolPositions[atPool].push(positions[i]); |
| 47 | + } |
| 48 | + } |
| 49 | + |
| 50 | + pools.forEach(function (pool, poolIndex) { |
| 51 | + var handlesInPool = pool.length; |
| 52 | + |
| 53 | + for (var j = 0; j < handlesInPool; j++) { |
| 54 | + var handleNumber = pool[j]; |
| 55 | + |
| 56 | + if (j === handlesInPool - 1) { |
| 57 | + var offset = 0; |
| 58 | + |
| 59 | + poolPositions[poolIndex].forEach(function (value) { |
| 60 | + offset += 1000 - 10 * value; |
| 61 | + }); |
| 62 | + |
| 63 | + var direction = isVertical ? 'bottom' : 'right'; |
| 64 | + var last = isRtl ? 0 : handlesInPool - 1; |
| 65 | + var lastOffset = 1000 - 10 * poolPositions[poolIndex][last]; |
| 66 | + offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset; |
| 67 | + |
| 68 | + // Center this tooltip over the affected handles |
| 69 | + tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator); |
| 70 | + tooltips[handleNumber].style.display = 'block'; |
| 71 | + tooltips[handleNumber].style[direction] = offset + '%'; |
| 72 | + } else { |
| 73 | + // Hide this tooltip |
| 74 | + tooltips[handleNumber].style.display = 'none'; |
| 75 | + } |
| 76 | + } |
| 77 | + }); |
| 78 | + }); |
| 79 | +} |
0 commit comments