Spinner: Deprecate _uiSpinnerHtml and _buttonHtml extension points

Fixes #11097 Closes gh-1560
jquery · Jun 3, 2015 · 60c55af · 60c55af
1 parent 40ec737
commit 60c55af
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 12 deletions.
diff --git a/tests/unit/spinner/common-deprecated.js b/tests/unit/spinner/common-deprecated.js
@@ -0,0 +1,35 @@
+define( [
+	"lib/common",
+	"ui/spinner"
+], function( common ) {
+
+common.testWidget( "spinner", {
+	defaults: {
+		classes: {
+			"ui-spinner": "ui-corner-all",
+			"ui-spinner-up": "ui-corner-tr",
+			"ui-spinner-down": "ui-corner-br"
+		},
+		culture: null,
+		disabled: false,
+		icons: {
+			down: "ui-icon-triangle-1-s",
+			up: "ui-icon-triangle-1-n"
+		},
+		incremental: true,
+		max: null,
+		min: null,
+		numberFormat: null,
+		page: 10,
+		step: 1,
+
+		// callbacks
+		change: null,
+		create: null,
+		spin: null,
+		start: null,
+		stop: null
+	}
+});
+
+} );
diff --git a/tests/unit/spinner/deprecated.html b/tests/unit/spinner/deprecated.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Spinner Test Suite</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../lib/css.js" data-modules="core button spinner"></script>
+	<script src="../../lib/bootstrap.js" data-widget="spinner" data-deprecated="true"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<input id="spin" class="foo">
+<input id="spin2" value="2">
+
+</div>
+</body>
+</html>
diff --git a/tests/unit/spinner/deprecated.js b/tests/unit/spinner/deprecated.js
@@ -0,0 +1,41 @@
+define( [
+	"jquery",
+	"ui/spinner"
+], function( $ ) {
+
+var originalSpinner = $.ui.spinner.prototype;
+module( "spinner: deprecated", {
+	setup: function() {
+		$.widget( "ui.spinner", $.ui.spinner, {
+			_uiSpinnerHtml: function() {
+				return "<span class='spin-wrap'>";
+			},
+
+			_buttonHtml: function() {
+				return "" +
+					"<a class='spin-up'>" +
+						"<span>&#9650;</span>" +
+					"</a>" +
+					"<a>" +
+						"<span>&#9660;</span>" +
+					"</a>";
+			}
+		} );
+	},
+
+	teardown: function() {
+		$.ui.spinner.prototype = originalSpinner;
+	}
+} );
+
+test( "markup structure - custom", function( assert ) {
+	expect( 2 );
+	var element = $( "#spin" ).spinner(),
+		spinner = element.spinner( "widget" ),
+		up = spinner.find( ".ui-spinner-up" );
+
+	assert.hasClasses( spinner, "ui-spinner ui-widget ui-widget-content spin-wrap", "_uiSpinnerHtml() overides default markup" );
+	assert.hasClasses( up, "ui-spinner-button ui-spinner-up ui-widget spin-up", "_ButtonHtml() overides default markup" );
+} );
+
+} );
diff --git a/ui/spinner.js b/ui/spinner.js
@@ -221,14 +221,14 @@ $.widget( "ui.spinner", {
 			.wrap( "<span>" )
 			.parent()
 
-				// add buttons
-				.append( "" +
+				// Add buttons
+				.append(
 				"<a>" +
 					"<span>&#9650;</span>" +
 				"</a>" +
 				"<a>" +
 					"<span>&#9660;</span>" +
-				"</a>"; );
+				"</a>" );
 	},
 
 	_draw: function() {
@@ -256,9 +256,9 @@ $.widget( "ui.spinner", {
 
 		// IE 6 doesn't understand height: 50% for the buttons
 		// unless the wrapper has an explicit height
-		if ( this.buttons.height() > Math.ceil( uiSpinner.height() * 0.5 ) &&
-				uiSpinner.height() > 0 ) {
-			uiSpinner.height( uiSpinner.height() );
+		if ( this.buttons.height() > Math.ceil( this.uiSpinner.height() * 0.5 ) &&
+				this.uiSpinner.height() > 0 ) {
+			this.uiSpinner.height( this.uiSpinner.height() );
 		}
 
 		// disable spinner if element was already disabled
@@ -535,18 +535,16 @@ $.widget( "ui.spinner", {
 // TODO: switch return back to widget declaration at top of file when this is removed
 if ( $.uiBackCompat !== false ) {
 
-	// Backcompat for dialogClass option
+	// Backcompat for spinner html extension points
 	$.widget( "ui.spinner", $.ui.spinner, {
-		_enhance: function(){
-			var uiSpinner = this.uiSpinner = this.element
+		_enhance: function() {
+			this.uiSpinner = this.element
 				.attr( "autocomplete", "off" )
 				.wrap( this._uiSpinnerHtml() )
 				.parent()
 
 					// Add buttons
 					.append( this._buttonHtml() );
-
-			this.element.attr( "role", "spinbutton" );
 		},
 		_uiSpinnerHtml: function() {
 			return "<span>";
@@ -566,5 +564,4 @@ if ( $.uiBackCompat !== false ) {
 
 return $.ui.spinner;
 
-
 } ) );