r1617 - trunk/ui

r1617 - trunk/ui


Author: eduardolundgren
Date: Thu Jan 15 16:33:46 2009
New Revision: 1617
Modified:
trunk/ui/ui.accordion.js
trunk/ui/ui.dialog.js
trunk/ui/ui.draggable.js
trunk/ui/ui.droppable.js
trunk/ui/ui.progressbar.js
trunk/ui/ui.resizable.js
trunk/ui/ui.selectable.js
trunk/ui/ui.slider.js
trunk/ui/ui.sortable.js
trunk/ui/ui.tabs.js
Log:
Fix for #3838 - Components should use this.widgetName on internally
Modified: trunk/ui/ui.accordion.js
==============================================================================
--- trunk/ui/ui.accordion.js    (original)
+++ trunk/ui/ui.accordion.js    Thu Jan 15 16:33:46 2009
@@ -12,11 +12,18 @@
*/
(function($) {
+var widgetName = "accordion";
+var classWidgetName = ".accordion";
+
$.widget("ui.accordion", {
    _init: function() {
        var options = this.options;
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
+
        if ( options.navigation ) {
            var current = this.element.find("a").filter(options.navigationFilter);
            if ( current.length ) {
@@ -32,8 +39,8 @@
        this.element.addClass("ui-accordion ui-widget ui-helper-reset");
        var groups = this.element.children().addClass("ui-accordion-group");
        var headers = options.headers =
groups.find("> :first-child").addClass("ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all")
-        .bind("mouseenter.accordion", function(){
$(this).addClass('ui-state-hover'); })
-        .bind("mouseleave.accordion", function(){
$(this).removeClass('ui-state-hover'); });
+        .bind("mouseenter." + widgetName, function(){
$(this).addClass('ui-state-hover'); })
+        .bind("mouseleave." + widgetName, function(){
$(this).removeClass('ui-state-hover'); });
        // wrap content elements in div against animation issues
        
headers.next().wrap("<div></div>").addClass("ui-accordion-content").parent().addClass("ui-accordion-content-wrap
ui-helper-reset ui-widget-content ui-corner-bottom");
@@ -79,15 +86,15 @@
            options.headers.find('a').attr('tabIndex','-1');
        if (options.event) {
-            this.element.bind((options.event) + ".accordion", clickHandler);
+            this.element.bind((options.event) + classWidgetName, clickHandler);
        }
    },
    destroy: function() {
-        this.element.removeClass("ui-accordion ui-widget
ui-helper-reset").removeAttr("role").unbind(".accordion");
-        $.removeData(this.element[0], "accordion");
+        this.element.removeClass("ui-accordion ui-widget
ui-helper-reset").removeAttr("role").unbind(classWidgetName);
+        $.removeData(this.element[0], widgetName);
        var groups =
this.element.children().removeClass("ui-accordion-group "+this.options.selectedClass);
-        var headers =
this.options.headers.unbind(".accordion").removeClass("ui-accordion-header
ui-helper-reset ui-state-default ui-corner-all ui-state-active
ui-corner-top")
+        var headers =
this.options.headers.unbind(classWidgetName).removeClass("ui-accordion-header
ui-helper-reset ui-state-default ui-corner-all ui-state-active
ui-corner-top")
            .removeAttr("role").removeAttr("aria-expanded").removeAttr("tabindex");
        headers.find("a").removeAttr("tabindex");
        headers.children(".ui-icon").remove();
@@ -168,11 +175,11 @@
function completed(cancel) {
    // if removed while animated data can be empty
-    if (!$.data(this, "accordion")) {
+    if (!$.data(this, widgetName)) {
        return;
    }
-    var instance = $.data(this, "accordion");
+    var instance = $.data(this, widgetName);
    var options = instance.options;
    options.running = cancel ? 0 : --options.running;
    if ( options.running ) {
@@ -188,13 +195,13 @@
}
function toggle(toShow, toHide, data, clickedActive, down) {
-    var options = $.data(this, "accordion").options;
+    var options = $.data(this, widgetName).options;
    options.toShow = toShow;
    options.toHide = toHide;
    options.data = data;
    var complete = scopeCallback(completed, this);
-    $.data(this, "accordion")._trigger("changestart", null, options.data);
+    $.data(this, widgetName)._trigger("changestart", null, options.data);
    // count elements to animate
    options.running = toHide.size() === 0 ? toShow.size() : toHide.size();
@@ -263,7 +270,7 @@
}
function clickHandler(event) {
-    var options = $.data(this, "accordion").options;
+    var options = $.data(this, widgetName).options;
    if (options.disabled) {
        return false;
    }
Modified: trunk/ui/ui.dialog.js
==============================================================================
--- trunk/ui/ui.dialog.js    (original)
+++ trunk/ui/ui.dialog.js    Thu Jan 15 16:33:46 2009
@@ -14,6 +14,9 @@
*/
(function($) {
+var widgetName = "dialog";
+var classWidgetName = ".dialog";
+
var setDataSwitch = {
    dragStart: "start.draggable",
    drag: "drag.draggable",
@@ -30,6 +33,10 @@
$.widget("ui.dialog", {
    _init: function() {
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
+
        this.originalTitle = this.element.attr('title');
        this.options.title = this.options.title || this.originalTitle;
@@ -61,7 +68,7 @@
                        && ev.keyCode == $.ui.keyCode.ESCAPE && self.close());
                })
                .attr({
-                    role: 'dialog',
+                    role: widgetName,
                    'aria-labelledby': titleId
                })
                .mousedown(function() {
@@ -152,8 +159,8 @@
        (this.overlay && this.overlay.destroy());
        this.uiDialog.hide();
        this.element
-            .unbind('.dialog')
-            .removeData('dialog')
+            .unbind(classWidgetName)
+            .removeData(widgetName)
            .removeClass('ui-dialog-content ui-widget-content')
            .hide().appendTo('body');
        this.uiDialog.remove();
Modified: trunk/ui/ui.draggable.js
==============================================================================
--- trunk/ui/ui.draggable.js    (original)
+++ trunk/ui/ui.draggable.js    Thu Jan 15 16:33:46 2009
@@ -12,9 +12,15 @@
*/
(function($) {
+var widgetName = "draggable";
+var classWidgetName = ".draggable";
+
$.widget("ui.draggable", $.extend({}, $.ui.mouse, {
    _init: function() {
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
        if (this.options.helper == 'original' && !(/^(?:r|a|
f)/).test(this.element.css("position")))
            this.element[0].style.position = 'relative';
@@ -27,8 +33,8 @@
    },
    destroy: function() {
-        if(!this.element.data('draggable')) return;
-        
this.element.removeData("draggable").unbind(".draggable").removeClass(this.options.cssNamespace+'-draggable '+this.options.cssNamespace+'-draggable-dragging '+this.options.cssNamespace+'-draggable-disabled');
+        if(!this.element.data(widgetName)) return;
+        
this.element.removeData(widgetName).unbind(classWidgetName).removeClass(this.options.cssNamespace+'-draggable '+this.options.cssNamespace+'-draggable-dragging '+this.options.cssNamespace+'-draggable-disabled');
        this._mouseDestroy();
    },
@@ -426,10 +432,10 @@
    }
});
-$.ui.plugin.add("draggable", "connectToSortable", {
+$.ui.plugin.add(widgetName, "connectToSortable", {
    start: function(event, ui) {
-        var inst = $(this).data("draggable");
+        var inst = $(this).data(widgetName);
        inst.sortables = [];
        $(ui.options.connectToSortable).each(function() {
            // 'this' points to a string, and should therefore resolved as query,
but instead, if the string is assigned to a variable, it loops through the
strings properties,
@@ -451,7 +457,7 @@
    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("draggable");
+        var inst = $(this).data(widgetName);
        $.each(inst.sortables, function() {
            if(this.instance.isOver) {
@@ -486,7 +492,7 @@
    },
    drag: function(event, ui) {
-        var inst = $(this).data("draggable"), self = this;
+        var inst = $(this).data(widgetName), self = this;
        var checkPos = function(o) {
            var dyClick = this.offset.click.top, dxClick = this.offset.click.left;
@@ -556,7 +562,7 @@
    }
});
-$.ui.plugin.add("draggable", "cursor", {
+$.ui.plugin.add(widgetName, "cursor", {
    start: function(event, ui) {
        var t = $('body');
        if (t.css("cursor")) ui.options._cursor = t.css("cursor");
@@ -567,7 +573,7 @@
    }
});
-$.ui.plugin.add("draggable", "iframeFix", {
+$.ui.plugin.add(widgetName, "iframeFix", {
    start: function(event, ui) {
        $(ui.options.iframeFix === true ? "iframe" :
ui.options.iframeFix).each(function() {
            $('<div class="ui-draggable-iframeFix" style="background:
#fff;"></div>')
@@ -584,7 +590,7 @@
    }
});
-$.ui.plugin.add("draggable", "opacity", {
+$.ui.plugin.add(widgetName, "opacity", {
    start: function(event, ui) {
        var t = $(ui.helper);
        if(t.css("opacity")) ui.options._opacity = t.css("opacity");
@@ -595,10 +601,10 @@
    }
});
-$.ui.plugin.add("draggable", "scroll", {
+$.ui.plugin.add(widgetName, "scroll", {
    start: function(event, ui) {
        var o = ui.options;
-        var i = $(this).data("draggable");
+        var i = $(this).data(widgetName);
        if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML')
i.overflowOffset = i.scrollParent.offset();
@@ -606,7 +612,7 @@
    drag: function(event, ui) {
        var o = ui.options, scrolled = false;
-        var i = $(this).data("draggable");
+        var i = $(this).data(widgetName);
        if(i.scrollParent[0] != document && i.scrollParent[0].tagName != 'HTML')
{
@@ -640,10 +646,10 @@
    }
});
-$.ui.plugin.add("draggable", "snap", {
+$.ui.plugin.add(widgetName, "snap", {
    start: function(event, ui) {
-        var inst = $(this).data("draggable");
+        var inst = $(this).data(widgetName);
        inst.snapElements = [];
        $(ui.options.snap.constructor != String ? ( ui.options.snap.items |
| ':data(draggable)' ) : ui.options.snap).each(function() {
@@ -658,7 +664,7 @@
    },
    drag: function(event, ui) {
-        var inst = $(this).data("draggable");
+        var inst = $(this).data(widgetName);
        var d = ui.options.snapTolerance;
        var x1 = ui.absolutePosition.left, x2 = x1 +
inst.helperProportions.width,
@@ -709,7 +715,7 @@
    }
});
-$.ui.plugin.add("draggable", "stack", {
+$.ui.plugin.add(widgetName, "stack", {
    start: function(event, ui) {
        var group = $.makeArray($(ui.options.stack.group)).sort(function(a,b) {
            return (parseInt($(a).css("zIndex"),10) || ui.options.stack.min) -
(parseInt($(b).css("zIndex"),10) || ui.options.stack.min);
@@ -723,7 +729,7 @@
    }
});
-$.ui.plugin.add("draggable", "zIndex", {
+$.ui.plugin.add(widgetName, "zIndex", {
    start: function(event, ui) {
        var t = $(ui.helper);
        if(t.css("zIndex")) ui.options._zIndex = t.css("zIndex");
Modified: trunk/ui/ui.droppable.js
==============================================================================
--- trunk/ui/ui.droppable.js    (original)
+++ trunk/ui/ui.droppable.js    Thu Jan 15 16:33:46 2009
@@ -13,9 +13,15 @@
*/
(function($) {
+var widgetName = "droppable";
+var classWidgetName = ".droppable";
+
$.widget("ui.droppable", {
    _init: function() {
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
        var o = this.options, accept = o.accept;
        this.isover = 0; this.isout = 1;
@@ -43,8 +49,8 @@
        this.element
        
    .removeClass(this.options.cssNamespace+"-droppable "+this.options.cssNamespace+"-droppable-disabled")
-            .removeData("droppable")
-            .unbind(".droppable");
+            .removeData(widgetName)
+            .unbind(classWidgetName);
    },
    _setData: function(key, value) {
@@ -105,8 +111,8 @@
        if (!draggable || (draggable.currentItem || draggable.element)[0] ==
this.element[0]) return false; // Bail if draggable and droppable are same
element
        var childrenIntersection = false;
-        
this.element.find(":data(droppable)").not("."+draggable.options.cssNamespace+"-draggable-dragging").each(function()
{
-            var inst = $.data(this, 'droppable');
+        this.element.find(":data(" + widgetName
+ ")").not("."+draggable.options.cssNamespace+"-draggable-dragging").each(function()
{
+            var inst = $.data(this, widgetName);
            if(inst.options.greedy && $.ui.intersect(draggable, $.extend(inst, {
offset: inst.element.offset() }), inst.options.tolerance)) {
                childrenIntersection = true; return false;
            }
@@ -203,10 +209,9 @@
    current: null,
    droppables: { 'default': [] },
    prepareOffsets: function(t, event) {
-
        var m = $.ui.ddmanager.droppables[t.options.scope];
        var type = event ? event.type : null; // workaround for #2317
-        var list = (t.currentItem ||
t.element).find(":data(droppable)").andSelf();
+        var list = (t.currentItem || t.element).find(":data(" + widgetName
+ ")").andSelf();
        droppablesLoop: for (var i = 0; i < m.length; i++) {
@@ -257,9 +262,9 @@
            var parentInstance;
            if (this.options.greedy) {
-                var parent = this.element.parents(':data(droppable):eq(0)');
+                var parent = this.element.parents(':data(' + widgetName + '):eq(0)');
                if (parent.length) {
-                    parentInstance = $.data(parent[0], 'droppable');
+                    parentInstance = $.data(parent[0], widgetName);
                    parentInstance.greedyChild = (c == 'isover' ? 1 : 0);
                }
            }
@@ -289,7 +294,7 @@
* Droppable Extensions
*/
-$.ui.plugin.add("droppable", "activeClass", {
+$.ui.plugin.add(widgetName, "activeClass", {
    activate: function(event, ui) {
        $(this).addClass(ui.options.activeClass);
    },
@@ -301,7 +306,7 @@
    }
});
-$.ui.plugin.add("droppable", "hoverClass", {
+$.ui.plugin.add(widgetName, "hoverClass", {
    over: function(event, ui) {
        $(this).addClass(ui.options.hoverClass);
    },
Modified: trunk/ui/ui.progressbar.js
==============================================================================
--- trunk/ui/ui.progressbar.js    (original)
+++ trunk/ui/ui.progressbar.js    Thu Jan 15 16:33:46 2009
@@ -12,9 +12,15 @@
*/
(function($) {
+var widgetName = "progressbar";
+var classWidgetName = ".progressbar";
+
$.widget("ui.progressbar", {
    _init: function() {
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
        var self = this,
            options = this.options;
@@ -25,7 +31,7 @@
                + " ui-widget-content"
                + " ui-corner-all")
            .attr({
-                role: "progressbar",
+                role: widgetName,
                "aria-valuemin": this._valueMin(),
                "aria-valuemax": this._valueMax(),
                "aria-valuenow": this._value()
@@ -48,8 +54,8 @@
            .removeAttr("aria-valuemin")
            .removeAttr("aria-valuemax")
            .removeAttr("aria-valuenow")
-            .removeData("progressbar")
-            .unbind(".progressbar");
+            .removeData(widgetName)
+            .unbind(classWidgetName);
        this.valueDiv.remove();
Modified: trunk/ui/ui.resizable.js
==============================================================================
--- trunk/ui/ui.resizable.js    (original)
+++ trunk/ui/ui.resizable.js    Thu Jan 15 16:33:46 2009
@@ -12,9 +12,15 @@
*/
(function($) {
+var widgetName = "resizable";
+var classWidgetName = ".resizable";
+
$.widget("ui.resizable", $.extend({}, $.ui.mouse, {
    _init: function() {
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
        var self = this, o = this.options;
@@ -83,7 +89,7 @@
            var oel = this.element; this.element = this.element.parent();
            // store instance on wrapper
-            this.element.data('resizable', this);
+            this.element.data(widgetName, this);
            //Move margins to the wrapper
            this.element.css({ marginLeft: oel.css("marginLeft"), marginTop:
oel.css("marginTop"),
@@ -228,7 +234,7 @@
        var _destroy = function(exp) {
            $(exp).removeClass("ui-resizable ui-resizable-disabled")
-            
    .removeData("resizable").unbind(".resizable").find('.ui-resizable-handle').remove();
+            
    .removeData(widgetName).unbind(classWidgetName).find('.ui-resizable-handle').remove();
        };
        _destroy(el);
@@ -570,10 +576,10 @@
* Resizable Extensions
*/
-$.ui.plugin.add("resizable", "alsoResize", {
+$.ui.plugin.add(widgetName, "alsoResize", {
    start: function(event, ui) {
-        var o = ui.options, self = $(this).data("resizable"),
+        var o = ui.options, self = $(this).data(widgetName),
        _store = function(exp) {
            $(exp).each(function() {
@@ -593,7 +599,7 @@
    },
    resize: function(event, ui){
-        var o = ui.options, self = $(this).data("resizable"), os =
self.originalSize, op = self.originalPosition;
+        var o = ui.options, self = $(this).data(widgetName), os =
self.originalSize, op = self.originalPosition;
        var delta = {
            height: (self.size.height - os.height) || 0, width: (self.size.width -
os.width) || 0,
@@ -625,10 +631,10 @@
    }
});
-$.ui.plugin.add("resizable", "animate", {
+$.ui.plugin.add(widgetName, "animate", {
    stop: function(event, ui) {
-        var o = ui.options, self = $(this).data("resizable");
+        var o = ui.options, self = $(this).data(widgetName);
        var pr = o.proportionallyResize, ista = pr &&
(/textarea/i).test(pr.get(0).nodeName),
                        soffseth = ista && $.ui.hasScroll(pr.get(0), 'left') /* TODO - jump
height */ ? 0 : self.sizeDiff.height,
@@ -664,10 +670,10 @@
});
-$.ui.plugin.add("resizable", "containment", {
+$.ui.plugin.add(widgetName, "containment", {
    start: function(event, ui) {
-        var o = ui.options, self = $(this).data("resizable"), el = self.element;
+        var o = ui.options, self = $(this).data(widgetName), el = self.element;
        var oc = o.containment,    ce = (oc instanceof $) ? oc.get(0) :
(/parent/.test(oc)) ? el.parent().get(0) : oc;
        if (!ce) return;
@@ -699,7 +705,7 @@
    },
    resize: function(event, ui) {
-        var o = ui.options, self = $(this).data("resizable"),
+        var o = ui.options, self = $(this).data(widgetName),
                ps = self.containerSize, co = self.containerOffset, cs = self.size, cp
= self.position,
                pRatio = o._aspectRatio || event.shiftKey, cop = { top:0, left:0 }, ce
= self.containerElement;
@@ -733,7 +739,7 @@
    },
    stop: function(event, ui){
-        var o = ui.options, self = $(this).data("resizable"), cp = self.position,
+        var o = ui.options, self = $(this).data(widgetName), cp = self.position,
                co = self.containerOffset, cop = self.containerPosition, ce =
self.containerElement;
        var helper = $(self.helper), ho = helper.offset(), w =
helper.outerWidth() - self.sizeDiff.width, h = helper.outerHeight() -
self.sizeDiff.height;
@@ -747,10 +753,10 @@
    }
});
-$.ui.plugin.add("resizable", "ghost", {
+$.ui.plugin.add(widgetName, "ghost", {
    start: function(event, ui) {
-        var o = ui.options, self = $(this).data("resizable"), pr =
o.proportionallyResize, cs = self.size;
+        var o = ui.options, self = $(this).data(widgetName), pr =
o.proportionallyResize, cs = self.size;
        if (!pr) self.ghost = self.element.clone();
        else self.ghost = pr.clone();
@@ -765,23 +771,23 @@
    },
    resize: function(event, ui){
-        var o = ui.options, self = $(this).data("resizable"), pr =
o.proportionallyResize;
+        var o = ui.options, self = $(this).data(widgetName), pr =
o.proportionallyResize;
        if (self.ghost) self.ghost.css({ position: 'relative', height:
self.size.height, width: self.size.width });
    },
    stop: function(event, ui){
-        var o = ui.options, self = $(this).data("resizable"), pr =
o.proportionallyResize;
+        var o = ui.options, self = $(this).data(widgetName), pr =
o.proportionallyResize;
        if (self.ghost && self.helper)
self.helper.get(0).removeChild(self.ghost.get(0));
    }
});
-$.ui.plugin.add("resizable", "grid", {
+$.ui.plugin.add(widgetName, "grid", {
    resize: function(event, ui) {
-        var o = ui.options, self = $(this).data("resizable"), cs = self.size, os
= self.originalSize, op = self.originalPosition, a = self.axis, ratio =
o._aspectRatio || event.shiftKey;
+        var o = ui.options, self = $(this).data(widgetName), cs = self.size, os
= self.originalSize, op = self.originalPosition, a = self.axis, ratio =
o._aspectRatio || event.shiftKey;
        o.grid = typeof o.grid == "number" ? [o.grid, o.grid] : o.grid;
        var ox = Math.round((cs.width - os.width) / (o.grid[0]||1)) * (o.grid[0]|
|1), oy = Math.round((cs.height - os.height) / (o.grid[1]||1)) * (o.grid[1]|
|1);
Modified: trunk/ui/ui.selectable.js
==============================================================================
--- trunk/ui/ui.selectable.js    (original)
+++ trunk/ui/ui.selectable.js    Thu Jan 15 16:33:46 2009
@@ -12,9 +12,16 @@
*/
(function($) {
+var widgetName = "selectable";
+var classWidgetName = ".selectable";
+
$.widget("ui.selectable", $.extend({}, $.ui.mouse, {
    _init: function() {
+        // update widgetName with the name given by the widget factory
+        widgetName = this.widgetName;
+        classWidgetName = '.' + widgetName;
+
        var self = this;
        thi