Update to progressbar 0.8.2

Author: minddust

_includes/bootstrap_progressbar_demo_content_2.html

@@ -45,6 +45,84 @@ <h4>callbacks <button type="button" class="btn btn-primary" id="m-callback-start
 
 <div style="height: 40px">&nbsp;</div>
 
+<a name="m-callback-this"></a>
+<h4>callbacks <button type="button" class="btn btn-primary" id="m-callback-this-start">start</button> <button type="button" class="btn btn-danger" id="m-callback-this-reset">reset</button></h4>
+
+<div class="bs-example m-callback-this">
+    <div class="{{ bs_pro_def }}"><div class="{{ bs_bar_def }} six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div></div>
+    <script type='text/javascript'>
+        $(document).ready(function() {
+            // thanks:
+            // http://stackoverflow.com/questions/5833624/increase-css-brightness-color-on-click-with-jquery-javascript
+            // http://jsfiddle.net/K8cMX/7/
+            function HsvToRgb(h, s, v) {
+                h = h / 360;
+                s = s / 100;
+                v = v / 100;
+
+                if (s == 0)
+                {
+                    var val = Math.round(v * 255);
+                    return {r:val,g:val,b:val};
+                }
+                hPos = h * 6;
+                hPosBase = Math.floor(hPos);
+                base1 = v * (1 - s);
+                base2 = v * (1 - s * (hPos - hPosBase));
+                base3 = v * (1 - s * (1 - (hPos - hPosBase)));
+                if (hPosBase == 0) {red = v; green = base3; blue = base1}
+                else if (hPosBase == 1) {red = base2; green = v; blue = base1}
+                else if (hPosBase == 2) {red = base1; green = v; blue = base3}
+                else if (hPosBase == 3) {red = base1; green = base2; blue = v}
+                else if (hPosBase == 4) {red = base3; green = base1; blue = v}
+                else {red = v; green = base1; blue = base2};
+
+                red = Math.round(red * 255);
+                green = Math.round(green * 255);
+                blue = Math.round(blue * 255);
+                return {r:red,g:green,b:blue};
+            }
+            $('#m-callback-this-start').click(function() {
+                var $pb = $('.m-callback-this .{{ bs_bar_def }}');
+                $pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
+                $pb.progressbar({
+                    update: function(current_percentage, $this) {
+                        var color_helper = Math.round(current_percentage * 1.2); // red to green == 0 to 120 degree
+                        var colors = HsvToRgb(color_helper, 100, 100);
+                        $this.parent().parent().css('background-color', 'rgb(' + colors['r'] + ', ' + colors['g'] + ', ' + colors['b'] + ')');
+                    }
+                });
+            });
+            $('#m-callback-this-reset').click(function() {
+                $('.m-callback-this .{{ bs_bar_def }}').attr('data-transitiongoal', 0).progressbar();
+            });
+        });
+    </script>
+</div>
+{% highlight html %}
+.six-sec-ease-in-out {
+    -webkit-transition: width 6s ease-in-out;
+    -moz-transition: width 6s ease-in-out;
+    -ms-transition: width 6s ease-in-out;
+    -o-transition: width 6s ease-in-out;
+    transition: width 6s ease-in-out;
+}
+
+<div class="{{ bs_pro_def }}">
+    <div class="{{ bs_bar_def }} six-sec-ease-in-out" role="progressbar" data-transitiongoal="100"></div>
+</div>
+
+$(document).ready(function() {
+    $('.{{ bs_pro_def }} .{{ bs_bar_def }}').progressbar({
+        update: function(current_percentage, $this) {
+            $this.parent().parent().css('background-color', 'rgb(' + Math.round(current_percentage / 100 * 255) + ', 0, 0)');
+        }
+    });
+});
+{% endhighlight %}
+
+<div style="height: 40px">&nbsp;</div>
+
 
 <a name="m-error"></a>
 <h4>error <button type="button" class="btn btn-primary" id="m-error-start">start</button></h4>

project/bootstrap-progressbar/changelog.md

@@ -5,6 +5,10 @@ project: bootstrap-progressbar
 permalink: changelog/
 ---
 
+## 0.8.2 (2014-08-02)
+
+* Fix #33 pass `$this` to `update` and `done` callback
+
 ## 0.8.1 (2014-08-01)
 
 * Fix #35 wrong amount calculation for `aria-valuemin` != 0

project/bootstrap-progressbar/demo/js/bootstrap-progressbar.js

@@ -109,7 +109,7 @@
                 if (current_percentage >= percentage) {
                     current_percentage = percentage;
                     current_value = data_transitiongoal;
-                    done();
+                    done($this);
                     clearInterval(progress);
                 }
 
@@ -126,7 +126,7 @@
                 }
                 $this.attr('aria-valuenow', current_value);
 
-                update(current_percentage);
+                update(current_percentage, $this);
             }, options.refresh_speed);
         }, options.transition_delay);
     };

project/bootstrap-progressbar/index.md

@@ -9,14 +9,15 @@ project: bootstrap-progressbar
 `bootstrap-progressbar` is a [jQuery](http://jquery.com) plugin which extends the basic [twitter-bootstrap](https://github.com/twbs/bootstrap) progressbar. It provides the ability to animate the progressbar by adding Javascript in combination with the preexisting css transitions. Additionally you can display the current progress information in the bar or get the value via callback.
 
 
-## What's new in v0.8.1?
+## What's new in v0.8.2?
 
 * Add bootstrap 3.2.0 styles
 * Extend `amount_format` hook for min value
 * Update demo page
 * Remove unused travis badge
 * Fix #27 switch `aria-valuetransitionsgoal` to `data-transitionsgoal`
 * Fix #35 wrong amount calculation for `aria-valuemin` != 0
+* Fix #33 pass `$this` to `update` and `done` callback
 
 > __Note__: this version replaces the not official supported `aria-valuetransitionsgoal` with `data-transitionsgoal` which may affect (or brick) your progressbars.