Add a bindIndexForStepsArray option

CHANGELOG.md

+# 4.1.0 (not released yet)
+## Improvement
+- Add a `bindIndexForStepsArray` option that enable to use `stepsArray` with the same behavior as before 4.0 (#345).
+
 # 4.0.2 (2016-06-07)
 ## Improvement
 - Add a `mergeRangeLabelsIfSame` option (#245).

README.md

@@ -194,6 +194,7 @@ The default options are:
     translate: null,
     getLegend: null,
     stepsArray: null,
+    bindIndexForStepsArray: false,
     draggableRange: false,
     draggableRangeOnly: false,
     showSelectionBar: false,
@@ -277,7 +278,7 @@ $scope.slider = {
 **id** - _Any (defaults to null)_: If you want to use the same `translate` function for several sliders, just set the `id` to anything you want, and it will be passed to the `translate(value, sliderId)` function as a second argument.
 
 **stepsArray** - _Array_: If you want to display a slider with non linear/number steps.
-Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` and `rz-slider-high` values will be the value of the selected item in the stepsArray.
+Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. By default, the `rz-slider-model` and `rz-slider-high` values will be the value of the selected item in the stepsArray. They can also be bound to the index of the selected item by setting the `bindIndexForStepsArray` option to `true`.
 
 `stepsArray` can also be an array of objects like:
 
@@ -286,7 +287,9 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
   {value: 'A'}, // the display value will be *A*
   {value: 10, legend: 'Legend for 10'} // the display value will be 10 and a legend will be displayed under the corresponding tick.
 ]
-```
+````
+
+**bindIndexForStepsArray** - _Boolean (defaults to false)_: Set to true to bind the index of the selected item to `rz-slider-model` and `rz-slider-high`. (This was the default behavior prior to 4.0).
 
 **draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar. *Applies to range slider only.*
 

dist/rzslider.js

@@ -39,6 +39,7 @@
       translate: null,
       getLegend: null,
       stepsArray: null,
+      bindIndexForStepsArray: false,
       draggableRange: false,
       draggableRangeOnly: false,
       showSelectionBar: false,
@@ -428,15 +429,23 @@
       },
 
       syncLowValue: function() {
-        if (this.options.stepsArray)
-          this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
+          else
+            this.lowValue = this.scope.rzSliderModel
+        }
         else
           this.lowValue = this.scope.rzSliderModel;
       },
 
       syncHighValue: function() {
-        if (this.options.stepsArray)
-          this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
+          else
+            this.highValue = this.scope.rzSliderHigh
+        }
         else
           this.highValue = this.scope.rzSliderHigh;
       },
@@ -449,15 +458,23 @@
       },
 
       applyLowValue: function() {
-        if (this.options.stepsArray)
-          this.scope.rzSliderModel = this.getStepValue(this.lowValue);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.scope.rzSliderModel = this.getStepValue(this.lowValue);
+          else
+            this.scope.rzSliderModel = this.lowValue
+        }
         else
           this.scope.rzSliderModel = this.lowValue;
       },
 
       applyHighValue: function() {
-        if (this.options.stepsArray)
-          this.scope.rzSliderHigh = this.getStepValue(this.highValue);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.scope.rzSliderHigh = this.getStepValue(this.highValue);
+          else
+            this.scope.rzSliderHigh = this.highValue
+        }
         else
           this.scope.rzSliderHigh = this.highValue;
       },
@@ -552,6 +569,8 @@
         }
         else {
           this.customTrFn = function(modelValue) {
+            if(this.options.bindIndexForStepsArray)
+              return this.getStepValue(modelValue)
             return modelValue;
           };
         }
@@ -753,7 +772,7 @@
           getDimension = false;
 
         if (useCustomTr) {
-          if (this.options.stepsArray)
+          if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
             value = this.getStepValue(value);
           valStr = String(this.customTrFn(value, this.options.id, which));
         }
@@ -1239,7 +1258,7 @@
        * @returns {*}
        */
       getDisplayValue: function(value, which) {
-        if (this.options.stepsArray) {
+        if (this.options.stepsArray && !this.options.bindIndexForStepsArray) {
           value = this.getStepValue(value);
         }
         return this.customTrFn(value, this.options.id, which);

src/rzslider.js

@@ -43,6 +43,7 @@
       translate: null,
       getLegend: null,
       stepsArray: null,
+      bindIndexForStepsArray: false,
       draggableRange: false,
       draggableRangeOnly: false,
       showSelectionBar: false,
@@ -432,15 +433,23 @@
       },
 
       syncLowValue: function() {
-        if (this.options.stepsArray)
-          this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
+          else
+            this.lowValue = this.scope.rzSliderModel
+        }
         else
           this.lowValue = this.scope.rzSliderModel;
       },
 
       syncHighValue: function() {
-        if (this.options.stepsArray)
-          this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
+          else
+            this.highValue = this.scope.rzSliderHigh
+        }
         else
           this.highValue = this.scope.rzSliderHigh;
       },
