Question

I’m trying to extrac a method from this function:

addWidgetControls: function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings;

        $(settings.widgetSelector, $(settings.columns)).each(function () {
            var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
            if (thisWidgetSettings.removable) {
                $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                    e.stopPropagation();
                }).click(function () {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0
                    }, function () {
                        $(this).wrap('<div/>').parent().slideUp(function () {
                            $(this).remove();
                        });
                    });

                    return false;
                }).appendTo($(settings.handleSelector, this));
            }

            if (thisWidgetSettings.collapsible) {
                $('<a href="#" class="collapse">COLLAPSE</a>').mousedown(function (e) {
                    e.stopPropagation();
                }).toggle(function () {
                    $(this).css({ backgroundPosition: '-38px 0' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).hide();
                    return false;
                }, function () {
                    $(this).css({ backgroundPosition: '' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).show();
                    return false;
                }).prependTo($(settings.handleSelector, this));
            }
        });
    },

I’ve extracted the code from this function like this:

addWidgetControls: function () {
        var iNettuts = this,
            $ = this.jQuery,
            settings = this.settings,
            func = this.doWidget;

        $(settings.widgetSelector, $(settings.columns)).each(function () {
            func(this);
        });
    },

    doWidget: function (widg) {
        $ = jQuery;
        settings = iNettuts.settings;
        var thisWidgetSettings = iNettuts.getWidgetSettings(widg.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove"></a>').mousedown(function (e) {
                e.stopPropagation();
            }).click(function () {
                $(widg).parents(settings.widgetSelector).animate({
                    opacity: 0
                }, function () {
                    widg.wrap('<div/>').parent().slideUp(function () {
                        widg.remove();
                    });
                });

                return false;
            }).appendTo($(settings.handleSelector, widg));
        }

        if (thisWidgetSettings.collapsible) {
            $('<a href="#" class="collapse"></a>').mousedown(function (e) {
                e.stopPropagation();
            }).toggle(function () {
                $(widg).css({ backgroundPosition: '-38px 0' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).hide();
                return false;
            }, function () {
                $(widg).css({ backgroundPosition: '' })
                        .parents(settings.widgetSelector)
                            .find(settings.contentSelector).show();
                return false;
            }).prependTo($(settings.handleSelector, widg));
        }
    },

I’ve just copied the function code, replaced this with widg and added widg as an argument. Maybe there is a difference between $(widge) and widg.
But it doesn’t work. What am I missing? Is there a tool that can do this easily? Thanks.

PS: By the way, this is grabbed from this tutorial.

Answer 1

The problem is solved and it was really interesting and easy to find! The this pointer, as we all know, is different from time to time, and in this case, there were only 3 instances of this that should’ve been replaced with widg. So here is the final code:

addWidgetControls: function () { 
    var iNettuts = this, 
        $ = this.jQuery, 
        settings = this.settings, 
        func = this.doWidget; 

    $(settings.widgetSelector, $(settings.columns)).each(function () { 
        func(this); 
    }); 
}, 

doWidget: function (wid) { 
    var $ = iNettuts.jQuery, 
        settings = iNettuts.settings; 

    var thisWidgetSettings = iNettuts.getWidgetSettings(wid.id); 
    if (thisWidgetSettings.removable) { 
        $('<a href="#" class="remove"></a>').mousedown(function (e) { 
            e.stopPropagation(); 
        }).click(function () { 
            $(this).parents(settings.widgetSelector).animate({ 
                opacity: 0 
            }, function () { 
                $(this).wrap('<div/>').parent().slideUp(function () { 
                    $(this).remove(); 
                }); 
            }); 

            return false; 
        }).appendTo($(settings.handleSelector, wid)); 
    } 

    if (thisWidgetSettings.collapsible) { 
        $('<a href="#" class="collapse"></a>').mousedown(function (e) { 
            e.stopPropagation(); 
        }).toggle(function () { 
            $(this).css({ backgroundPosition: '-38px 0' }) 
                    .parents(settings.widgetSelector) 
                        .find(settings.contentSelector).hide(); 
            return false; 
        }, function () { 
            $(this).css({ backgroundPosition: '' }) 
                    .parents(settings.widgetSelector) 
                        .find(settings.contentSelector).show(); 
            return false; 
        }).prependTo($(settings.handleSelector, wid)); 
    } 
},