Skip to content
Permalink
Browse files

Controlgroup: fixup for spinner and label

  • Loading branch information...
arschmitz committed Aug 14, 2015
1 parent 6c1390d commit 3330634c4e4e6a1a7deff56a2d278ed9d8db0ce9
Showing with 29 additions and 12 deletions.
  1. +4 −2 demos/controlgroup/default.html
  2. +3 −1 tests/unit/controlgroup/common.js
  3. +4 −2 themes/base/controlgroup.css
  4. +18 −7 ui/widgets/controlgroup.js
@@ -16,8 +16,8 @@
#car-type-button {
width: 120px;
}
.ui-controlgroup-horizontal .ui-spinner {
width: 50px;
.ui-controlgroup-horizontal .ui-spinner-input {
width: 20px;
}
</style>
<script src="../../external/requirejs/require.js"></script>
@@ -26,13 +26,15 @@
$( ".controlgroup-vertical" ).controlgroup({
"direction": "vertical"
});
$( ".button" ).button();
</script>
</head>
<body>
<div class="widget">
<h1>Controlgroup</h1>
<fieldset>
<legend>Rental Car</legend>
<button class="button">button</button>
<div class="controlgroup">
<select id="car-type">
<option>Compact car</option>
@@ -12,7 +12,9 @@ common.testWidget( "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",
"controlgroupLabel": ".ui-controlgroup-label"
},
direction: "horizontal",
excludeInvisible: true,
@@ -11,6 +11,7 @@

.ui-controlgroup {
vertical-align: middle;
display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
float: left;
@@ -31,8 +32,9 @@
.ui-controlgroup-vertical .ui-controlgroup-item {
box-sizing: border-box;
}
.ui-controlgroup-label {
padding: .4em 1em;
.ui-controlgroup .ui-controlgroup-label {
font-size: .83em;
padding: .6em 1em;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
border-left: none;
@@ -80,25 +80,25 @@ return $.widget( "ui.controlgroup", {
// Make sure the widget actually exists and has a selector set
if ( $.fn[ widget ] && selector ) {

// Find instances of this widget inside controlgroup and run method or set options
// Find instances of this widget inside controlgroup and set options
widgets = that.element.find( selector )[ widget ]( options );

// Don't set data or add to the collection if the method is destroy
widgets.each( function() {
var element = $( this );
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 =
element[ widget ]( "widget" ).data( "ui-controlgroup-data", element.data( "ui-" +
widget.charAt(0).toUpperCase() + widget.slice(1) ) );
widgetElement = element[ widget ]( "widget" ).data(
"ui-controlgroup-data",
element.data( "ui-" + widget.charAt(0).toUpperCase() + widget.slice(1) )
);

childWidgets.push( widgetElement[ 0 ] );
} );
} else if ( selector && widget === "controlgroupLabel" ) {
labels = that.element.find( selector );
that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
Array.prototype.push.apply( childWidgets, labels );
Array.prototype.push.apply( childWidgets, labels.get() );
}
} );

@@ -116,6 +116,15 @@ return $.widget( "ui.controlgroup", {
} );
},

_updateCornerClass: function( element, position ) {
var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right",
add =
this._buildSimpleOptions( position, this.options.direction, "label" ).classes.label;

this._removeClass( element, null, remove );
this._addClass( element, null, add );
},

_buildSimpleOptions: function( position, direction, key ) {
var result = {
classes: {}
@@ -217,6 +226,8 @@ return $.widget( "ui.controlgroup", {
that.options.direction === "vertical"
)
);
} else {
that._updateCornerClass( children[ value ](), value );
}
} );

0 comments on commit 3330634

Please sign in to comment.
You can’t perform that action at this time.