Skip to content

I
i20rzslider
Commit 04f30501 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

feat(onStart, onChange, onEnd): Add a pointerType arg for the callbacks to identify which handle is 

Closes #339
parent 5385e181
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 26 deletions
README.md
View file @ 04f30501
......@@ -328,11 +328,11 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
**onlyBindHandles** - _Boolean (defaults to false)_: Set to true to only bind events on slider handles.
**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.
**onStart** - _Function(sliderId, modelValue, highValue, pointerType)_: 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. `pointerType` is either 'min' or 'max' depending on which handle is used.
**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.
**onChange** - _Function(sliderId, modelValue, highValue, pointerType)_: 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. `pointerType` is either 'min' or 'max' depending on which handle is used.
**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.
**onEnd** - _Function(sliderId, modelValue, highValue, pointerType)_: 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. `pointerType` is either 'min' or 'max' depending on which handle is used.
**rightToLeft** - _Boolean (defaults to false)_: Set to true to show graphs right to left. If **vertical** is true it will be from top to bottom and left / right arrow functions reversed.
......
demo/demo.js
View file @ 04f30501
......@@ -134,26 +134,27 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
step: 5,
rightToLeft: true
}
}
};
//Slider config with callbacks
$scope.slider_callbacks = {
value: 100,
options: {
onStart: function(id, newValue) {
console.info('start', id, newValue);
onStart: function(id, newValue, highValue, pointerType) {
console.info('start', id, newValue, pointerType);
$scope.otherData.start = newValue * 10;
},
onChange: function(id, newValue) {
console.info('change', id, newValue);
onChange: function(id, newValue, highValue, pointerType) {
console.info('change', id, newValue, pointerType);
$scope.otherData.change = newValue * 10;
},
onEnd: function(id, newValue) {
console.info('end', id, newValue);
onEnd: function(id, newValue, highValue, pointerType) {
console.info('end', id, newValue, pointerType);
$scope.otherData.end = newValue * 10;
}
}
};
$scope.otherData = {
start: 0,
change: 0,
......
dist/rzslider.js
View file @ 04f30501
......@@ -1974,9 +1974,10 @@
*/
callOnStart: function() {
if (this.options.onStart) {
var self = this;
var self = this,
pointerType = this.tracking === 'lowValue' ? 'min' : 'max';
this.scope.$evalAsync(function() {
self.options.onStart(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
self.options.onStart(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh, pointerType);
});
}
},
......@@ -1989,9 +1990,10 @@
*/
callOnChange: function() {
if (this.options.onChange) {
var self = this;
var self = this,
pointerType = this.tracking === 'lowValue' ? 'min' : 'max';
this.scope.$evalAsync(function() {
self.options.onChange(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
self.options.onChange(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh, pointerType);
});
}
},
......@@ -2004,9 +2006,10 @@
*/
callOnEnd: function() {
if (this.options.onEnd) {
var self = this;
var self = this,
pointerType = this.tracking === 'lowValue' ? 'min' : 'max';
this.scope.$evalAsync(function() {
self.options.onEnd(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
self.options.onEnd(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh, pointerType);
});
}
this.scope.$emit('slideEnded');
......
dist/rzslider.min.js
View file @ 04f30501
This diff is collapsed.
src/rzslider.js
View file @ 04f30501
......@@ -1978,9 +1978,10 @@
*/
callOnStart: function() {
if (this.options.onStart) {
var self = this;
var self = this,
pointerType = this.tracking === 'lowValue' ? 'min' : 'max';
this.scope.$evalAsync(function() {
self.options.onStart(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
self.options.onStart(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh, pointerType);
});
}
},
......@@ -1993,9 +1994,10 @@
*/
callOnChange: function() {
if (this.options.onChange) {
var self = this;
var self = this,
pointerType = this.tracking === 'lowValue' ? 'min' : 'max';
this.scope.$evalAsync(function() {
self.options.onChange(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
self.options.onChange(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh, pointerType);
});
}
},
......@@ -2008,9 +2010,10 @@
*/
callOnEnd: function() {
if (this.options.onEnd) {
var self = this;
var self = this,
pointerType = this.tracking === 'lowValue' ? 'min' : 'max';
this.scope.$evalAsync(function() {
self.options.onEnd(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh);
self.options.onEnd(self.options.id, self.scope.rzSliderModel, self.scope.rzSliderHigh, pointerType);
});
}
this.scope.$emit('slideEnded');
......
tests/specs/options-handling-test.js
View file @ 04f30501
......@@ -401,9 +401,26 @@
};
helper.createSlider(sliderConf);
helper.slider.tracking = 'lowValue';
helper.slider.callOnStart();
$timeout.flush();
sliderConf.options.onStart.calledWith('test').should.be.true;
sliderConf.options.onStart.calledWith('test', 10, undefined, 'min').should.be.true;
});
it('should call the correct callback for onStart called on high handle', function() {
var sliderConf = {
value: 10,
options: {
id: 'test',
onStart: sinon.spy()
}
};
helper.createSlider(sliderConf);
helper.slider.tracking = 'highValue';
helper.slider.callOnStart();
$timeout.flush();
sliderConf.options.onStart.calledWith('test', 10, undefined, 'max').should.be.true;
});
it('should call the correct callback for onChange', function() {
......@@ -416,9 +433,10 @@
};
helper.createSlider(sliderConf);
helper.slider.tracking = 'lowValue';
helper.slider.callOnChange();
$timeout.flush();
sliderConf.options.onChange.calledWith('test').should.be.true;
sliderConf.options.onChange.calledWith('test', 10, undefined, 'min').should.be.true;
});
it('should call the correct callback for onEnd', function() {
......@@ -431,9 +449,10 @@
};
helper.createSlider(sliderConf);
helper.slider.tracking = 'lowValue';
helper.slider.callOnEnd();
$timeout.flush();
sliderConf.options.onEnd.calledWith('test').should.be.true;
sliderConf.options.onEnd.calledWith('test', 10, undefined, 'min').should.be.true;
});
it('should set the correct background-color on pointer for single slider', function() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment