Controlgroup: Add spinner to widgets controlgroup works with

diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
index a9243e12e99ef061c9482d93260c64b20ac9a23b..57a2530b6f4a79a010090d9c04529feef58592ef 100644 (file)
--- a/demos/controlgroup/default.html
+++ b/demos/controlgroup/default.html
@@ -14,7 +14,7 @@
                }
        </style>
        <script src="../../external/requirejs/require.js"></script>
-       <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu">
+       <script src="../bootstrap.js" data-modules="button checkboxradio selectmenu spinner">
                $( ".controlgroup" ).controlgroup()
                $( ".controlgroup-vertical" ).controlgroup({
                        "direction": "vertical"
@@ -27,6 +27,7 @@
        <fieldset>
                <legend>Rental Car</legend>
                <div class="controlgroup">
+                       <input class="ui-spinner-input">
                        <select>
                                <option>Compact car</option>
                                <option>Midsize car</option>
@@ -36,6 +37,7 @@
                                <option>Truck</option>
                                <option>Van</option>
                        </select>
+                       <input class="ui-spinner-input">
                        <label for="transmission-standard">Standard</label>
                        <input type="radio" name="transmission" id="transmission-standard">
                        <label for="transmission-automatic">Automatic</label>
@@ -43,6 +45,7 @@
                        <label for="insurance">Insurance</label>
                        <input type="checkbox" name="insurance" id="insurance">
                        <button>Book Now!</button>
+                       <input class="ui-spinner-input">
                </div>
        </fieldset>
        <br/>

diff --git a/themes/base/controlgroup.css b/themes/base/controlgroup.css
index befbdfe3eba64f3188fe40dd453d3622f239d816..b801f456505cd2875bba5a9e4606a869f60779a6 100644 (file)
--- a/themes/base/controlgroup.css
+++ b/themes/base/controlgroup.css
@@ -27,4 +27,10 @@
 }
 .ui-controlgroup-vertical label.ui-button {
        box-sizing: border-box;
-}
\ No newline at end of file
+}
+.ui-controlgroup .ui-spinner {
+       padding-top: .225em;
+       padding-bottom: .225em;
+       border-color: #ccc;
+       float: left;
+}

diff --git a/themes/base/core.css b/themes/base/core.css
index 2f752128298352e6ee979d510a75eba8f2f0b879..2ff5d2da43337503fff59a445596c4a221a6b5e9 100644 (file)
--- a/themes/base/core.css
+++ b/themes/base/core.css
@@ -73,6 +73,9 @@
        vertical-align: middle;
        margin-top: -.25em;
        position: relative;
+       text-indent: -99999px;
+       overflow: hidden;
+       background-repeat: no-repeat;
 }
 
 .ui-widget-icon-block {

diff --git a/ui/widgets/controlgroup.js b/ui/widgets/controlgroup.js
index a8736a808a0e85bfe4e1632cbb2768f19e99d2dc..83cb184ecbea1213c5f8b39cf520d17c0058f2a9 100644 (file)
--- a/ui/widgets/controlgroup.js
+++ b/ui/widgets/controlgroup.js
@@ -38,7 +38,8 @@ return $.widget( "ui.controlgroup", {
                items: {
                        "button": "input[type=button], input[type=submit], input[type=reset], button, a",
                        "checkboxradio": "input[type='checkbox'], input[type='radio']",
-                       "selectmenu": "select"
+                       "selectmenu": "select",
+                       "spinner": ".ui-spinner-input"
                },
                direction: "horizontal",
                excludeInvisible: true
@@ -83,14 +84,13 @@ return $.widget( "ui.controlgroup", {
 
                                // Don't set data or add to the collection if the method is destroy
                                widgets.each( function() {
+                                       var element = $( this );
 
                                        // Set data on the widget element pointing to the this.element of the widget
                                        // and telling us what type of widget this is
                                        var widgetElement =
-                                               $( this )[ widget ]( "widget" ).data( "ui-controlgroup-data", {
-                                                       "widgetType": widget,
-                                                       "element": $( this )
-                                               } );
+                                               element[ widget ]( "widget" ).data( "ui-controlgroup-data", element.data( "ui-" +
+                                                               widget.charAt(0).toUpperCase() + widget.slice(1) ) );
 
                                        childWidgets.push( widgetElement[ 0 ] );
                                } );
@@ -104,8 +104,9 @@ return $.widget( "ui.controlgroup", {
                this.childWidgets.each( function() {
                        var element = $( this ),
                                data = element.data( "ui-controlgroup-data" );
-
-                       data.element[ data.widgetType ]( method );
+                       if( data[ method ] ) {
+                               data[ method ]();
+                       }
                } );
        },
 
@@ -122,6 +123,15 @@ return $.widget( "ui.controlgroup", {
                return result;
        },
 
+       _spinner_options: function( position, direction ) {
+               var options = this._buildSimpleOptions( position, direction, "ui-spinner" );
+
+               options.classes[ "ui-spinner-up" ] = "";
+               options.classes[ "ui-spinner-down" ] = "";
+
+               return options;
+       },
+
        _button_options: function( position, direction ) {
                return this._buildSimpleOptions( position, direction, "ui-button" );
        },
@@ -191,11 +201,12 @@ return $.widget( "ui.controlgroup", {
 
                        // We do this last because we need to make sure all enhancment is done
                        // before determining first and last
-                       [ "first", "last" ].forEach( function( value ) {
-                               var data = children[ value ]().data( "ui-controlgroup-data" );
-                               if ( that[ "_" + data.widgetType + "_options" ] ) {
-                                       data.element[ data.widgetType ](
-                                               that[ "_" + data.widgetType + "_options" ](
+                       $.each( [ "first", "last" ], function( index, value ) {
+                               var instance = children[ value ]().data( "ui-controlgroup-data" );
+                               console.log( instance )
+                               if ( that[ "_" + instance.widgetName + "_options" ] ) {
+                                       instance.element[ instance.widgetName ](
+                                               that[ "_" + instance.widgetName + "_options" ](
                                                        value,
                                                        that.options.direction === "vertical"
                                                )