Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

[1.11] Widget: Implement instance method on the bridge to return widget instance #902

Closed
wants to merge 3 commits into from

3 participants

@gnarf
Owner

A new method on the widget bridge that gives you access to the widget instance without relying on the location it's stored in data not changing.

Not implemented exactly like the ticket described, but there was some fun logic in the bridge that needed to be overridden to make it return instance.

http://jqbug.com/ui/9030

@scottgonzalez

@gnarf37 Can you rebase this? We're ready to land it in master.

@gnarf
Owner

rebased

@jzaefferer jzaefferer commented on the diff
demos/autocomplete/combobox.html
@@ -152,7 +152,7 @@
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
- this.input.data( "ui-autocomplete" ).term = "";
+ this.input.autocomplete( "instance" ).term = "";
@jzaefferer Owner

This seems to need more changes, the demo is broken. Shows the select element and throws Uncaught ReferenceError: input is not defined at combobox.html:95

@scottgonzalez Owner

Rebase again? Both of those errors were fixed in the past few days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@jzaefferer jzaefferer commented on the diff
tests/unit/widget/widget_core.js
@@ -625,6 +625,22 @@ test( ".widget() - overriden", function() {
deepEqual( wrapper[0], $( "<div>" ).testWidget().testWidget( "widget" )[0] );
});
+test( ".instance()", function() {
+ expect( 2 );
+ var div,
+ _test = function() {};
+
+ $.widget( "ui.testWidget", {
+ _create: function() {},
+ _test: _test
+ });
+
+ div = $( "<div>" );
+ equal( div.testWidget( "instance" ), undefined );
@jzaefferer Owner

Usually calling methods on uninitialized widgets throws an error. Do we want to make the instance the exception, to check if a widget is initialized or not?

@scottgonzalez Owner

Good point, we should just move the check for the instance method below the check for uninitialized widgets. Doesn't even require writing any additional code :-)

@gnarf Owner
gnarf added a note

This test case actually ensures that it's undefined not an exception. You don't want .widget( "instance" ) to throw IMO, or it's useless to be able to check to see if it has been initialized, and you'll still need to dig into data...

@scottgonzalez Owner

I think I'm ok with this. @jzaefferer?

@jzaefferer Owner

Do we want to make the instance the exception, to check if a widget is initialized or not?

That's what I was asking about, so yeah, that makes sense. Afterwards we should make sure that we replace every instance of using data with the new instance method, for whatever purpose its used. And probably add some additional documentation, if we don't yet explicitly document how to retrieve the instance.

@scottgonzalez Owner

Afterwards we should make sure that we replace every instance of using data with the new instance method, for whatever purpose its used.

This PR already does that.

And probably add some additional documentation, if we don't yet explicitly document how to retrieve the instance.

jquery/api.jqueryui.com#77

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@jzaefferer
Owner

Reviewed. Found one broken demo and a very basic issue, see comments above. Otherwise looking good.

@jzaefferer
Owner

Replaced by #939 with a branch within this repo.

@jzaefferer jzaefferer closed this
@gnarf gnarf deleted the branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 15, 2013
  1. @gnarf

    Widget: Implement instance method on the bridge to return widget inst…

    gnarf authored
    …ance - Fixes #9030 - `instance` method in widget prototype
  2. @gnarf
  3. @gnarf
This page is out of date. Refresh to see the latest.
View
2  demos/autocomplete/combobox.html
@@ -152,7 +152,7 @@
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
- this.input.data( "ui-autocomplete" ).term = "";
+ this.input.autocomplete( "instance" ).term = "";
@jzaefferer Owner

This seems to need more changes, the demo is broken. Shows the select element and throws Uncaught ReferenceError: input is not defined at combobox.html:95

@scottgonzalez Owner

Rebase again? Both of those errors were fixed in the past few days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
},
_destroy: function() {
View
2  demos/autocomplete/custom-data.html
@@ -66,7 +66,7 @@
return false;
}
})
- .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
+ .autocomplete( "instance" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
View
2  demos/autocomplete/multiple-remote.html
@@ -29,7 +29,7 @@
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
- $( this ).data( "ui-autocomplete" ).menu.active ) {
+ $( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
View
2  demos/autocomplete/multiple.html
@@ -48,7 +48,7 @@
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
- $( this ).data( "ui-autocomplete" ).menu.active ) {
+ $( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
View
2  demos/spinner/default.html
@@ -23,7 +23,7 @@
}
});
$( "#destroy" ).click(function() {
- if ( spinner.data( "ui-spinner" ) ) {
+ if ( spinner.spinner( "instance" ) ) {
spinner.spinner( "destroy" );
} else {
spinner.spinner();
View
16 tests/unit/widget/widget_core.js
@@ -625,6 +625,22 @@ test( ".widget() - overriden", function() {
deepEqual( wrapper[0], $( "<div>" ).testWidget().testWidget( "widget" )[0] );
});
+test( ".instance()", function() {
+ expect( 2 );
+ var div,
+ _test = function() {};
+
+ $.widget( "ui.testWidget", {
+ _create: function() {},
+ _test: _test
+ });
+
+ div = $( "<div>" );
+ equal( div.testWidget( "instance" ), undefined );
@jzaefferer Owner

Usually calling methods on uninitialized widgets throws an error. Do we want to make the instance the exception, to check if a widget is initialized or not?

@scottgonzalez Owner

Good point, we should just move the check for the instance method below the check for uninitialized widgets. Doesn't even require writing any additional code :-)

@gnarf Owner
gnarf added a note

This test case actually ensures that it's undefined not an exception. You don't want .widget( "instance" ) to throw IMO, or it's useless to be able to check to see if it has been initialized, and you'll still need to dig into data...

@scottgonzalez Owner

I think I'm ok with this. @jzaefferer?

@jzaefferer Owner

Do we want to make the instance the exception, to check if a widget is initialized or not?

That's what I was asking about, so yeah, that makes sense. Afterwards we should make sure that we replace every instance of using data with the new instance method, for whatever purpose its used. And probably add some additional documentation, if we don't yet explicitly document how to retrieve the instance.

@scottgonzalez Owner

Afterwards we should make sure that we replace every instance of using data with the new instance method, for whatever purpose its used.

This PR already does that.

And probably add some additional documentation, if we don't yet explicitly document how to retrieve the instance.

jquery/api.jqueryui.com#77

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ div.testWidget();
+ equal( div.testWidget( "instance" ), div.data( "ui-testWidget" ) );
+});
+
test( "._on() to element (default)", function() {
expect( 12 );
var that, widget;
View
2  ui/jquery.ui.autocomplete.js
@@ -201,7 +201,7 @@ $.widget( "ui.autocomplete", {
role: null
})
.hide()
- .data( "ui-menu" );
+ .menu( "instance" );
this._on( this.menu.element, {
mousedown: function( event ) {
View
28 ui/jquery.ui.draggable.js
@@ -558,7 +558,7 @@ $.widget("ui.draggable", $.ui.mouse, {
$.ui.plugin.add("draggable", "connectToSortable", {
start: function(event, ui) {
- var inst = $(this).data("ui-draggable"), o = inst.options,
+ var inst = $(this).draggable( "instance" ), o = inst.options,
uiSortable = $.extend({}, ui, { item: inst.element });
inst.sortables = [];
$(o.connectToSortable).each(function() {
@@ -577,7 +577,7 @@ $.ui.plugin.add("draggable", "connectToSortable", {
stop: function(event, ui) {
//If we are still over the sortable, we fake the stop event of the sortable, but also remove helper
- var inst = $(this).data("ui-draggable"),
+ var inst = $(this).draggable( "instance" ),
uiSortable = $.extend({}, ui, { item: inst.element });
$.each(inst.sortables, function() {
@@ -613,7 +613,7 @@ $.ui.plugin.add("draggable", "connectToSortable", {
},
drag: function(event, ui) {
- var inst = $(this).data("ui-draggable"), that = this;
+ var inst = $(this).draggable( "instance" ), that = this;
$.each(inst.sortables, function() {
@@ -714,14 +714,14 @@ $.ui.plugin.add("draggable", "connectToSortable", {
$.ui.plugin.add("draggable", "cursor", {
start: function() {
- var t = $("body"), o = $(this).data("ui-draggable").options;
+ var t = $("body"), o = $(this).draggable( "instance" ).options;
if (t.css("cursor")) {
o._cursor = t.css("cursor");
}
t.css("cursor", o.cursor);
},
stop: function() {
- var o = $(this).data("ui-draggable").options;
+ var o = $(this).draggable( "instance" ).options;
if (o._cursor) {
$("body").css("cursor", o._cursor);
}
@@ -730,14 +730,14 @@ $.ui.plugin.add("draggable", "cursor", {
$.ui.plugin.add("draggable", "opacity", {
start: function(event, ui) {
- var t = $(ui.helper), o = $(this).data("ui-draggable").options;
+ var t = $(ui.helper), o = $(this).draggable( "instance" ).options;
if(t.css("opacity")) {
o._opacity = t.css("opacity");
}
t.css("opacity", o.opacity);
},
stop: function(event, ui) {
- var o = $(this).data("ui-draggable").options;
+ var o = $(this).draggable( "instance" ).options;
if(o._opacity) {
$(ui.helper).css("opacity", o._opacity);
}
@@ -746,14 +746,14 @@ $.ui.plugin.add("draggable", "opacity", {
$.ui.plugin.add("draggable", "scroll", {
start: function() {
- var i = $(this).data("ui-draggable");
+ var i = $(this).draggable( "instance" );
if(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== "HTML") {
i.overflowOffset = i.scrollParent.offset();
}
},
drag: function( event ) {
- var i = $(this).data("ui-draggable"), o = i.options, scrolled = false;
+ var i = $(this).draggable( "instance" ), o = i.options, scrolled = false;
if(i.scrollParent[0] !== document && i.scrollParent[0].tagName !== "HTML") {
@@ -803,7 +803,7 @@ $.ui.plugin.add("draggable", "scroll", {
$.ui.plugin.add("draggable", "snap", {
start: function() {
- var i = $(this).data("ui-draggable"),
+ var i = $(this).draggable( "instance" ),
o = i.options;
i.snapElements = [];
@@ -824,7 +824,7 @@ $.ui.plugin.add("draggable", "snap", {
drag: function(event, ui) {
var ts, bs, ls, rs, l, r, t, b, i, first,
- inst = $(this).data("ui-draggable"),
+ inst = $(this).draggable( "instance" ),
o = inst.options,
d = o.snapTolerance,
x1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,
@@ -899,7 +899,7 @@ $.ui.plugin.add("draggable", "snap", {
$.ui.plugin.add("draggable", "stack", {
start: function() {
var min,
- o = this.data("ui-draggable").options,
+ o = $(this).draggable( "instance" ).options,
group = $.makeArray($(o.stack)).sort(function(a,b) {
return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
});
@@ -916,14 +916,14 @@ $.ui.plugin.add("draggable", "stack", {
$.ui.plugin.add("draggable", "zIndex", {
start: function(event, ui) {
- var t = $(ui.helper), o = $(this).data("ui-draggable").options;
+ var t = $(ui.helper), o = $(this).draggable( "instance" ).options;
if(t.css("zIndex")) {
o._zIndex = t.css("zIndex");
}
t.css("zIndex", o.zIndex);
},
stop: function(event, ui) {
- var o = $(this).data("ui-draggable").options;
+ var o = $(this).draggable( "instance" ).options;
if(o._zIndex) {
$(ui.helper).css("zIndex", o._zIndex);
}
View
22 ui/jquery.ui.resizable.js
@@ -81,7 +81,7 @@ $.widget("ui.resizable", $.ui.mouse, {
//Overwrite the original this.element
this.element = this.element.parent().data(
- "ui-resizable", this.element.data("ui-resizable")
+ "ui-resizable", this.element.resizable( "instance" )
);
this.elementIsWrapper = true;
@@ -651,7 +651,7 @@ $.widget("ui.resizable", $.ui.mouse, {
$.ui.plugin.add("resizable", "animate", {
stop: function( event ) {
- var that = $(this).data("ui-resizable"),
+ var that = $(this).resizable( "instance" ),
o = that.options,
pr = that._proportionallyResizeElements,
ista = pr.length && (/textarea/i).test(pr[0].nodeName),
@@ -693,7 +693,7 @@ $.ui.plugin.add("resizable", "containment", {
start: function() {
var element, p, co, ch, cw, width, height,
- that = $(this).data("ui-resizable"),
+ that = $(this).resizable( "instance" ),
o = that.options,
el = that.element,
oc = o.containment,
@@ -739,7 +739,7 @@ $.ui.plugin.add("resizable", "containment", {
resize: function( event ) {
var woset, hoset, isParent, isOffsetRelative,
- that = $(this).data("ui-resizable"),
+ that = $(this).resizable( "instance" ),
o = that.options,
co = that.containerOffset, cp = that.position,
pRatio = that._aspectRatio || event.shiftKey,
@@ -794,7 +794,7 @@ $.ui.plugin.add("resizable", "containment", {
},
stop: function(){
- var that = $(this).data("ui-resizable"),
+ var that = $(this).resizable( "instance" ),
o = that.options,
co = that.containerOffset,
cop = that.containerPosition,
@@ -818,7 +818,7 @@ $.ui.plugin.add("resizable", "containment", {
$.ui.plugin.add("resizable", "alsoResize", {
start: function () {
- var that = $(this).data("ui-resizable"),
+ var that = $(this).resizable( "instance" ),
o = that.options,
_store = function (exp) {
$(exp).each(function() {
@@ -839,7 +839,7 @@ $.ui.plugin.add("resizable", "alsoResize", {
},
resize: function (event, ui) {
- var that = $(this).data("ui-resizable"),
+ var that = $(this).resizable( "instance" ),
o = that.options,
os = that.originalSize,
op = that.originalPosition,
@@ -880,7 +880,7 @@ $.ui.plugin.add("resizable", "ghost", {
start: function() {
- var that = $(this).data("ui-resizable"), o = that.options, cs = that.size;
+ var that = $(this).resizable( "instance" ), o = that.options, cs = that.size;
that.ghost = that.originalElement.clone();
that.ghost
@@ -893,14 +893,14 @@ $.ui.plugin.add("resizable", "ghost", {
},
resize: function(){
- var that = $(this).data("ui-resizable");
+ var that = $(this).resizable( "instance" );
if (that.ghost) {
that.ghost.css({ position: "relative", height: that.size.height, width: that.size.width });
}
},
stop: function() {
- var that = $(this).data("ui-resizable");
+ var that = $(this).resizable( "instance" );
if (that.ghost && that.helper) {
that.helper.get(0).removeChild(that.ghost.get(0));
}
@@ -911,7 +911,7 @@ $.ui.plugin.add("resizable", "ghost", {
$.ui.plugin.add("resizable", "grid", {
resize: function() {
- var that = $(this).data("ui-resizable"),
+ var that = $(this).resizable( "instance" ),
o = that.options,
cs = that.size,
os = that.originalSize,
View
4 ui/jquery.ui.widget.js
@@ -178,6 +178,10 @@ $.widget.bridge = function( name, object ) {
this.each(function() {
var methodValue,
instance = $.data( this, fullName );
+ if ( options === "instance" ) {
+ returnValue = instance;
+ return false;
+ }
if ( !instance ) {
return $.error( "cannot call methods on " + name + " prior to initialization; " +
"attempted to call method '" + options + "'" );
Something went wrong with that request. Please try again.