library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Spinner: Deprecate _uiSpinnerHtml and _buttonHtml extension points

Browse Source 
Fixes #11097
Closes gh-1560
This commit is contained in:
Alexander Schmitz 2015-05-14 08:37:53 -04:00
parent c2224bf5dc
commit d4719bf616
4 changed files with 153 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
tests/unit/spinner/common-deprecated.js Normal file
View File

@ -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
}
});
} );

21
tests/unit/spinner/deprecated.html Normal file
View File

@ -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>

41
tests/unit/spinner/deprecated.js Normal file
View File

@ -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" );
} );
} );

80
ui/spinner.js
View File

@ -44,7 +44,7 @@ function spinner_modifier( fn ) {
}; };
} }
return $.widget( "ui.spinner", { $.widget( "ui.spinner", {
version: "@VERSION", version: "@VERSION",
defaultElement: "<input>", defaultElement: "<input>",
widgetEventPrefix: "spin", widgetEventPrefix: "spin",
@ -214,13 +214,26 @@ return $.widget( "ui.spinner", {
"mouseleave .ui-spinner-button": "_stop" "mouseleave .ui-spinner-button": "_stop"
}, },
_draw: function() { // Support mobile enhanced option and make backcompat more sane
var uiSpinner = this.uiSpinner = this.element _enhance: function() {
this.uiSpinner = this.element
.attr( "autocomplete", "off" ) .attr( "autocomplete", "off" )
.wrap( this._uiSpinnerHtml() ) .wrap( "<span>" )
.parent() .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( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
this._addClass( "ui-spinner-input" ); this._addClass( "ui-spinner-input" );
@ -228,7 +241,7 @@ return $.widget( "ui.spinner", {
this.element.attr( "role", "spinbutton" ); this.element.attr( "role", "spinbutton" );
// button bindings // button bindings
this.buttons = uiSpinner.children( "a" ) this.buttons = this.uiSpinner.children( "a" )
.attr( "tabIndex", -1 ) .attr( "tabIndex", -1 )
.button(); .button();
@ -244,9 +257,9 @@ return $.widget( "ui.spinner", {
// IE 6 doesn't understand height: 50% for the buttons // IE 6 doesn't understand height: 50% for the buttons
// unless the wrapper has an explicit height // unless the wrapper has an explicit height
if ( this.buttons.height() > Math.ceil( uiSpinner.height() * 0.5 ) && if ( this.buttons.height() > Math.ceil( this.uiSpinner.height() * 0.5 ) &&
uiSpinner.height() > 0 ) { this.uiSpinner.height() > 0 ) {
uiSpinner.height( uiSpinner.height() ); this.uiSpinner.height( this.uiSpinner.height() );
} }
// disable spinner if element was already disabled // disable spinner if element was already disabled
@ -277,20 +290,6 @@ return $.widget( "ui.spinner", {
return false; return false;
}, },
_uiSpinnerHtml: function() {
return "<span>";
},
_buttonHtml: function() {
return "" +
"<a>" +
"<span>&#9650;</span>" +
"</a>" +
"<a>" +
"<span>&#9660;</span>" +
"</a>";
},
_start: function( event ) { _start: function( event ) {
if ( !this.spinning && this._trigger( "start", event ) === false ) { if ( !this.spinning && this._trigger( "start", event ) === false ) {
return 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;
} ) ); } ) );