Skip to content

Commit 97fe5d4

Browse files
committed
swap left/right arrow behavior in rtl
1 parent 3bb669c commit 97fe5d4

File tree

2 files changed

+85
-14
lines changed

2 files changed

+85
-14
lines changed

src/lib/slider/slider.spec.ts

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import {
1212
PAGE_DOWN,
1313
PAGE_UP,
1414
END,
15-
HOME, LEFT_ARROW
15+
HOME,
16+
LEFT_ARROW
1617
} from '../core/keyboard/keycodes';
1718

1819

@@ -890,6 +891,71 @@ describe('MdSlider', () => {
890891

891892
expect(sliderInstance.value).toBe(30);
892893
});
894+
895+
it('should decrement inverted slider by 1 on right arrow pressed', () => {
896+
testComponent.invert = true;
897+
sliderInstance.value = 100;
898+
fixture.detectChanges();
899+
900+
dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
901+
fixture.detectChanges();
902+
903+
expect(sliderInstance.value).toBe(99);
904+
});
905+
906+
it('should increment inverted slider by 1 on left arrow pressed', () => {
907+
testComponent.invert = true;
908+
fixture.detectChanges();
909+
910+
dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
911+
fixture.detectChanges();
912+
913+
expect(sliderInstance.value).toBe(1);
914+
});
915+
916+
it('should decrement RTL slider by 1 on right arrow pressed', () => {
917+
testComponent.dir = 'rtl';
918+
sliderInstance.value = 100;
919+
fixture.detectChanges();
920+
921+
dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
922+
fixture.detectChanges();
923+
924+
expect(sliderInstance.value).toBe(99);
925+
});
926+
927+
it('should increment RTL slider by 1 on left arrow pressed', () => {
928+
testComponent.dir = 'rtl';
929+
fixture.detectChanges();
930+
931+
dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
932+
fixture.detectChanges();
933+
934+
expect(sliderInstance.value).toBe(1);
935+
});
936+
937+
it('should increment inverted RTL slider by 1 on right arrow pressed', () => {
938+
testComponent.dir = 'rtl';
939+
testComponent.invert = true;
940+
fixture.detectChanges();
941+
942+
dispatchKeydownEvent(sliderNativeElement, RIGHT_ARROW);
943+
fixture.detectChanges();
944+
945+
expect(sliderInstance.value).toBe(1);
946+
});
947+
948+
it('should decrement inverted RTL slider by 1 on left arrow pressed', () => {
949+
testComponent.dir = 'rtl';
950+
testComponent.invert = true;
951+
sliderInstance.value = 100;
952+
fixture.detectChanges();
953+
954+
dispatchKeydownEvent(sliderNativeElement, LEFT_ARROW);
955+
fixture.detectChanges();
956+
957+
expect(sliderInstance.value).toBe(99);
958+
});
893959
});
894960
});
895961

src/lib/slider/slider.ts

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import {
2-
NgModule,
3-
ModuleWithProviders,
4-
Component,
5-
ElementRef,
6-
Input,
7-
Output,
8-
ViewEncapsulation,
9-
forwardRef,
10-
EventEmitter,
11-
Optional,
2+
NgModule,
3+
ModuleWithProviders,
4+
Component,
5+
ElementRef,
6+
Input,
7+
Output,
8+
ViewEncapsulation,
9+
forwardRef,
10+
EventEmitter,
11+
Optional
1212
} from '@angular/core';
1313
import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
1414
import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
@@ -309,13 +309,13 @@ export class MdSlider implements ControlValueAccessor {
309309
this.value = this.min;
310310
break;
311311
case LEFT_ARROW:
312-
this._increment(-1);
312+
this._increment(this._isLeftMin() ? -1 : 1);
313313
break;
314314
case UP_ARROW:
315315
this._increment(1);
316316
break;
317317
case RIGHT_ARROW:
318-
this._increment(1);
318+
this._increment(this._isLeftMin() ? 1 : -1);
319319
break;
320320
case DOWN_ARROW:
321321
this._increment(-1);
@@ -327,6 +327,11 @@ export class MdSlider implements ControlValueAccessor {
327327
event.preventDefault();
328328
}
329329

330+
/** Whether the left side of the slider is the minimum value. */
331+
private _isLeftMin() {
332+
return (this.direction == 'rtl') == this.invert
333+
}
334+
330335
/** Increments the slider by the given number of steps (negative number decrements). */
331336
private _increment(numSteps: number) {
332337
this.value = this._clamp(this.value + this.step * numSteps, this.min, this.max);
@@ -345,7 +350,7 @@ export class MdSlider implements ControlValueAccessor {
345350

346351
// The exact value is calculated from the event and used to find the closest snap value.
347352
let percent = this._clamp((pos - offset) / size);
348-
if ((this.direction == 'rtl') != this.invert) {
353+
if (!this._isLeftMin()) {
349354
percent = 1 - percent;
350355
}
351356
let exactValue = this._calculateValue(percent);

0 commit comments

Comments
 (0)