Spinner: Drop dependency on jQuery Mousewheel

mgol · web-flow · commit 6843ced12e40 · 2025-03-18T11:45:00.000+01:00
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
diff --git a/Gruntfile.js b/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",
 
diff --git a/bower.json b/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",
diff --git a/demos/spinner/currency.html b/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() );
 		});
diff --git a/demos/spinner/decimal.html b/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"
diff --git a/demos/spinner/default.html b/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() {
diff --git a/demos/spinner/latlong.html b/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() );
 		}
diff --git a/demos/spinner/overflow.html b/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 ) {
diff --git a/demos/spinner/time.html b/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
diff --git a/external/jquery-mousewheel/LICENSE.txt b/external/jquery-mousewheel/LICENSE.txt
diff --git a/external/jquery-mousewheel/jquery.mousewheel.js b/external/jquery-mousewheel/jquery.mousewheel.js
diff --git a/tests/unit/spinner/core.js b/tests/unit/spinner/core.js
@@ -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 );
 
diff --git a/ui/widgets/spinner.js b/ui/widgets/spinner.js

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