Skip to content

Commit

Permalink
Widget: Added _off() for removing event handlers. Fixes #7795 - Widge…
Browse files Browse the repository at this point in the history 
…t: _on and _off.
  • Loading branch information
@scottgonzalez
scottgonzalez committed Jun 14, 2012
1 parent 00d4beb commit ff39bed
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 27 deletions.
77 changes: 77 additions & 0 deletions tests/unit/widget/widget_core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -767,6 +767,83 @@ test( "_on() to common element", function() {
$( document ).trigger( "customevent" );
});

test( "_off() - single event", function() {
expect( 3 );

$.widget( "ui.testWidget", {} );
var shouldTriggerWidget, shouldTriggerOther,
element = $( "#widget" ),
widget = element.testWidget().data( "testWidget" );
widget._on( element, { foo: function() {
ok( shouldTriggerWidget, "foo called from _on" );
}});
element.bind( "foo", function() {
ok( shouldTriggerOther, "foo called from bind" );
});
shouldTriggerWidget = true;
shouldTriggerOther = true;
element.trigger( "foo" );
shouldTriggerWidget = false;
widget._off( element, "foo" );
element.trigger( "foo" );
});

test( "_off() - multiple events", function() {
expect( 6 );

$.widget( "ui.testWidget", {} );
var shouldTriggerWidget, shouldTriggerOther,
element = $( "#widget" ),
widget = element.testWidget().data( "testWidget" );
widget._on( element, {
foo: function() {
ok( shouldTriggerWidget, "foo called from _on" );
},
bar: function() {
ok( shouldTriggerWidget, "bar called from _on" );
}
});
element.bind( "foo bar", function( event ) {
ok( shouldTriggerOther, event.type + " called from bind" );
});
shouldTriggerWidget = true;
shouldTriggerOther = true;
element.trigger( "foo" );
element.trigger( "bar" );
shouldTriggerWidget = false;
widget._off( element, "foo bar" );
element.trigger( "foo" );
element.trigger( "bar" );
});

test( "_off() - all events", function() {
expect( 6 );

$.widget( "ui.testWidget", {} );
var shouldTriggerWidget, shouldTriggerOther,
element = $( "#widget" ),
widget = element.testWidget().data( "testWidget" );
widget._on( element, {
foo: function() {
ok( shouldTriggerWidget, "foo called from _on" );
},
bar: function() {
ok( shouldTriggerWidget, "bar called from _on" );
}
});
element.bind( "foo bar", function( event ) {
ok( shouldTriggerOther, event.type + " called from bind" );
});
shouldTriggerWidget = true;
shouldTriggerOther = true;
element.trigger( "foo" );
element.trigger( "bar" );
shouldTriggerWidget = false;
widget._off( element );
element.trigger( "foo" );
element.trigger( "bar" );
});

