| @@ -0,0 +1,76 @@ | ||
| define( [ | ||
| "jquery", | ||
| "ui/widgets/controlgroup", | ||
| "ui/widgets/checkboxradio", | ||
| "ui/widgets/selectmenu", | ||
| "ui/widgets/button" | ||
| ], function( $ ) { | ||
|
|
||
| module( "Controlgroup: Core" ); | ||
|
|
||
| test( "selectmenu: open/close corners", function( assert ) { | ||
| expect( 12 ); | ||
| var element = $( ".controlgroup" ).controlgroup(), | ||
| selects = element.find( "select" ), | ||
| selectButton = selects.eq( 0 ).selectmenu( "widget" ); | ||
|
|
||
| selects.eq( 0 ).selectmenu( "open" ); | ||
| assert.hasClasses( selectButton, "ui-corner-tl", | ||
| "Horizontal: First selectmenu gets ui-corner-tl when opened" ); | ||
|
|
||
| selects.eq( 0 ).selectmenu( "close" ); | ||
| assert.hasClasses( selectButton, "ui-corner-left", | ||
| "Horizontal: First selectmenu gets ui-corner-left when closed" ); | ||
|
|
||
| selectButton = selects.eq( 1 ).selectmenu( "widget" ); | ||
| selects.eq( 1 ).selectmenu( "open" ); | ||
| assert.lacksClassStart( selectButton, "ui-corner" ); | ||
|
|
||
| selects.eq( 1 ).selectmenu( "close" ); | ||
| assert.lacksClassStart( selectButton, "ui-corner" ); | ||
|
|
||
| selectButton = selects.eq( 2 ).selectmenu( "widget" ); | ||
| selects.eq( 2 ).selectmenu( "open" ); | ||
| assert.hasClasses( selectButton, "ui-corner-tr", | ||
| "Horizontal: Last selectmenu gets ui-corner-tr when opened" ); | ||
|
|
||
| selects.eq( 2 ).selectmenu( "close" ); | ||
| assert.hasClasses( selectButton, "ui-corner-right", | ||
| "Horizontal: Last selectmenu gets ui-corner-right when closed" ); | ||
|
|
||
| element.controlgroup( "option", "direction", "vertical" ); | ||
| selectButton = selects.eq( 0 ).selectmenu( "widget" ); | ||
| selects.eq( 0 ).selectmenu( "open" ); | ||
| assert.hasClasses( selectButton, "ui-corner-top", | ||
| "vertical: First selectmenu gets ui-corner-top when opened" ); | ||
|
|
||
| selects.eq( 0 ).selectmenu( "close" ); | ||
| assert.hasClasses( selectButton, "ui-corner-top", | ||
| "vertical: First selectmenu gets ui-corner-top when closed" ); | ||
|
|
||
| selectButton = selects.eq( 1 ).selectmenu( "widget" ); | ||
| selects.eq( 1 ).selectmenu( "open" ); | ||
| assert.lacksClassStart( selectButton, "ui-corner" ); | ||
|
|
||
| selects.eq( 1 ).selectmenu( "close" ); | ||
| assert.lacksClassStart( selectButton, "ui-corner" ); | ||
|
|
||
| selectButton = selects.eq( 2 ).selectmenu( "widget" ); | ||
| selects.eq( 2 ).selectmenu( "open" ); | ||
| assert.lacksClassStart( selectButton, "ui-corner" ); | ||
|
|
||
| selects.eq( 2 ).selectmenu( "close" ); | ||
| assert.hasClasses( selectButton, "ui-corner-bottom", | ||
| "vertical: Last selectmenu gets ui-corner-bottom when closed" ); | ||
| } ); | ||
|
|
||
| test( "selectmenu: controlgroupLabel", function( assert ) { | ||
| expect( 2 ); | ||
| var element = $( ".controlgroup" ).controlgroup(); | ||
| var label = element.find( ".ui-controlgroup-label" ); | ||
|
|
||
| assert.hasClasses( label, "ui-widget ui-widget-content ui-state-default ui-controlgroup-item" ); | ||
| assert.hasClasses( label.find( "span" ), "ui-controlgroup-label-contents" ); | ||
| } ); | ||
|
|
||
| } ); |
| @@ -0,0 +1,150 @@ | ||
| define( [ | ||
| "jquery", | ||
| "ui/widgets/controlgroup", | ||
| "ui/widgets/checkboxradio", | ||
| "ui/widgets/selectmenu", | ||
| "ui/widgets/button" | ||
| ], function( $ ) { | ||
|
|
||
| module( "Controlgroup: methods" ); | ||
|
|
||
| test( "destroy", function( assert ) { | ||
| expect( 1 ); | ||
| assert.domEqual( ".controlgroup", function() { | ||
| $( ".controlgroup" ).controlgroup().controlgroup( "destroy" ); | ||
| } ); | ||
| } ); | ||
|
|
||
| test( "disable", function( assert ) { | ||
| expect( 2 ); | ||
| var element = $( ".controlgroup" ).controlgroup().controlgroup( "disable" ); | ||
| assert.lacksClasses( element, "ui-state-disabled", | ||
| "The widget does not get the disabled class, because we disable each child widget" ); | ||
| strictEqual( element.find( ".ui-state-disabled" ).length, 6, | ||
| "Child widgets are disabled" ); | ||
| } ); | ||
|
|
||
| test( "enable", function( assert ) { | ||
| expect( 2 ); | ||
| var element = $( ".controlgroup" ).controlgroup().controlgroup( "enable" ); | ||
| assert.lacksClasses( element, "ui-state-disabled", | ||
| "ui-state-disabled is not present on widget after enabling" ); | ||
| strictEqual( element.find( "ui-state-disabled" ).length, 0, | ||
| "Child widgets are disabled" ); | ||
| } ); | ||
|
|
||
| var tests = { | ||
| "checkboxradio": "<input type='checkbox'>", | ||
| "selectmenu": "<select><option>foo</option></select>", | ||
| "button": "<button>button text</button>" | ||
| }, | ||
| orientations = { | ||
| "horizontal": [ | ||
| "ui-corner-left", | ||
| false, | ||
| false, | ||
| "ui-corner-right" | ||
| ], | ||
| "vertical": [ | ||
| "ui-corner-top", | ||
| false, | ||
| false, | ||
| "ui-corner-bottom" | ||
| ] | ||
| }; | ||
|
|
||
| // Iterate through supported element markup | ||
| $.each( tests, function( widget, html ) { | ||
|
|
||
| // Check in both horizontal and vertical orientations | ||
| $.each( orientations, function( name, classes ) { | ||
|
|
||
| test( "refresh: " + widget + ": " + name, function( assert ) { | ||
| expect( 41 ); | ||
|
|
||
| var i, control, currentClasses, | ||
| controls = [], | ||
| element = $( "<div>" ).controlgroup( { | ||
| direction: name | ||
| } ).appendTo( "body" ); | ||
|
|
||
| // checks the elements with in the controlgroup against the expected class list | ||
| function checkCornerClasses( classList ) { | ||
| for ( var j = 0; j < 4; j++ ) { | ||
| if ( classList[ j ] ) { | ||
| assert.hasClasses( controls[ j ][ widget ]( "widget" ), classList[ j ] ); | ||
| } else { | ||
| assert.lacksClassStart( controls[ j ][ widget ]( "widget" ), "ui-corner" ); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function showElements( index, value ) { | ||
| $( value )[ widget ]( "widget" ).show(); | ||
| } | ||
|
|
||
| // Hide each element and check the corner classes | ||
| function iterateHidden( onlyVisible ) { | ||
| for ( i = 0; i < 4; i++ ) { | ||
|
|
||
| $( controls ).each( showElements ); | ||
|
|
||
| controls[ i ][ widget ]( "widget" ).hide(); | ||
|
|
||
| currentClasses = classes.slice( 0 ); | ||
| if ( onlyVisible ) { | ||
| if ( i === 0 ) { | ||
| currentClasses[ i + 1 ] = classes[ i ]; | ||
| currentClasses[ i ] = false; | ||
| } else if ( i === 3 ) { | ||
| currentClasses[ i - 1 ] = classes[ i ]; | ||
| currentClasses[ i ] = false; | ||
| } | ||
| } | ||
| element.controlgroup( "refresh" ); | ||
| checkCornerClasses( currentClasses ); | ||
| } | ||
| } | ||
|
|
||
| // Add a label for each element and then append the element to the control group | ||
| for ( i = 0; i < 4; i++ ) { | ||
| control = $( html ).attr( "id", "id" + i ) | ||
| .add( $( "<label>label text</label>" ).clone().attr( "for", "id" + i ) ); | ||
|
|
||
| controls.push( control ); | ||
| element.append( control ); | ||
| } | ||
|
|
||
| // Refresh the controlgroup now that its populated | ||
| element.controlgroup( "refresh" ); | ||
| for ( i = 0; i < 4; i++ ) { | ||
| strictEqual( controls[ i ].is( ":ui-" + widget ), true, | ||
| name + ": " + widget + " " + i + ": is a " + widget + " widget" ); | ||
| } | ||
|
|
||
| // Check that we have the right classes | ||
| checkCornerClasses( classes ); | ||
|
|
||
| // hide each element and then check its classes | ||
| iterateHidden( true ); | ||
|
|
||
| // Set the exclude option to false so we no longer care about hidden | ||
| element.controlgroup( "option", "onlyVisible", false ); | ||
|
|
||
| // Iterate hiding the elements again and check their corner classes | ||
| iterateHidden(); | ||
|
|
||
| // Disable the first control | ||
| controls[ 0 ].prop( "disabled", true ); | ||
|
|
||
| element.controlgroup( "refresh" ); | ||
|
|
||
| assert.hasClasses( controls[ 0 ][ widget ]( "widget" ), "ui-state-disabled" ); | ||
|
|
||
| // remove the controlgroup before we start the next set | ||
| element.remove(); | ||
| } ); | ||
| } ); | ||
| } ); | ||
|
|
||
| } ); |
| @@ -0,0 +1,109 @@ | ||
| define( [ | ||
| "jquery", | ||
| "ui/widgets/controlgroup", | ||
| "ui/widgets/checkboxradio", | ||
| "ui/widgets/selectmenu", | ||
| "ui/widgets/button" | ||
| ], function( $ ) { | ||
|
|
||
| module( "Controlgroup: options" ); | ||
|
|
||
| test( "disabled", function( assert ) { | ||
| expect( 4 ); | ||
| var element = $( ".controlgroup" ).controlgroup().controlgroup( "option", "disabled", true ); | ||
| assert.lacksClasses( element, "ui-state-disabled" ); | ||
| equal( element.find( ".ui-state-disabled" ).length, 6, "Child widgets are disabled" ); | ||
|
|
||
| element.controlgroup( "option", "disabled", false ); | ||
| assert.lacksClasses( element, "ui-state-disabled" ); | ||
| strictEqual( element.find( ".ui-state-disabled" ).length, 0, "Child widgets are not disabled" ); | ||
|
|
||
| } ); | ||
|
|
||
| test( "items - null", function() { | ||
| expect( 2 ); | ||
| var element = $( ".controlgroup" ).controlgroup( { | ||
| items: { | ||
| "button": null, | ||
| "selectmenu": null, | ||
| "checkboxradio": null | ||
| } | ||
| } ); | ||
|
|
||
| strictEqual( element.children( ".ui-button" ).length, 0, | ||
| "Child widgets are not called when selector is null" ); | ||
|
|
||
| element.controlgroup( "option", "items", { | ||
| "button": "button" | ||
| } ); | ||
| strictEqual( element.children( ".ui-button" ).length, 2, | ||
| "Correct child widgets are called when selector is updated" ); | ||
| } ); | ||
|
|
||
| test( "items: custom selector", function() { | ||
| expect( 1 ); | ||
| var element = $( ".controlgroup" ).controlgroup( { | ||
| items: { | ||
| "button": ".button" | ||
| } | ||
| } ); | ||
| strictEqual( element.children( ".ui-button" ).length, 4, | ||
| "Correct child widgets are called when custom selector used" ); | ||
| } ); | ||
|
|
||
| $.widget( "ui.test", { | ||
| _create: function() { | ||
| this.element.addClass( "ui-test ui-button" ); | ||
| }, | ||
|
|
||
| // Controlgroup requires a refresh method to exist | ||
| refresh: $.noop | ||
| } ); | ||
|
|
||
| test( "items: custom widget", function() { | ||
| expect( 2 ); | ||
| var element = $( ".controlgroup" ).controlgroup( { | ||
| items: { | ||
| "test": ".test" | ||
| } | ||
| } ); | ||
|
|
||
| strictEqual( element.children( ".ui-button" ).length, 7, | ||
| "Correct child widgets are called when custom selector used" ); | ||
| strictEqual( element.children( ".ui-test" ).length, 1, | ||
| "Custom widget called" ); | ||
| } ); | ||
|
|
||
| test( "onlyVisible", function( assert ) { | ||
| expect( 4 ); | ||
| var element = $( ".controlgroup" ).controlgroup( { | ||
| onlyVisible: false | ||
| } ), | ||
| buttons = element.children( ".ui-button" ); | ||
|
|
||
| assert.lacksClassStart( buttons.eq( 1 ), "ui-corner" ); | ||
| assert.hasClasses( buttons.eq( 0 ), "ui-corner-left", | ||
| "onlyVisible: false: First button hidden second button doesn't get a corner class" ); | ||
|
|
||
| element.controlgroup( "option", "onlyVisible", true ); | ||
| assert.lacksClassStart( buttons.eq( 0 ), "ui-corner" ); | ||
| assert.hasClasses( buttons.eq( 1 ), "ui-corner-left", | ||
| "onlyVisible: true: First button is hidden second button get corner class" ); | ||
| } ); | ||
|
|
||
| test( "direction", function( assert ) { | ||
| expect( 6 ); | ||
| var element = $( ".controlgroup" ).controlgroup(), | ||
| buttons = element.children( ".ui-button" ).filter( ":visible" ); | ||
|
|
||
| assert.hasClasses( element, "ui-controlgroup-horizontal" ); | ||
| assert.hasClasses( buttons.first(), "ui-corner-left" ); | ||
| assert.hasClasses( buttons.last(), "ui-corner-right" ); | ||
|
|
||
| element.controlgroup( "option", "direction", "vertical" ); | ||
| assert.hasClasses( element, "ui-controlgroup-vertical" ); | ||
| assert.hasClasses( buttons.first(), "ui-corner-top" ); | ||
| assert.hasClasses( buttons.last(), "ui-corner-bottom" ); | ||
| } ); | ||
|
|
||
| } ); |
| @@ -154,7 +154,7 @@ test( "Months", 5, function() { | ||
| ok( lastMonth.last ); | ||
| ok( !lastMonth.first ); | ||
|
|
||
| equal( firstMonth.month(), lastMonth.month() - 1 ); | ||
| } ); | ||
|
|
||
| test( "Equal", 4, function() { | ||
| @@ -6,7 +6,7 @@ var versions = [ | ||
| "1.9.0", "1.9.1", | ||
| "1.10.0", "1.10.1", "1.10.2", | ||
| "1.11.0", "1.11.1", "1.11.2", "1.11.3", | ||
| "git" | ||
| ], | ||
| additionalTests = { | ||
|
|
||
| @@ -0,0 +1,65 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI - Checkboxes</title> | ||
| <link rel="stylesheet" href="../../../themes/base/all.css"> | ||
| <script src="../../../external/jquery/jquery.js"></script> | ||
| <script src="../../../ui/core.js"></script> | ||
| <script src="../../../ui/widget.js"></script> | ||
| <script src="../../../ui/button.js"></script> | ||
| <script src="../../../ui/checkboxradio.js"></script> | ||
| <script> | ||
| $(function() { | ||
| var checkboxes = $( "form input" ).checkboxradio(); | ||
|
|
||
| $( ".controls input, .controls select" ).on( "change keyup", function() { | ||
| var option = $( this ).attr( "name" ), | ||
| value = $( this ).val(); | ||
|
|
||
| if ( $( this ).is( "[type=checkbox]" ) ) { | ||
| value = $( this ).is( ":checked" ); | ||
| } | ||
| if ( option != "label" || value !== "" ) { | ||
| checkboxes.checkboxradio( "option", option, value ); | ||
| } | ||
| }); | ||
| $( ".controls > button" ).click( function() { | ||
| if ( this.id !== "create" ) { | ||
| checkboxes.checkboxradio( this.id ); | ||
| } else { | ||
| checkboxes.checkboxradio(); | ||
| } | ||
| }); | ||
| }); | ||
| </script> | ||
| <style> | ||
| #format { margin-top: 2em; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h2> | ||
| Easy way to toggle through various combinations of options and states to make sure none lead to | ||
| a broken appearence. | ||
| </h2> | ||
| <div class="controls"> | ||
| <button id="create">Create</button> | ||
| <button id="destroy">Destroy</button> | ||
| <button id="enable">Enable</button> | ||
| <button id="disable">Disable</button> | ||
| <button id="refresh">Refresh</button> | ||
| <input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label> | ||
| <input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label> | ||
| <label for="label">Label<input type="text" id="label" name="label"></label> | ||
| </div> | ||
| <form> | ||
| <input type="checkbox" id="checkbox-1"> | ||
| <label for="checkbox-1">Checkbox widget sample</label> | ||
| <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label> | ||
|
|
||
| <label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label> | ||
| <input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label> | ||
| <button type="reset">Reset</button> | ||
| </form> | ||
| </body> | ||
| </html> |
| @@ -16,18 +16,6 @@ | ||
| padding: .5em .5em .5em .7em; | ||
| font-size: 100%; | ||
| } | ||
| .ui-accordion .ui-accordion-content { | ||
| padding: 1em 2.2em; | ||
| border-top: 0; | ||
| @@ -0,0 +1,34 @@ | ||
| /*! | ||
| * jQuery UI Checkboxradio @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright 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 { | ||
| box-shadow: inset 1px 1px 1px #ccc; | ||
| 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; | ||
| } |
| @@ -0,0 +1,65 @@ | ||
| /*! | ||
| * jQuery UI Controlgroup @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| * | ||
| * http://api.jqueryui.com/controlgroup/#theming | ||
| */ | ||
|
|
||
| .ui-controlgroup { | ||
| vertical-align: middle; | ||
| display: inline-block; | ||
| } | ||
| .ui-controlgroup > .ui-controlgroup-item { | ||
| float: left; | ||
| margin-left: 0; | ||
| margin-right: 0; | ||
| } | ||
| .ui-controlgroup > .ui-controlgroup-item:focus, | ||
| .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { | ||
| z-index: 9999; | ||
| } | ||
| .ui-controlgroup-vertical > .ui-controlgroup-item { | ||
| display: block; | ||
| float: none; | ||
| width: 100%; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| text-align: left; | ||
| } | ||
| .ui-controlgroup-vertical .ui-controlgroup-item { | ||
| box-sizing: border-box; | ||
| } | ||
| .ui-controlgroup .ui-controlgroup-label { | ||
| padding: .4em 1em; | ||
| } | ||
| .ui-controlgroup .ui-controlgroup-label span { | ||
| font-size: 80%; | ||
| } | ||
| .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { | ||
| border-left: none; | ||
| } | ||
| .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { | ||
| border-top: none; | ||
| } | ||
| .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { | ||
| border-right: none; | ||
| } | ||
| .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { | ||
| border-bottom: none; | ||
| } | ||
|
|
||
| /* Spinner specific style fixes */ | ||
| .ui-controlgroup-vertical .ui-spinner-input { | ||
|
|
||
| /* Support: IE8 only, Android < 4.4 only */ | ||
| width: 75%; | ||
| width: calc( 100% - 2.4em ); | ||
| } | ||
| .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { | ||
| border-top-style: solid; | ||
| } | ||
|
|
| @@ -33,27 +33,10 @@ | ||
| .ui-selectmenu-open { | ||
| display: block; | ||
| } | ||
| .ui-selectmenu-button.ui-button { | ||
| text-align: left; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| width: 14em; | ||
| } | ||
| @@ -1,18 +1,3 @@ | ||
| // This file is deprecated in 1.12.0 to be removed in 1.13 | ||
| ( function() { | ||
| define( [ | ||
| @@ -9,7 +9,7 @@ | ||
| */ | ||
|
|
||
| //>>label: jQuery 1.7 Support | ||
| //>>group: Core | ||
| //>>description: Support version 1.7.x of jQuery core | ||
|
|
||
| ( function( factory ) { | ||
| @@ -0,0 +1,277 @@ | ||
| /*! | ||
| * jQuery UI Checkboxradio @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| */ | ||
|
|
||
| //>>label: Checkboxradio | ||
| //>>group: Widgets | ||
| //>>description: Enhances a form with multiple themeable checkboxes or radio buttons. | ||
| //>>docs: http://api.jqueryui.com/checkboxradio/ | ||
| //>>demos: http://jqueryui.com/checkboxradio/ | ||
| //>>css.structure: ../../themes/base/core.css | ||
| //>>css.structure: ../../themes/base/button.css | ||
| //>>css.structure: ../../themes/base/checkboxradio.css | ||
| //>>css.theme: ../../themes/base/theme.css | ||
|
|
||
| ( function( factory ) { | ||
| if ( typeof define === "function" && define.amd ) { | ||
|
|
||
| // AMD. Register as an anonymous module. | ||
| define( [ | ||
| "jquery", | ||
| "../escape-selector", | ||
| "../form-reset-mixin", | ||
| "../labels", | ||
| "../widget" | ||
| ], factory ); | ||
| } else { | ||
|
|
||
| // Browser globals | ||
| factory( jQuery ); | ||
| } | ||
| }( function( $ ) { | ||
|
|
||
| $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, { | ||
| 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; | ||
| var that = this; | ||
| var 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(); | ||
|
|
||
| // If there are multiple labels, use the last one | ||
| 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 checked = this.element[ 0 ].checked; | ||
|
|
||
| this._bindFormResetHandler(); | ||
|
|
||
| if ( this.options.disabled == null ) { | ||
| this.options.disabled = this.element[ 0 ].disabled; | ||
| } | ||
|
|
||
| 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 group; | ||
| var name = this.element[ 0 ].name; | ||
| var nameSelector = "input[name='" + $.ui.escapeSelector( name ) + "']"; | ||
|
|
||
| if ( !name ) { | ||
| return $( [] ); | ||
| } | ||
|
|
||
| if ( this.form.length ) { | ||
| group = $( this.form[ 0 ].elements ).filter( nameSelector ); | ||
| } else { | ||
|
|
||
| // Not inside a form, check all inputs that also are not inside a form | ||
| group = $( nameSelector ).filter( function() { | ||
| return $( this ).form().length === 0; | ||
| } ); | ||
| } | ||
|
|
||
| return group.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() { | ||
| this._unbindFormResetHandler(); | ||
|
|
||
| if ( this.icon ) { | ||
| this.icon.remove(); | ||
| this.iconSpace.remove(); | ||
| } | ||
| }, | ||
|
|
||
| _setOption: function( key, value ) { | ||
|
|
||
| // We don't allow 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 when setting disabled | ||
| return; | ||
| } | ||
| this.refresh(); | ||
| }, | ||
|
|
||
| _updateIcon: function( checked ) { | ||
| var toAdd = "ui-icon ui-icon-background "; | ||
|
|
||
| if ( this.options.icon ) { | ||
| if ( !this.icon ) { | ||
| this.icon = $( "<span>" ); | ||
| this.iconSpace = $( "<span> </span>" ); | ||
| this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" ); | ||
| } | ||
|
|
||
| if ( this.type === "checkbox" ) { | ||
| toAdd += checked ? "ui-icon-check ui-state-highlight" : "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 ui-state-highlight" ); | ||
| } | ||
| 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; | ||
|
|
||
| } ) ); |
| @@ -0,0 +1,251 @@ | ||
| /*! | ||
| * jQuery UI Controlgroup @VERSION | ||
| * http://jqueryui.com | ||
| * | ||
| * Copyright jQuery Foundation and other contributors | ||
| * Released under the MIT license. | ||
| * http://jquery.org/license | ||
| */ | ||
|
|
||
| //>>label: Controlgroup | ||
| //>>group: Widgets | ||
| //>>description: Visually groups form control widgets | ||
| //>>docs: http://api.jqueryui.com/controlgroup/ | ||
| //>>demos: http://jqueryui.com/controlgroup/ | ||
| //>>css.structure: ../../themes/base/core.css | ||
| //>>css.structure: ../../themes/base/controlgroup.css | ||
| //>>css.theme: ../../themes/base/theme.css | ||
|
|
||
| ( function( factory ) { | ||
| if ( typeof define === "function" && define.amd ) { | ||
|
|
||
| // AMD. Register as an anonymous module. | ||
| define( [ | ||
| "jquery", | ||
| "../widget" | ||
| ], factory ); | ||
| } else { | ||
|
|
||
| // Browser globals | ||
| factory( jQuery ); | ||
| } | ||
| }( function( $ ) { | ||
|
|
||
| return $.widget( "ui.controlgroup", { | ||
| version: "@VERSION", | ||
| defaultElement: "<div>", | ||
| options: { | ||
| direction: "horizontal", | ||
| disabled: null, | ||
| onlyVisible: true, | ||
| items: { | ||
| "button": "input[type=button], input[type=submit], input[type=reset], button, a", | ||
| "controlgroupLabel": ".ui-controlgroup-label", | ||
| "checkboxradio": "input[type='checkbox'], input[type='radio']", | ||
| "selectmenu": "select", | ||
| "spinner": ".ui-spinner-input" | ||
| } | ||
| }, | ||
|
|
||
| _create: function() { | ||
| this._enhance(); | ||
| }, | ||
|
|
||
| // To support the enhanced option in jQuery Mobile, we isolate DOM manipulation | ||
| _enhance: function() { | ||
| this.element.attr( "role", "toolbar" ); | ||
| this.refresh(); | ||
| }, | ||
|
|
||
| _destroy: function() { | ||
| this._callChildMethod( "destroy" ); | ||
| this.childWidgets.removeData( "ui-controlgroup-data" ); | ||
| this.element.removeAttr( "role" ); | ||
| if ( this.options.items.controlgroupLabel ) { | ||
| this.element | ||
| .find( this.options.items.controlgroupLabel ) | ||
| .find( ".ui-controlgroup-label-contents" ) | ||
| .contents().unwrap(); | ||
| } | ||
| }, | ||
|
|
||
| _initWidgets: function() { | ||
| var that = this, | ||
| childWidgets = []; | ||
|
|
||
| // First we iterate over each of the items options | ||
| $.each( this.options.items, function( widget, selector ) { | ||
| var labels; | ||
| var options = {}; | ||
|
|
||
| // Make sure the widget has a selector set | ||
| if ( !selector ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( widget === "controlgroupLabel" ) { | ||
| labels = that.element.find( selector ); | ||
| labels.each( function() { | ||
| $( this ).contents().wrapAll( "<span class='ui-controlgroup-label-contents'></span>" ); | ||
| } ); | ||
| that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" ); | ||
| childWidgets = childWidgets.concat( labels.get() ); | ||
| return; | ||
| } | ||
|
|
||
| // Make sure the widget actually exists | ||
| if ( !$.fn[ widget ] ) { | ||
| return; | ||
| } | ||
|
|
||
| // We assume everything is in the middle to start because we can't determine | ||
| // first / last elements until all enhancments are done. | ||
| if ( that[ "_" + widget + "Options" ] ) { | ||
| options = that[ "_" + widget + "Options" ]( "middle" ); | ||
| } | ||
|
|
||
| // Find instances of this widget inside controlgroup and init them | ||
| that.element | ||
| .find( selector )[ widget ]( options ) | ||
| .each( function() { | ||
| var element = $( this ); | ||
|
|
||
| // Store an instance of the controlgroup to be able to reference | ||
| // from the outermost element for changing options and refresh | ||
| var widgetElement = element[ widget ]( "widget" ); | ||
| $.data( widgetElement[ 0 ], "ui-controlgroup-data", | ||
| element[ widget ]( "instance" ) ); | ||
|
|
||
| childWidgets.push( widgetElement[ 0 ] ); | ||
| } ); | ||
| } ); | ||
|
|
||
| this.childWidgets = $( $.unique( childWidgets ) ); | ||
| this._addClass( this.childWidgets, "ui-controlgroup-item" ); | ||
| }, | ||
|
|
||
| _callChildMethod: function( method ) { | ||
| this.childWidgets.each( function() { | ||
| var element = $( this ), | ||
| data = element.data( "ui-controlgroup-data" ); | ||
| if ( data && data[ method ] ) { | ||
| data[ method ](); | ||
| } | ||
| } ); | ||
| }, | ||
|
|
||
| _updateCornerClass: function( element, position ) { | ||
| var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right"; | ||
| var add = this._buildSimpleOptions( position, "label" ).classes.label; | ||
|
|
||
| this._removeClass( element, null, remove ); | ||
| this._addClass( element, null, add ); | ||
| }, | ||
|
|
||
| _buildSimpleOptions: function( position, key ) { | ||
| var direction = this.options.direction === "vertical"; | ||
| var result = { | ||
| classes: {} | ||
| }; | ||
| result.classes[ key ] = { | ||
| "middle": null, | ||
| "first": "ui-corner-" + ( direction ? "top" : "left" ), | ||
| "last": "ui-corner-" + ( direction ? "bottom" : "right" ) | ||
| }[ position ]; | ||
|
|
||
| return result; | ||
| }, | ||
|
|
||
| _spinnerOptions: function( position ) { | ||
| var options = this._buildSimpleOptions( position, "ui-spinner" ); | ||
|
|
||
| options.classes[ "ui-spinner-up" ] = ""; | ||
| options.classes[ "ui-spinner-down" ] = ""; | ||
|
|
||
| return options; | ||
| }, | ||
|
|
||
| _buttonOptions: function( position ) { | ||
| return this._buildSimpleOptions( position, "ui-button" ); | ||
| }, | ||
|
|
||
| _checkboxradioOptions: function( position ) { | ||
| return this._buildSimpleOptions( position, "ui-checkboxradio-label" ); | ||
| }, | ||
|
|
||
| _selectmenuOptions: function( position ) { | ||
| var direction = this.options.direction === "vertical"; | ||
| return { | ||
| width: direction ? "auto" : false, | ||
| classes: { | ||
| middle: { | ||
| "ui-selectmenu-button-open": null, | ||
| "ui-selectmenu-button-closed": null | ||
| }, | ||
| first: { | ||
| "ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ), | ||
| "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" ) | ||
| }, | ||
| last: { | ||
| "ui-selectmenu-button-open": direction ? null : "ui-corner-tr", | ||
| "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" ) | ||
| } | ||
|
|
||
| }[ position ] | ||
| }; | ||
| }, | ||
|
|
||
| _setOption: function( key, value ) { | ||
| if ( key === "direction" ) { | ||
| this._removeClass( "ui-controlgroup-" + this.options.direction ); | ||
| } | ||
|
|
||
| this._super( key, value ); | ||
| if ( key === "disabled" ) { | ||
| this._callChildMethod( value ? "disable" : "enable" ); | ||
| return; | ||
| } | ||
|
|
||
| this.refresh(); | ||
| }, | ||
|
|
||
| refresh: function() { | ||
| var children, | ||
| that = this; | ||
|
|
||
| this._addClass( "ui-controlgroup ui-controlgroup-" + this.options.direction ); | ||
|
|
||
| if ( this.options.direction === "horizontal" ) { | ||
| this._addClass( null, "ui-helper-clearfix" ); | ||
| } | ||
| this._initWidgets(); | ||
|
|
||
| children = this.childWidgets; | ||
|
|
||
| // We filter here because we need to track all childWidgets not just the visible ones | ||
| if ( this.options.onlyVisible ) { | ||
| children = children.filter( ":visible" ); | ||
| } | ||
|
|
||
| if ( children.length ) { | ||
|
|
||
| // We do this last because we need to make sure all enhancment is done | ||
| // before determining first and last | ||
| $.each( [ "first", "last" ], function( index, value ) { | ||
| var instance = children[ value ]().data( "ui-controlgroup-data" ); | ||
|
|
||
| if ( instance && that[ "_" + instance.widgetName + "Options" ] ) { | ||
| instance.element[ instance.widgetName ]( | ||
| that[ "_" + instance.widgetName + "Options" ]( value ) | ||
| ); | ||
| } else { | ||
| that._updateCornerClass( children[ value ](), value ); | ||
| } | ||
| } ); | ||
|
|
||
| // Finally call the refresh method on each of the child widgets. | ||
| this._callChildMethod( "refresh" ); | ||
| } | ||
| } | ||
| } ); | ||
| } ) ); |
