From: Alexander Schmitz Date: Thu, 28 Aug 2014 19:16:51 +0000 (-0400) Subject: Checkboxradio: Initial commit of new widget X-Git-Tag: 1.12.0-beta.1~97 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=25d0c857188c19347c869f803530289762199f92;p=jquery-ui.git Checkboxradio: Initial commit of new widget --- diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html new file mode 100644 index 000000000..c8f4c5566 --- /dev/null +++ b/demos/checkboxradio/default.html @@ -0,0 +1,70 @@ + + + + + jQuery UI Checkboxradio - Default functionality + + + + + + + + + +
+

Checkbox and radio button widgets

+ +

Radio Group

+
+ Select a Location: + + + + + + +
+ +

Checkbox

+
+ Hotel Ratings: + + + + + + + + +
+ +

Checkbox nested in label

+
+ Bed Type: + + + + +
+
+ +
+

Examples of the markup that can be used with checkboxes and radio buttons.

+
+ + diff --git a/demos/checkboxradio/images/jquery-mobile.png b/demos/checkboxradio/images/jquery-mobile.png new file mode 100644 index 000000000..fe2c36376 Binary files /dev/null and b/demos/checkboxradio/images/jquery-mobile.png differ diff --git a/demos/checkboxradio/images/jquery-ui.png b/demos/checkboxradio/images/jquery-ui.png new file mode 100644 index 000000000..651e2e115 Binary files /dev/null and b/demos/checkboxradio/images/jquery-ui.png differ diff --git a/demos/checkboxradio/images/jquery.png b/demos/checkboxradio/images/jquery.png new file mode 100644 index 000000000..ff3fdc21d Binary files /dev/null and b/demos/checkboxradio/images/jquery.png differ diff --git a/demos/checkboxradio/images/qunit.png b/demos/checkboxradio/images/qunit.png new file mode 100644 index 000000000..048bcfddb Binary files /dev/null and b/demos/checkboxradio/images/qunit.png differ diff --git a/demos/checkboxradio/images/sizzle.png b/demos/checkboxradio/images/sizzle.png new file mode 100644 index 000000000..6145cd8ec Binary files /dev/null and b/demos/checkboxradio/images/sizzle.png differ diff --git a/demos/checkboxradio/index.html b/demos/checkboxradio/index.html new file mode 100644 index 000000000..08e598dbc --- /dev/null +++ b/demos/checkboxradio/index.html @@ -0,0 +1,18 @@ + + + + + + jQuery UI Checkboxradio Demos + + + + + + + diff --git a/demos/checkboxradio/no-icons.html b/demos/checkboxradio/no-icons.html new file mode 100644 index 000000000..64b511246 --- /dev/null +++ b/demos/checkboxradio/no-icons.html @@ -0,0 +1,70 @@ + + + + + jQuery UI Checkboxradio - No Icons + + + + + + + + + +
+

Checkbox and radio button widgets

+ +

Radio Group

+
+ Select a Location: + + + + + + +
+ +

Checkbox

+
+ Hotel Ratings: + + + + + + + + +
+ +

Checkbox nested in label

+
+ Bed Type: + + + + +
+
+ +
+

Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.

+
+ + \ No newline at end of file diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html new file mode 100644 index 000000000..f8da07118 --- /dev/null +++ b/demos/checkboxradio/product-selector.html @@ -0,0 +1,127 @@ + + + + + jQuery UI Checkboxradio - Product Selector + + + + + + + + + + + +
+
+

1.) Select a brand

+
+ + + + + + + + + + +
+
+
+

2.) Select a shape

+
+ + + + + + + + +
+
+
+

3.) Customize

+
+ + + + + + + + +
+
+
+
+ +
+

Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.

+
+ + diff --git a/demos/checkboxradio/radiogroup.html b/demos/checkboxradio/radiogroup.html new file mode 100644 index 000000000..b307db82d --- /dev/null +++ b/demos/checkboxradio/radiogroup.html @@ -0,0 +1,39 @@ + + + + + jQuery UI Checkboxradio - Radio Group + + + + + + + + + + +
+ +

Radio Group

+
+ Select a Location: + + + + + + +
+
+ +
+

Example markup using the controlgroup widget to create a radio group.

+
+ + diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html new file mode 100644 index 000000000..9e4bcdd80 --- /dev/null +++ b/demos/controlgroup/default.html @@ -0,0 +1,90 @@ + + + + + jQuery UI Controlgroup - Default Functionality + + + + + + + + + + + + + + + +
+

