noUiSlider 14.3.0

CHANGELOG.MD

@@ -1,5 +1,9 @@
 # Changelog
 
+### 14.3.0 (*2020-05-05*)
+- Added: Default `cssClasses` are now exposed and can be modified;
+- Fixed: Destroying sliders with multiple classes in `cssClasses` fails (#1069);
+
 ### 14.2.0 (*2020-03-27*)
 - Added: Slider api as event parameter (#1058);
 - Added: Allow multiple classes in `cssClasses` option (#1054);

distribute/nouislider.css

@@ -1,4 +1,4 @@
-/*! nouislider - 14.2.0 - 3/27/2020 */
+/*! nouislider - 14.3.0 - 5/5/2020 */
 /* Functional styling;
  * These styles are required for noUiSlider to function.
  * You don't need to change these rules to apply your design.

distribute/nouislider.js

@@ -1,4 +1,4 @@
-/*! nouislider - 14.2.0 - 3/27/2020 */
+/*! nouislider - 14.3.0 - 5/5/2020 */
 (function(factory) {
     if (typeof define === "function" && define.amd) {
         // AMD. Register as an anonymous module.
@@ -13,7 +13,7 @@
 })(function() {
     "use strict";
 
-    var VERSION = "14.2.0";
+    var VERSION = "14.3.0";
 
     //region Helper Methods
 
@@ -109,7 +109,7 @@
 
     // http://youmightnotneedjquery.com/#remove_class
     function removeClass(el, className) {
-        if (el.classList) {
+        if (el.classList && !/\s/.test(className)) {
             el.classList.remove(className);
         } else {
             el.className = el.className.replace(
@@ -492,13 +492,56 @@
         or true when everything is OK. It can also modify the option
         object, to make sure all values can be correctly looped elsewhere. */
 
+    //region Defaults
+
     var defaultFormatter = {
         to: function(value) {
             return value !== undefined && value.toFixed(2);
         },
         from: Number
     };
 
+    var cssClasses = {
+        target: "target",
+        base: "base",
+        origin: "origin",
+        handle: "handle",
+        handleLower: "handle-lower",
+        handleUpper: "handle-upper",
+        touchArea: "touch-area",
+        horizontal: "horizontal",
+        vertical: "vertical",
+        background: "background",
+        connect: "connect",
+        connects: "connects",
+        ltr: "ltr",
+        rtl: "rtl",
+        textDirectionLtr: "txt-dir-ltr",
+        textDirectionRtl: "txt-dir-rtl",
+        draggable: "draggable",
+        drag: "state-drag",
+        tap: "state-tap",
+        active: "active",
+        tooltip: "tooltip",
+        pips: "pips",
+        pipsHorizontal: "pips-horizontal",
+        pipsVertical: "pips-vertical",
+        marker: "marker",
+        markerHorizontal: "marker-horizontal",
+        markerVertical: "marker-vertical",
+        markerNormal: "marker-normal",
+        markerLarge: "marker-large",
+        markerSub: "marker-sub",
+        value: "value",
+        valueHorizontal: "value-horizontal",
+        valueVertical: "value-vertical",
+        valueNormal: "value-normal",
+        valueLarge: "value-large",
+        valueSub: "value-sub"
+    };
+
+    //endregion
+
     function validateFormat(entry) {
         // Any object with a to and from method is supported.
         if (isValidFormatter(entry)) {
@@ -878,44 +921,7 @@
             orientation: "horizontal",
             keyboardSupport: true,
             cssPrefix: "noUi-",
-            cssClasses: {
-                target: "target",
-                base: "base",
-                origin: "origin",
-                handle: "handle",
-                handleLower: "handle-lower",
-                handleUpper: "handle-upper",
-                touchArea: "touch-area",
-                horizontal: "horizontal",
-                vertical: "vertical",
-                background: "background",
-                connect: "connect",
-                connects: "connects",
-                ltr: "ltr",
-                rtl: "rtl",
-                textDirectionLtr: "txt-dir-ltr",
-                textDirectionRtl: "txt-dir-rtl",
-                draggable: "draggable",
-                drag: "state-drag",
-                tap: "state-tap",
-                active: "active",
-                tooltip: "tooltip",
-                pips: "pips",
-                pipsHorizontal: "pips-horizontal",
-                pipsVertical: "pips-vertical",
-                marker: "marker",
-                markerHorizontal: "marker-horizontal",
-                markerVertical: "marker-vertical",
-                markerNormal: "marker-normal",
-                markerLarge: "marker-large",
-                markerSub: "marker-sub",
-                value: "value",
-                valueHorizontal: "value-horizontal",
-                valueVertical: "value-vertical",
-                valueNormal: "value-normal",
-                valueLarge: "value-large",
-                valueSub: "value-sub"
-            }
+            cssClasses: cssClasses
         };
 
         // AriaFormat defaults to regular format, if any.
@@ -2515,6 +2521,9 @@
         // Exposed for unit testing, don't use this in your application.
         __spectrum: Spectrum,
         version: VERSION,
+        // A reference to the default classes, allows global changes.
+        // Use the cssClasses option for changes to one slider.
+        cssClasses: cssClasses,
         create: initialize
     };
 });

package.json

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

tests/slider_classes.js

@@ -2,7 +2,7 @@ QUnit.test("Classes", function (assert) {
 
     document.getElementById('qunit-fixture').innerHTML = '<div class="slider"></div>';
 
-    noUiSlider.cssClasses.base += ' test';
+    noUiSlider.cssClasses.target += ' test';
 
     var settings = {
         start: [50, 100],