Added reversedControls option to reverse keyboard navigation. (#567)

Author: DadUndead

README.md

@@ -244,6 +244,7 @@ The default options are:
     onChange: null,
     onEnd: null,
     rightToLeft: false,
+    reversedControls: false,
     boundPointerLabels: true,
     mergeRangeLabelsIfSame: false,
     customTemplateScope: null,
@@ -399,6 +400,14 @@ _Changing this value at runtime is not currently supported._
   - Home: minimum value
   - End: maximum value
 
+**reversedControls** - _Boolean (defaults to false)_: Set to true to reverse keyboard navigation:
+  - Right/top arrows: -1
+  - Left/bottom arrows: +1
+  - Page-up: -10%
+  - Page-down: +10%
+  - End: minimum value
+  - Home: maximum value
+  
 **customTemplateScope** - _Object (default to null)_: The properties defined in this object will be exposed in the slider template under `custom.X`.
 
 **logScale** - _Boolean (defaults to false)_: Set to true to use a logarithmic scale to display the slider.

demo/index.html

@@ -420,7 +420,8 @@ <h2>Slider with all options demo</h2>
         <label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
         <label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
         <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br />
-        <label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label>
+        <label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label><br />
+        <label>Reversed Controls <input type="checkbox" ng-model="slider_all_options.options.reversedControls"></label>
       </div>
     </div>
     <rzslider

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v6.4.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2017-08-18 */
+ 2017-09-07 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 ;(function(root, factory) {
@@ -75,6 +75,7 @@
         onChange: null,
         onEnd: null,
         rightToLeft: false,
+        reversedControls: false,
         boundPointerLabels: true,
         mergeRangeLabelsIfSame: false,
         customTemplateScope: null,
@@ -2111,6 +2112,13 @@
             increasePage = currentValue + this.valueRange / 10,
             decreasePage = currentValue - this.valueRange / 10
 
+          if (this.options.reversedControls){
+            increaseStep = currentValue - this.step
+            decreaseStep = currentValue + this.step
+            increasePage = currentValue - this.valueRange / 10
+            decreasePage = currentValue + this.valueRange / 10
+          }
+
           //Left to right default actions
           var actions = {
             UP: increaseStep,
@@ -2119,8 +2127,8 @@
             RIGHT: increaseStep,
             PAGEUP: increasePage,
             PAGEDOWN: decreasePage,
-            HOME: this.minValue,
-            END: this.maxValue
+            HOME: this.options.reversedControls ? this.maxValue : this.minValue,
+            END: this.options.reversedControls ? this.minValue : this.maxValue
           }
           //right to left means swapping right and left arrows
           if (this.options.rightToLeft) {

dist/rzslider.js

@@ -79,6 +79,7 @@
         onChange: null,
         onEnd: null,
         rightToLeft: false,
+        reversedControls: false,
         boundPointerLabels: true,
         mergeRangeLabelsIfSame: false,
         customTemplateScope: null,
@@ -2115,6 +2116,13 @@
             increasePage = currentValue + this.valueRange / 10,
             decreasePage = currentValue - this.valueRange / 10
 
+          if (this.options.reversedControls) {
+            increaseStep = currentValue - this.step
+            decreaseStep = currentValue + this.step
+            increasePage = currentValue - this.valueRange / 10
+            decreasePage = currentValue + this.valueRange / 10
+          }
+
           //Left to right default actions
           var actions = {
             UP: increaseStep,
@@ -2123,8 +2131,8 @@
             RIGHT: increaseStep,
             PAGEUP: increasePage,
             PAGEDOWN: decreasePage,
-            HOME: this.minValue,
-            END: this.maxValue
+            HOME: this.options.reversedControls ? this.maxValue : this.minValue,
+            END: this.options.reversedControls ? this.minValue : this.maxValue
           }
           //right to left means swapping right and left arrows
           if (this.options.rightToLeft) {

dist/rzslider.min.css

@@ -247,4 +247,253 @@
       expect(helper.scope.slider.value).to.equal(99)
     })
   })
+
+  describe('Keyboard controls - single slider with reversed controls flag', function() {
+    var helper, RzSliderOptions, $rootScope, $timeout
+
+    beforeEach(module('test-helper'))
+
+    beforeEach(
+      inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+        helper = TestHelper
+        RzSliderOptions = _RzSliderOptions_
+        $rootScope = _$rootScope_
+        $timeout = _$timeout_
+      })
+    )
+
+    afterEach(function() {
+      helper.clean()
+    })
+
+    beforeEach(function() {
+      var sliderConf = {
+        value: 100,
+        options: {
+          floor: 0,
+          ceil: 200,
+          onStart: sinon.spy(),
+          onChange: sinon.spy(),
+          onEnd: sinon.spy(),
+          reversedControls: true
+        }
+      }
+      helper.createSlider(sliderConf)
+    })
+
+    it('should call onStart on the first keydown but not after', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      helper.scope.slider.options.onStart.callCount === 1
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      helper.scope.slider.options.onStart.callCount === 1
+    })
+
+    it('should call onChange on each keydown but after a timeout', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT', { timeout: false })
+      $timeout.flush()
+      helper.scope.slider.options.onChange.callCount === 1
+      helper.pressKeydown(helper.slider.minH, 'LEFT', { timeout: false })
+      $timeout.flush()
+      helper.scope.slider.options.onChange.callCount === 1
+    })
+
+    it('should call onEnd on keyup and recall onStart if key is down again', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      helper.slider.minH.triggerHandler({ type: 'keyup' })
+      helper.scope.slider.options.onStart.callCount === 1
+      helper.scope.slider.options.onEnd.callCount === 1
+
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      helper.slider.minH.triggerHandler({ type: 'keyup' })
+      helper.scope.slider.options.onStart.callCount === 2
+      helper.scope.slider.options.onEnd.callCount === 2
+    })
+
+    it('should toggle active style when handle focused/blured', function() {
+      helper.slider.minH.triggerHandler('focus')
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true
+      helper.slider.minH.triggerHandler('blur')
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.false
+    })
+
+    it('should increment by 1 when RIGHT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      expect(helper.scope.slider.value).to.equal(101)
+    })
+
+    it('should increment by 1 when LEFT is pressed with oldAPI', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT', { oldAPI: true })
+      expect(helper.scope.slider.value).to.equal(101)
+    })
+
+    it('should decrement by 1 when RIGHT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'RIGHT')
+      expect(helper.scope.slider.value).to.equal(99)
+    })
+
+    it('should increment by 1 when DOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'DOWN')
+      expect(helper.scope.slider.value).to.equal(101)
+    })
+
+    it('should decrement by 1 when UP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'UP')
+      expect(helper.scope.slider.value).to.equal(99)
+    })
+
+    it('should increment by 10% when PAGEDOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'PAGEDOWN')
+      expect(helper.scope.slider.value).to.equal(120)
+    })
+
+    it('should decrement by 10% when PAGEUP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'PAGEUP')
+      expect(helper.scope.slider.value).to.equal(80)
+    })
+
+    it('should set value to min when END is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'END')
+      expect(helper.scope.slider.value).to.equal(0)
+    })
+
+    it('should  set value to max when HOME is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'HOME')
+      expect(helper.scope.slider.value).to.equal(200)
+    })
+
+    it('should do nothing when SPACE is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'SPACE')
+      expect(helper.scope.slider.value).to.equal(100)
+    })
+
+    it('should not modify when keypress but not focused', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      expect(helper.scope.slider.value).to.equal(101)
+      helper.slider.minH.triggerHandler('blur')
+      helper.pressKeydown(helper.slider.minH, 'LEFT', { timeout: false })
+      expect(helper.scope.slider.value).to.equal(101)
+    })
+  })
+
+  describe('Right to left Keyboard controls - single slider with reversed controls flag', function() {
+    var helper, RzSliderOptions, $rootScope, $timeout
+
+    beforeEach(module('test-helper'))
+
+    beforeEach(
+      inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
+        helper = TestHelper
+        RzSliderOptions = _RzSliderOptions_
+        $rootScope = _$rootScope_
+        $timeout = _$timeout_
+      })
+    )
+
+    afterEach(function() {
+      helper.clean()
+    })
+
+    beforeEach(function() {
+      var sliderConf = {
+        value: 100,
+        options: {
+          floor: 0,
+          ceil: 200,
+          rightToLeft: true,
+          reversedControls: true
+        }
+      }
+      helper.createSlider(sliderConf)
+    })
+
+    it('should toggle active style when handle focused/blured', function() {
+      helper.slider.minH.triggerHandler('focus')
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.true
+      helper.slider.minH.triggerHandler('blur')
+      expect(helper.slider.minH.hasClass('rz-active')).to.be.false
+    })
+
+    it('should decrement by 1 when LEFT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      expect(helper.scope.slider.value).to.equal(99)
+    })
+
+    it('should decrement by 1 when LEFT is pressed with oldAPI', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT', true)
+      expect(helper.scope.slider.value).to.equal(99)
+    })
+
+    it('should increment by 1 when RIGHT is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'RIGHT')
+      expect(helper.scope.slider.value).to.equal(101)
+    })
+
+    it('should increment by 1 when DOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'DOWN')
+      expect(helper.scope.slider.value).to.equal(101)
+    })
+
+    it('should decrement by 1 when UP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'UP')
+      expect(helper.scope.slider.value).to.equal(99)
+    })
+
+    it('should increment by 10% when PAGEDOWN is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'PAGEDOWN')
+      expect(helper.scope.slider.value).to.equal(120)
+    })
+
+    it('should decrement by 10% when PAGEUP is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'PAGEUP')
+      expect(helper.scope.slider.value).to.equal(80)
+    })
+
+    it('should set value to min when END is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'END')
+      expect(helper.scope.slider.value).to.equal(0)
+    })
+
+    it('should  set value to max when HOME is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'HOME')
+      expect(helper.scope.slider.value).to.equal(200)
+    })
+
+    it('should do nothing when SPACE is pressed', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'SPACE')
+      expect(helper.scope.slider.value).to.equal(100)
+    })
+
+    it('should not modify when keypress but not focused', function() {
+      helper.slider.minH.triggerHandler('focus')
+      helper.pressKeydown(helper.slider.minH, 'LEFT')
+      expect(helper.scope.slider.value).to.equal(99)
+      helper.slider.minH.triggerHandler('blur')
+      helper.pressKeydown(helper.slider.minH, 'LEFT', { timeout: false })
+      expect(helper.scope.slider.value).to.equal(99)
+    })
+  })
 })()