Skip to content

feat(selectionBar): Add a showSelectionBarFromValue #250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 6, 2016
Merged

feat(selectionBar): Add a showSelectionBarFromValue #250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# 2.7.0 (not released)
## Features
- Add a `showSelectionBarFromValue` options (#250).

# 2.6.0 (2016-01-31)
## Features
- Add a `noSwitching` option to prevent the user from switching the min and max handles (#233).
Expand Down
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ The default options are:
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showSelectionBarFromValue: null,
hideLimitLabels: false,
readOnly: false,
disabled: false,
Expand Down Expand Up @@ -235,6 +236,8 @@ $scope.slider = {

**showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after the slider handle.

**showSelectionBarFromValue** - _Number (defaults to null)_: Set a number to draw the selection bar between this value and the slider handle.

**getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated.

**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
Expand Down
11 changes: 11 additions & 0 deletions demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};

//Slider with selection bar from value
$scope.slider_visible_bar_from_value = {
value: 10,
options: {
floor: -100,
ceil: 100,
step: 10,
showSelectionBarFromValue: 0
}
};

//Slider with selection bar
$scope.color_slider_bar = {
value: 12,
Expand Down
8 changes: 8 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,14 @@ <h2>Slider with visible selection bar at the end</h2>
></rzslider>
</article>

<article>
<h2>Slider with visible selection bar from a value</h2>
<rzslider
rz-slider-model="slider_visible_bar_from_value.value"
rz-slider-options="slider_visible_bar_from_value.options"
></rzslider>
</article>

<article>
<h2>Slider with dynamic selection bar colors</h2>
<rzslider
Expand Down
51 changes: 42 additions & 9 deletions dist/rzslider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*! angularjs-slider - v2.6.0 -
(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-31 */
2016-02-03 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
Expand Down Expand Up @@ -39,6 +39,7 @@
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showSelectionBarFromValue: null,
hideLimitLabels: false,
readOnly: false,
disabled: false,
Expand Down Expand Up @@ -406,7 +407,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template

this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null;

if (this.options.stepsArray) {
this.options.floor = 0;
Expand Down Expand Up @@ -762,8 +764,21 @@
},

isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (!this.range) {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue;
if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
return true;
else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBarEnd) {
if (value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
}
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
Expand Down Expand Up @@ -932,13 +947,31 @@
updateSelectionBar: function() {
var position = 0,
dimension = 0;
if (this.range || !this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
} else {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
if(this.range) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
}
else {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue,
centerPosition = this.valueToOffset(center);
if (this.scope.rzSliderModel > center) {
dimension = this.minH.rzsp - centerPosition;
position = centerPosition + this.handleHalfDim;
}
else {
dimension = centerPosition - this.minH.rzsp;
position = this.minH.rzsp + this.handleHalfDim;
}
}
else if (this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
} else {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = 0;
}
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
Expand Down
4 changes: 2 additions & 2 deletions dist/rzslider.min.js
View file
Open in desktop

Large diffs are not rendered by default.

49 changes: 41 additions & 8 deletions src/rzslider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showSelectionBarFromValue: null,
hideLimitLabels: false,
readOnly: false,
disabled: false,
Expand Down Expand Up @@ -410,7 +411,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template

this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null;

if (this.options.stepsArray) {
this.options.floor = 0;
Expand Down Expand Up @@ -766,8 +768,21 @@
},

isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (!this.range) {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue;
if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
return true;
else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBarEnd) {
if (value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
}
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
Expand Down Expand Up @@ -936,13 +951,31 @@
updateSelectionBar: function() {
var position = 0,
dimension = 0;
if (this.range || !this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
} else {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
if(this.range) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
}
else {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue,
centerPosition = this.valueToOffset(center);
if (this.scope.rzSliderModel > center) {
dimension = this.minH.rzsp - centerPosition;
position = centerPosition + this.handleHalfDim;
}
else {
dimension = centerPosition - this.minH.rzsp;
position = this.minH.rzsp + this.handleHalfDim;
}
}
else if (this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
} else {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = 0;
}
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
Expand Down
111 changes: 111 additions & 0 deletions tests/spec/rz-slider-service-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,38 @@ describe('rzslider - ', function() {
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
});

it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the right', function() {
var sliderConf = {
value: 15,
options: {
floor: 0,
ceil: 20,
showSelectionBarFromValue: 10
}
};
createSlider(sliderConf);
var expectedDimension = slider.valueToOffset(5),
expectedPosition = slider.valueToOffset(10) + slider.handleHalfDim;
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
});

it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the left', function() {
var sliderConf = {
value: 3,
options: {
floor: 0,
ceil: 20,
showSelectionBarFromValue: 10
}
};
createSlider(sliderConf);
var expectedDimension = slider.valueToOffset(7),
expectedPosition = slider.valueToOffset(3) + slider.handleHalfDim;
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
});

it('should set the correct background-color on selection bar for single slider', function() {
var sliderConf = {
value: 10,
Expand Down Expand Up @@ -861,6 +893,85 @@ describe('rzslider - ', function() {
expect(lastTick.hasClass('selected')).to.be.false;
});

it('should set selected class to ticks above the model value if showSelectionBarEnd is true', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarEnd: true
}
};
createSlider(sliderConf);
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.false;
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.true;
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.true;
});

it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the right', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarFromValue: 30
}
};
createSlider(sliderConf);
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var thirdTick = angular.element(element[0].querySelectorAll('.tick')[2]);
expect(thirdTick.hasClass('selected')).to.be.false;
var fourthTick = angular.element(element[0].querySelectorAll('.tick')[3]);
expect(fourthTick.hasClass('selected')).to.be.true;
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.true;
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.false;
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the left', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarFromValue: 70
}
};
createSlider(sliderConf);
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.false;
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.true;
var eighthTick = angular.element(element[0].querySelectorAll('.tick')[7]);
expect(eighthTick.hasClass('selected')).to.be.true;
var ninthTick = angular.element(element[0].querySelectorAll('.tick')[8]);
expect(ninthTick.hasClass('selected')).to.be.false;
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});

it('should set selected class to ticks between min/max if showSelectionBar is true on range slider', function() {
var sliderConf = {
min: 40,
Expand Down