feat(callbacks): Pass the model and high values to the onStart, onChange and onEnd callbacks.

Author: Valentin Hervieu

CHANGELOG.md

@@ -1,6 +1,8 @@
 # 2.5.0 (not-released)
 ## Features
 - Add a `minRange` option to set a minimal range (#231).
+- Pass the slider values to the `onStart`, `onChange` and `onEnd` callbacks.
+- Rollback and improve the callback changes brought with 2.4.1 that were no applying the last update to the scope anymore.
 
 # 2.4.1 (2016-01-15)
 ## Performance improvements

README.md

@@ -252,11 +252,11 @@ $scope.slider = {
 
 **onlyBindHandles** - _Boolean (defaults to false)_: Set to true to only bind events on slider handles.
 
-**onStart** - _Function(sliderId)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback. This callback is called before any update on the model.
+**onStart** - _Function(sliderId, modelValue, highValue)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback. This callback is called before any update on the model.
 
-**onChange** - _Function(sliderId)_: Function to be called when rz-slider-model or rz-slider-high change. If an id was set in the options, then it's passed to this callback.
+**onChange** - _Function(sliderId, modelValue, highValue)_: Function to be called when rz-slider-model or rz-slider-high change. If an id was set in the options, then it's passed to this callback.
 
-**onEnd** - _Function(sliderId)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
+**onEnd** - _Function(sliderId, modelValue, highValue)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
 
 **vertical** - _Boolean (defaults to false)_: Set to true to display the slider vertically. The slider will take the full height of its parent.
 _Changing this value at runtime is not currently supported._

demo/demo.js

@@ -77,14 +77,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
   $scope.slider_callbacks = {
     value: 100,
     options: {
-      onStart: function() {
-        $scope.otherData.start = $scope.slider_callbacks.value * 10;
+      onStart: function(id, newValue) {
+        console.info('start', id, newValue);
+        $scope.otherData.start = newValue * 10;
       },
-      onChange: function() {
-        $scope.otherData.change = $scope.slider_callbacks.value * 10;
+      onChange: function(id, newValue) {
+        console.info('change', id, newValue);
+        $scope.otherData.change = newValue * 10;
       },
-      onEnd: function() {
-        $scope.otherData.end = $scope.slider_callbacks.value * 10;
+      onEnd: function(id, newValue) {
+        console.info('end', id, newValue);
+        $scope.otherData.end = newValue * 10;
       }
     }
   };

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.4.1 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-01-22 */
+ 2016-01-24 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -791,36 +791,45 @@
 
       /**
        * Call the onStart callback if defined
+       * The callback call is wrapped in a $evalAsync to ensure that its result will be applied to the scope.
        *
        * @returns {undefined}
        */
       callOnStart: function() {
         if (this.options.onStart) {
-          this.options.onStart(this.options.id);
+          var self = this;
+          this.scope.$evalAsync(function () {
+            self.options.onStart(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
+          });
         }
       },
 
       /**
        * Call the onChange callback if defined
+       * The callback call is wrapped in a $evalAsync to ensure that its result will be applied to the scope.
        *
        * @returns {undefined}
        */
       callOnChange: function() {
         if (this.options.onChange) {
-          this.options.onChange(this.options.id);
+          var self = this;
+          this.scope.$evalAsync(function () {
+            self.options.onChange(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
+          });
         }
       },
 
       /**
        * Call the onEnd callback if defined
+       * The callback call is wrapped in a $evalAsync to ensure that its result will be applied to the scope.
        *
        * @returns {undefined}
        */
       callOnEnd: function() {
         if (this.options.onEnd) {
           var self = this;
-          $timeout(function() {
-            self.options.onEnd(self.options.id);
+          this.scope.$evalAsync(function () {
+            self.options.onEnd(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
           });
         }
       },

dist/rzslider.min.js

@@ -795,36 +795,45 @@
 
       /**
        * Call the onStart callback if defined
+       * The callback call is wrapped in a $evalAsync to ensure that its result will be applied to the scope.
        *
        * @returns {undefined}
        */
       callOnStart: function() {
         if (this.options.onStart) {
-          this.options.onStart(this.options.id);
+          var self = this;
+          this.scope.$evalAsync(function () {
+            self.options.onStart(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
+          });
         }
       },
 
       /**
        * Call the onChange callback if defined
+       * The callback call is wrapped in a $evalAsync to ensure that its result will be applied to the scope.
        *
        * @returns {undefined}
        */
       callOnChange: function() {
         if (this.options.onChange) {
-          this.options.onChange(this.options.id);
+          var self = this;
+          this.scope.$evalAsync(function () {
+            self.options.onChange(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
+          });
         }
       },
 
       /**
        * Call the onEnd callback if defined
+       * The callback call is wrapped in a $evalAsync to ensure that its result will be applied to the scope.
        *
        * @returns {undefined}
        */
       callOnEnd: function() {
         if (this.options.onEnd) {
           var self = this;
-          $timeout(function() {
-            self.options.onEnd(self.options.id);
+          this.scope.$evalAsync(function () {
+            self.options.onEnd(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
           });
         }
       },

src/rzslider.js

@@ -504,6 +504,7 @@ describe('rzslider - ', function() {
         createSlider(sliderConf);
 
         slider.callOnStart();
+        $timeout.flush();
         sliderConf.options.onStart.calledWith('test').should.be.true;
       });
 
@@ -518,6 +519,7 @@ describe('rzslider - ', function() {
         createSlider(sliderConf);
 
         slider.callOnChange();
+        $timeout.flush();
         sliderConf.options.onChange.calledWith('test').should.be.true;
       });