| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| ( function( factory ) { |
| "use strict"; |
|
|
| if ( typeof define === "function" && define.amd ) { |
|
|
| |
| define( [ |
| "jquery", |
| "../form-reset-mixin", |
| "../labels", |
| "../widget" |
| ], factory ); |
| } else { |
|
|
| |
| factory( jQuery ); |
| } |
| } )( function( $ ) { |
| "use strict"; |
|
|
| $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, { |
| version: "1.13.3", |
| 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, labelContents; |
| var options = this._super() || {}; |
|
|
| |
| |
| |
| this._readType(); |
|
|
| labels = this.element.labels(); |
|
|
| |
| this.label = $( labels[ labels.length - 1 ] ); |
| if ( !this.label.length ) { |
| $.error( "No label found for checkboxradio widget" ); |
| } |
|
|
| this.originalLabel = ""; |
|
|
| |
| |
| |
| |
| |
| labelContents = this.label.contents().not( this.element[ 0 ] ); |
|
|
| if ( labelContents.length ) { |
| this.originalLabel += labelContents |
| .clone() |
| .wrapAll( "<div></div>" ) |
| .parent() |
| .html(); |
| } |
|
|
| |
| 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._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 ); |
| } |
| }, |
|
|
| |
| _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='" + $.escapeSelector( name ) + "']"; |
|
|
| if ( !name ) { |
| return $( [] ); |
| } |
|
|
| if ( this.form.length ) { |
| group = $( this.form[ 0 ].elements ).filter( nameSelector ); |
| } else { |
|
|
| |
| 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" ) { |
| this._toggleClass( this.icon, null, "ui-icon-check ui-state-checked", 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 ) { |
|
|
| |
| 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; |
|
|
| |
| 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-checked" : "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-checked" ); |
| } |
| this.icon.prependTo( this.label ).after( this.iconSpace ); |
| } else if ( this.icon !== undefined ) { |
| this.icon.remove(); |
| this.iconSpace.remove(); |
| delete this.icon; |
| } |
| }, |
|
|
| _updateLabel: function() { |
|
|
| |
| var contents = this.label.contents().not( this.element[ 0 ] ); |
| if ( this.icon ) { |
| contents = contents.not( this.icon[ 0 ] ); |
| } |
| if ( this.iconSpace ) { |
| contents = contents.not( this.iconSpace[ 0 ] ); |
| } |
| contents.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; |
|
|
| } ); |
|
|