Merge branch 'pips-tooltips-update'

README.md

@@ -20,19 +20,23 @@ An extensive documentation, including **examples**, **options** and **configurat
 Changelog
 ---------
 
+### 13.1.0 (*???*)
+- Fixed: Updating `pips` using `updateOptions` (#933);
+- Added: Updating `tooltips` using `updateOptions` (#946);
+
 ### 13.0.0 (*2018-02-06*)
 noUiSlider 13 does not include any breaking API changes.
 Keyboard support is now built-in, so any custom implementations should be removed when upgrading.
 Alternatively, built-in keyboard support can be disabled using `keyboardSupport: false`.
-- Added: Built-in keyboard support (#724)
-- Added: `.noUi-touch-area` element (#924)
-- Fixed: Dragging a range does not check for handle disabled state (#938)
-- Fixed: Incorrect CSS transform in pips (#931)
+- Added: Built-in keyboard support (#724);
+- Added: `.noUi-touch-area` element (#924);
+- Fixed: Dragging a range does not check for handle disabled state (#938);
+- Fixed: Incorrect CSS transform in pips (#931);
 
 ### 12.1.0 (*2018-10-25*)
-- Added: `unconstrained` behaviour (#747, #815, #913)
-- Added: `setHandle` API (#917)
-- Changed: point to `nouislider.js` in `package.json`.`main` (#921)
+- Added: `unconstrained` behaviour (#747, #815, #913);
+- Added: `setHandle` API (#917);
+- Changed: point to `nouislider.js` in `package.json`.`main` (#921);
 
 ### 12.0.0 (*2018-09-14*) 
 - Change: License changed to MIT;

documentation/more.php

@@ -72,7 +72,7 @@
 
 	<div class="view">
 
-		<p>noUiSlider has an update method that can change the <code>'margin'</code>, <code>'limit'</code>, <code>'step'</code>, <code>'range'</code>, <code>'pips'</code>, <code>'animate'</code> and <code>'snap'</code> options.</p>
+        <p>noUiSlider has an update method that can change the <code>'margin'</code>, <code>'padding'</code>, <code>'limit'</code>, <code>'step'</code>, <code>'range'</code>, <code>'pips'</code>, <code>'tooltips'</code>, <code>'animate'</code> and <code>'snap'</code> options.</p>
 
 		<p>All other options require changes to the slider's HTML or event bindings.</p>
 
@@ -87,9 +87,11 @@
 
 		<p>Options that can not be updated will be ignored without errors.</p>
 
+        <p>The value <code>null</code> can be used to unset a previously set value.</p>
+
 		<p>The <code>'update'</code> event fires after updating the slider.</p>
 
-		<p>By default, the sliders <strong>values remain unchanged</strong>. To update the slider values, <code>newOptions</code> may also contain a <code>start</code> property</a> that matches the signature of the <a href="/nouislider/slider-read-write/#section-setting"><code>.set()</code></a> method.</p>
+		<p>By default, the sliders <strong>values remain unchanged</strong>. To update the slider values, <code>newOptions</code> may also contain a <code>start</code> property that matches the signature of the <a href="/nouislider/slider-read-write/#section-setting"><code>.set()</code></a> method.</p>
 
 		<p>The <code>'set'</code> event fires when the slider values are restored. If this is unwanted, you can pass <code>false</code> as the second parameter, <code>fireSetEvent</code>.</p>
 
@@ -99,15 +101,17 @@
 
 		<div class="example">
 			<div id="slider-update"></div>
-			<span class="example-val" id="slider-update-value"></span>
-
-			<button class="update-button" id="update-1">Set range [20, 50]</button>
-			<button class="update-button" id="update-2">Set range [10, 40]</button>
-
-			<?php run('update-setup'); ?>
-			<?php run('update'); ?>
+			<span class="example-val" style="margin-top: 70px;" id="slider-update-value"></span>
+            <button class="update-button" id="update-1">Set range [20, 50]</button>
+            <button class="update-button" id="update-2">Set range [10, 40]</button>
+            <button class="update-button" id="update-3">Tooltips, no Pips</button>
+            <button class="update-button" id="update-4">Pips, no Tooltips</button>
+            <button class="update-button" id="update-5">Add padding</button>
+            <button class="update-button" id="update-6">Remove padding</button>
+            <?php run('update-setup'); ?>
+            <?php run('update'); ?>
 		</div>
-	</div>
+    </div>
 
 	<div class="side">
 

documentation/more/update-setup.js

@@ -6,6 +6,7 @@ noUiSlider.create(updateSlider, {
         'min': 0,
         'max': 40
     },
+    padding: 6,
     start: 20,
     margin: 2,
     step: 2

documentation/more/update.js

@@ -1,19 +1,53 @@
 var button1 = document.getElementById('update-1');
 var button2 = document.getElementById('update-2');
+var button3 = document.getElementById('update-3');
+var button4 = document.getElementById('update-4');
+var button5 = document.getElementById('update-5');
+var button6 = document.getElementById('update-6');
 
-function updateSliderRange(min, max) {
+button1.addEventListener('click', function () {
     updateSlider.noUiSlider.updateOptions({
         range: {
-            'min': min,
-            'max': max
+            'min': 20,
+            'max': 50
         }
     });
-}
-
-button1.addEventListener('click', function () {
-    updateSliderRange(20, 50);
 });
 
 button2.addEventListener('click', function () {
-    updateSliderRange(10, 40);
+    updateSlider.noUiSlider.updateOptions({
+        range: {
+            'min': 10,
+            'max': 40
+        }
+    });
+});
+
+button3.addEventListener('click', function () {
+    updateSlider.noUiSlider.updateOptions({
+        tooltips: true,
+        pips: null
+    });
+});
+
+button4.addEventListener('click', function () {
+    updateSlider.noUiSlider.updateOptions({
+        tooltips: false,
+        pips: {
+            mode: 'range',
+            density: 3
+        }
+    });
+});
+
+button5.addEventListener('click', function () {
+    updateSlider.noUiSlider.updateOptions({
+        padding: 10,
+    });
+});
+
+button6.addEventListener('click', function () {
+    updateSlider.noUiSlider.updateOptions({
+        padding: null,
+    });
 });

documentation/reference.php

@@ -221,6 +221,11 @@
                 <td><code>slider.noUiSlider.removePips()</code></td>
                 <td><em>[none]</em></td>
             </tr>
+            <tr>
+                <td><a href="/nouislider/slider-options/#section-tooltips">removeTooltips</a></td>
+                <td><code>slider.noUiSlider.removeTooltips()</code></td>
+                <td><em>[none]</em></td>
+            </tr>
             </tbody>
         </table>
     </div>

documentation/slider-options.php

@@ -347,6 +347,8 @@
 
 		<p>noUiSlider can provide a basic tooltip using the <code>tooltips</code> option. This option can also accept <a href="/nouislider/slider-read-write/#section-formatting">formatting options</a> to format the tooltips content. In that case, pass an <code>array</code> with a formatter for each handle, <code>true</code> to use the default or <code>false</code> to display no tooltip.</p>
 
+        <p>Tooltips can be removed from a slider using <code>removeTooltips</code>.</p>
+
 		<div class="example overflow">
 			<div id="slider-tooltips"></div>
 			<?php run('tooltips'); ?>

src/nouislider.js

@@ -957,6 +957,7 @@
         var scope_Handles;
         var scope_Connects;
         var scope_Pips;
+        var scope_Tooltips;
 
         // Override for the 'animate' option
         var scope_ShouldAnimate = true;
@@ -1093,13 +1094,27 @@
             return handleOrigin.hasAttribute("disabled");
         }
 
+        function removeTooltips() {
+            if (scope_Tooltips) {
+                removeEvent("update.tooltips");
+                scope_Tooltips.forEach(function(tooltip) {
+                    if (tooltip) {
+                        removeElement(tooltip);
+                    }
+                });
+                scope_Tooltips = null;
+            }
+        }
+
         // The tooltips option is a shorthand for using the 'update' event.
         function tooltips() {
+            removeTooltips();
+
             // Tooltips are added with options.tooltips in original order.
-            var tips = scope_Handles.map(addTooltip);
+            scope_Tooltips = scope_Handles.map(addTooltip);
 
-            bindEvent("update", function(values, handleNumber, unencoded) {
-                if (!tips[handleNumber]) {
+            bindEvent("update.tooltips", function(values, handleNumber, unencoded) {
+                if (!scope_Tooltips[handleNumber]) {
                     return;
                 }
 
@@ -1109,7 +1124,7 @@
                     formattedValue = options.tooltips[handleNumber].to(unencoded[handleNumber]);
                 }
 
-                tips[handleNumber].innerHTML = formattedValue;
+                scope_Tooltips[handleNumber].innerHTML = formattedValue;
             });
         }
 
@@ -2283,10 +2298,22 @@
             // If 'snap' and 'step' are not passed, they should remain unchanged.
             var v = valueGet();
 
-            var updateAble = ["margin", "limit", "padding", "range", "animate", "snap", "step", "format", "pips"];
+            var updateAble = [
+                "margin",
+                "limit",
+                "padding",
+                "range",
+                "animate",
+                "snap",
+                "step",
+                "format",
+                "pips",
+                "tooltips"
+            ];
 
             // Only change options that we're actually passed to update.
             updateAble.forEach(function(name) {
+                // Check for undefined. null removes the value.
                 if (optionsToUpdate[name] !== undefined) {
                     originalOptions[name] = optionsToUpdate[name];
                 }
@@ -2311,6 +2338,15 @@
             // Update pips, removes existing.
             if (options.pips) {
                 pips(options.pips);
+            } else {
+                removePips();
+            }
+
+            // Update tooltips, removes existing.
+            if (options.tooltips) {
+                tooltips();
+            } else {
+                removeTooltips();
             }
 
             // Invalidate the current positioning so valueSet forces an update.
@@ -2363,6 +2399,7 @@
             updateOptions: updateOptions,
             target: scope_Target, // Issue #597
             removePips: removePips,
+            removeTooltips: removeTooltips,
             pips: pips // Issue #594
         };