Skip to content

jQuery UI Widget Namespace Extensions #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

jQuery UI Widget Namespace Extensions #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
da8dfa5
Widget: Tests & Impl of namespaced widgets with underscores.
cschneid Sep 25, 2010
fb2f3d2
Widget: Enable namespace functions for widgets.
cschneid Oct 1, 2010
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 74 additions & 1 deletion tests/unit/widget/widget_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,51 @@ module( "widget factory", {
}
});

test( "widget namespaces", function() {
var fail = function(msg) { ok(false, msg); };

var uiPrototype = {
_create: function() { fail( "This widget should not have been instantiated" ); }
};

var customPrototype = {
_create: function() { ok( true, "Second defined widget is the one that takes over default scope" ) }
}

$.widget( "ui.testWidget", uiPrototype );
$.widget( "custom.testWidget", customPrototype );

var elem = $( "<div></div>" ).testWidget();

ok( $.isFunction( $.ui.testWidget ), "constructor was created in the ui namespace" );
ok( $.isFunction( $.custom.testWidget ), "constructor was created in the custom namespace" );
equals( uiPrototype._create, $.ui.testWidget.prototype._create, "ui widget is in the ui namespace" );
equals( customPrototype._create, $.custom.testWidget.prototype._create, "custom namespace is maintained" );

// Now make sure we can explicitly pick the one we want
var which = "neither";
$.ui.testWidget.prototype._create = function(){ which = "ui"; };
var elem2 = $( "<div></div>" ).ui_testWidget();
equals( which, "ui" , "creating a namespaced widget makes the correct one" );

which = "neither";
$.custom.testWidget.prototype._create = function(){ which = "custom"; };
var elem3 = $( "<div></div>" ).custom_testWidget();
equals( which, "custom", "creating a namespaced widget makes the correct one" );

// Now make sure we can explicitly pick the one we want via the chained version of namespace.
var which = "neither";
$.ui.testWidget.prototype._create = function(){ which = "ui"; };
var elem2 = $( "<div></div>" ).ui().testWidget();
equals( which, "ui" , "creating a namespaced widget with the namespace function makes the correct one" );

which = "neither";
$.custom.testWidget.prototype._create = function(){ which = "custom"; };
var elem3 = $( "<div></div>" ).custom().testWidget();
equals( which, "custom", "creating a namespaced widget with the namespace function makes the correct one" );

});

test( "widget creation", function() {
var myPrototype = {
_create: function() {},
Expand Down Expand Up @@ -236,7 +281,35 @@ test( ".option() - delegate to ._setOptions()", function() {
"_setOptions called with multiple options" );
});

test( ".option() - delegate to ._setOption()", function() {
test( ".option() - getter - custom namespace", function() {
$.widget( "custom.testWidget", {
_create: function() {}
});

var div = $( "<div></div>" ).custom_testWidget({
foo: "bar",
baz: 5,
qux: [ "quux", "quuux" ]
});

same( div.custom_testWidget( "option", "foo"), "bar", "single option - string" );
same( div.custom_testWidget( "option", "baz"), 5, "single option - number" );
same( div.custom_testWidget( "option", "qux"), [ "quux", "quuux" ],
"single option - array" );

var options = div.custom_testWidget( "option" );
same( options, {
disabled: false,
foo: "bar",
baz: 5,
qux: [ "quux", "quuux" ]
}, "full options hash returned" );
options.foo = "notbar";
same( div.custom_testWidget( "option", "foo"), "bar",
"modifying returned options hash does not modify plugin instance" );
});

test( ".option() - setter", function() {
var calls = [];
$.widget( "ui.testWidget", {
_create: function() {},
Expand Down
31 changes: 26 additions & 5 deletions ui/jquery.ui.widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,11 @@ $.widget = function( name, base, prototype ) {
widgetBaseClass: fullName
}, prototype );

$.widget.bridge( name, $[ namespace ][ name ] );
$.widget.bridge( name, namespace, $[ namespace ][ name ] );
};

$.widget.bridge = function( name, object ) {
$.fn[ name ] = function( options ) {
$.widget.bridge = function( name, namespace, object ) {
var bridgeFn = function( options ) {
var isMethodCall = typeof options === "string",
args = Array.prototype.slice.call( arguments, 1 ),
returnValue = this;
Expand Down Expand Up @@ -111,18 +111,39 @@ $.widget.bridge = function( name, object ) {
}
});
} else {
// Make each element of the jquery list an instance of this widget
this.each(function() {
var instance = $.data( this, name );
var instance = $.data( this, namespace + "." + name );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, name, new object( options, this ) );
var instance = new object( options, this );
$.data( this, name, instance );
$.data( this, namespace + "." + name, instance );
}
});
}

return returnValue;
};

// Check to see if we aren't the first widget to come this way.
if ( $.isFunction( $.fn[ namespace ] ) ) {
$.fn[ namespace ][ name ] = bridgeFn;
} else {
// Store off the jquery instance so we can get at it in the namespaceFn
var jquery_obj = this;
var namespaceFn = function() {
this[ name ] = bridgeFn;
return this;
}
$.fn[ namespace ] = namespaceFn;
}

// Attach the bridge function to both the raw name - example: `$.sortable()`
// And also attach it to a namespaced name - example: `$.ui_sortable()`
$.fn[ name ] = bridgeFn;
$.fn[ namespace + "_" + name ] = bridgeFn;
};

$.Widget = function( options, element ) {
Expand Down