noUiSlider 14.1.0

Author: leongersen

CHANGELOG.MD

@@ -1,5 +1,9 @@
 # Changelog
 
+### 14.1.0 (*2019-12-04*)
+- Fixed: Styling requires a root `html` node, so noUiSlider can't be used in shadow dom (#1035);
+- Added: Support for PageUp/PageDown and Home/End keys in keyboard support (#1036);
+
 ### 14.0.3 (*2019-10-10*)
 - Fixed: Initialising handle values near the slider edge does not always respect `margin` (#1009);
 

distribute/nouislider.css

@@ -1,4 +1,4 @@
-/*! nouislider - 14.0.3 - 10/10/2019 */
+/*! nouislider - 14.1.0 - 12/4/2019 */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.
@@ -18,7 +18,6 @@
 }
 .noUi-target {
   position: relative;
-  direction: ltr;
 }
 .noUi-base,
 .noUi-connects {
@@ -39,7 +38,7 @@
   position: absolute;
   z-index: 1;
   top: 0;
-  left: 0;
+  right: 0;
   -ms-transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
   -webkit-transform-style: preserve-3d;
@@ -56,9 +55,9 @@
 }
 /* Offset direction
  */
-html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
-  left: auto;
-  right: 0;
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  left: 0;
+  right: auto;
 }
 /* Give origins 0 height/width so they don't interfere with clicking the
  * connect elements.
@@ -94,7 +93,7 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
 .noUi-horizontal .noUi-handle {
   width: 34px;
   height: 28px;
-  left: -17px;
+  right: -17px;
   top: -6px;
 }
 .noUi-vertical {
@@ -103,12 +102,12 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
 .noUi-vertical .noUi-handle {
   width: 28px;
   height: 34px;
-  left: -6px;
+  right: -6px;
   top: -17px;
 }
-html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
-  right: -17px;
-  left: auto;
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  left: -17px;
+  right: auto;
 }
 /* Styling;
  * Giving the connect element a border radius causes issues with using transform: scale

distribute/nouislider.js

@@ -1,4 +1,4 @@
-/*! nouislider - 14.0.3 - 10/10/2019 */
+/*! nouislider - 14.1.0 - 12/4/2019 */
 (function(factory) {
     if (typeof define === "function" && define.amd) {
         // AMD. Register as an anonymous module.
@@ -13,7 +13,7 @@
 })(function() {
     "use strict";
 
-    var VERSION = "14.0.3";
+    var VERSION = "14.1.0";
 
     //region Helper Methods
 
@@ -893,6 +893,8 @@
                 connects: "connects",
                 ltr: "ltr",
                 rtl: "rtl",
+                textDirectionLtr: "txt-dir-ltr",
+                textDirectionRtl: "txt-dir-rtl",
                 draggable: "draggable",
                 drag: "state-drag",
                 tap: "state-tap",
@@ -1090,6 +1092,14 @@
                 addClass(addTarget, options.cssClasses.vertical);
             }
 
+            var textDirection = getComputedStyle(addTarget).direction;
+
+            if (textDirection === "ltr") {
+                addClass(addTarget, options.cssClasses.textDirectionLtr);
+            } else {
+                addClass(addTarget, options.cssClasses.textDirectionRtl);
+            }
+
             return addNodeTo(addTarget, options.cssClasses.base);
         }
 
@@ -1798,47 +1808,72 @@
 
             var horizontalKeys = ["Left", "Right"];
             var verticalKeys = ["Down", "Up"];
+            var largeStepKeys = ["PageDown", "PageUp"];
+            var edgeKeys = ["Home", "End"];
 
             if (options.dir && !options.ort) {
                 // On an right-to-left slider, the left and right keys act inverted
                 horizontalKeys.reverse();
             } else if (options.ort && !options.dir) {
                 // On a top-to-bottom slider, the up and down keys act inverted
                 verticalKeys.reverse();
+                largeStepKeys.reverse();
             }
 
             // Strip "Arrow" for IE compatibility. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
             var key = event.key.replace("Arrow", "");
-            var isDown = key === verticalKeys[0] || key === horizontalKeys[0];
-            var isUp = key === verticalKeys[1] || key === horizontalKeys[1];
 
-            if (!isDown && !isUp) {
+            var isLargeDown = key === largeStepKeys[0];
+            var isLargeUp = key === largeStepKeys[1];
+            var isDown = key === verticalKeys[0] || key === horizontalKeys[0] || isLargeDown;
+            var isUp = key === verticalKeys[1] || key === horizontalKeys[1] || isLargeUp;
+            var isMin = key === edgeKeys[0];
+            var isMax = key === edgeKeys[1];
+
+            if (!isDown && !isUp && !isMin && !isMax) {
                 return true;
             }
 
             event.preventDefault();
 
-            var direction = isDown ? 0 : 1;
-            var steps = getNextStepsForHandle(handleNumber);
-            var step = steps[direction];
+            var to;
 
-            // At the edge of a slider, do nothing
-            if (step === null) {
-                return false;
-            }
+            if (isUp || isDown) {
+                var multiplier = 5;
+                var direction = isDown ? 0 : 1;
+                var steps = getNextStepsForHandle(handleNumber);
+                var step = steps[direction];
 
-            // No step set, use the default of 10% of the sub-range
-            if (step === false) {
-                step = scope_Spectrum.getDefaultStep(scope_Locations[handleNumber], isDown, 10);
-            }
+                // At the edge of a slider, do nothing
+                if (step === null) {
+                    return false;
+                }
 
-            // Step over zero-length ranges (#948);
-            step = Math.max(step, 0.0000001);
+                // No step set, use the default of 10% of the sub-range
+                if (step === false) {
+                    step = scope_Spectrum.getDefaultStep(scope_Locations[handleNumber], isDown, 10);
+                }
 
-            // Decrement for down steps
-            step = (isDown ? -1 : 1) * step;
+                if (isLargeUp || isLargeDown) {
+                    step *= multiplier;
+                }
+
+                // Step over zero-length ranges (#948);
+                step = Math.max(step, 0.0000001);
+
+                // Decrement for down steps
+                step = (isDown ? -1 : 1) * step;
+
+                to = scope_Values[handleNumber] + step;
+            } else if (isMax) {
+                // End key
+                to = options.spectrum.xVal[options.spectrum.xVal.length - 1];
+            } else {
+                // Home key
+                to = options.spectrum.xVal[0];
+            }
 
-            setHandle(handleNumber, scope_Spectrum.toStepping(scope_Values[handleNumber] + step), true, true);
+            setHandle(handleNumber, scope_Spectrum.toStepping(to), true, true);
 
             fireEvent("slide", handleNumber);
             fireEvent("update", handleNumber);

distribute/nouislider.min.css

@@ -1,6 +1,6 @@
 {
   "name": "nouislider",
-  "version": "14.0.3",
+  "version": "14.1.0",
   "main": "distribute/nouislider.js",
   "style": "distribute/nouislider.min.css",
   "license": "MIT",