]> source.dussan.org Git - jquery-ui.git/commitdiff
Spinner: Deprecate _uiSpinnerHtml and _buttonHtml extension points 1560/head
authorAlexander Schmitz <arschmitz@gmail.com>
Thu, 14 May 2015 12:37:53 +0000 (08:37 -0400)
committerAlexander Schmitz <arschmitz@gmail.com>
Wed, 3 Jun 2015 12:37:45 +0000 (08:37 -0400)
Fixes #11097
Closes gh-1560

tests/unit/spinner/common-deprecated.js [new file with mode: 0644]
tests/unit/spinner/deprecated.html [new file with mode: 0644]
tests/unit/spinner/deprecated.js [new file with mode: 0644]
ui/spinner.js

diff --git a/tests/unit/spinner/common-deprecated.js b/tests/unit/spinner/common-deprecated.js
new file mode 100644 (file)
index 0000000..2c40df7
--- /dev/null
@@ -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
+       }
+});
+
+} );
diff --git a/tests/unit/spinner/deprecated.html b/tests/unit/spinner/deprecated.html
new file mode 100644 (file)
index 0000000..a6c249a
--- /dev/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>
diff --git a/tests/unit/spinner/deprecated.js b/tests/unit/spinner/deprecated.js
new file mode 100644 (file)
index 0000000..c45a053
--- /dev/null
@@ -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" );
+} );
+
+} );
index 236a66afae6858931a106ab9b330911bb251bcbf..c56d2c918bf08dad1060c9a1302f3cf9274dcda1 100644 (file)
@@ -44,7 +44,7 @@ function spinner_modifier( fn ) {
        };
 }
 
-return $.widget( "ui.spinner", {
+$.widget( "ui.spinner", {
        version: "@VERSION",
        defaultElement: "<input>",
        widgetEventPrefix: "spin",
@@ -214,13 +214,26 @@ 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" );
@@ -228,7 +241,7 @@ return $.widget( "ui.spinner", {
                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;
+
 } ) );