Skip to content
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" );
} );

} );
@@ -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.
You can’t perform that action at this time.