Add a bindIndexForStepsArray option

176dbef2 · Valentin Hervieu · 22343534 · 176dbef2 · 176dbef2 · 176dbef2
Commit 176dbef2 authored Jun 30, 2016 by Valentin Hervieu
8 changed files
--- a/CHANGELOG.md
+++ b/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).

--- a/README.md
+++ b/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.*

--- a/dist/rzslider.js
+++ b/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)
+        if (this.options.stepsArray) {
-          this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
+          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)
+        if (this.options.stepsArray) {
-          this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
+          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)
+        if (this.options.stepsArray) {
-          this.scope.rzSliderModel = this.getStepValue(this.lowValue);
+          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)
+        if (this.options.stepsArray) {
-          this.scope.rzSliderHigh = this.getStepValue(this.highValue);
+          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);

--- a/dist/rzslider.min.js
+++ b/dist/rzslider.min.js
--- a/src/rzslider.js
+++ b/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)
+        if (this.options.stepsArray) {
-          this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
+          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)
+        if (this.options.stepsArray) {
-          this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
+          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)
+        if (this.options.stepsArray) {
-          this.scope.rzSliderModel = this.getStepValue(this.lowValue);
+          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)
+        if (this.options.stepsArray) {
-          this.scope.rzSliderHigh = this.getStepValue(this.highValue);
+          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);

--- a/tests/specs/accessibility-test.js
+++ b/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');
+    });
  });
 }());
--- a/tests/specs/options-handling-test.js
+++ b/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;

--- a/tests/specs/ticks-test.js
+++ b/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,