Add disable/enable methods to disable slider or handles

leongersen · Feb 6, 2023 · bccf966 · bccf966
1 parent e1df7e8
commit bccf966
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 22 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,5 +1,8 @@
 # Changelog
 
+### 15.7.0 (*2023-02-06*)
+- Added: `disable` and `enable` methods to disable slider or handles (#1158, #1227);
+
 ### 15.6.1 (*2022-08-12*)
 - Fixed: (Typescript) type for keys in `range` (#1218);
 

diff --git a/dist/nouislider.d.ts b/dist/nouislider.d.ts
@@ -134,6 +134,8 @@ export interface API {
     set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
     setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
     reset: (fireSetEvent?: boolean) => void;
+    disable: (handleNumber?: number) => void;
+    enable: (handleNumber?: number) => void;
     options: Options;
     updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
     target: HTMLElement;

diff --git a/dist/nouislider.js b/dist/nouislider.js
@@ -959,6 +959,7 @@
             else if (handleNumber === options.handles - 1) {
                 addClass(handle, options.cssClasses.handleUpper);
             }
+            origin.handle = handle;
             return origin;
         }
         // Insert nodes for connect elements
@@ -1022,6 +1023,31 @@
             var handleOrigin = scope_Handles[handleNumber];
             return handleOrigin.hasAttribute("disabled");
         }
+        function disable(handleNumber) {
+            if (handleNumber !== null && handleNumber !== undefined) {
+                scope_Handles[handleNumber].setAttribute("disabled", "");
+                scope_Handles[handleNumber].handle.removeAttribute("tabindex");
+            }
+            else {
+                scope_Target.setAttribute("disabled", "");
+                scope_Handles.forEach(function (handle) {
+                    handle.handle.removeAttribute("tabindex");
+                });
+            }
+        }
+        function enable(handleNumber) {
+            if (handleNumber !== null && handleNumber !== undefined) {
+                scope_Handles[handleNumber].removeAttribute("disabled");
+                scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
+            }
+            else {
+                scope_Target.removeAttribute("disabled");
+                scope_Handles.forEach(function (handle) {
+                    handle.removeAttribute("disabled");
+                    handle.handle.setAttribute("tabindex", "0");
+                });
+            }
+        }
         function removeTooltips() {
             if (scope_Tooltips) {
                 removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -2199,6 +2225,8 @@
             set: valueSet,
             setHandle: valueSetHandle,
             reset: valueReset,
+            disable: disable,
+            enable: enable,
             // Exposed for unit testing, don't use this in your application.
             __moveHandles: function (upward, proposal, handleNumbers) {
                 moveHandles(upward, proposal, scope_Locations, handleNumbers);

diff --git a/dist/nouislider.min.js b/dist/nouislider.min.js
diff --git a/dist/nouislider.min.mjs b/dist/nouislider.min.mjs
diff --git a/dist/nouislider.mjs b/dist/nouislider.mjs
@@ -954,6 +954,7 @@ function scope(target, options, originalOptions) {
         else if (handleNumber === options.handles - 1) {
             addClass(handle, options.cssClasses.handleUpper);
         }
+        origin.handle = handle;
         return origin;
     }
     // Insert nodes for connect elements
@@ -1017,6 +1018,31 @@ function scope(target, options, originalOptions) {
         var handleOrigin = scope_Handles[handleNumber];
         return handleOrigin.hasAttribute("disabled");
     }
+    function disable(handleNumber) {
+        if (handleNumber !== null && handleNumber !== undefined) {
+            scope_Handles[handleNumber].setAttribute("disabled", "");
+            scope_Handles[handleNumber].handle.removeAttribute("tabindex");
+        }
+        else {
+            scope_Target.setAttribute("disabled", "");
+            scope_Handles.forEach(function (handle) {
+                handle.handle.removeAttribute("tabindex");
+            });
+        }
+    }
+    function enable(handleNumber) {
+        if (handleNumber !== null && handleNumber !== undefined) {
+            scope_Handles[handleNumber].removeAttribute("disabled");
+            scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
+        }
+        else {
+            scope_Target.removeAttribute("disabled");
+            scope_Handles.forEach(function (handle) {
+                handle.removeAttribute("disabled");
+                handle.handle.setAttribute("tabindex", "0");
+            });
+        }
+    }
     function removeTooltips() {
         if (scope_Tooltips) {
             removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -2194,6 +2220,8 @@ function scope(target, options, originalOptions) {
         set: valueSet,
         setHandle: valueSetHandle,
         reset: valueReset,
+        disable: disable,
+        enable: enable,
         // Exposed for unit testing, don't use this in your application.
         __moveHandles: function (upward, proposal, handleNumbers) {
             moveHandles(upward, proposal, scope_Locations, handleNumbers);

diff --git a/documentation/more.php b/documentation/more.php
@@ -20,15 +20,17 @@
 
 	<div class="view">
 
-		<p>Disabling a slider is identical to disabling a checkbox or textarea; add the <code class="language-markup">disabled</code> attribute.</p>
+        <p>A slider can be disabled by calling the <code>disable</code> method in the API.</p>
 
 		<p>A disabled slider can't be changed by user interaction (sliding, clicking or touching), but its value can still be changed using the <code>.set()</code> method.</p>
 
 		<p>CSS can be used to show the disabled state. The default stylesheet also sets a <code>not-allowed</code> cursor.</p>
 
 		<p>The slider below is disabled when the checkbox is checked, and re-enabled when it is unchecked.</p>
 
-		<p>Individual handles can be disabled by adding a <code>disabled</code> attribute to a <code>.noUi-origin</code> element.</p>
+		<p>Individual handles can be disabled by calling the <code>disable</code> with a zero-index handle number. Disabling an individual handle will also prevent it from having <code>focus</code>.</p>
+
+        <p>The slider or handles can re re-enabled using the <code>enable</code> method.</p>
 
 		<div class="example">
 			<div id="disable1"></div>

diff --git a/documentation/more/disable-all.js b/documentation/more/disable-all.js
@@ -1,9 +1,8 @@
 // To disable
-slider.setAttribute('disabled', true);
+slider.noUiSlider.disable();
 
 // To re-enable
-slider.removeAttribute('disabled');
+slider.noUiSlider.enable();
 
 // To disable one handle
-var origins = slider.querySelectorAll('.noUi-origin');
-origins[0].setAttribute('disabled', true);
+slider.noUiSlider.disable(1);
diff --git a/documentation/more/disable.js b/documentation/more/disable.js
@@ -2,17 +2,16 @@ var slider1 = document.getElementById('disable1'),
     slider2 = document.getElementById('disable2'),
     checkbox1 = document.getElementById('checkbox1'),
     checkbox2 = document.getElementById('checkbox2'),
-    checkbox3 = document.getElementById('checkbox3'),
-    origins = slider2.querySelectorAll('.noUi-origin');
+    checkbox3 = document.getElementById('checkbox3');
 
-function toggle(element) {
+function toggle(checkbox, slider, handleNumber) {
 
     // If the checkbox is checked, disabled the slider.
     // Otherwise, re-enable it.
-    if (this.checked) {
-        element.setAttribute('disabled', true);
+    if (checkbox.checked) {
+        slider.noUiSlider.disable(handleNumber);
     } else {
-        element.removeAttribute('disabled');
+        slider.noUiSlider.enable(handleNumber);
     }
 }
 
@@ -34,13 +33,13 @@ noUiSlider.create(slider2, {
 });
 
 checkbox1.addEventListener('click', function () {
-    toggle.call(this, slider1);
+    toggle(this, slider1);
 });
 
 checkbox2.addEventListener('click', function () {
-    toggle.call(this, origins[0]);
+    toggle(this, slider2, 0);
 });
 
 checkbox3.addEventListener('click', function () {
-    toggle.call(this, origins[1]);
+    toggle(this, slider2, 1);
 });
diff --git a/documentation/reference.php b/documentation/reference.php
@@ -231,6 +231,16 @@
                 <td><code>slider.noUiSlider.reset()</code></td>
                 <td><em>[none]</em></td>
             </tr>
+            <tr>
+                <td><a href="/nouislider/more/#section-disable">disable</a></td>
+                <td><code>slider.noUiSlider.disable()</code></td>
+                <td><em>[none]</em>, <code>"number"</code></td>
+            </tr>
+            <tr>
+                <td><a href="/nouislider/more/#section-disable">enable</a></td>
+                <td><code>slider.noUiSlider.enable()</code></td>
+                <td><em>[none]</em>, <code>"number"</code></td>
+            </tr>
             <tr>
                 <td><a href="/nouislider/more/#section-update">updateOptions</a></td>
                 <td><code>slider.noUiSlider.updateOptions(...)</code></td>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nouislider",
-  "version": "15.6.1",
+  "version": "15.7.0",
   "main": "dist/nouislider.js",
   "style": "dist/nouislider.min.css",
   "types": "dist/nouislider.d.ts",

diff --git a/src/nouislider.ts b/src/nouislider.ts
@@ -70,6 +70,7 @@ type SubRange = number | WrappedSubRange;
 interface Range {
     min: SubRange;
     max: SubRange;
+
     [key: `${number}%`]: SubRange;
 }
 
@@ -204,6 +205,8 @@ export interface API {
     set: (input: number | string | (number | string)[], fireSetEvent?: boolean, exactInput?: boolean) => void;
     setHandle: (handleNumber: number, value: number | string, fireSetEvent?: boolean, exactInput?: boolean) => void;
     reset: (fireSetEvent?: boolean) => void;
+    disable: (handleNumber?: number) => void;
+    enable: (handleNumber?: number) => void;
     options: Options;
     updateOptions: (optionsToUpdate: UpdatableOptions, fireSetEvent: boolean) => void;
     target: HTMLElement;
@@ -218,6 +221,10 @@ interface TargetElement extends HTMLElement {
     noUiSlider?: API;
 }
 
+interface Origin extends HTMLElement {
+    handle: HTMLElement;
+}
+
 interface CSSStyleDeclarationIE10 extends CSSStyleDeclaration {
     msTransform?: string;
 }
@@ -1357,7 +1364,7 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
     // Slider DOM Nodes
     const scope_Target = target;
     let scope_Base: HTMLElement;
-    let scope_Handles: HTMLElement[];
+    let scope_Handles: Origin[];
     let scope_Connects: (HTMLElement | false)[];
     let scope_Pips: HTMLElement | null;
     let scope_Tooltips: (HTMLElement | false)[] | null;
@@ -1393,7 +1400,7 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
     }
 
     // Append a origin to the base
-    function addOrigin(base: HTMLElement, handleNumber: number): HTMLElement {
+    function addOrigin(base: HTMLElement, handleNumber: number): Origin {
         const origin = addNodeTo(base, options.cssClasses.origin);
         const handle = addNodeTo(origin, options.cssClasses.handle);
 
@@ -1426,7 +1433,9 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
             addClass(handle, options.cssClasses.handleUpper);
         }
 
-        return origin;
+        (origin as Origin).handle = handle;
+
+        return origin as Origin;
     }
 
     // Insert nodes for connect elements
@@ -1504,6 +1513,31 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         return handleOrigin.hasAttribute("disabled");
     }
 
+    function disable(handleNumber?: number): void {
+        if (handleNumber !== null && handleNumber !== undefined) {
+            scope_Handles[handleNumber].setAttribute("disabled", "");
+            scope_Handles[handleNumber].handle.removeAttribute("tabindex");
+        } else {
+            scope_Target.setAttribute("disabled", "");
+            scope_Handles.forEach(function (handle) {
+                handle.handle.removeAttribute("tabindex");
+            });
+        }
+    }
+
+    function enable(handleNumber?: number): void {
+        if (handleNumber !== null && handleNumber !== undefined) {
+            scope_Handles[handleNumber].removeAttribute("disabled");
+            scope_Handles[handleNumber].handle.setAttribute("tabindex", "0");
+        } else {
+            scope_Target.removeAttribute("disabled");
+            scope_Handles.forEach(function (handle) {
+                handle.removeAttribute("disabled");
+                handle.handle.setAttribute("tabindex", "0");
+            });
+        }
+    }
+
     function removeTooltips(): void {
         if (scope_Tooltips) {
             removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
@@ -3013,6 +3047,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         set: valueSet,
         setHandle: valueSetHandle,
         reset: valueReset,
+        disable: disable,
+        enable: enable,
         // Exposed for unit testing, don't use this in your application.
         __moveHandles: function (upward: boolean, proposal: number, handleNumbers: number[]) {
             moveHandles(upward, proposal, scope_Locations, handleNumbers);