A Controlgroup featuring various form controls

+
+
+

Controlgroup

+
+ Rental Car +
+ + + + + + + + +
+
+
+
+ Rental Car +
+ + + + + + + + +
+
+>>>>>>> 423b976... Checkboxradio: Fixed demos and tests +
+ + + diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html new file mode 100644 index 000000000..58e2f7eda --- /dev/null +++ b/demos/controlgroup/index.html @@ -0,0 +1,17 @@ + + + + + + jQuery UI Checkboxradio Demos + + + + + + + diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html new file mode 100644 index 000000000..5d4c7b3ce --- /dev/null +++ b/demos/controlgroup/splitbutton.html @@ -0,0 +1,58 @@ + + + + + jQuery UI Controlgroup - Split Button + + + + + + + + + + + + + + + +
+

A Controlgroup creating a split button

+
+
+

Split button

+
+ + +
+
+
+

A Controlgroup creating a split button

+
+ + diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html new file mode 100644 index 000000000..f90fb3040 --- /dev/null +++ b/demos/controlgroup/toolbar.html @@ -0,0 +1,256 @@ + + + + + jQuery UI Controlgroup - Toolbar + + + + + + + + + + + + + + + +
+

A sample editor toolbar

+

Highlight text and edit it using the buttons and dropdowns in the toolbar

+
+
+ + + + + + + + + + + + +
+

