minddust / bootstrap-progressbar

progressbar interactions for twitter bootstrap 2 & 3
www.minddust.com/project/bootstrap-progressbar
MIT License
577 stars 160 forks source link

Allow update callback to have $this #33

Closed visitsb closed 10 years ago

visitsb commented 10 years ago

The update callback should have a $this context, or argument passed so it is easier to use it to traverse, and find another element to which _currentpercentage can be displayed. This could be used when multiple progressbars are used on the same page, each placed in it's logical group.

The change is very trivial, plus to avoid breaking any existing users, I chose to add $this as a 2nd argument, although personally I'd prefer to pass $this as the first argument.

An example below, bootstrap-progressbar-patch

minddust commented 10 years ago

hi @visitsb,

agree - it's a nice to have. but i have to mention that there's always a workaround.

e.g instead of:

$(document).ready(function() {
    $('.progress .bar').progressbar({
        update: function(percent, $this) { 
            $this.parent().css('background-color', 'rgb(' + Math.round(current_percentage / 100 * 255) + ', 0, 0)');
        }
    });
});

you could do something like this:

$(document).ready(function() {
    $('.progress .bar').each(function () {
        var $pb = $(this);
        $pb.progressbar({
            update: function(percent) { 
                $pb.parent().css('background-color', 'rgb(' + Math.round(current_percentage / 100 * 255) + ', 0, 0)');
            }
        });
    });
});

nonetheless it won't brick anything and it's definitely improving the usability so will will integrate it in the next release.

thanks!

minddust commented 10 years ago

forgot to merge =)

minddust commented 10 years ago

btw. done will receive $this too.

visitsb commented 10 years ago

@minddust Thanks!

minddust commented 10 years ago

there's also a new demo using $this:

http://www.minddust.com/project/bootstrap-progressbar/demo/bootstrap-3-1-1/#m-callback-this