Spinner: Drop dependency on jQuery Mousewheel

1. Listen to the native `wheel` event without depending on any wrapper plugins.
2. Keep listening to the `mousewheel` event for compatibility with projects
   using the jQuery Mousewheel plugin but route it to the `wheel` handler.

Closes gh-2338

Author: mgol

Gruntfile.js

@@ -247,9 +247,6 @@ grunt.initConfig( {
 
 				"requirejs/require.js": "requirejs/require.js",
 
-				"jquery-mousewheel/jquery.mousewheel.js": "jquery-mousewheel/jquery.mousewheel.js",
-				"jquery-mousewheel/LICENSE.txt": "jquery-mousewheel/LICENSE.txt",
-
 				"jquery-simulate/jquery.simulate.js": "jquery-simulate/jquery.simulate.js",
 				"jquery-simulate/LICENSE.txt": "jquery-simulate/LICENSE.txt",
 

bower.json

@@ -13,7 +13,6 @@
 	},
 	"devDependencies": {
 		"jquery-color": "3.0.0",
-		"jquery-mousewheel": "3.1.12",
 		"jquery-simulate": "1.1.1",
 		"qunit": "2.19.4",
 		"requirejs": "2.1.14",

demos/spinner/currency.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
-	<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP external/jquery-mousewheel/jquery.mousewheel">
+	<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP">
 		$( "#currency" ).on( "change", function() {
 			$( "#spinner" ).spinner( "option", "culture", $( this ).val() );
 		});

demos/spinner/decimal.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
-	<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP external/jquery-mousewheel/jquery.mousewheel">
+	<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP">
 		$( "#spinner" ).spinner({
 			step: 0.01,
 			numberFormat: "n"

demos/spinner/default.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
-	<script src="../bootstrap.js" data-modules="external/jquery-mousewheel/jquery.mousewheel">
+	<script src="../bootstrap.js">
 		var spinner = $( "#spinner" ).spinner();
 
 		$( "#disable" ).on( "click", function() {

demos/spinner/latlong.html

@@ -8,7 +8,7 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
 	<script src="../../external/requirejs/require.js"></script>
-	<script src="../bootstrap.js" data-modules="external/jquery-mousewheel/jquery.mousewheel">
+	<script src="../bootstrap.js">
 		function latlong() {
 			return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
 		}

demos/spinner/overflow.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
-	<script src="../bootstrap.js" data-modules="external/jquery-mousewheel/jquery.mousewheel">
+	<script src="../bootstrap.js">
 		$( "#spinner" ).spinner({
 			spin: function( event, ui ) {
 				if ( ui.value > 10 ) {

demos/spinner/time.html

@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../../themes/base/all.css">
 	<link rel="stylesheet" href="../demos.css">
 	<script src="../../external/requirejs/require.js"></script>
-	<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE external/jquery-mousewheel/jquery.mousewheel">
+	<script src="../bootstrap.js" data-modules="external/globalize/globalize external/globalize/globalize.culture.de-DE">
 		$.widget( "ui.timespinner", $.ui.spinner, {
 			options: {
 				// seconds

external/jquery-mousewheel/LICENSE.txt

@@ -163,7 +163,47 @@ QUnit.test( "mouse click on up button, increases value not greater than max", fu
 	assert.equal( element.val(), 0 );
 } );
 
-QUnit.test( "mousewheel on input", function( assert ) {
+QUnit.test( "wheel on input", function( assert ) {
+	var ready = assert.async();
+	assert.expect( 5 );
+
+	var element = $( "#spin" ).val( 0 ).spinner( {
+		step: 2
+	} );
+
+	element.simulate( "focus" );
+	setTimeout( step1 );
+
+	function getWheelEvent( deltaY ) {
+		return jQuery.Event( new WheelEvent( "wheel", { deltaY: deltaY } ) );
+	}
+
+	function step1() {
+		element.trigger( getWheelEvent() );
+		assert.equal( element.val(), 0, "wheel event without delta does not change value" );
+
+		element.trigger( getWheelEvent( -1 ) );
+		assert.equal( element.val(), 2, "delta -1" );
+
+		element.trigger( getWheelEvent( 0.2 ) );
+		assert.equal( element.val(), 0, "delta 0.2" );
+
+		element.trigger( getWheelEvent( 15 ) );
+		assert.equal( element.val(), -2, "delta 15" );
+
+		element.simulate( "blur" );
+		setTimeout( step2 );
+	}
+
+	function step2() {
+		element.trigger( "wheel", -1 );
+		assert.equal( element.val(), -2, "wheel when not focused" );
+
+		ready();
+	}
+} );
+
+QUnit.test( "mousewheel on input (DEPRECATED)", function( assert ) {
 	var ready = assert.async();
 	assert.expect( 5 );
 

external/jquery-mousewheel/jquery.mousewheel.js

@@ -136,9 +136,10 @@ $.widget( "ui.spinner", {
 				this._trigger( "change", event );
 			}
 		},
-		mousewheel: function( event, delta ) {
+		wheel: function( event ) {
 			var activeElement = this.document[ 0 ].activeElement;
 			var isActive = this.element[ 0 ] === activeElement;
+			var delta = event.deltaY || event.originalEvent && event.originalEvent.deltaY;
 
 			if ( !isActive || !delta ) {
 				return;
@@ -148,7 +149,7 @@ $.widget( "ui.spinner", {
 				return false;
 			}
 
-			this._spin( ( delta > 0 ? 1 : -1 ) * this.options.step, event );
+			this._spin( ( delta > 0 ? -1 : 1 ) * this.options.step, event );
 			clearTimeout( this.mousewheelTimer );
 			this.mousewheelTimer = this._delay( function() {
 				if ( this.spinning ) {
@@ -157,6 +158,20 @@ $.widget( "ui.spinner", {
 			}, 100 );
 			event.preventDefault();
 		},
+
+		// DEPRECATED
+		// Kept for backwards compatibility. Please use the modern `wheel`
+		// event. The `delta` parameter is provided by the jQuery Mousewheel
+		// plugin if one is loaded.
+		mousewheel: function( event, delta ) {
+			var wheelEvent = $.Event( event );
+			wheelEvent.type = "wheel";
+			if ( delta ) {
+				wheelEvent.deltaY = -delta;
+			}
+			return this._events.wheel.call( this, wheelEvent );
+		},
+
 		"mousedown .ui-spinner-button": function( event ) {
 			var previous;