+
+The Rime of the Ancient Mariner (text of 1834)
+BY SAMUEL TAYLOR COLERIDGE
+Argument 
+
+How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
+and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and 
+of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
+Country.
+
+PART I
+It is an ancient Mariner,
+And he stoppeth one of three.
+'By thy long grey beard and glittering eye,
+Now wherefore stopp'st thou me?
+
+The Bridegroom's doors are opened wide,
+And I am next of kin;
+The guests are met, the feast is set:
+May'st hear the merry din.'
+
+He holds him with his skinny hand,
+'There was a ship,' quoth he.
+'Hold off! unhand me, grey-beard loon!'
+Eftsoons his hand dropt he.
+
+He holds him with his glittering eye—
+The Wedding-Guest stood still,
+And listens like a three years' child:
+The Mariner hath his will.
+
+The Wedding-Guest sat on a stone:
+He cannot choose but hear;
+And thus spake on that ancient man,
+The bright-eyed Mariner.
+
+'The ship was cheered, the harbour cleared,
+Merrily did we drop
+Below the kirk, below the hill,
+Below the lighthouse top.
+
+The Sun came up upon the left,
+Out of the sea came he!
+And he shone bright, and on the right
+Went down into the sea.
+
+Higher and higher every day,
+Till over the mast at noon—'
+The Wedding-Guest here beat his breast,
+For he heard the loud bassoon.
+
+The bride hath paced into the hall,
+Red as a rose is she;
+Nodding their heads before her goes
+The merry minstrelsy.
+
+The Wedding-Guest he beat his breast,
+Yet he cannot choose but hear;
+And thus spake on that ancient man,
+The bright-eyed Mariner.
+
+And now the STORM-BLAST came, and he
+Was tyrannous and strong:
+He struck with his o'ertaking wings,
+And chased us south along.
+
+With sloping masts and dipping prow,
+As who pursued with yell and blow
+Still treads the shadow of his foe,
+And forward bends his head,
+The ship drove fast, loud roared the blast,
+And southward aye we fled.
+
+And now there came both mist and snow,
+And it grew wondrous cold:
+And ice, mast-high, came floating by,
+As green as emerald.
+
+And through the drifts the snowy clifts
+Did send a dismal sheen:
+Nor shapes of men nor beasts we ken—
+The ice was all between.
+
+The ice was here, the ice was there,
+The ice was all around:
+It cracked and growled, and roared and howled,
+Like noises in a swound!
+
+At length did cross an Albatross,
+Thorough the fog it came;
+As if it had been a Christian soul,
+We hailed it in God's name.
+
+It ate the food it ne'er had eat,
+And round and round it flew.
+The ice did split with a thunder-fit;
+The helmsman steered us through!
+
+And a good south wind sprung up behind;
+The Albatross did follow,
+And every day, for food or play,
+Came to the mariner's hollo!
+
+In mist or cloud, on mast or shroud,
+It perched for vespers nine;
+Whiles all the night, through fog-smoke white,
+Glimmered the white Moon-shine.'
+
+'God save thee, ancient Mariner!
+From the fiends, that plague thee thus!—
+Why look'st thou so?'—With my cross-bow
+I shot the ALBATROSS.
+
+ + diff --git a/demos/index.html b/demos/index.html index f37874a44..4b4d04e06 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,6 +11,7 @@
  • accordion
  • autocomplete
  • button
    • +
  • checkboxradio
  • datepicker
  • dialog
  • draggable
    • diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..92db788c5 --- /dev/null +++ b/tests/unit/checkboxradio/checkboxradio.html @@ -0,0 +1,69 @@ + + + + + jQuery UI Checkboxradio Test Suite + + + + + + + +
    +
    + +
    + + + +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    +
    +
    + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    + + diff --git a/tests/unit/checkboxradio/common.js b/tests/unit/checkboxradio/common.js new file mode 100644 index 000000000..6a739435f --- /dev/null +++ b/tests/unit/checkboxradio/common.js @@ -0,0 +1,22 @@ +define( [ + "lib/common", + "ui/checkboxradio" +], function( common ) { + +common.testWidget( "checkboxradio", { + noDefaultElement: true, + defaults: { + disabled: null, + label: null, + icon: true, + classes: { + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-icon": "ui-corner-all" + }, + + // Callbacks + create: null + } +}); + +} ); diff --git a/tests/unit/checkboxradio/core.js b/tests/unit/checkboxradio/core.js new file mode 100644 index 000000000..e70ca58c1 --- /dev/null +++ b/tests/unit/checkboxradio/core.js @@ -0,0 +1,102 @@ +define( [ + "jquery", + "ui/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: core" ); +test( "Checkbox - Initial class structure", function( assert ) { + expect( 2 ); + var input = $("#check"), + label = $("label[for=check]"); + + input.checkboxradio(); + assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" ); + assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all" ); +}); + +test( "Radios - Initial class structure", function( assert ) { + expect( 6 ); + var inputs = $( "#radio0 input" ), + labels = $( "#radio0 label" ); + + inputs.checkboxradio(); + inputs.each( function() { + assert.hasClasses( this, "ui-helper-hidden-accessible" ); + }); + labels.each( function() { + assert.hasClasses( this, "ui-button" ); + }); +}); + +asyncTest( "Ensure checked after single click on checkbox label button", function( assert ) { + expect( 2 ); + + $( "#check2" ).checkboxradio().change( function() { + var label = $( this ).checkboxradio( "widget" ); + ok( this.checked, "checked ok" ); + + assert.hasClasses( label, "ui-state-active" ); + }); + + // Support: Opera + // Opera doesn't trigger a change event when this is done synchronously. + // This seems to be a side effect of another test, but until that can be + // tracked down, this delay will have to do. + setTimeout(function() { + $( "#check2" ).checkboxradio( "widget" ).simulate( "click" ); + start(); + }); +}); + +test( "Checkbox creation requires a label, and finds it in all cases", function( assert ) { + expect( 7 ); + var groups = [ + "", + "", + "", + "", + "", + "", + "" + ]; + + $.each( groups, function( index, markup ) { + var group = $( markup ); + + group.find( "input[type=checkbox]" ).checkboxradio(); + assert.hasClasses( group.find( "label" ), "ui-button" ); + } ); +}); + +test( "Calling checkboxradio on an unsupported element throws an error", function( assert ) { + expect( 2 ); + var error = new Error( "Can't create checkboxradio on element.nodeName=div and element.type=undefined" ); + assert.raises( + function() { + $( "
    " ).checkboxradio(); + }, + error, + "Proper error thrown" + ); + error = new Error( "Can't create checkboxradio on element.nodeName=input and element.type=button" ); + assert.raises( + function() { + $( "" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); +}); +test( "Calling checkboxradio on an input with no label throws an error", function( assert ) { + expect( 1 ); + var error = new Error( "No label found for checkboxradio widget" ); + assert.raises( + function() { + $( "" ).checkboxradio(); + }, + error, + "Proper error thrown" + ); +}); + +} ); diff --git a/tests/unit/checkboxradio/events.js b/tests/unit/checkboxradio/events.js new file mode 100644 index 000000000..e5909a386 --- /dev/null +++ b/tests/unit/checkboxradio/events.js @@ -0,0 +1,113 @@ +define( [ + "jquery", + "ui/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: events" ); + +asyncTest( "form reset / click", function( assert ) { + expect( 35 ); + + var radios = [ + $( "#radio11" ).checkboxradio(), + $( "#radio12" ).checkboxradio(), + $( "#radio13" ).checkboxradio() + ], + widgets = [ + radios[ 0 ].checkboxradio( "widget" ), + radios[ 1 ].checkboxradio( "widget" ), + radios[ 2 ].checkboxradio( "widget" ) + ], + form1 = $( "#form1" ), + form2 = $( "#form2" ); + + // Checkes that only the specified radio is checked in the group + function assertChecked( checked ) { + $.each( widgets, function( index ) { + var method = index === checked ? "hasClasses" : "lacksClasses"; + + assert[ method ]( widgets[ index ], "ui-checkboxradio-checked ui-state-active" ); + } ); + } + + // Checks the form count on each form + function assertFormCount( count ) { + equal( form1.data( "uiCheckboxradioCount" ), count, "Form1 has a count of " + count ); + equal( form2.data( "uiCheckboxradioCount" ), 3, "Form2 has a count of 3" ); + } + + // Run the tests + function testForms( current, start ) { + assertChecked( 2 ); + + if ( !start && current !== 0 ) { + radios[ current - 1 ].checkboxradio( "destroy" ); + } + + assertFormCount( 3 - current ); + + radios[ current ].prop( "checked", true ); + radios[ current ].trigger( "change" ); + assertChecked( current ); + + form1.trigger( "reset" ); + } + + // Recoursivly run the tests in a setTimeout with call back for the resets + function iterate( i ) { + setTimeout( function() { + if ( i < 3 ) { + testForms( i ); + iterate( i + 1 ); + return; + } + radios[ 2 ].checkboxradio( "destroy" ); + assertChecked( false ); + start(); + } ); + } + + $( "#form2 input" ).checkboxradio(); + + // Check the starting state then kick everything off + testForms( 0, true ); + iterate( 0 ); + +} ); + +asyncTest( + "Resetting a checkbox's form should refresh the visual state of the checkbox", + function( assert ) { + expect( 2 ); + var form = $( "
    " + + "" + + "
    " ), + checkbox = form.find( "input[type=checkbox]" ).checkboxradio(), + widget = checkbox.checkboxradio( "widget" ); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + assert.lacksClasses( widget, "ui-state-active" ); + + form.get( 0 ).reset(); + + setTimeout(function() { + assert.hasClasses( widget, "ui-state-active" ); + start(); + }, 1 ); + } +); + +asyncTest( "Checkbox shows focus when using keyboard navigation", function( assert ) { + expect( 2 ); + var check = $( "#check" ).checkboxradio(), + label = $( "label[for='check']" ); + assert.lacksClasses( label, "ui-state-focus" ); + check.focus(); + setTimeout(function() { + assert.hasClasses( label, "ui-state-focus" ); + start(); + } ); + } +); + +} ); diff --git a/tests/unit/checkboxradio/methods.js b/tests/unit/checkboxradio/methods.js new file mode 100644 index 000000000..f189c9eea --- /dev/null +++ b/tests/unit/checkboxradio/methods.js @@ -0,0 +1,97 @@ +define( [ + "jquery", + "ui/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: methods" ); + +$.each( [ "checkbox", "radio" ], function( index, value ) { + test( value + ": refresh", function( assert ) { + var widget, icon, + checkbox = value === "checkbox", + input = $( "#" + value + "-method-refresh" ); + + expect( checkbox ? 11 : 8 ); + + input.checkboxradio(); + + widget = input.checkboxradio( "widget" ); + icon = widget.find( ".ui-icon" ); + strictEqual( icon.length, 1, + "There is initally one icon" ); + + icon.remove(); + input.checkboxradio( "refresh" ); + icon = widget.find( ".ui-icon" ); + strictEqual( icon.length, 1, + "Icon is recreated on refresh if absent" ); + assert.hasClasses( icon, "ui-icon-blank" ); + if ( checkbox ) { + assert.lacksClasses( icon, "ui-icon-check" ); + } + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); + + input.prop( "checked", true ); + input.checkboxradio( "refresh" ); + if ( checkbox ) { + assert.hasClasses( icon, "ui-icon-check" ); + } + assert[ !checkbox ? "hasClasses" : "lacksClasses" ]( icon, "ui-icon-blank" ); + assert.hasClasses( widget, "ui-checkboxradio-checked" ); + + input.prop( "checked", false ); + input.checkboxradio( "refresh" ); + assert.hasClasses( icon, "ui-icon-blank" ); + if ( checkbox ) { + assert.lacksClasses( icon, "ui-icon-check" ); + } + assert.lacksClasses( widget, "ui-checkboxradio-checked" ); + }); + + test( value + ": destroy", function( assert ){ + expect( 1 ); + assert.domEqual( "#" + value + "-method-destroy", function() { + $( "#" + value + "-method-destroy" ).checkboxradio().checkboxradio( "destroy" ); + }); + }); + + test( value + ": disable / enable", function( assert ) { + expect( 4 ); + var input = $( "#" + value + "-method-disable" ), + widget = input.checkboxradio().checkboxradio( "widget" ); + + input.checkboxradio( "disable" ); + assert.hasClasses( widget, "ui-state-disabled" ); + strictEqual( input.is( ":disabled" ), true, + value + " is disabled when disable is called" ); + + input.checkboxradio( "enable" ); + assert.lacksClasses( widget, "ui-state-disabled" ); + strictEqual( input.is( ":disabled" ), false, + value + " has disabled prop removed when enable is called" ); + }); + + test( value + ": widget returns the label", function(){ + var input = $( "#" + value + "-method-refresh" ), + label = $( "#" + value + "-method-refresh-label" ); + + expect( 1 ); + + input.checkboxradio(); + strictEqual( input.checkboxradio( "widget" )[ 0 ], label[ 0 ], + "widget method returns label" ); + }); + +} ); + +test( "Input wrapped in a label preserved on refresh", function() { + var input = $( "#label-with-no-for" ).checkboxradio(), + element = input.checkboxradio( "widget" ); + + expect( 1 ); + + input.checkboxradio( "refresh" ); + strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" ); +}); + +} ); diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js new file mode 100644 index 000000000..11bd072ca --- /dev/null +++ b/tests/unit/checkboxradio/options.js @@ -0,0 +1,189 @@ +define( [ + "jquery", + "ui/checkboxradio" +], function( $ ) { + +module( "Checkboxradio: options" ); + +function assertDisabled( checkbox, assert ) { + assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled", + "label gets ui-state-disabled" ); + strictEqual( checkbox.is( ":disabled" ), true, + "checkbox is disabled" ); +} + +function assertEnabled( checkbox, assert ) { + assert.lacksClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled", + "label has ui-state-disabled removed when disabled set to false" ); + strictEqual( checkbox.is( ":disabled" ), false, + "checkbox has disabled prop removed when disabled set to false" ); +} + +test( "disabled", function( assert ) { + var checkbox = $( "#checkbox-option-disabled" ); + expect( 6 ); + checkbox.checkboxradio({ + disabled: true + }); + + assertDisabled( checkbox, assert ); + + checkbox.checkboxradio( "option", "disabled", false ); + assertEnabled( checkbox, assert ); + + checkbox.checkboxradio( "option", "disabled", true ); + assertDisabled( checkbox, assert ); +}); +test( "disabled - prop true on init", function( assert ) { + expect( 2 ); + var checkbox = $( "#checkbox-option-disabled" ); + + checkbox.prop( "disabled", true ); + checkbox.checkboxradio(); + + assertDisabled( checkbox, assert ); +}); +test( "disabled - explicit null value, checks the DOM", function( assert ) { + expect( 2 ); + var checkbox = $( "#checkbox-option-disabled" ); + + checkbox.prop( "disabled", true ); + checkbox.checkboxradio({ + disabled: null + }); + assertDisabled( checkbox, assert ); +}); + +function assertNoIcon( checkbox ) { + strictEqual( checkbox.checkboxradio( "widget" ).find( "span.ui-icon" ).length, 0, + "Label does not contain an icon" ); +} +function assertIcon( checkbox, icon, assert ) { + var iconElement = checkbox.checkboxradio( "widget" ).find( ".ui-icon" ); + + icon = icon || "blank"; + strictEqual( iconElement.length, 1, + "Label contains icon" ); + assert.hasClasses( iconElement, "ui-checkboxradio-icon ui-corner-all ui-icon " + + "ui-icon-background ui-icon-" + icon, + "Icon has proper classes" ); +} +test( "icon - false on init", function() { + var checkbox = $( "#checkbox-option-icon" ); + + expect( 1 ); + + checkbox.checkboxradio({ icon: false }); + assertNoIcon( checkbox ); +}); + +test( "icon - default unchecked", function( assert ) { + var checkbox = $( "#checkbox-option-icon" ); + + expect( 2 ); + + checkbox.checkboxradio(); + assertIcon( checkbox, false, assert ); +}); +test( "icon", function( assert ){ + var checkbox = $( "#checkbox-option-icon" ); + + expect( 8 ); + + checkbox.prop( "checked", true ); + + checkbox.checkboxradio(); + assertIcon( checkbox, "check", assert ); + + checkbox.checkboxradio( "option", "icon", false ); + assertNoIcon( checkbox ); + + checkbox.checkboxradio( "option", "icon", true ); + assertIcon( checkbox, "check", assert ); + + checkbox.checkboxradio( "option", "icon", false ); + assertNoIcon( checkbox ); + + checkbox.prop( "checked", false ).checkboxradio( "refresh" ); + checkbox.checkboxradio( "option", "icon", true ); + assertIcon( checkbox, false, assert ); + +}); + +test( "label - default", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "checkbox label", "When no value passed on create text from dom is used for option" ); + strictEqual( widget.text(), + " checkbox label", "When no value passed on create text from dom is used in dom" ); +}); +test( "label - explicit value", function() { + expect( 5 ); + var checkbox = $( "#checkbox-option-label" ).checkboxradio({ + label: "foo" + }), + widget = checkbox.checkboxradio( "widget" ), + icon = widget.find( ".ui-icon" ), + iconSpace = widget.find( ".ui-checkboxradio-icon-space" ); + + strictEqual( checkbox.checkboxradio( "option", "label" ), + "foo", "When value is passed on create value is used for option" ); + strictEqual( widget.text(), + " foo", "When value is passed on create value is used in dom" ); + strictEqual( icon.length, 1, + "Icon is preserved when label is set on init when wrapped in label" ); + strictEqual( iconSpace.length, 1, + "Icon space is preserved when label is set on init when wrapped in label" ); + strictEqual( $( "#checkbox-option-label" ).length, 1, + "Element is preserved when label is set on init when wrapped in label" ); +}); + +test( "label - explicit null value", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 2 ); + + // We are testing the default here because the default null is a special value which means to check + // the DOM, so we need to make sure this happens correctly checking the options should never return + // null. It should always be true or false + checkbox.checkboxradio({ + label: null + }); + widget = checkbox.checkboxradio( "widget" ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "checkbox label", "When null is passed on create text from dom is used for option" ); + strictEqual( widget.text(), + " checkbox label", "When null is passed on create text from dom is used in dom" ); + +}); + +test( "label", function() { + var checkbox = $( "#checkbox-option-label" ), + widget; + + expect( 4 ); + + checkbox.checkboxradio(); + widget = checkbox.checkboxradio( "widget" ); + checkbox.checkboxradio( "option", "label", "bar" ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "bar", "When value is passed value is used for option" ); + strictEqual( widget.text(), + " bar", "When value is passed value is used in dom" ); + + checkbox.checkboxradio( "option", "label", null ); + strictEqual( checkbox.checkboxradio( "option", "label" ), + "bar", "When null is passed text from dom is used for option" ); + strictEqual( widget.text(), + " bar", "When null is passed text from dom is used in dom" ); + +}); + +} ); diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js new file mode 100644 index 000000000..e69de29bb diff --git a/tests/unit/index.html b/tests/unit/index.html index 418cfd34c..fe358cb6c 100644 --- a/tests/unit/index.html +++ b/tests/unit/index.html @@ -40,6 +40,7 @@
  • Accordion
  • Autocomplete
  • Button
    • +
  • Checkboxradio
  • Datepicker
  • Dialog
  • Menu
    • diff --git a/tests/visual/checkboxradio/checkboxradio.html b/tests/visual/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..634e8df81 --- /dev/null +++ b/tests/visual/checkboxradio/checkboxradio.html @@ -0,0 +1,65 @@ + + + + + jQuery UI - Checkboxes + + + + + + + + + + +

    + Easy way to toggle through various combinations of options and states to make sure non lead to + a broken appearence. +

    +
    + + + + + + + + +
    +
    + + + + + + + +
    + + diff --git a/tests/visual/index.html b/tests/visual/index.html index 98753c827..39168c9f4 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -31,6 +31,11 @@
  • Performance
    • +

    Checkboxradio

    + +

    Dialog

    • Animations
      • diff --git a/themes/base/base.css b/themes/base/base.css index 3ed02661f..7194eba27 100644 --- a/themes/base/base.css +++ b/themes/base/base.css @@ -13,6 +13,7 @@ @import url("accordion.css"); @import url("autocomplete.css"); @import url("button.css"); +@import url("checkboxradio.css"); @import url("datepicker.css"); @import url("dialog.css"); @import url("draggable.css"); diff --git a/themes/base/checkboxradio.css b/themes/base/checkboxradio.css new file mode 100644 index 000000000..063ed5b5c --- /dev/null +++ b/themes/base/checkboxradio.css @@ -0,0 +1,33 @@ +/*! + * jQuery UI Checkboxradio @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + * + * http://api.jqueryui.com/checkboxradio/#theming + */ + +.ui-checkboxradio-label .ui-icon-background { + border-radius: .12em; + border: none; +} +.ui-checkboxradio-radio-label .ui-icon-background { + width: 16px; + height: 16px; + border-radius: 1em; + overflow: visible; + border: none; +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: none; + width: 8px; + height: 8px; + border-width: 4px; + border-style: solid; +} +.ui-checkboxradio-disabled { + pointer-events: none; +} diff --git a/themes/base/theme.css b/themes/base/theme.css index eddbc8a0b..7553d4c58 100644 --- a/themes/base/theme.css +++ b/themes/base/theme.css @@ -102,12 +102,18 @@ a.ui-button:focus { .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, -.ui-button:active { +.ui-button:active, +.ui-button.ui-state-active:hover { border: 1px solid #003eff/*{borderColorActive}*/; background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #ffffff/*{fcActive}*/; } +.ui-icon-background, +.ui-state-active .ui-icon-background { + border: #003eff/*{borderColorActive}*/; + background-color: #ffffff/*{bgColorActive}*/; +} .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { @@ -184,7 +190,6 @@ a.ui-button:active, .ui-widget-header .ui-icon { background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/; } -.ui-state-default .ui-icon, .ui-button .ui-icon { background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/; } @@ -198,7 +203,8 @@ a.ui-button:active, .ui-button:active .ui-icon { background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/; } -.ui-state-highlight .ui-icon { +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/; } .ui-state-error .ui-icon, diff --git a/ui/checkboxradio.js b/ui/checkboxradio.js new file mode 100644 index 000000000..84f69afaa --- /dev/null +++ b/ui/checkboxradio.js @@ -0,0 +1,289 @@ +/*! + * jQuery UI Checkboxradio @VERSION + * http://jqueryui.com + * + * Copyright 2014 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + * + * http://api.jqueryui.com/checkboxradio/ + */ +( function( factory ) { + if ( typeof define === "function" && define.amd ) { + + // AMD. Register as an anonymous module. + define( [ + "jquery", + "./core", + "./widget" + ], factory ); + } else { + + // Browser globals + factory( jQuery ); + } +}( function( $ ) { + +// Remove and replace with reset handler extension +var formResetHandler = function() { + var form = $( this ); + + // Wait for the form reset to actually happen before refreshing + setTimeout( function() { + + // We dont filter for css only versions since css only is not supported + form.find( ".ui-checkboxradio" ).checkboxradio( "refresh" ); + } ); + }; + +$.widget( "ui.checkboxradio", { + version: "@VERSION", + options: { + disabled: null, + label: null, + icon: true, + classes: { + "ui-checkboxradio-label": "ui-corner-all", + "ui-checkboxradio-icon": "ui-corner-all" + } + }, + + _getCreateOptions: function() { + var disabled, labels, + that = this, + options = this._super() || {}; + + // We read the type here, because it makes more sense to throw a element type error first, + // rather then the error for lack of a label. Often if its the wrong type, it + // won't have a label (e.g. calling on a div, btn, etc) + this._readType(); + + 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" ); + } + + this.originalLabel = ""; + + // We need to get the label text but this may also need to make sure it does not contain the + // 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. + that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML; + } ); + + // Set the label option if we found label text + if ( this.originalLabel ) { + options.label = this.originalLabel; + } + + disabled = this.element[ 0 ].disabled; + if ( disabled != null ) { + options.disabled = disabled; + } + return options; + }, + + _create: function() { + var formCount, + checked = this.element[ 0 ].checked, + form = this.element.form(); + this.formParent = !!form.length ? form : $( "body" ); + + formCount = this.formParent.data( "uiCheckboxradioCount" ) || 0; + + // We don't use _on and _off here because we want all the checkboxes in the same form to use + // single handler which handles all the checkboxradio widgets in the form + if ( formCount === 0 ) { + this.formParent.on( "reset." + this.widgetFullName, formResetHandler ); + } + + this.formParent.data( "uiCheckboxradioCount", formCount + 1 ); + + if ( this.options.disabled == null ) { + this.options.disabled = this.element[ 0 ].disabled || false; + } + + this._setOption( "disabled", this.options.disabled ); + this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" ); + this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" ); + + if ( this.type === "radio" ) { + this._addClass( this.label, "ui-checkboxradio-radio-label" ); + } + + if ( this.options.label && this.options.label !== this.originalLabel ) { + this._updateLabel(); + } else if ( this.originalLabel ) { + this.options.label = this.originalLabel; + } + + this._enhance(); + + if ( checked ) { + this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" ); + this._addClass( this.icon, null, "ui-state-hover" ); + } + + this._on( { + "change": "_toggleClasses", + "focus": function() { + this._addClass( this.label, null, "ui-state-focus ui-visual-focus" ); + }, + "blur": function() { + this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" ); + } + } ); + }, + + _readType: function() { + var nodeName = this.element[ 0 ].nodeName.toLowerCase(); + this.type = this.element[ 0 ].type; + if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) { + $.error( "Can't create checkboxradio on element.nodeName=" + nodeName + + " and element.type=" + this.type ); + } + }, + + // Support jQuery Mobile enhanced option + _enhance: function() { + this._updateIcon( this.element[ 0 ].checked ); + }, + + widget: function() { + return this.label; + }, + + _getRadioGroup: function() { + var name = this.element[ 0 ].name, + that = this, + 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 radios.not( this.element ); + }, + + _toggleClasses: function() { + var checked = this.element[ 0 ].checked; + this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked ); + + if ( this.options.icon && this.type === "checkbox" ) { + + // We add ui-state-highlight to change the icon color + this._toggleClass( this.icon, null, "ui-icon-check ui-state-highlight", checked ) + ._toggleClass( this.icon, null, "ui-icon-blank", !checked ); + } + if ( this.type === "radio" ) { + this._getRadioGroup() + .each( function() { + var instance = $( this ).checkboxradio( "instance" ); + + if ( instance ) { + instance._removeClass( instance.label, + "ui-checkboxradio-checked", "ui-state-active" ); + } + } ); + } + }, + + _destroy: function() { + var formCount = this.formParent.data( "uiCheckboxradioCount" ) - 1; + + this.formParent.data( "uiCheckboxradioCount", formCount ); + + if ( formCount === 0 ) { + this.formParent.off( "reset." + this.widgetFullName, formResetHandler ); + } + + if ( this.icon ) { + this.icon.remove(); + this.iconSpace.remove(); + } + }, + + _setOption: function( key, value ) { + + // We don't alow the value to be set to nothing + if ( key === "label" && !value ) { + return; + } + + this._super( key, value ); + + if ( key === "disabled" ) { + this._toggleClass( this.label, null, "ui-state-disabled", value ); + this.element[ 0 ].disabled = value; + + // Don't refresh if disabled + return; + } + this.refresh(); + }, + + _updateIcon: function( checked ) { + var toAdd = "ui-icon ui-icon-background "; + + if ( this.options.icon ) { + if ( !this.icon ) { + this.icon = $( "" ); + this.iconSpace = $( " " ); + this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" ); + } + + if ( this.type === "checkbox" ) { + toAdd += checked ? "ui-icon-check" : "ui-icon-blank"; + this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" ); + } else { + toAdd += "ui-icon-blank"; + } + this._addClass( this.icon, "ui-checkboxradio-icon", toAdd ); + if ( !checked ) { + this._removeClass( this.icon, null, "ui-icon-check" ); + } + this.icon.prependTo( this.label ).after( this.iconSpace ); + } else if ( this.icon !== undefined ) { + this.icon.remove(); + this.iconSpace.remove(); + delete this.icon; + } + }, + + _updateLabel: function() { + + // Remove the contents of the label ( minus the icon, icon space, and input ) + this.label.contents().not( this.element.add( this.icon ).add( this.iconSpace ) ).remove(); + this.label.append( this.options.label ); + }, + + refresh: function() { + var checked = this.element[ 0 ].checked, + isDisabled = this.element[ 0 ].disabled; + + this._updateIcon( checked ); + this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked ); + if ( this.options.label !== null ) { + this._updateLabel(); + } + + if ( isDisabled !== this.options.disabled ) { + this._setOptions( { "disabled": isDisabled } ); + } + } + +} ); + +return $.ui.checkboxradio; + +} ) );