Skip to content

Commit d4719bf

Browse files
arschmitzarschmitz
committed
Spinner: Deprecate _uiSpinnerHtml and _buttonHtml extension points
Fixes #11097 Closes gh-1560
1 parent c2224bf commit d4719bf

File tree

4 files changed

+153
-24
lines changed

4 files changed

+153
-24
lines changed

‎tests/unit/spinner/common-deprecated.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
define( [
2+
"lib/common",
3+
"ui/spinner"
4+
], function( common ) {
5+
6+
common.testWidget( "spinner", {
7+
defaults: {
8+
classes: {
9+
"ui-spinner": "ui-corner-all",
10+
"ui-spinner-up": "ui-corner-tr",
11+
"ui-spinner-down": "ui-corner-br"
12+
},
13+
culture: null,
14+
disabled: false,
15+
icons: {
16+
down: "ui-icon-triangle-1-s",
17+
up: "ui-icon-triangle-1-n"
18+
},
19+
incremental: true,
20+
max: null,
21+
min: null,
22+
numberFormat: null,
23+
page: 10,
24+
step: 1,
25+
26+
// callbacks
27+
change: null,
28+
create: null,
29+
spin: null,
30+
start: null,
31+
stop: null
32+
}
33+
});
34+
35+
} );

‎tests/unit/spinner/deprecated.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Spinner Test Suite</title>
6+
7+
<script src="../../../external/requirejs/require.js"></script>
8+
<script src="../../lib/css.js" data-modules="core button spinner"></script>
9+
<script src="../../lib/bootstrap.js" data-widget="spinner" data-deprecated="true"></script>
10+
</head>
11+
<body>
12+
13+
<div id="qunit"></div>
14+
<div id="qunit-fixture">
15+
16+
<input id="spin" class="foo">
17+
<input id="spin2" value="2">
18+
19+
</div>
20+
</body>
21+
</html>

‎tests/unit/spinner/deprecated.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
define( [
2+
"jquery",
3+
"ui/spinner"
4+
], function( $ ) {
5+
6+
var originalSpinner = $.ui.spinner.prototype;
7+
module( "spinner: deprecated", {
8+
setup: function() {
9+
$.widget( "ui.spinner", $.ui.spinner, {
10+
_uiSpinnerHtml: function() {
11+
return "<span class='spin-wrap'>";
12+
},
13+
14+
_buttonHtml: function() {
15+
return "" +
16+
"<a class='spin-up'>" +
17+
"<span>&#9650;</span>" +
18+
"</a>" +
19+
"<a>" +
20+
"<span>&#9660;</span>" +
21+
"</a>";
22+
}
23+
} );
24+
},
25+
26+
teardown: function() {
27+
$.ui.spinner.prototype = originalSpinner;
28+
}
29+
} );
30+
31+
test( "markup structure - custom", function( assert ) {
32+
expect( 2 );
33+
var element = $( "#spin" ).spinner(),
34+
spinner = element.spinner( "widget" ),
35+
up = spinner.find( ".ui-spinner-up" );
36+
37+
assert.hasClasses( spinner, "ui-spinner ui-widget ui-widget-content spin-wrap", "_uiSpinnerHtml() overides default markup" );
38+
assert.hasClasses( up, "ui-spinner-button ui-spinner-up ui-widget spin-up", "_ButtonHtml() overides default markup" );
39+
} );
40+
41+
} );

‎ui/spinner.js

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function spinner_modifier( fn ) {
4444
};
4545
}
4646

47-
return $.widget( "ui.spinner", {
47+
$.widget( "ui.spinner", {
4848
version: "@VERSION",
4949
defaultElement: "<input>",
5050
widgetEventPrefix: "spin",
@@ -214,21 +214,34 @@ return $.widget( "ui.spinner", {
214214
"mouseleave .ui-spinner-button": "_stop"
215215
},
216216

217-
_draw: function() {
218-
var uiSpinner = this.uiSpinner = this.element
217+
// Support mobile enhanced option and make backcompat more sane
218+
_enhance: function() {
219+
this.uiSpinner = this.element
219220
.attr( "autocomplete", "off" )
220-
.wrap( this._uiSpinnerHtml() )
221+
.wrap( "<span>" )
221222
.parent()
222-
// add buttons
223-
.append( this._buttonHtml() );
223+
224+
// Add buttons
225+
.append(
226+
"<a>" +
227+
"<span>&#9650;</span>" +
228+
"</a>" +
229+
"<a>" +
230+
"<span>&#9660;</span>" +
231+
"</a>"
232+
);
233+
},
234+
235+
_draw: function() {
236+
this._enhance();
224237

225238
this._addClass( this.uiSpinner, "ui-spinner", "ui-widget ui-widget-content" );
226239
this._addClass( "ui-spinner-input" );
227240

228241
this.element.attr( "role", "spinbutton" );
229242

230243
// button bindings
231-
this.buttons = uiSpinner.children( "a" )
244+
this.buttons = this.uiSpinner.children( "a" )
232245
.attr( "tabIndex", -1 )
233246
.button();
234247

@@ -244,9 +257,9 @@ return $.widget( "ui.spinner", {
244257

245258
// IE 6 doesn't understand height: 50% for the buttons
246259
// unless the wrapper has an explicit height
247-
if ( this.buttons.height() > Math.ceil( uiSpinner.height() * 0.5 ) &&
248-
uiSpinner.height() > 0 ) {
249-
uiSpinner.height( uiSpinner.height() );
260+
if ( this.buttons.height() > Math.ceil( this.uiSpinner.height() * 0.5 ) &&
261+
this.uiSpinner.height() > 0 ) {
262+
this.uiSpinner.height( this.uiSpinner.height() );
250263
}
251264

252265
// disable spinner if element was already disabled
@@ -277,20 +290,6 @@ return $.widget( "ui.spinner", {
277290
return false;
278291
},
279292

280-
_uiSpinnerHtml: function() {
281-
return "<span>";
282-
},
283-
284-
_buttonHtml: function() {
285-
return "" +
286-
"<a>" +
287-
"<span>&#9650;</span>" +
288-
"</a>" +
289-
"<a>" +
290-
"<span>&#9660;</span>" +
291-
"</a>";
292-
},
293-
294293
_start: function( event ) {
295294
if ( !this.spinning && this._trigger( "start", event ) === false ) {
296295
return false;
@@ -533,4 +532,37 @@ return $.widget( "ui.spinner", {
533532
}
534533
} );
535534

535+
// DEPRECATED
536+
// TODO: switch return back to widget declaration at top of file when this is removed
537+
if ( $.uiBackCompat !== false ) {
538+
539+
// Backcompat for spinner html extension points
540+
$.widget( "ui.spinner", $.ui.spinner, {
541+
_enhance: function() {
542+
this.uiSpinner = this.element
543+
.attr( "autocomplete", "off" )
544+
.wrap( this._uiSpinnerHtml() )
545+
.parent()
546+
547+
// Add buttons
548+
.append( this._buttonHtml() );
549+
},
550+
_uiSpinnerHtml: function() {
551+
return "<span>";
552+
},
553+
554+
_buttonHtml: function() {
555+
return "" +
556+
"<a>" +
557+
"<span>&#9650;</span>" +
558+
"</a>" +
559+
"<a>" +
560+
"<span>&#9660;</span>" +
561+
"</a>";
562+
}
563+
} );
564+
}
565+
566+
return $.ui.spinner;
567+
536568
} ) );

0 commit comments

Comments
 (0)