@@ -453,15 +462,23 @@
       },
 
       applyLowValue: function() {
-        if (this.options.stepsArray)
-          this.scope.rzSliderModel = this.getStepValue(this.lowValue);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.scope.rzSliderModel = this.getStepValue(this.lowValue);
+          else
+            this.scope.rzSliderModel = this.lowValue
+        }
         else
           this.scope.rzSliderModel = this.lowValue;
       },
 
       applyHighValue: function() {
-        if (this.options.stepsArray)
-          this.scope.rzSliderHigh = this.getStepValue(this.highValue);
+        if (this.options.stepsArray) {
+          if (!this.options.bindIndexForStepsArray)
+            this.scope.rzSliderHigh = this.getStepValue(this.highValue);
+          else
+            this.scope.rzSliderHigh = this.highValue
+        }
         else
           this.scope.rzSliderHigh = this.highValue;
       },
@@ -556,6 +573,8 @@
         }
         else {
           this.customTrFn = function(modelValue) {
+            if(this.options.bindIndexForStepsArray)
+              return this.getStepValue(modelValue)
             return modelValue;
           };
         }
@@ -757,7 +776,7 @@
           getDimension = false;
 
         if (useCustomTr) {
-          if (this.options.stepsArray)
+          if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
             value = this.getStepValue(value);
           valStr = String(this.customTrFn(value, this.options.id, which));
         }
@@ -1243,7 +1262,7 @@
        * @returns {*}
        */
       getDisplayValue: function(value, which) {
-        if (this.options.stepsArray) {
+        if (this.options.stepsArray && !this.options.bindIndexForStepsArray) {
           value = this.getStepValue(value);
         }
         return this.customTrFn(value, this.options.id, which);

tests/specs/accessibility-test.js

@@ -221,6 +221,28 @@
       expect(helper.slider.minH.attr('aria-valuenow')).to.equal('C');
       expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C');
     });
+
+    it('should have accessible slider when values are text but bindIndexForStepsArray is true', function() {
+      var sliderConf = {
+        value: 1,
+        options: {
+          stepsArray: ['A', 'B', 'C'],
+          bindIndexForStepsArray: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.slider.minH.attr('role')).to.equal('slider');
+      expect(helper.slider.minH.attr('tabindex')).to.equal('0');
+      expect(helper.slider.minH.attr('aria-valuenow')).to.equal('1');
+      expect(helper.slider.minH.attr('aria-valuetext')).to.equal('B');
+      expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0');
+      expect(helper.slider.minH.attr('aria-valuemax')).to.equal('2');
+
+      helper.scope.slider.value = 2;
+      helper.scope.$digest();
+      expect(helper.slider.minH.attr('aria-valuenow')).to.equal('2');
+      expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C');
+    });
   });
 }());
 

tests/specs/options-handling-test.js

@@ -114,6 +114,17 @@
         expect(helper.slider.lowValue).to.equal(2);
       });
 
+      it('should set correct step/floor/ceil and translate function when stepsArray is used with values and bindIndexForStepsArray is true', function() {
+        helper.scope.slider.value = 2;
+        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(2);
+      });
+
       it('should set correct step/floor/ceil when stepsArray is used with values and ticks', function() {
         helper.scope.slider.value = 'C';
         helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
@@ -141,6 +152,23 @@
         expect(helper.slider.lowValue).to.equal(3);
       });
 
