source: trunk/themes/default/js/ui/jquery.ui.button.js @ 18630

Last change on this file since 18630 was 18630, checked in by rvelices, 12 years ago

feature 2771: upgrade jquery from 1.7.2 to 1.8.2 and jquery.ui from 1.8.16 to 1.9.0
Attention plugins: jquery ui effect script ids change when using combine_script because file names changed ...

File size: 11.4 KB
Line 
1/*!
2 * jQuery UI Button 1.9.0
3 * http://jqueryui.com
4 *
5 * Copyright 2012 jQuery Foundation and other contributors
6 * Released under the MIT license.
7 * http://jquery.org/license
8 *
9 * http://api.jqueryui.com/button/
10 *
11 * Depends:
12 *      jquery.ui.core.js
13 *      jquery.ui.widget.js
14 */
15(function( $, undefined ) {
16
17var lastActive, startXPos, startYPos, clickDragged,
18        baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
19        stateClasses = "ui-state-hover ui-state-active ",
20        typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
21        formResetHandler = function() {
22                var buttons = $( this ).find( ":ui-button" );
23                setTimeout(function() {
24                        buttons.button( "refresh" );
25                }, 1 );
26        },
27        radioGroup = function( radio ) {
28                var name = radio.name,
29                        form = radio.form,
30                        radios = $( [] );
31                if ( name ) {
32                        if ( form ) {
33                                radios = $( form ).find( "[name='" + name + "']" );
34                        } else {
35                                radios = $( "[name='" + name + "']", radio.ownerDocument )
36                                        .filter(function() {
37                                                return !this.form;
38                                        });
39                        }
40                }
41                return radios;
42        };
43
44$.widget( "ui.button", {
45        version: "1.9.0",
46        defaultElement: "<button>",
47        options: {
48                disabled: null,
49                text: true,
50                label: null,
51                icons: {
52                        primary: null,
53                        secondary: null
54                }
55        },
56        _create: function() {
57                this.element.closest( "form" )
58                        .unbind( "reset" + this.eventNamespace )
59                        .bind( "reset" + this.eventNamespace, formResetHandler );
60
61                if ( typeof this.options.disabled !== "boolean" ) {
62                        this.options.disabled = !!this.element.prop( "disabled" );
63                } else {
64                        this.element.prop( "disabled", this.options.disabled );
65                }
66
67                this._determineButtonType();
68                this.hasTitle = !!this.buttonElement.attr( "title" );
69
70                var that = this,
71                        options = this.options,
72                        toggleButton = this.type === "checkbox" || this.type === "radio",
73                        hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" ),
74                        focusClass = "ui-state-focus";
75
76                if ( options.label === null ) {
77                        options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
78                }
79
80                this.buttonElement
81                        .addClass( baseClasses )
82                        .attr( "role", "button" )
83                        .bind( "mouseenter" + this.eventNamespace, function() {
84                                if ( options.disabled ) {
85                                        return;
86                                }
87                                $( this ).addClass( "ui-state-hover" );
88                                if ( this === lastActive ) {
89                                        $( this ).addClass( "ui-state-active" );
90                                }
91                        })
92                        .bind( "mouseleave" + this.eventNamespace, function() {
93                                if ( options.disabled ) {
94                                        return;
95                                }
96                                $( this ).removeClass( hoverClass );
97                        })
98                        .bind( "click" + this.eventNamespace, function( event ) {
99                                if ( options.disabled ) {
100                                        event.preventDefault();
101                                        event.stopImmediatePropagation();
102                                }
103                        });
104
105                this.element
106                        .bind( "focus" + this.eventNamespace, function() {
107                                // no need to check disabled, focus won't be triggered anyway
108                                that.buttonElement.addClass( focusClass );
109                        })
110                        .bind( "blur" + this.eventNamespace, function() {
111                                that.buttonElement.removeClass( focusClass );
112                        });
113
114                if ( toggleButton ) {
115                        this.element.bind( "change" + this.eventNamespace, function() {
116                                if ( clickDragged ) {
117                                        return;
118                                }
119                                that.refresh();
120                        });
121                        // if mouse moves between mousedown and mouseup (drag) set clickDragged flag
122                        // prevents issue where button state changes but checkbox/radio checked state
123                        // does not in Firefox (see ticket #6970)
124                        this.buttonElement
125                                .bind( "mousedown" + this.eventNamespace, function( event ) {
126                                        if ( options.disabled ) {
127                                                return;
128                                        }
129                                        clickDragged = false;
130                                        startXPos = event.pageX;
131                                        startYPos = event.pageY;
132                                })
133                                .bind( "mouseup" + this.eventNamespace, function( event ) {
134                                        if ( options.disabled ) {
135                                                return;
136                                        }
137                                        if ( startXPos !== event.pageX || startYPos !== event.pageY ) {
138                                                clickDragged = true;
139                                        }
140                        });
141                }
142
143                if ( this.type === "checkbox" ) {
144                        this.buttonElement.bind( "click" + this.eventNamespace, function() {
145                                if ( options.disabled || clickDragged ) {
146                                        return false;
147                                }
148                                $( this ).toggleClass( "ui-state-active" );
149                                that.buttonElement.attr( "aria-pressed", that.element[0].checked );
150                        });
151                } else if ( this.type === "radio" ) {
152                        this.buttonElement.bind( "click" + this.eventNamespace, function() {
153                                if ( options.disabled || clickDragged ) {
154                                        return false;
155                                }
156                                $( this ).addClass( "ui-state-active" );
157                                that.buttonElement.attr( "aria-pressed", "true" );
158
159                                var radio = that.element[ 0 ];
160                                radioGroup( radio )
161                                        .not( radio )
162                                        .map(function() {
163                                                return $( this ).button( "widget" )[ 0 ];
164                                        })
165                                        .removeClass( "ui-state-active" )
166                                        .attr( "aria-pressed", "false" );
167                        });
168                } else {
169                        this.buttonElement
170                                .bind( "mousedown" + this.eventNamespace, function() {
171                                        if ( options.disabled ) {
172                                                return false;
173                                        }
174                                        $( this ).addClass( "ui-state-active" );
175                                        lastActive = this;
176                                        that.document.one( "mouseup", function() {
177                                                lastActive = null;
178                                        });
179                                })
180                                .bind( "mouseup" + this.eventNamespace, function() {
181                                        if ( options.disabled ) {
182                                                return false;
183                                        }
184                                        $( this ).removeClass( "ui-state-active" );
185                                })
186                                .bind( "keydown" + this.eventNamespace, function(event) {
187                                        if ( options.disabled ) {
188                                                return false;
189                                        }
190                                        if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
191                                                $( this ).addClass( "ui-state-active" );
192                                        }
193                                })
194                                .bind( "keyup" + this.eventNamespace, function() {
195                                        $( this ).removeClass( "ui-state-active" );
196                                });
197
198                        if ( this.buttonElement.is("a") ) {
199                                this.buttonElement.keyup(function(event) {
200                                        if ( event.keyCode === $.ui.keyCode.SPACE ) {
201                                                // TODO pass through original event correctly (just as 2nd argument doesn't work)
202                                                $( this ).click();
203                                        }
204                                });
205                        }
206                }
207
208                // TODO: pull out $.Widget's handling for the disabled option into
209                // $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
210                // be overridden by individual plugins
211                this._setOption( "disabled", options.disabled );
212                this._resetButton();
213        },
214
215        _determineButtonType: function() {
216                var ancestor, labelSelector, checked;
217
218                if ( this.element.is("[type=checkbox]") ) {
219                        this.type = "checkbox";
220                } else if ( this.element.is("[type=radio]") ) {
221                        this.type = "radio";
222                } else if ( this.element.is("input") ) {
223                        this.type = "input";
224                } else {
225                        this.type = "button";
226                }
227
228                if ( this.type === "checkbox" || this.type === "radio" ) {
229                        // we don't search against the document in case the element
230                        // is disconnected from the DOM
231                        ancestor = this.element.parents().last();
232                        labelSelector = "label[for='" + this.element.attr("id") + "']";
233                        this.buttonElement = ancestor.find( labelSelector );
234                        if ( !this.buttonElement.length ) {
235                                ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
236                                this.buttonElement = ancestor.filter( labelSelector );
237                                if ( !this.buttonElement.length ) {
238                                        this.buttonElement = ancestor.find( labelSelector );
239                                }
240                        }
241                        this.element.addClass( "ui-helper-hidden-accessible" );
242
243                        checked = this.element.is( ":checked" );
244                        if ( checked ) {
245                                this.buttonElement.addClass( "ui-state-active" );
246                        }
247                        this.buttonElement.prop( "aria-pressed", checked );
248                } else {
249                        this.buttonElement = this.element;
250                }
251        },
252
253        widget: function() {
254                return this.buttonElement;
255        },
256
257        _destroy: function() {
258                this.element
259                        .removeClass( "ui-helper-hidden-accessible" );
260                this.buttonElement
261                        .removeClass( baseClasses + " " + stateClasses + " " + typeClasses )
262                        .removeAttr( "role" )
263                        .removeAttr( "aria-pressed" )
264                        .html( this.buttonElement.find(".ui-button-text").html() );
265
266                if ( !this.hasTitle ) {
267                        this.buttonElement.removeAttr( "title" );
268                }
269        },
270
271        _setOption: function( key, value ) {
272                this._super( key, value );
273                if ( key === "disabled" ) {
274                        if ( value ) {
275                                this.element.prop( "disabled", true );
276                        } else {
277                                this.element.prop( "disabled", false );
278                        }
279                        return;
280                }
281                this._resetButton();
282        },
283
284        refresh: function() {
285                var isDisabled = this.element.is( ":disabled" );
286                if ( isDisabled !== this.options.disabled ) {
287                        this._setOption( "disabled", isDisabled );
288                }
289                if ( this.type === "radio" ) {
290                        radioGroup( this.element[0] ).each(function() {
291                                if ( $( this ).is( ":checked" ) ) {
292                                        $( this ).button( "widget" )
293                                                .addClass( "ui-state-active" )
294                                                .attr( "aria-pressed", "true" );
295                                } else {
296                                        $( this ).button( "widget" )
297                                                .removeClass( "ui-state-active" )
298                                                .attr( "aria-pressed", "false" );
299                                }
300                        });
301                } else if ( this.type === "checkbox" ) {
302                        if ( this.element.is( ":checked" ) ) {
303                                this.buttonElement
304                                        .addClass( "ui-state-active" )
305                                        .attr( "aria-pressed", "true" );
306                        } else {
307                                this.buttonElement
308                                        .removeClass( "ui-state-active" )
309                                        .attr( "aria-pressed", "false" );
310                        }
311                }
312        },
313
314        _resetButton: function() {
315                if ( this.type === "input" ) {
316                        if ( this.options.label ) {
317                                this.element.val( this.options.label );
318                        }
319                        return;
320                }
321                var buttonElement = this.buttonElement.removeClass( typeClasses ),
322                        buttonText = $( "<span></span>", this.document[0] )
323                                .addClass( "ui-button-text" )
324                                .html( this.options.label )
325                                .appendTo( buttonElement.empty() )
326                                .text(),
327                        icons = this.options.icons,
328                        multipleIcons = icons.primary && icons.secondary,
329                        buttonClasses = [];
330
331                if ( icons.primary || icons.secondary ) {
332                        if ( this.options.text ) {
333                                buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
334                        }
335
336                        if ( icons.primary ) {
337                                buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
338                        }
339
340                        if ( icons.secondary ) {
341                                buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
342                        }
343
344                        if ( !this.options.text ) {
345                                buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
346
347                                if ( !this.hasTitle ) {
348                                        buttonElement.attr( "title", $.trim( buttonText ) );
349                                }
350                        }
351                } else {
352                        buttonClasses.push( "ui-button-text-only" );
353                }
354                buttonElement.addClass( buttonClasses.join( " " ) );
355        }
356});
357
358$.widget( "ui.buttonset", {
359        version: "1.9.0",
360        options: {
361                items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(button)"
362        },
363
364        _create: function() {
365                this.element.addClass( "ui-buttonset" );
366        },
367
368        _init: function() {
369                this.refresh();
370        },
371
372        _setOption: function( key, value ) {
373                if ( key === "disabled" ) {
374                        this.buttons.button( "option", key, value );
375                }
376
377                this._super( key, value );
378        },
379
380        refresh: function() {
381                var rtl = this.element.css( "direction" ) === "rtl";
382
383                this.buttons = this.element.find( this.options.items )
384                        .filter( ":ui-button" )
385                                .button( "refresh" )
386                        .end()
387                        .not( ":ui-button" )
388                                .button()
389                        .end()
390                        .map(function() {
391                                return $( this ).button( "widget" )[ 0 ];
392                        })
393                                .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
394                                .filter( ":first" )
395                                        .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
396                                .end()
397                                .filter( ":last" )
398                                        .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
399                                .end()
400                        .end();
401        },
402
403        _destroy: function() {
404                this.element.removeClass( "ui-buttonset" );
405                this.buttons
406                        .map(function() {
407                                return $( this ).button( "widget" )[ 0 ];
408                        })
409                                .removeClass( "ui-corner-left ui-corner-right" )
410                        .end()
411                        .button( "destroy" );
412        }
413});
414
415}( jQuery ) );
Note: See TracBrowser for help on using the repository browser.