Skip to content
Permalink
Browse files

Checkboxradio: Address review comments

  • Loading branch information...
arschmitz committed Sep 16, 2015
1 parent 197061b commit 344ce3c87c6bfed785c1c7f2c5c22f6034923743
@@ -7,9 +7,7 @@
<link rel="stylesheet" href="../demos.css">
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js">
$( "input" ).checkboxradio({
label: "foo"
});
$( "input" ).checkboxradio();
</script>
</head>
<body>
@@ -62,4 +62,4 @@ <h2>Checkbox nested in label</h2>
<p>Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.</p>
</div>
</body>
</html>
</html>
@@ -7,28 +7,45 @@
<link rel="stylesheet" href="../demos.css">
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="controlgroup">
$( "input" ).checkboxradio();
$( "[name='shape']").on( "change", function(){
$( ".shape" ).removeClass( "circle pill square rectangle" )
.addClass( $( this ).val() );
});
$( ".toggle" ).on( "change", function(){
if ( $( this ).is( ".brand-toggle" ) ) {
var checked = $( this ).is( ":checked" ),
value = $( "[name='brand']" ).filter( ":checked" ).attr( "data-" + this.id )
$( ".shape" ).css( this.id, checked ? value : "" );
function handleShape( e ) {
$( ".shape" )
.removeClass( "circle pill square rectangle" )
.addClass( $( e.target ).val() );
};
function handleToggle( e ) {
var target = $( e.target );
if ( target.is( ".brand-toggle" ) ) {
var checked = target.is( ":checked" ),
value = $( "[name='brand']" )
.filter( ":checked" )
.attr( "data-" + target[ 0 ].id )
$( ".shape" ).css( target[ 0 ].id, checked ? value : "" );
} else {
$( ".shape" ).toggleClass( this.id, $( this ).is( ":checked") );
$( ".shape" ).toggleClass( target[ 0 ].id, target.is( ":checked") );
}
});
$( "[name='brand']").on( "change", function(){
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
});
$( "input" ).filter( ":checked" ).trigger( "change" );
}
function updateBrand() {
handleShape( { target: $( "[name='shape']:checked" ) } );
$( ".toggle:checked" ).each( function() {
handleToggle( { target: $( this ) } );
} );
}
// Initalize widgets
$( "input" ).checkboxradio();
$( ".shape-bar, .brand" ).controlgroup();
$( ".toggles" ).controlgroup({
$( ".toggles" ).controlgroup( {
direction: "vertical"
});
} );
// Bind event handlers
$( "[name='shape']").on( "change", handleShape );
$( ".toggle" ).on( "change", handleToggle );
$( "[name='brand']").on( "change", updateBrand );
// Set initial values
updateBrand();
</script>
<style>
.shape {
@@ -74,15 +91,15 @@
<h3>1.) Select a brand</h3>
<div class="brand">
<label for="brand-jquery">jQuery</label>
<input data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
<input type="radio" name="brand" id="brand-jquery" data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)">
<label for="brand-jquery-ui">jQuery UI</label>
<input data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" type="radio" name="brand" id="brand-jquery-ui" checked>
<input type="radio" name="brand" id="brand-jquery-ui" data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" checked>
<label for="brand-jquery-mobile">jQuery Mobile</label>
<input data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)" type="radio" name="brand" id="brand-jquery-mobile">
<input type="radio" name="brand" id="brand-jquery-mobile" data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)">
<label for="brand-sizzle">Sizzle</label>
<input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
<input type="radio" name="brand" id="brand-sizzle" data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)">
<label for="brand-qunit">QUnit</label>
<input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
<input type="radio" name="brand" id="brand-qunit" data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)">
</div>
</div>
<div class="shape-wrap">
@@ -39,7 +39,7 @@
</head>
<body>
<h2>
Easy way to toggle through various combinations of options and states to make sure non lead to
Easy way to toggle through various combinations of options and states to make sure none lead to
a broken appearence.
</h2>
<div class="controls">
@@ -2,7 +2,7 @@
* jQuery UI Checkboxradio @VERSION
* http://jqueryui.com
*
* Copyright 2013 jQuery Foundation and other contributors
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
@@ -57,8 +57,6 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {

labels = this.element.labels();

// Todo: For now we will use the last label we need to check about the best
// way to handle multiple labels with some accessability experts
this.label = $( labels[ labels.length - 1 ] );
if ( !this.label.length ) {
$.error( "No label found for checkboxradio widget" );
@@ -70,8 +68,8 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
// input itself.
this.label.contents().not( this.element ).each( function() {

// The label contents could be text html or a mix we concat each element to get a string
// representation of the label without the input as part of it.
// The label contents could be text, html, or a mix. We concat each element to get a string
// representation of the label, without the input as part of it.
that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML;
} );

@@ -96,7 +94,7 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
this.formParent = this.form.length ? this.form : $( "body" );

if ( this.options.disabled == null ) {
this.options.disabled = this.element[ 0 ].disabled || false;
this.options.disabled = this.element[ 0 ].disabled;
}

this._setOption( "disabled", this.options.disabled );
@@ -121,11 +119,11 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
}

this._on( {
"change": "_toggleClasses",
"focus": function() {
change: "_toggleClasses",
focus: function() {
this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
},
"blur": function() {
blur: function() {
this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
}
} );
@@ -150,15 +148,15 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
},

_getRadioGroup: function() {
var name = this.element[ 0 ].name,
that = this,
radios = $( [] );
var name = this.element[ 0 ].name;
var formParent = this.formParent[ 0 ];
var radios = $( [] );

if ( name ) {
name = $.ui.escapeSelector( name );
radios = this.formParent.find( "[name='" + $.ui.escapeSelector( name ) + "']" ).filter( function() {
var form = $( this ).form();
return ( form.length ? form : $( "body" ) )[ 0 ] === that.formParent[ 0 ];
return ( form.length ? form : $( "body" ) )[ 0 ] === formParent;
} );
}
return radios.not( this.element );
@@ -198,7 +196,7 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {

_setOption: function( key, value ) {

// We don't alow the value to be set to nothing
// We don't allow the value to be set to nothing
if ( key === "label" && !value ) {
return;
}

0 comments on commit 344ce3c

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