+      it('should set correct step/floor/ceil when stepsArray is used with objects and bindIndexForStepsArray is true', function() {
+        helper.scope.slider.value = 3;
+        helper.scope.slider.options.stepsArray = [
+          {value: 'A'},
+          {value: 'B'},
+          {value: 'C'},
+          {value: 'D'},
+          {value: 'E'}
+        ];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(3);
+      });
+
       it('should set correct step/floor/ceil function when stepsArray is used with objects containing legends', function() {
         helper.scope.slider.value = 'D';
         helper.scope.slider.options.stepsArray = [
@@ -164,13 +192,57 @@
         expect(helper.element[0].querySelectorAll('.rz-tick-legend')).to.have.length(2);
       });
 
+      it('should set correct step/floor/ceil function when stepsArray is used with objects containing legends and bindIndexForStepsArray is true', function() {
+        helper.scope.slider.value = 3;
+        helper.scope.slider.options.stepsArray = [
+          {value: 'A'},
+          {value: 'B', legend: 'Legend B'},
+          {value: 'C'},
+          {value: 'D', legend: 'Legend D'},
+          {value: 'E'}
+        ];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
+        helper.scope.slider.options.showTicks = true;
+        helper.scope.$digest();
+
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(3);
+
+        expect(helper.slider.getLegend(1)).to.equal('Legend B');
+        expect(helper.slider.getLegend(3)).to.equal('Legend D');
+
+        expect(helper.element[0].querySelectorAll('.rz-tick-legend')).to.have.length(2);
+      });
+
       it('should allow a custom translate function when stepsArray is used', function() {
+        helper.scope.slider.options.stepsArray = [
+          {value: 'A', 'foo': 'barA'},
+          {value: 'B', 'foo': 'barB'},
+          {value: 'C', 'foo': 'barC'}
+        ];
+        helper.scope.slider.options.translate = function(value, sliderId, label) {
+          return 'value: '+ value
+        };
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(2);
+
+        expect(helper.slider.customTrFn('A')).to.equal('value: A');
+        expect(helper.slider.customTrFn('C')).to.equal('value: C');
+      });
+
+      it('should allow a custom translate function when stepsArray is used and bindIndexForStepsArray is true', function() {
         helper.scope.slider.options.stepsArray = [{'foo': 'barA'}, {'foo': 'barB'}, {'foo': 'barC'}];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
         helper.scope.slider.options.translate = function(value, sliderId, label) {
           if (value >= 0 && value < helper.scope.slider.options.stepsArray.length) {
             return helper.scope.slider.options.stepsArray[value]['foo'];
-          } else {
-            return ""
+          }
+          else {
+            return ''
           }
         };
         helper.scope.$digest();
@@ -637,6 +709,19 @@
         expect(helper.slider.highValue).to.equal(3);
       });
 
+      it('should set correct step/floor/ceil and translate function when stepsArray is used with values and bindIndexForStepsArray is true', function() {
+        helper.scope.slider.min = 1;
+        helper.scope.slider.max = 3;
+        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(1);
+        expect(helper.slider.highValue).to.equal(3);
+      });
+
       it('should set correct step/floor/ceil when stepsArray is used with values and ticks', function() {
         helper.scope.slider.min = 'B';
         helper.scope.slider.max = 'D';
@@ -650,6 +735,20 @@
         expect(helper.slider.highValue).to.equal(3);
       });
 
+      it('should set correct step/floor/ceil when stepsArray is used with values and ticks and bindIndexForStepsArray is true', function() {
+        helper.scope.slider.min = 1;
+        helper.scope.slider.max = 3;
+        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
+        helper.scope.slider.options.showTicks = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(1);
+        expect(helper.slider.highValue).to.equal(3);
+      });
+
       it('should set correct step/floor/ceil when stepsArray is used with objects', function() {
         helper.scope.slider.min = 'B';
         helper.scope.slider.max = 'D';
@@ -668,6 +767,25 @@
         expect(helper.slider.highValue).to.equal(3);
       });
 
+      it('should set correct step/floor/ceil when stepsArray is used with objects and bindIndexForStepsArray is true', function() {
+        helper.scope.slider.min = 1;
+        helper.scope.slider.max = 3;
+        helper.scope.slider.options.stepsArray = [
+          {value: 'A'},
+          {value: 'B'},
+          {value: 'C'},
+          {value: 'D'},
+          {value: 'E'}
+        ];
+        helper.scope.slider.options.bindIndexForStepsArray = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(1);
+        expect(helper.slider.highValue).to.equal(3);
+      });
+
       it('should set the correct combined label when range values are the same and mergeRangeLabelsIfSame option is false', function() {
         helper.scope.slider.options.mergeRangeLabelsIfSame = false;
         helper.scope.slider.min = 50;

tests/specs/ticks-test.js

@@ -99,6 +99,26 @@
       expect(lasTick.text()).to.equal('E');
     });
 
+    it('should create the correct number of ticks when showTicksValues is true and used with stepsArray and bindIndexForStepsArray is true', function() {
+      var sliderConf = {
+        value: 2,
+        options: {
+          stepsArray: ['A', 'B', 'C', 'D', 'E'],
+          bindIndexForStepsArray: true,
+          showTicksValues: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(5);
+      expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(5);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[0]);
+      expect(firstTick.text()).to.equal('A');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[1]);
+      expect(secondTick.text()).to.equal('B');
+      var lasTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[4]);
+      expect(lasTick.text()).to.equal('E');
+    });
+
     it('should create the correct number of ticks when showTicksValues is an integer', function() {
       var sliderConf = {
         value: 50,