Merge pull request #253 from BlackIPS/feature/pointercolor

feat(pointerColor): Adding feature for dynamic pointer color.

README.md

@@ -182,6 +182,7 @@ The default options are:
     ticksValuesTooltip: null,
     vertical: false,
     selectionBarColor: null,
+    getPointerColor: null,
     keyboardSupport: true,
     scale: 1,
     enforceStep: true,
@@ -249,6 +250,8 @@ $scope.slider = {
 
 **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.
 
+**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.
+
 **hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
 
 **readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.

dist/rzslider.css

 /*! angularjs-slider - v2.7.1 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-02-06 */
+ 2016-02-07 */
 rzslider {
   position: relative;
   display: inline-block;

dist/rzslider.js

 /*! angularjs-slider - v2.7.1 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-02-06 */
+ 2016-02-07 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -50,6 +50,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       selectionBarColor: null,
+      getPointerColor: null,
       keyboardSupport: true,
       scale: 1,
       enforceStep: true,
@@ -889,6 +890,13 @@
         );
         this.setPosition(this.minLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('min');
+          this.scope.minPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -904,6 +912,13 @@
         var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
         this.setPosition(this.maxLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('max');
+          this.scope.maxPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -1001,6 +1016,17 @@
         return this.options.getSelectionBarColor(this.scope.rzSliderModel);
       },
 
+      /**
+       * Wrapper around the getPointerColor of the user to pass to
+       * correct parameters
+       */
+      getPointerColor: function(pointerType) {
+        if ( pointerType === 'max' ) {
+          return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
+        }
+        return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
+      },
+
       /**
        * Update combined label position and value
        *
@@ -1697,7 +1723,7 @@
   'use strict';
 
   $templateCache.put('rzSliderTpl.html',
-    "<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>"
+    "<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>"
   );
 
 }]);

dist/rzslider.min.css

-/*! angularjs-slider - v2.7.1 -  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -  https://github.com/angular-slider/angularjs-slider -  2016-02-06 */
+/*! angularjs-slider - v2.7.1 -  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -  https://github.com/angular-slider/angularjs-slider -  2016-02-07 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file

src/rzSliderTpl.html

@@ -2,8 +2,8 @@
 <span class="rz-bar-wrapper">
   <span class="rz-bar rz-selection" ng-style="barStyle"></span>
 </span> <!-- // 1 Highlight between two handles -->
-<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
-<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
+<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <!-- // 2 Left slider handle -->
+<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span> <!-- // 3 Right slider handle -->
 <span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
 <span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
 <span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->

src/rzslider.js

@@ -54,6 +54,7 @@
       ticksValuesTooltip: null,
       vertical: false,
       selectionBarColor: null,
+      getPointerColor: null,
       keyboardSupport: true,
       scale: 1,
       enforceStep: true,
@@ -893,6 +894,13 @@
         );
         this.setPosition(this.minLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('min');
+          this.scope.minPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -908,6 +916,13 @@
         var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
         this.setPosition(this.maxLab, pos);
 
+        if (this.options.getPointerColor) {
+          var pointercolor = this.getPointerColor('max');
+          this.scope.maxPointerStyle = {
+            backgroundColor: pointercolor
+          };
+        }
+
         this.shFloorCeil();
       },
 
@@ -1005,6 +1020,17 @@
         return this.options.getSelectionBarColor(this.scope.rzSliderModel);
       },
 
+      /**
+       * Wrapper around the getPointerColor of the user to pass to
+       * correct parameters
+       */
+      getPointerColor: function(pointerType) {
+        if ( pointerType === 'max' ) {
+          return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
+        }
+        return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
+      },
+
       /**
        * Update combined label position and value
        *

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

@@ -587,6 +587,118 @@ describe('rzslider - ', function() {
         $timeout.flush();
         sliderConf.options.onEnd.calledWith('test').should.be.true;
       });
+
+      it('should set the correct background-color on pointer for single slider', function() {
+        var sliderConf = {
+          value: 10,
+          options: {
+            floor: 0,
+            ceil: 10,
+            showSelectionBar: true,
+            getPointerColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            }
+          }
+        };
+        createSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]);
+        expect(minHChild.css('background-color')).to.equal('green');
+
+        scope.slider.value = 2;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('red');
+      });
+
+      it('should set the correct background-color on pointer for range slider (simple rule)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v) {
+              if (v < 5) return 'red';
+              return 'green';
+            }
+          }
+        };
+        createRangeSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]),
+            maxHChild = angular.element(slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('green');
+
+        scope.slider.min = 6;
+        scope.slider.max = 7;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('green');
+        expect(maxHChild.css('background-color')).to.equal('green');
+      });
+
+      it('should set the correct background-color on pointer for range slider (min/high independent rule 1)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v, type) {
+              if ( type == 'min' ) {
+                if (v < 5) return 'red';
+                return 'green';
+              }
+
+              if ( type == 'max' ) {
+                if (v < 5) return 'blue';
+                return 'orange';
+              }
+            }
+          }
+        };
+        createRangeSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]),
+            maxHChild = angular.element(slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('orange');
+
+        scope.slider.min = 6;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('green');
+      });
+
+      it('should set the correct background-color on pointer for range slider (min/high independent rule 2)', function() {
+        var sliderConf = {
+          min: 2,
+          max: 8,
+          options: {
+            floor: 0,
+            ceil: 10,
+            getPointerColor: function(v, type) {
+              if ( type == 'min' ) {
+                if (v < 5) return 'red';
+                return 'green';
+              }
+
+              if ( type == 'max' ) {
+                if (v < 5) return 'blue';
+                return 'orange';
+              }
+            }
+          }
+        };
+        createRangeSlider(sliderConf);
+        var minHChild = angular.element(slider.minH[0]),
+            maxHChild = angular.element(slider.maxH[0]);
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('orange');
+
+        scope.slider.max = 3;
+        scope.$digest();
+        expect(minHChild.css('background-color')).to.equal('red');
+        expect(maxHChild.css('background-color')).to.equal('blue');
+
+      });
     });
   });