Merge branch 'dev'

Gruntfile.js

@@ -26,8 +26,7 @@ module.exports = function(grunt) {
 	}
 
 	var releaseFiles = [
-		{ src: ['**/*'], dest: '', cwd: 'distribute/', expand: true },
-		{ src: ['**/*.css'], dest: '', cwd: 'src/', expand: true }
+		{ src: ['**/*'], dest: '', cwd: 'distribute/', expand: true }
 	];
 
 	grunt.initConfig({

README.md

@@ -16,6 +16,17 @@ An extensive documentation, including **examples**, **options** and **configurat
 
 Changelog
 ---------
+
+### 9.1.0 (*2016-12-10*)
+- Fixed: Slider not properly handling multitouch (#700, #704);
+- Fixed: Removed a querySelector for the currently active handle (#720);
+- Fixed: Removed iOS/webkit flashes on tap;
+- Fixed: Incorrect error when using margin/limit with a step smaller than 0 (#736);
+- Fixed: Drag option using incorrect cursor arrows (#681);
+- Added: New `padding` option (#711);
+- Added: Re-introduced `.noUi-handle-lower` and `.noUi-handle-upper` classes removed in 9.0.0;
+- Added: Compatibility for legacy `connect` options removed in 9.0.0;
+
 ### 9.0.0 (*2016-09-26*)
 - Added: Support for **more than 2 handles**;
 - Added: `format` option can be updated (#641);

documentation/download.php

@@ -11,7 +11,7 @@
 
 		<p>noUiSlider is open source, and you can use it <strong>for free</strong> in any personal or commercial product. No attribution required. Both the uncompressed and compressed version of noUiSlider are available in a <code>.zip</code> release, which is hosted by Github and available over <code>https</code>.</p>
 
-		<a class="button" href="https://github.com/leongersen/noUiSlider/releases/download/9.0.0/noUiSlider.9.0.0.zip" data-category="convert" data-action="download">Download noUiSlider from Github</a>
+		<a class="button" href="https://github.com/leongersen/noUiSlider/releases/download/9.1.0/noUiSlider.9.1.0.zip" data-category="convert" data-action="download">Download noUiSlider from Github</a>
 
 		<div class="share">
 			<iframe src="https://ghbtns.com/github-btn.html?user=leongersen&repo=noUiSlider&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>

documentation/slider-options.php

@@ -170,6 +170,45 @@
 
 </section>
 
+<?php sect('padding'); ?>
+<h2>Padding</h2>
+
+<section>
+
+	<div class="view">
+
+		<p>Padding limits how close to the slider edges handles can be.</p>
+
+		<div class="example">
+			<div id="slider-padding"></div>
+			<span class="example-val" id="slider-padding-value-min"></span>
+			<span class="example-val" id="slider-padding-value-max"></span>
+			<?php run('padding'); ?>
+			<?php run('padding-link'); ?>
+		</div>
+
+		<div class="options">
+			<strong>Default</strong>
+			<div><em>0</em></div>
+
+			<strong>Accepted values</strong>
+			<div><code>number</code></div>
+		</div>
+	</div>
+
+	<div class="side">
+		<?php code('padding'); ?>
+
+		<div class="viewer-header">Show the slider value</div>
+
+		<div class="viewer-content">
+			<?php code('padding-link'); ?>
+		</div>
+	</div>
+
+</section>
+
+
 
 <?php sect('step'); ?>
 <h2>Step</h2>

documentation/slider-options/padding-link.js

@@ -0,0 +1,10 @@
+var paddingMin = document.getElementById('slider-padding-value-min'),
+	paddingMax = document.getElementById('slider-padding-value-max');
+
+paddingSlider.noUiSlider.on('update', function ( values, handle ) {
+	if ( handle ) {
+		paddingMax.innerHTML = values[handle];
+	} else {
+		paddingMin.innerHTML = values[handle];
+	}
+});

documentation/slider-options/padding.js

@@ -0,0 +1,10 @@
+var paddingSlider = document.getElementById('slider-padding');
+
+noUiSlider.create(paddingSlider, {
+	start: [ 20, 80 ],
+	padding: 10,
+	range: {
+		'min': 0,
+		'max': 100
+	}
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nouislider",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "main": "distribute/nouislider",
   "style": "distribute/nouislider.min.css",
   "license": "WTFPL",

src/js/options.js

@@ -98,6 +98,16 @@
 		var connect = [false];
 		var i;
 
+		// Map legacy options
+		if ( entry === 'lower' ) {
+			entry = [true, false];
+		}
+
+		else if ( entry === 'upper' ) {
+			entry = [false, true];
+		}
+
+		// Handle boolean options
 		if ( entry === true || entry === false ) {
 
 			for ( i = 1; i < parsed.handles; i++ ) {
@@ -107,6 +117,7 @@
 			connect.push(false);
 		}
 
+		// Reject invalid input
 		else if ( !Array.isArray( entry ) || !entry.length || entry.length !== parsed.handles + 1 ) {
 			throw new Error("noUiSlider: 'connect' option doesn't match handle count.");
 		}
@@ -165,6 +176,31 @@
 		}
 	}
 
+	function testPadding ( parsed, entry ) {
+
+		if ( !isNumeric(entry) ){
+			throw new Error("noUiSlider: 'padding' option must be numeric.");
+		}
+
+		if ( entry === 0 ) {
+			return;
+		}
+
+		parsed.padding = parsed.spectrum.getMargin(entry);
+
+		if ( !parsed.padding ) {
+			throw new Error("noUiSlider: 'padding' option is only supported on linear sliders.");
+		}
+
+		if ( parsed.padding < 0 ) {
+			throw new Error("noUiSlider: 'padding' option must be a positive number.");
+		}
+
+		if ( parsed.padding >= 50 ) {
+			throw new Error("noUiSlider: 'padding' option must be less than half the range.");
+		}
+	}
+
 	function testDirection ( parsed, entry ) {
 
 		// Set direction as a numerical value for easy parsing.
@@ -305,13 +341,14 @@
 		var parsed = {
 			margin: 0,
 			limit: 0,
+			padding: 0,
 			animate: true,
 			animationDuration: 300,
 			format: defaultFormatter
-		}, tests;
+		};
 
 		// Tests are executed in the order they are presented here.
-		tests = {
+		var tests = {
 			'step': { r: false, t: testStep },
 			'start': { r: true, t: testStart },
 			'connect': { r: true, t: testConnect },
@@ -323,6 +360,7 @@
 			'orientation': { r: false, t: testOrientation },
 			'margin': { r: false, t: testMargin },
 			'limit': { r: false, t: testLimit },
+			'padding': { r: false, t: testPadding },
 			'behaviour': { r: true, t: testBehaviour },
 			'format': { r: false, t: testFormat },
 			'tooltips': { r: false, t: testTooltips },
@@ -342,6 +380,8 @@
 				base: 'base',
 				origin: 'origin',
 				handle: 'handle',
+				handleLower: 'handle-lower',
+				handleUpper: 'handle-upper',
 				horizontal: 'horizontal',
 				vertical: 'vertical',
 				background: 'background',

src/js/range.js

@@ -229,8 +229,8 @@
 
 		var step = this.xNumSteps[0];
 
-		if ( step && (value % step) ) {
-			throw new Error("noUiSlider: 'limit' and 'margin' must be divisible by step.");
+		if ( step && ((value / step) % 1) !== 0 ) {
+			throw new Error("noUiSlider: 'limit', 'margin' and 'padding' must be divisible by step.");
 		}
 
 		return this.xPct.length === 2 ? fromPercentage(this.xVal, value) : false;

src/js/scope.js

@@ -29,6 +29,19 @@
 			}
 		}
 
+		// The padding option keeps the handles a certain distance from the
+		// edges of the slider. Padding must be > 0.
+		if ( options.padding ) {
+
+			if ( handleNumber === 0 ) {
+				to = Math.max(to, options.padding);
+			}
+
+			if ( handleNumber === scope_Handles.length - 1 ) {
+				to = Math.min(to, 100 - options.padding);
+			}
+		}
+
 		to = scope_Spectrum.getStep(to);
 
 		// Limit percentage to the 0 - 100 range
@@ -180,6 +193,7 @@
 		});
 	}
 
+	// Reset slider to initial values
 	function valueReset ( fireSetEvent ) {
 		valueSet(options.start, fireSetEvent);
 	}
@@ -232,6 +246,7 @@
 				}
 			}
 
+
 			// If the value is beyond the starting point
 			if ( value > nearbySteps.thisStep.startValue ) {
 				decrement = nearbySteps.thisStep.step;
@@ -246,6 +261,7 @@
 				decrement = value - nearbySteps.stepBefore.highestStep;
 			}
 
+
 			// Now, if at the slider edges, there is not in/decrement
 			if ( location === 100 ) {
 				increment = null;
@@ -287,8 +303,8 @@
 	// Undo attachment of event
 	function removeEvent ( namespacedEvent ) {
 
-		var event = namespacedEvent && namespacedEvent.split('.')[0],
-			namespace = event && namespacedEvent.substring(event.length);
+		var event = namespacedEvent && namespacedEvent.split('.')[0];
+		var namespace = event && namespacedEvent.substring(event.length);
 
 		Object.keys(scope_Events).forEach(function( bind ){
 
@@ -301,15 +317,15 @@
 		});
 	}
 
-	// Updateable: margin, limit, step, range, animate, snap
+	// Updateable: margin, limit, padding, step, range, animate, snap
 	function updateOptions ( optionsToUpdate, fireSetEvent ) {
 
 		// Spectrum is created using the range, snap, direction and step options.
 		// 'snap' and 'step' can be updated, 'direction' cannot, due to event binding.
 		// If 'snap' and 'step' are not passed, they should remain unchanged.
 		var v = valueGet();
 
-		var updateAble = ['margin', 'limit', 'range', 'animate', 'snap', 'step', 'format'];
+		var updateAble = ['margin', 'limit', 'padding', 'range', 'animate', 'snap', 'step', 'format'];
 
 		// Only change options that we're actually passed to update.
 		updateAble.forEach(function(name){
@@ -332,9 +348,10 @@
 		newOptions.spectrum.direction = scope_Spectrum.direction;
 		scope_Spectrum = newOptions.spectrum;
 
-		// Limit and margin depend on the spectrum but are stored outside of it. (#677)
+		// Limit, margin and padding depend on the spectrum but are stored outside of it. (#677)
 		options.margin = newOptions.margin;
 		options.limit = newOptions.limit;
+		options.padding = newOptions.padding;
 
 		// Invalidate the current positioning so valueSet forces an update.
 		scope_Locations = [];
@@ -359,7 +376,7 @@
 		get: valueGet,
 		set: valueSet,
 		reset: valueReset,
-		 // Exposed for unit testing, don't use this in your application.
+		// Exposed for unit testing, don't use this in your application.
 		__moveHandles: function(a, b, c) { moveHandles(a, b, scope_Locations, c); },
 		options: originalOptions, // Issue #600, #678
 		updateOptions: updateOptions,

src/js/scope_events.js

@@ -31,10 +31,9 @@
 	function eventEnd ( event, data ) {
 
 		// The handle is no longer active, so remove the class.
-		var active = scope_Base.querySelector( '.' + options.cssClasses.active );
-
-		if ( active !== null ) {
-			removeClass(active, options.cssClasses.active);
+		if ( scope_ActiveHandle ) {
+			removeClass(scope_ActiveHandle, options.cssClasses.active);
+			scope_ActiveHandle = false;
 		}
 
 		// Remove cursor styles and text-selection events bound to the body.
@@ -63,7 +62,6 @@
 	// Bind move events on document.
 	function eventStart ( event, data ) {
 
-		// Mark the handle as 'active' so it can be styled.
 		if ( data.handleNumbers.length === 1 ) {
 
 			var handle = scope_Handles[data.handleNumbers[0]];
@@ -73,7 +71,9 @@
 				return false;
 			}
 
-			addClass(handle.children[0], options.cssClasses.active);
+			// Mark the handle as 'active' so it can be styled.
+			scope_ActiveHandle = handle.children[0];
+			addClass(scope_ActiveHandle, options.cssClasses.active);
 		}
 
 		// Fix #551, where a handle gets selected instead of dragged.