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