Skip to content

Commit bddea44

Browse files
author
Valentin Hervieu
committed
Pass the current values to the getSelectionBarColor function so we don't depend on Angular synchronisation.
1 parent 24c6bf0 commit bddea44

File tree

8 files changed

+88
-64
lines changed

8 files changed

+88
-64
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 2.2.0 (not released yet)
2+
## Features
3+
- Add a `getSelectionBarColor` options to dynamically change the selection bar color (#197).
4+
15
# 2.1.0 (2015-11-29)
26
## Features
37
- Add a `vertical` options to display vertical sliders (#185).

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ $scope.slider = {
209209

210210
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
211211

212-
**getSelectionBarColor** - _Function (defaults to null)_: Function that returns the current color of the selection bar.
212+
**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.
213213

214214
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
215215

‎demo/demo.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,12 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
3030
value: 12,
3131
options: {
3232
showSelectionBar: true,
33-
getSelectionBarColor: function() {
34-
var currentValue = $scope.color_slider_bar.value;
35-
if (currentValue <= 3)
33+
getSelectionBarColor: function(value) {
34+
if (value <= 3)
3635
return 'red';
37-
if (currentValue <= 6)
36+
if (value <= 6)
3837
return 'orange';
39-
if (currentValue <= 9)
38+
if (value <= 9)
4039
return 'yellow';
4140
return '#2AE02A';
4241
}

‎dist/rzslider.js

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,7 @@
377377
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
378378
this.options.draggableRange = this.range && this.options.draggableRange;
379379
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
380+
this.scope.showTicks = this.options.showTicks; //scope is used in the template
380381

381382
if (this.options.stepsArray) {
382383
this.options.floor = 0;
@@ -473,8 +474,8 @@
473474
this.cmbLab.rzsp = 0;
474475
},
475476

476-
/** Update each elements style based on options
477-
*
477+
/**
478+
* Update each elements style based on options
478479
*/
479480
manageElementsStyle: function() {
480481

@@ -490,9 +491,6 @@
490491
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
491492
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
492493

493-
if (!this.options.showTicks)
494-
this.ticks.html('');
495-
496494
if (this.options.draggableRange)
497495
this.selBar.addClass('rz-draggable');
498496
else
@@ -659,34 +657,30 @@
659657
*/
660658
updateTicksScale: function() {
661659
if (!this.options.showTicks) return;
662-
if (!this.step) return; //if step is 0, the following loop will be endless.
660+
if (!this.step) return; //if step is 0, we'll get a zero division
663661

664662
var positions = '',
665663
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
664+
this.scope.ticks = [];
666665
for (var i = 0; i < ticksCount; i++) {
667-
var value = this.roundStep(this.minValue + i * this.step),
668-
selected = this.isTickSelected(value),
669-
selectedClass = selected ? 'selected' : '',
670-
customStyle = '';
671-
if (selected && this.options.getSelectionBarColor) {
672-
var color = this.options.getSelectionBarColor();
673-
customStyle = 'style="background-color: ' + color + '"';
666+
var value = this.roundStep(this.minValue + i * this.step);
667+
var tick =   {
668+
selected: this.isTickSelected(value)
669+
};
670+
if (tick.selected && this.options.getSelectionBarColor) {
671+
tick.style = {
672+
'background-color': this.getSelectionBarColor()
673+
};
674674
}
675-
positions += '<li class="tick ' + selectedClass + '" ' + customStyle + '>';
676675
if (this.options.showTicksValues) {
677-
var tooltip = '';
676+
tick.value = this.getDisplayValue(value);
678677
if (this.options.ticksValuesTooltip) {
679-
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
680-
if (this.options.vertical)
681-
tooltip += ' tooltip-placement="right"'
678+
tick.tooltip = this.options.ticksValuesTooltip(value);
679+
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
682680
}
683-
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
684681
}
685-
positions += '</li>';
682+
this.scope.ticks.push(tick);
686683
}
687-
this.ticks.html(positions);
688-
if (this.options.ticksValuesTooltip)
689-
$compile(this.ticks.contents())(this.scope);
690684
},
691685

692686
isTickSelected: function(value) {
@@ -877,11 +871,23 @@
877871
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
878872
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
879873
if (this.options.getSelectionBarColor) {
880-
var color = this.options.getSelectionBarColor();
881-
this.selBarChild.css({backgroundColor: color});
874+
var color = this.getSelectionBarColor();
875+
this.scope.barStyle = {
876+
backgroundColor: color
877+
};
882878
}
883879
},
884880

881+
/**
882+
* Wrapper around the getSelectionBarColor of the user to pass to
883+
* correct parameters
884+
*/
885+
getSelectionBarColor: function() {
886+
if (this.range)
887+
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
888+
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
889+
},
890+
885891
/**
886892
* Update combined label position and value
887893
*
@@ -1322,7 +1328,7 @@
13221328
valueChanged = true;
13231329
}
13241330

1325-
if(valueChanged) {
1331+
if (valueChanged) {
13261332
this.scope.$apply();
13271333
this.callOnChange();
13281334
}
@@ -1445,7 +1451,7 @@
14451451
'use strict';
14461452

14471453
$templateCache.put('rzSliderTpl.html',
1448-
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul class=rz-ticks></ul>"
1454+
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ t.value }}</span></li></ul>"
14491455
);
14501456

14511457
}]);

‎dist/rzslider.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzSliderTpl.html

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
11
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
2-
<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
2+
<span class="rz-bar-wrapper">
3+
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
4+
</span> <!-- // 1 Highlight between two handles -->
35
<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
46
<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
57
<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
68
<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
79
<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
810
<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
911
<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
10-
<ul class="rz-ticks"></ul> <!-- // 9 The ticks -->
12+
<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The ticks -->
13+
<li ng-repeat="t in ticks" class="tick" ng-class="{selected: t.selected}"
14+
ng-style="t.style">
15+
<span ng-if="t.value != null && t.tooltip == null" class="tick-value">{{ t.value }}</span>
16+
<span ng-if="t.value != null && t.tooltip != null" class="tick-value"
17+
uib-tooltip="{{ t.tooltip }}" tooltip-placement="{{t.tooltipPlacement}}">{{ t.value }}</span>
18+
</li>
19+
</ul>

‎src/rzslider.js

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,7 @@
377377
this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
378378
this.options.draggableRange = this.range && this.options.draggableRange;
379379
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
380+
this.scope.showTicks = this.options.showTicks; //scope is used in the template
380381

381382
if (this.options.stepsArray) {
382383
this.options.floor = 0;
@@ -473,8 +474,8 @@
473474
this.cmbLab.rzsp = 0;
474475
},
475476

476-
/** Update each elements style based on options
477-
*
477+
/**
478+
* Update each elements style based on options
478479
*/
479480
manageElementsStyle: function() {
480481

@@ -490,9 +491,6 @@
490491
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
491492
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
492493

493-
if (!this.options.showTicks)
494-
this.ticks.html('');
495-
496494
if (this.options.draggableRange)
497495
this.selBar.addClass('rz-draggable');
498496
else
@@ -659,34 +657,30 @@
659657
*/
660658
updateTicksScale: function() {
661659
if (!this.options.showTicks) return;
662-
if (!this.step) return; //if step is 0, the following loop will be endless.
660+
if (!this.step) return; //if step is 0, we'll get a zero division
663661

664662
var positions = '',
665663
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1;
664+
this.scope.ticks = [];
666665
for (var i = 0; i < ticksCount; i++) {
667-
var value = this.roundStep(this.minValue + i * this.step),
668-
selected = this.isTickSelected(value),
669-
selectedClass = selected ? 'selected' : '',
670-
customStyle = '';
671-
if (selected && this.options.getSelectionBarColor) {
672-
var color = this.options.getSelectionBarColor();
673-
customStyle = 'style="background-color: ' + color + '"';
666+
var value = this.roundStep(this.minValue + i * this.step);
667+
var tick =   {
668+
selected: this.isTickSelected(value)
669+
};
670+
if (tick.selected && this.options.getSelectionBarColor) {
671+
tick.style = {
672+
'background-color': this.getSelectionBarColor()
673+
};
674674
}
675-
positions += '<li class="tick ' + selectedClass + '" ' + customStyle + '>';
676675
if (this.options.showTicksValues) {
677-
var tooltip = '';
676+
tick.value = this.getDisplayValue(value);
678677
if (this.options.ticksValuesTooltip) {
679-
tooltip = 'uib-tooltip="' + this.options.ticksValuesTooltip(value) + '"';
680-
if (this.options.vertical)
681-
tooltip += ' tooltip-placement="right"'
678+
tick.tooltip = this.options.ticksValuesTooltip(value);
679+
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
682680
}
683-
positions += '<span ' + tooltip + ' class="tick-value">' + this.getDisplayValue(value) + '</span>';
684681
}
685-
positions += '</li>';
682+
this.scope.ticks.push(tick);
686683
}
687-
this.ticks.html(positions);
688-
if (this.options.ticksValuesTooltip)
689-
$compile(this.ticks.contents())(this.scope);
690684
},
691685

692686
isTickSelected: function(value) {
@@ -877,11 +871,23 @@
877871
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
878872
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
879873
if (this.options.getSelectionBarColor) {
880-
var color = this.options.getSelectionBarColor();
881-
this.selBarChild.css({backgroundColor: color});
874+
var color = this.getSelectionBarColor();
875+
this.scope.barStyle = {
876+
backgroundColor: color
877+
};
882878
}
883879
},
884880

881+
/**
882+
* Wrapper around the getSelectionBarColor of the user to pass to
883+
* correct parameters
884+
*/
885+
getSelectionBarColor: function() {
886+
if (this.range)
887+
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
888+
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
889+
},
890+
885891
/**
886892
* Update combined label position and value
887893
*
@@ -1322,7 +1328,7 @@
13221328
valueChanged = true;
13231329
}
13241330

1325-
if(valueChanged) {
1331+
if (valueChanged) {
13261332
this.scope.$apply();
13271333
this.callOnChange();
13281334
}

0 commit comments

Comments
 (0)