Merge branch 'demrks-master'

src/js/constants.js

@@ -1,6 +1,3 @@
-
-	var defaultCssPrefix = 'noUi-';
-
 	// we provide a function to compute constants instead
 	// of accessing window.* as soon as the module needs it
 	// so that we do not compute anything if not needed

src/js/helpers.js

@@ -102,10 +102,3 @@
 	function stopPropagation ( e ) {
 		e.stopPropagation();
 	}
-
-	// todo
-	function addCssPrefix(cssPrefix) {
-		return function(className) {
-			return cssPrefix + className;
-		};
-	}

src/js/options.js

@@ -241,18 +241,37 @@
 			return true;
 		}
 
-		throw new Error( "noUiSlider: 'format' requires 'to' and 'from' methods.");
+		throw new Error("noUiSlider: 'format' requires 'to' and 'from' methods.");
 	}
 
 	function testCssPrefix ( parsed, entry ) {
 
-		if ( entry !== undefined && typeof entry !== 'string' ) {
-			throw new Error( "noUiSlider: 'cssPrefix' must be a string.");
+		if ( entry !== undefined && typeof entry !== 'string' && entry !== false ) {
+			throw new Error("noUiSlider: 'cssPrefix' must be a string or `false`.");
 		}
 
 		parsed.cssPrefix = entry;
 	}
 
+	function testCssClasses ( parsed, entry ) {
+
+		if ( entry !== undefined && typeof entry !== 'object' ) {
+			throw new Error("noUiSlider: 'cssClasses' must be an object.");
+		}
+
+		if ( typeof parsed.cssPrefix === 'string' ) {
+			parsed.cssClasses = {};
+
+			for ( var key in entry ) {
+				if ( !entry.hasOwnProperty(key) ) { continue; }
+
+				parsed.cssClasses[key] = parsed.cssPrefix + entry[key];
+			}
+		} else {
+			parsed.cssClasses = entry;
+		}
+	}
+
 	// Test all developer settings and parse to assumption-safe values.
 	function testOptions ( options ) {
 
@@ -284,14 +303,46 @@
 			'behaviour': { r: true, t: testBehaviour },
 			'format': { r: false, t: testFormat },
 			'tooltips': { r: false, t: testTooltips },
-			'cssPrefix': { r: false, t: testCssPrefix }
+			'cssPrefix': { r: false, t: testCssPrefix },
+			'cssClasses': { r: false, t: testCssClasses }
 		};
 
 		var defaults = {
 			'connect': false,
 			'direction': 'ltr',
 			'behaviour': 'tap',
-			'orientation': 'horizontal'
+			'orientation': 'horizontal',
+			'cssPrefix' : 'noUi-',
+			'cssClasses': {
+				target: 'target',
+				base: 'base',
+				origin: 'origin',
+				handle: 'handle',
+				handleLower: 'handle-lower',
+				handleUpper: 'handle-upper',
+				horizontal: 'horizontal',
+				vertical: 'vertical',
+				background: 'background',
+				connect: 'connect',
+				ltr: 'ltr',
+				rtl: 'rtl',
+				draggable: 'draggable',
+				drag: 'state-drag',
+				tap: 'state-tap',
+				active: 'active',
+				stacking: 'stacking',
+				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'
+			}
 		};
 
 		// Run all options through a testing mechanism to ensure correct

src/js/pips.js

@@ -162,21 +162,34 @@
 
 	function addMarking ( spread, filterFunc, formatter ) {
 
-		var style = ['horizontal', 'vertical'][options.ort],
+		var classPips, classMarker,
 			element = document.createElement('div'),
 			out = '';
 
-		addClass(element, cssClasses[20]);
-		addClass(element, cssClasses[20] + '-' + style);
+		addClass(element, options.cssClasses.pips);
 
-		function getSize( type ){
-			return [ '-normal', '-large', '-sub' ][type];
+		if ( options.ort === 0 ) {
+			classPips = options.cssClasses.pipsHorizontal;
+			classMarker = options.cssClasses.markerHorizontal;
+		} else {
+			classPips = options.cssClasses.pipsVertical;
+			classMarker = options.cssClasses.markerVertical;
+		}
+
+		addClass(element, classPips);
+
+		function getSizeClass( type ){
+			return [
+				options.cssClasses.markerNormal,
+				options.cssClasses.markerLarge,
+				options.cssClasses.markerSub
+			][type];
 		}
 
 		function getTags( offset, source, values ) {
 			return 'class="' + source + ' ' +
-				source + '-' + style + ' ' +
-				source + getSize(values[1]) +
+				classMarker + ' ' +
+				getSizeClass(values[1]) +
 				'" style="' + options.style + ': ' + offset + '%"';
 		}
 
@@ -190,11 +203,11 @@
 			values[1] = (values[1] && filterFunc) ? filterFunc(values[0], values[1]) : values[1];
 
 			// Add a marker for every point
-			out += '<div ' + getTags(offset, cssClasses[21], values) + '></div>';
+			out += '<div ' + getTags(offset, options.cssClasses.marker, values) + '></div>';
 
 			// Values are only appended for points marked '1' or '2'.
 			if ( values[1] ) {
-				out += '<div '+getTags(offset, cssClasses[22], values)+'>' + formatter.to(values[0]) + '</div>';
+				out += '<div '+getTags(offset, options.cssClasses.marker, values)+'>' + formatter.to(values[0]) + '</div>';
 			}
 		}
 

src/js/scope.js

@@ -48,9 +48,9 @@
 
 		// Force proper handle stacking
 		if ( !handle.previousSibling ) {
-			removeClass(handle, cssClasses[17]);
+			removeClass(handle, options.cssClasses.stacking);
 			if ( to > 50 ) {
-				addClass(handle, cssClasses[17]);
+				addClass(handle, options.cssClasses.stacking);
 			}
 		}
 
@@ -122,7 +122,7 @@
 		// Animation is optional.
 		// Make sure the initial values where set before using animated placement.
 		if ( options.animate && scope_Locations[0] !== -1 ) {
-			addClassFor( scope_Target, cssClasses[14], options.animationDuration );
+			addClassFor( scope_Target, options.cssClasses.tap, options.animationDuration );
 		}
 
 		// Determine how often to set the handles.
@@ -160,10 +160,10 @@
 	// Removes classes from the root and empties it.
 	function destroy ( ) {
 
-		cssClasses.forEach(function(cls){
-			if ( !cls ) { return; } // Ignore empty classes
-			removeClass(scope_Target, cls);
-		});
+		for ( var key in options.cssClasses ) {
+			if ( !options.cssClasses.hasOwnProperty(key) ) { continue; }
+			removeClass(scope_Target, options.cssClasses[key]);
+		}
 
 		while (scope_Target.firstChild) {
 			scope_Target.removeChild(scope_Target.firstChild);

src/js/scope_events.js

@@ -12,7 +12,7 @@
 			}
 
 			// Stop if an active 'tap' transition is taking place.
-			if ( hasClass(scope_Target, cssClasses[14]) ) {
+			if ( hasClass(scope_Target, options.cssClasses.tap) ) {
 				return false;
 			}
 
@@ -85,11 +85,11 @@
 	function end ( event, data ) {
 
 		// The handle is no longer active, so remove the class.
-		var active = scope_Base.querySelector( '.' + cssClasses[15] ),
+		var active = scope_Base.querySelector( '.' + options.cssClasses.active ),
 			handleNumber = data.handles[0] === scope_Handles[0] ? 0 : 1;
 
 		if ( active !== null ) {
-			removeClass(active, cssClasses[15]);
+			removeClass(active, options.cssClasses.active);
 		}
 
 		// Remove cursor styles and text-selection events bound to the body.
@@ -106,7 +106,7 @@
 		});
 
 		// Remove dragging class.
-		removeClass(scope_Target, cssClasses[12]);
+		removeClass(scope_Target, options.cssClasses.drag);
 
 		// Fire the change and set events.
 		fireEvent('set', handleNumber);
@@ -137,7 +137,7 @@
 				return false;
 			}
 
-			addClass(data.handles[0].children[0], cssClasses[15]);
+			addClass(data.handles[0].children[0], options.cssClasses.active);
 		}
 
 		// Fix #551, where a handle gets selected instead of dragged.
@@ -179,7 +179,7 @@
 
 			// Mark the target with a dragging state.
 			if ( scope_Handles.length > 1 ) {
-				addClass(scope_Target, cssClasses[12]);
+				addClass(scope_Target, options.cssClasses.drag);
 			}
 
 			var f = function(){
@@ -226,7 +226,7 @@
 		if ( !options.events.snap ) {
 			// Flag the slider as it is now in a transitional state.
 			// Transition takes a configurable amount of ms (default 300). Re-enable the slider after that.
-			addClassFor( scope_Target, cssClasses[14], options.animationDuration );
+			addClassFor( scope_Target, options.cssClasses.tap, options.animationDuration );
 		}
 
 		// Support 'disabled' handles
@@ -303,8 +303,8 @@
 		// Make the range draggable.
 		if ( behaviour.drag ){
 
-			drag = [scope_Base.querySelector( '.' + cssClasses[7] )];
-			addClass(drag[0], cssClasses[10]);
+			drag = [scope_Base.querySelector( '.' + options.cssClasses.connect )];
+			addClass(drag[0], options.cssClasses.draggable);
 
 			// When the range is fixed, the entire range can
 			// be dragged by the handles. The handle in the first

src/js/scope_start.js

@@ -11,29 +11,3 @@ function closure ( target, options, originalOptions ){
 		scope_Values = [],
 		scope_Events = {},
 		scope_Self;
-
-  var cssClasses = [
-    /*  0 */  'target'
-    /*  1 */ ,'base'
-    /*  2 */ ,'origin'
-    /*  3 */ ,'handle'
-    /*  4 */ ,'horizontal'
-    /*  5 */ ,'vertical'
-    /*  6 */ ,'background'
-    /*  7 */ ,'connect'
-    /*  8 */ ,'ltr'
-    /*  9 */ ,'rtl'
-    /* 10 */ ,'draggable'
-    /* 11 */ ,''
-    /* 12 */ ,'state-drag'
-    /* 13 */ ,''
-    /* 14 */ ,'state-tap'
-    /* 15 */ ,'active'
-    /* 16 */ ,''
-    /* 17 */ ,'stacking'
-    /* 18 */ ,'tooltip'
-    /* 19 */ ,''
-    /* 20 */ ,'pips'
-    /* 21 */ ,'marker'
-    /* 22 */ ,'value'
-  ].map(addCssPrefix(options.cssPrefix || defaultCssPrefix));

src/js/structure.js

@@ -68,16 +68,16 @@
 
 		var origin = document.createElement('div'),
 			handle = document.createElement('div'),
-			additions = [ '-lower', '-upper' ];
+			classModifier = [options.cssClasses.handleLower, options.cssClasses.handleUpper];
 
 		if ( direction ) {
-			additions.reverse();
+			classModifier.reverse();
 		}
 
-		addClass(handle, cssClasses[3]);
-		addClass(handle, cssClasses[3] + additions[index]);
+		addClass(handle, options.cssClasses.handle);
+		addClass(handle, classModifier[index]);
 
-		addClass(origin, cssClasses[2]);
+		addClass(origin, options.cssClasses.origin);
 		origin.appendChild(handle);
 
 		return origin;
@@ -91,14 +91,14 @@
 		// segments listed in the class list, to allow easy
 		// renaming and provide a minor compression benefit.
 		switch ( connect ) {
-			case 1:	addClass(target, cssClasses[7]);
-					addClass(handles[0], cssClasses[6]);
+			case 1:	addClass(target, options.cssClasses.connect);
+					addClass(handles[0], options.cssClasses.background);
 					break;
-			case 3: addClass(handles[1], cssClasses[6]);
+			case 3: addClass(handles[1], options.cssClasses.background);
 					/* falls through */
-			case 2: addClass(handles[0], cssClasses[7]);
+			case 2: addClass(handles[0], options.cssClasses.connect);
 					/* falls through */
-			case 0: addClass(target, cssClasses[6]);
+			case 0: addClass(target, options.cssClasses.background);
 					break;
 		}
 	}
@@ -122,12 +122,22 @@
 	function addSlider ( direction, orientation, target ) {
 
 		// Apply classes and data to the target.
-		addClass(target, cssClasses[0]);
-		addClass(target, cssClasses[8 + direction]);
-		addClass(target, cssClasses[4 + orientation]);
+		addClass(target, options.cssClasses.target);
+
+		if ( direction === 0 ) {
+			addClass(target, options.cssClasses.ltr);
+		} else {
+			addClass(target, options.cssClasses.rtl);
+		}
+
+		if ( orientation === 0 ) {
+			addClass(target, options.cssClasses.horizontal);
+		} else {
+			addClass(target, options.cssClasses.vertical);
+		}
 
 		var div = document.createElement('div');
-		addClass(div, cssClasses[1]);
+		addClass(div, options.cssClasses.base);
 		target.appendChild(div);
 		return div;
 	}

src/js/tooltips.js

@@ -6,7 +6,7 @@
 		}
 
 		var element = document.createElement('div');
-		element.className = cssClasses[18];
+		element.className = options.cssClasses.tooltip;
 		return handle.firstChild.appendChild(element);
 	}