Skip to content

Spinner html #1560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 18, 2015
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions tests/unit/spinner/common-deprecated.js
Original file line number Diff line number Diff line change
@@ -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 changes: 21 additions & 0 deletions tests/unit/spinner/deprecated.html
Original file line number Diff line number Diff line change
@@ -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 changes: 41 additions & 0 deletions tests/unit/spinner/deprecated.js
Original file line number Diff line number Diff line change
@@ -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 changes: 56 additions & 24 deletions ui/spinner.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function spinner_modifier( fn ) {
};
}

return $.widget( "ui.spinner", {
$.widget( "ui.spinner", {
version: "@VERSION",
defaultElement: "<input>",
widgetEventPrefix: "spin",
Expand Down Expand Up @@ -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();

Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is assignment to this.uiSpinner happening here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I see, we're not leveraging the existing method. Ignore my question.

.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;

} ) );