Skip to content

Commit c0a3fc5

Browse files
ValentinHValentinH
committed
Merge pull request #253 from BlackIPS/feature/pointercolor
feat(pointerColor): Adding feature for dynamic pointer color.
2 parents c698477 + ce3487b commit c0a3fc5

File tree

8 files changed

+175
-8
lines changed

8 files changed

+175
-8
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ The default options are:
182182
ticksValuesTooltip: null,
183183
vertical: false,
184184
selectionBarColor: null,
185+
getPointerColor: null,
185186
keyboardSupport: true,
186187
scale: 1,
187188
enforceStep: true,
@@ -249,6 +250,8 @@ $scope.slider = {
249250

250251
**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.
251252

253+
**getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. To handle range slider pointer independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values. Indeed, when the function is called, there is no certainty that the model has already been updated.
254+
252255
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
253256

254257
**readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.

‎dist/rzslider.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.7.1 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-02-06 */
4+
2016-02-07 */
55
rzslider {
66
position: relative;
77
display: inline-block;

‎dist/rzslider.js

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.7.1 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-02-06 */
4+
2016-02-07 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -50,6 +50,7 @@
5050
ticksValuesTooltip: null,
5151
vertical: false,
5252
selectionBarColor: null,
53+
getPointerColor: null,
5354
keyboardSupport: true,
5455
scale: 1,
5556
enforceStep: true,
@@ -889,6 +890,13 @@
889890
);
890891
this.setPosition(this.minLab, pos);
891892

893+
if (this.options.getPointerColor) {
894+
var pointercolor = this.getPointerColor('min');
895+
this.scope.minPointerStyle = {
896+
backgroundColor: pointercolor
897+
};
898+
}
899+
892900
this.shFloorCeil();
893901
},
894902

@@ -904,6 +912,13 @@
904912
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
905913
this.setPosition(this.maxLab, pos);
906914

915+
if (this.options.getPointerColor) {
916+
var pointercolor = this.getPointerColor('max');
917+
this.scope.maxPointerStyle = {
918+
backgroundColor: pointercolor
919+
};
920+
}
921+
907922
this.shFloorCeil();
908923
},
909924

@@ -1001,6 +1016,17 @@
10011016
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
10021017
},
10031018

