Permalink
Browse files

Spinner: Deprecate _uiSpinnerHtml and _buttonHtml extension points

Fixes #11097
Closes gh-1560
  • Loading branch information...
arschmitz committed May 14, 2015
1 parent c2224bf commit d4719bf6160a0c99273abddc42e39a734e9943a2
Showing with 153 additions and 24 deletions.
  1. +35 −0 tests/unit/spinner/common-deprecated.js
  2. +21 −0 tests/unit/spinner/deprecated.html
  3. +41 −0 tests/unit/spinner/deprecated.js
  4. +56 −24 ui/spinner.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
+ }
+});
+
+} );
@@ -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>
@@ -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" );
+} );
+
+} );
View
@@ -44,7 +44,7 @@ function spinner_modifier( fn ) {
};
}
-return $.widget( "ui.spinner", {
+$.widget( "ui.spinner", {
version: "@VERSION",
defaultElement: "<input>",
widgetEventPrefix: "spin",
@@ -214,21 +214,34 @@ return $.widget( "ui.spinner", {
"mouseleave .ui-spinner-button": "_stop"
},
- _draw: function() {
- var uiSpinner = this.uiSpinner = this.element
+ // Support mobile enhanced option and make backcompat more sane
+ _enhance: function() {
+ this.uiSpinner = this.element
.attr( "autocomplete", "off" )
- .wrap( this._uiSpinnerHtml() )
+ .wrap( "<span>" )
.parent()
- // add buttons
- .append( this._buttonHtml() );
+
+ // Add buttons
+ .append(
+ "<a>" +
+ "<span>&#9650;</span>" +
+ "</a>" +
+ "<a>" +
+ "<span>&#9660;</span>" +
+ "</a>"
+ );
+ },
+
+ _draw: function() {
+ this._enhance();
this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
this._addClass( "ui-spinner-input" );
this.element.attr( "role", "spinbutton" );
// button bindings
- this.buttons = uiSpinner.children( "a" )
+ this.buttons = this.uiSpinner.children( "a" )
.attr( "tabIndex", -1 )
.button();
@@ -244,9 +257,9 @@ return $.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
@@ -277,20 +290,6 @@ return $.widget( "ui.spinner", {
return false;
},
- _uiSpinnerHtml: function() {
- return "<span>";
- },
-
- _buttonHtml: function() {
- return "" +
- "<a>" +
- "<span>&#9650;</span>" +
- "</a>" +
- "<a>" +
- "<span>&#9660;</span>" +
- "</a>";
- },
-
_start: function( event ) {
if ( !this.spinning && this._trigger( "start", event ) === false ) {
return false;
@@ -533,4 +532,37 @@ return $.widget( "ui.spinner", {
}
} );
+// DEPRECATED
+// TODO: switch return back to widget declaration at top of file when this is removed
+if ( $.uiBackCompat !== false ) {
+
+ // Backcompat for spinner html extension points
+ $.widget( "ui.spinner", $.ui.spinner, {
+ _enhance: function() {
+ this.uiSpinner = this.element
+ .attr( "autocomplete", "off" )
+ .wrap( this._uiSpinnerHtml() )
+ .parent()
+
+ // Add buttons
+ .append( this._buttonHtml() );
+ },
+ _uiSpinnerHtml: function() {
+ return "<span>";
+ },
+
+ _buttonHtml: function() {
+ return "" +
+ "<a>" +
+ "<span>&#9650;</span>" +
+ "</a>" +
+ "<a>" +
+ "<span>&#9660;</span>" +
+ "</a>";
+ }
+ } );
+}
+
+return $.ui.spinner;
+
} ) );

0 comments on commit d4719bf

Please sign in to comment.