1/*!
2 * jQuery UI Checkboxradio 1.13.3
3 * https://jqueryui.com
4 *
5 * Copyright OpenJS Foundation and other contributors
6 * Released under the MIT license.
7 * https://jquery.org/license
8 */
9
10//>>label: Checkboxradio
11//>>group: Widgets
12//>>description: Enhances a form with multiple themeable checkboxes or radio buttons.
13//>>docs: https://api.jqueryui.com/checkboxradio/
14//>>demos: https://jqueryui.com/checkboxradio/
15//>>css.structure: ../../themes/base/core.css
16//>>css.structure: ../../themes/base/button.css
17//>>css.structure: ../../themes/base/checkboxradio.css
18//>>css.theme: ../../themes/base/theme.css
19
20( function( factory ) {
21 "use strict";
22
23 if ( typeof define === "function" && define.amd ) {
24
25 // AMD. Register as an anonymous module.
26 define( [
27 "jquery",
28 "../form-reset-mixin",
29 "../labels",
30 "../widget"
31 ], factory );
32 } else {
33
34 // Browser globals
35 factory( jQuery );
36 }
37} )( function( $ ) {
38"use strict";
39
40$.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
41 version: "1.13.3",
42 options: {
43 disabled: null,
44 label: null,
45 icon: true,
46 classes: {
47 "ui-checkboxradio-label": "ui-corner-all",
48 "ui-checkboxradio-icon": "ui-corner-all"
49 }
50 },
51
52 _getCreateOptions: function() {
53 var disabled, labels, labelContents;
54 var options = this._super() || {};
55
56 // We read the type here, because it makes more sense to throw a element type error first,
57 // rather then the error for lack of a label. Often if its the wrong type, it
58 // won't have a label (e.g. calling on a div, btn, etc)
59 this._readType();
60
61 labels = this.element.labels();
62
63 // If there are multiple labels, use the last one
64 this.label = $( labels[ labels.length - 1 ] );
65 if ( !this.label.length ) {
66 $.error( "No label found for checkboxradio widget" );
67 }
68
69 this.originalLabel = "";
70
71 // We need to get the label text but this may also need to make sure it does not contain the
72 // input itself.
73 // The label contents could be text, html, or a mix. We wrap all elements
74 // and read the wrapper's `innerHTML` to get a string representation of
75 // the label, without the input as part of it.
76 labelContents = this.label.contents().not( this.element[ 0 ] );
77
78 if ( labelContents.length ) {
79 this.originalLabel += labelContents
80 .clone()
81 .wrapAll( "<div></div>" )
82 .parent()
83 .html();
84 }
85
86 // Set the label option if we found label text
87 if ( this.originalLabel ) {
88 options.label = this.originalLabel;
89 }
90
91 disabled = this.element[ 0 ].disabled;
92 if ( disabled != null ) {
93 options.disabled = disabled;
94 }
95 return options;
96 },
97
98 _create: function() {
99 var checked = this.element[ 0 ].checked;
100
101 this._bindFormResetHandler();
102
103 if ( this.options.disabled == null ) {
104 this.options.disabled = this.element[ 0 ].disabled;
105 }
106
107 this._setOption( "disabled", this.options.disabled );
108 this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" );
109 this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" );
110
111 if ( this.type === "radio" ) {
112 this._addClass( this.label, "ui-checkboxradio-radio-label" );
113 }
114
115 if ( this.options.label && this.options.label !== this.originalLabel ) {
116 this._updateLabel();
117 } else if ( this.originalLabel ) {
118 this.options.label = this.originalLabel;
119 }
120
121 this._enhance();
122
123 if ( checked ) {
124 this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" );
125 }
126
127 this._on( {
128 change: "_toggleClasses",
129 focus: function() {
130 this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
131 },
132 blur: function() {
133 this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
134 }
135 } );
136 },
137
138 _readType: function() {
139 var nodeName = this.element[ 0 ].nodeName.toLowerCase();
140 this.type = this.element[ 0 ].type;
141 if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) {
142 $.error( "Can't create checkboxradio on element.nodeName=" + nodeName +
143 " and element.type=" + this.type );
144 }
145 },
146
147 // Support jQuery Mobile enhanced option
148 _enhance: function() {
149 this._updateIcon( this.element[ 0 ].checked );
150 },
151
152 widget: function() {
153 return this.label;
154 },
155
156 _getRadioGroup: function() {
157 var group;
158 var name = this.element[ 0 ].name;
159 var nameSelector = "input[name='" + $.escapeSelector( name ) + "']";
160
161 if ( !name ) {
162 return $( [] );
163 }
164
165 if ( this.form.length ) {
166 group = $( this.form[ 0 ].elements ).filter( nameSelector );
167 } else {
168
169 // Not inside a form, check all inputs that also are not inside a form
170 group = $( nameSelector ).filter( function() {
171 return $( this )._form().length === 0;
172 } );
173 }
174
175 return group.not( this.element );
176 },
177
178 _toggleClasses: function() {
179 var checked = this.element[ 0 ].checked;
180 this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
181
182 if ( this.options.icon && this.type === "checkbox" ) {
183 this._toggleClass( this.icon, null, "ui-icon-check ui-state-checked", checked )
184 ._toggleClass( this.icon, null, "ui-icon-blank", !checked );
185 }
186
187 if ( this.type === "radio" ) {
188 this._getRadioGroup()
189 .each( function() {
190 var instance = $( this ).checkboxradio( "instance" );
191
192 if ( instance ) {
193 instance._removeClass( instance.label,
194 "ui-checkboxradio-checked", "ui-state-active" );
195 }
196 } );
197 }
198 },
199
200 _destroy: function() {
201 this._unbindFormResetHandler();
202
203 if ( this.icon ) {
204 this.icon.remove();
205 this.iconSpace.remove();
206 }
207 },
208
209 _setOption: function( key, value ) {
210
211 // We don't allow the value to be set to nothing
212 if ( key === "label" && !value ) {
213 return;
214 }
215
216 this._super( key, value );
217
218 if ( key === "disabled" ) {
219 this._toggleClass( this.label, null, "ui-state-disabled", value );
220 this.element[ 0 ].disabled = value;
221
222 // Don't refresh when setting disabled
223 return;
224 }
225 this.refresh();
226 },
227
228 _updateIcon: function( checked ) {
229 var toAdd = "ui-icon ui-icon-background ";
230
231 if ( this.options.icon ) {
232 if ( !this.icon ) {
233 this.icon = $( "<span>" );
234 this.iconSpace = $( "<span> </span>" );
235 this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" );
236 }
237
238 if ( this.type === "checkbox" ) {
239 toAdd += checked ? "ui-icon-check ui-state-checked" : "ui-icon-blank";
240 this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
241 } else {
242 toAdd += "ui-icon-blank";
243 }
244 this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
245 if ( !checked ) {
246 this._removeClass( this.icon, null, "ui-icon-check ui-state-checked" );
247 }
248 this.icon.prependTo( this.label ).after( this.iconSpace );
249 } else if ( this.icon !== undefined ) {
250 this.icon.remove();
251 this.iconSpace.remove();
252 delete this.icon;
253 }
254 },
255
256 _updateLabel: function() {
257
258 // Remove the contents of the label ( minus the icon, icon space, and input )
259 var contents = this.label.contents().not( this.element[ 0 ] );
260 if ( this.icon ) {
261 contents = contents.not( this.icon[ 0 ] );
262 }
263 if ( this.iconSpace ) {
264 contents = contents.not( this.iconSpace[ 0 ] );
265 }
266 contents.remove();
267
268 this.label.append( this.options.label );
269 },
270
271 refresh: function() {
272 var checked = this.element[ 0 ].checked,
273 isDisabled = this.element[ 0 ].disabled;
274
275 this._updateIcon( checked );
276 this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
277 if ( this.options.label !== null ) {
278 this._updateLabel();
279 }
280
281 if ( isDisabled !== this.options.disabled ) {
282 this._setOptions( { "disabled": isDisabled } );
283 }
284 }
285
286} ] );
287
288return $.ui.checkboxradio;
289
290} );
291