--- /dev/null
+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>▲</span>" +
+ "</a>" +
+ "<a>" +
+ "<span>▼</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" );
+} );
+
+} );
};
}
-return $.widget( "ui.spinner", {
+$.widget( "ui.spinner", {
version: "@VERSION",
defaultElement: "<input>",
widgetEventPrefix: "spin",
"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>▲</span>" +
+ "</a>" +
+ "<a>" +
+ "<span>▼</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();
// 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
return false;
},
- _uiSpinnerHtml: function() {
- return "<span>";
- },
-
- _buttonHtml: function() {
- return "" +
- "<a>" +
- "<span>▲</span>" +
- "</a>" +
- "<a>" +
- "<span>▼</span>" +
- "</a>";
- },
-
_start: function( event ) {
if ( !this.spinning && this._trigger( "start", event ) === false ) {
return false;
}
} );
+// 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>▲</span>" +
+ "</a>" +
+ "<a>" +
+ "<span>▼</span>" +
+ "</a>";
+ }
+ } );
+}
+
+return $.ui.spinner;
+
} ) );