source: Dev/branches/jQueryUI/client/js/jquery/ui/jquery.ui.button.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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