test( "._hoverable()", function() {
$.widget( "ui.testWidget", {
_create: function() {
Expand Down
3 changes: 1 addition & 2 deletions ui/jquery.ui.accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,8 +219,7 @@ $.widget( "ui.accordion", {

if ( key === "event" ) {
if ( this.options.event ) {
this.headers.unbind(
this.options.event.split( " " ).join( ".accordion " ) + ".accordion" );
this._off( this.headers, this.options.event );
}
this._setupEvents( value );
}
Expand Down
32 changes: 16 additions & 16 deletions ui/jquery.ui.button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ $.widget( "ui.button", {
},
_create: function() {
this.element.closest( "form" )
.unbind( "reset.button" )
.bind( "reset.button", formResetHandler );
.unbind( "reset" + this.eventNamespace )
.bind( "reset" + this.eventNamespace, formResetHandler );

if ( typeof this.options.disabled !== "boolean" ) {
this.options.disabled = !!this.element.prop( "disabled" );
Expand All @@ -79,7 +79,7 @@ $.widget( "ui.button", {
this.buttonElement
.addClass( baseClasses )
.attr( "role", "button" )
.bind( "mouseenter.button", function() {
.bind( "mouseenter" + this.eventNamespace, function() {
if ( options.disabled ) {
return;
}
Expand All @@ -88,30 +88,30 @@ $.widget( "ui.button", {
$( this ).addClass( "ui-state-active" );
}
})
.bind( "mouseleave.button", function() {
.bind( "mouseleave" + this.eventNamespace, function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( hoverClass );
})
.bind( "click.button", function( event ) {
.bind( "click" + this.eventNamespace, function( event ) {
if ( options.disabled ) {
event.preventDefault();
event.stopImmediatePropagation();
}
});

this.element
.bind( "focus.button", function() {
.bind( "focus" + this.eventNamespace, function() {
// no need to check disabled, focus won't be triggered anyway
that.buttonElement.addClass( focusClass );
})
.bind( "blur.button", function() {
.bind( "blur" + this.eventNamespace, function() {
that.buttonElement.removeClass( focusClass );
});

if ( toggleButton ) {
this.element.bind( "change.button", function() {
this.element.bind( "change" + this.eventNamespace, function() {
if ( clickDragged ) {
return;
}
Expand All @@ -121,15 +121,15 @@ $.widget( "ui.button", {
// prevents issue where button state changes but checkbox/radio checked state
// does not in Firefox (see ticket #6970)
this.buttonElement
.bind( "mousedown.button", function( event ) {
.bind( "mousedown" + this.eventNamespace, function( event ) {
if ( options.disabled ) {
return;
}
clickDragged = false;
startXPos = event.pageX;
startYPos = event.pageY;
})
.bind( "mouseup.button", function( event ) {
.bind( "mouseup" + this.eventNamespace, function( event ) {
if ( options.disabled ) {
return;
}
Expand All @@ -140,15 +140,15 @@ $.widget( "ui.button", {
}

if ( this.type === "checkbox" ) {
this.buttonElement.bind( "click.button", function() {
this.buttonElement.bind( "click" + this.eventNamespace, function() {
if ( options.disabled || clickDragged ) {
return false;
}
$( this ).toggleClass( "ui-state-active" );
that.buttonElement.attr( "aria-pressed", that.element[0].checked );
});
} else if ( this.type === "radio" ) {
this.buttonElement.bind( "click.button", function() {
this.buttonElement.bind( "click" + this.eventNamespace, function() {
if ( options.disabled || clickDragged ) {
return false;
}
Expand All @@ -166,7 +166,7 @@ $.widget( "ui.button", {
});
} else {
this.buttonElement
.bind( "mousedown.button", function() {
.bind( "mousedown" + this.eventNamespace, function() {
if ( options.disabled ) {
return false;
}
Expand All @@ -176,21 +176,21 @@ $.widget( "ui.button", {
lastActive = null;
});
})
.bind( "mouseup.button", function() {
.bind( "mouseup" + this.eventNamespace, function() {
if ( options.disabled ) {
return false;
}
$( this ).removeClass( "ui-state-active" );
})
.bind( "keydown.button", function(event) {
.bind( "keydown" + this.eventNamespace, function(event) {
if ( options.disabled ) {
return false;
}
if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
$( this ).addClass( "ui-state-active" );
}
})
.bind( "keyup.button", function() {
.bind( "keyup" + this.eventNamespace, function() {
$( this ).removeClass( "ui-state-active" );
});

Expand Down
6 changes: 3 additions & 3 deletions ui/jquery.ui.dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ $.widget("ui.dialog", {
if ( this.overlay ) {
this.overlay.destroy();
}
this.uiDialog.unbind( "keypress.ui-dialog" );
this._off( this.uiDialog, "keypress" );

if ( this.options.hide ) {
this.uiDialog.hide( this.options.hide, function() {
Expand Down Expand Up @@ -310,7 +310,7 @@ $.widget("ui.dialog", {

// prevent tabbing out of modal dialogs
if ( options.modal ) {
uiDialog.bind( "keydown.ui-dialog", function( event ) {
this._on( uiDialog, { keydown: function( event ) {
if ( event.keyCode !== $.ui.keyCode.TAB ) {
return;
}
Expand All @@ -326,7 +326,7 @@ $.widget("ui.dialog", {
last.focus( 1 );
return false;
}
});
}});
}

// set focus to the first tabbable element in the content area or the first button
Expand Down
4 changes: 2 additions & 2 deletions ui/jquery.ui.menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ $.widget( "ui.menu", {
})
// need to catch all clicks on disabled menu
// not possible through _on
.bind( "click.menu", $.proxy(function( event ) {
.bind( "click" + this.eventNamespace, $.proxy(function( event ) {
if ( this.options.disabled ) {
event.preventDefault();
}
Expand Down Expand Up @@ -168,7 +168,7 @@ $.widget( "ui.menu", {
this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" );

// unbind currentEventTarget click event handler
$( currentEventTarget ).unbind( "click.menu" );
this._off( $( currentEventTarget ), "click" );
},

_keydown: function( event ) {
Expand Down
6 changes: 3 additions & 3 deletions ui/jquery.ui.tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ $.widget( "ui.tabs", {
.addClass( "ui-tabs ui-widget ui-widget-content ui-corner-all" )
.toggleClass( "ui-tabs-collapsible", options.collapsible )
// Prevent users from focusing disabled tabs via click
.delegate( ".ui-tabs-nav > li", "mousedown.tabs", function( event ) {
.delegate( ".ui-tabs-nav > li", "mousedown" + this.eventNamespace, function( event ) {
if ( $( this ).is( ".ui-state-disabled" ) ) {
event.preventDefault();
}
Expand All @@ -69,7 +69,7 @@ $.widget( "ui.tabs", {
// We don't have to worry about focusing the previously focused
// element since clicking on a non-focusable element should focus
// the body anyway.
.delegate( ".ui-tabs-anchor", "focus.tabs", function() {
.delegate( ".ui-tabs-anchor", "focus" + this.eventNamespace, function() {
if ( $( this ).closest( "li" ).is( ".ui-state-disabled" ) ) {
this.blur();
}
Expand Down Expand Up @@ -480,7 +480,7 @@ $.widget( "ui.tabs", {
});
}

this.anchors.add( this.tabs ).add( this.panels ).unbind( ".tabs" );
this._off( this.anchors.add( this.tabs ).add( this.panels ) );
this._on( this.anchors, events );
this._on( this.tabs, { keydown: "_tabKeydown" } );
this._on( this.panels, { keydown: "_panelKeydown" } );
Expand Down
2 changes: 1 addition & 1 deletion ui/jquery.ui.tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ $.widget( "ui.tooltip", {
});

target.removeData( "tooltip-open" );
target.unbind( "mouseleave.tooltip focusout.tooltip keyup.tooltip" );
this._off( target, "mouseleave focusout keyup" );

this.closing = true;
this._trigger( "close", event, { tooltip: tooltip } );
Expand Down
5 changes: 5 additions & 0 deletions ui/jquery.ui.widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,11 @@ $.Widget.prototype = {
});
},

_off: function( element, eventName ) {
eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) + this.eventNamespace;
element.unbind( eventName ).undelegate( eventName );
},

_delay: function( handler, delay ) {
function handlerProxy() {
return ( typeof handler === "string" ? instance[ handler ] : handler )
Expand Down

0 comments on commit ff39bed

Please sign in to comment.