1019+
/**
1020+
* Wrapper around the getPointerColor of the user to pass to
1021+
* correct parameters
1022+
*/
1023+
getPointerColor: function(pointerType) {
1024+
if ( pointerType === 'max' ) {
1025+
return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
1026+
}
1027+
return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
1028+
},
1029+
10041030
/**
10051031
* Update combined label position and value
10061032
*
@@ -1697,7 +1723,7 @@
16971723
'use strict';
16981724

16991725
$templateCache.put('rzSliderTpl.html',
1700-
"<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 track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
1726+
"<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 rz-pointer-min\" ng-style=minPointerStyle></span> <span class=\"rz-pointer rz-pointer-max\" ng-style=maxPointerStyle></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 track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
17011727
);
17021728

17031729
}]);

‎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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
<span class="rz-bar-wrapper">
33
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
44
</span> <!-- // 1 Highlight between two handles -->
5-
<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
6-
<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
5+
<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <!-- // 2 Left slider handle -->
6+
<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span> <!-- // 3 Right slider handle -->
77
<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
88
<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
99
<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->

‎src/rzslider.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
ticksValuesTooltip: null,
5555
vertical: false,
5656
selectionBarColor: null,
57+
getPointerColor: null,
5758
keyboardSupport: true,
5859
scale: 1,
5960
enforceStep: true,
@@ -893,6 +894,13 @@
893894
);
894895
this.setPosition(this.minLab, pos);
895896

897+
if (this.options.getPointerColor) {
898+
var pointercolor = this.getPointerColor('min');
899+
this.scope.minPointerStyle = {
900+
backgroundColor: pointercolor
901+
};
902+
}
903+
896904
this.shFloorCeil();
897905
},
898906

@@ -908,6 +916,13 @@
908916
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
909917
this.setPosition(this.maxLab, pos);
910918

919+
if (this.options.getPointerColor) {
920+
var pointercolor = this.getPointerColor('max');
921+
this.scope.maxPointerStyle = {
922+
backgroundColor: pointercolor
923+
};
924+
}
925+
911926
this.shFloorCeil();
912927
},
913928

@@ -1005,6 +1020,17 @@
10051020
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
10061021
},
10071022

1023+
/**
1024+
* Wrapper around the getPointerColor of the user to pass to
1025+
* correct parameters
1026+
*/
1027+
getPointerColor: function(pointerType) {
1028+
if ( pointerType === 'max' ) {
1029+
return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
1030+
}
1031+
return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
1032+
},
1033+
10081034
/**
10091035
* Update combined label position and value
10101036
*

‎tests/spec/rz-slider-service-test.js

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -587,6 +587,118 @@ describe('rzslider - ', function() {
587587
$timeout.flush();
588588
sliderConf.options.onEnd.calledWith('test').should.be.true;
589589
});
590+
591+
it('should set the correct background-color on pointer for single slider', function() {
592+
var sliderConf = {
593+
value: 10,
594+
options: {
595+
floor: 0,
596+
ceil: 10,
597+
showSelectionBar: true,
598+
getPointerColor: function(v) {
599+
if (v < 5) return 'red';
600+
return 'green';
601+
}
602+
}
603+
};
604+
createSlider(sliderConf);
605+
var minHChild = angular.element(slider.minH[0]);
606+
expect(minHChild.css('background-color')).to.equal('green');
607+
608+
scope.slider.value = 2;
609+
scope.$digest();
610+
expect(minHChild.css('background-color')).to.equal('red');
611+
});
612+
613+
it('should set the correct background-color on pointer for range slider (simple rule)', function() {
614+
var sliderConf = {
615+
min: 2,
616+
max: 8,
617+
options: {
618+
floor: 0,
619+
ceil: 10,
620+
getPointerColor: function(v) {
621+
if (v < 5) return 'red';
622+
return 'green';
623+
}
624+
}
625+
};
626+
createRangeSlider(sliderConf);
627+
var minHChild = angular.element(slider.minH[0]),
628+
maxHChild = angular.element(slider.maxH[0]);
629+
expect(minHChild.css('background-color')).to.equal('red');
630+
expect(maxHChild.css('background-color')).to.equal('green');
631+
632+
scope.slider.min = 6;
633+
scope.slider.max = 7;
634+
scope.$digest();
635+
expect(minHChild.css('background-color')).to.equal('green');
636+
expect(maxHChild.css('background-color')).to.equal('green');
637+
});
638+
639+
it('should set the correct background-color on pointer for range slider (min/high independent rule 1)', function() {
640+
var sliderConf = {
641+
min: 2,
642+
max: 8,
643+
options: {
644+
floor: 0,
645+
ceil: 10,
646+
getPointerColor: function(v, type) {
647+
if ( type == 'min' ) {
648+
if (v < 5) return 'red';
649+
return 'green';
650+
}
651+
652+
if ( type == 'max' ) {
653+
if (v < 5) return 'blue';
654+
return 'orange';
655+
}
656+
}
657+
}
658+
};
659+
createRangeSlider(sliderConf);
660+
var minHChild = angular.element(slider.minH[0]),
661+
maxHChild = angular.element(slider.maxH[0]);
662+
expect(minHChild.css('background-color')).to.equal('red');
663+
expect(maxHChild.css('background-color')).to.equal('orange');
664+
665+
scope.slider.min = 6;
666+
scope.$digest();
667+
expect(minHChild.css('background-color')).to.equal('green');
668+
});
669+
670+
it('should set the correct background-color on pointer for range slider (min/high independent rule 2)', function() {
671+
var sliderConf = {
672+
min: 2,
673+
max: 8,
674+
options: {
675+
floor: 0,
676+
ceil: 10,
677+
getPointerColor: function(v, type) {
678+
if ( type == 'min' ) {
679+
if (v < 5) return 'red';
680+
return 'green';
681+
}
682+
683+
if ( type == 'max' ) {
684+
if (v < 5) return 'blue';
685+
return 'orange';
686+
}
687+
}
688+
}
689+
};
690+
createRangeSlider(sliderConf);
691+
var minHChild = angular.element(slider.minH[0]),
692+
maxHChild = angular.element(slider.maxH[0]);
693+
expect(minHChild.css('background-color')).to.equal('red');
694+
expect(maxHChild.css('background-color')).to.equal('orange');
695+
696+
scope.slider.max = 3;
697+
scope.$digest();
698+
expect(minHChild.css('background-color')).to.equal('red');
699+
expect(maxHChild.css('background-color')).to.equal('blue');
700+
701+
});
590702
});
591703
});
592704

0 commit comments

Comments
 (0)