swap left/right arrow behavior in rtl

angular · Nov 11, 2016 · 97fe5d4 · 97fe5d4
1 parent 3bb669c
commit 97fe5d4
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 14 deletions.
diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
@@ -12,7 +12,8 @@ import {
   PAGE_DOWN,
   PAGE_UP,
   END,
-  HOME, LEFT_ARROW
+  HOME,
+  LEFT_ARROW
 } from '../core/keyboard/keycodes';
 
 
@@ -890,6 +891,71 @@ describe('MdSlider', () => {
 
       expect(sliderInstance.value).toBe(30);
     });
+
+    it('should decrement inverted slider by 1 on right arrow pressed', () => {
+      testComponent.invert = true;
+      sliderInstance.value = 100;
+      fixture.detectChanges();
+
+      dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(99);
+    });
+
+    it('should increment inverted slider by 1 on left arrow pressed', () => {
+      testComponent.invert = true;
+      fixture.detectChanges();
+
+      dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(1);
+    });
+
+    it('should decrement RTL slider by 1 on right arrow pressed', () => {
+      testComponent.dir = 'rtl';
+      sliderInstance.value = 100;
+      fixture.detectChanges();
+
+      dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(99);
+    });
+
+    it('should increment RTL slider by 1 on left arrow pressed', () => {
+      testComponent.dir = 'rtl';
+      fixture.detectChanges();
+
+      dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(1);
+    });
+
+    it('should increment inverted RTL slider by 1 on right arrow pressed', () => {
+      testComponent.dir = 'rtl';
+      testComponent.invert = true;
+      fixture.detectChanges();
+
+      dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(1);
+    });
+
+    it('should decrement inverted RTL slider by 1 on left arrow pressed', () => {
+      testComponent.dir = 'rtl';
+      testComponent.invert = true;
+      sliderInstance.value = 100;
+      fixture.detectChanges();
+
+      dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(99);
+    });
   });
 });
 

diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
@@ -1,14 +1,14 @@
 import {
-    NgModule,
-    ModuleWithProviders,
-    Component,
-    ElementRef,
-    Input,
-    Output,
-    ViewEncapsulation,
-    forwardRef,
-    EventEmitter,
-    Optional,
+  NgModule,
+  ModuleWithProviders,
+  Component,
+  ElementRef,
+  Input,
+  Output,
+  ViewEncapsulation,
+  forwardRef,
+  EventEmitter,
+  Optional
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
@@ -309,13 +309,13 @@ export class MdSlider implements ControlValueAccessor {
         this.value = this.min;
         break;
       case LEFT_ARROW:
-        this._increment(-1);
+        this._increment(this._isLeftMin() ? -1 : 1);
         break;
       case UP_ARROW:
         this._increment(1);
         break;
       case RIGHT_ARROW:
-        this._increment(1);
+        this._increment(this._isLeftMin() ? 1 : -1);
         break;
       case DOWN_ARROW:
         this._increment(-1);
@@ -327,6 +327,11 @@ export class MdSlider implements ControlValueAccessor {
     event.preventDefault();
   }
 
+  /** Whether the left side of the slider is the minimum value. */
+  private _isLeftMin() {
+    return (this.direction == 'rtl') == this.invert
+  }
+
   /** Increments the slider by the given number of steps (negative number decrements). */
   private _increment(numSteps: number) {
     this.value = this._clamp(this.value + this.step * numSteps, this.min, this.max);
@@ -345,7 +350,7 @@ export class MdSlider implements ControlValueAccessor {
 
     // The exact value is calculated from the event and used to find the closest snap value.
     let percent = this._clamp((pos - offset) / size);
-    if ((this.direction == 'rtl') != this.invert) {
+    if (!this._isLeftMin()) {
       percent = 1 - percent;
     }
     let exactValue = this._calculateValue(percent);