Skip to content

Commit

Permalink
feat(carousel): rename left right classes for positioning
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbasso
fbasso committed May 12, 2021
1 parent e9bb545 commit bebd9ab
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 39 deletions.
14 changes: 7 additions & 7 deletions src/carousel/carousel-transition.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ import {reflow} from '../util/util';
* Defines the carousel slide transition direction.
*/
export enum NgbSlideEventDirection {
LEFT = 'left',
RIGHT = 'right'
START = 'start',
END = 'end'
}

export interface NgbCarouselCtx { direction: 'left' | 'right'; }
export interface NgbCarouselCtx { direction: 'start' | 'end'; }

const isBeingAnimated = ({classList}: HTMLElement) => {
return classList.contains('carousel-item-left') || classList.contains('carousel-item-right');
return classList.contains('carousel-item-start') || classList.contains('carousel-item-end');
};

const removeDirectionClasses = (classList: DOMTokenList) => {
classList.remove('carousel-item-left');
classList.remove('carousel-item-right');
classList.remove('carousel-item-start');
classList.remove('carousel-item-end');
};

const removeClasses = (classList: DOMTokenList) => {
Expand All @@ -42,7 +42,7 @@ export const ngbCarouselTransitionIn: NgbTransitionStartFn<NgbCarouselCtx> =
removeDirectionClasses(classList);
} else {
// For the 'in' transition, a 'pre-class' is applied to the element to ensure its visibility
classList.add('carousel-item-' + (direction === NgbSlideEventDirection.LEFT ? 'next' : 'prev'));
classList.add('carousel-item-' + (direction === NgbSlideEventDirection.START ? 'next' : 'prev'));
reflow(element);
classList.add('carousel-item-' + direction);
}
Expand Down
52 changes: 26 additions & 26 deletions src/carousel/carousel.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,23 +380,23 @@ describe('ngb-carousel', () => {
indicatorElms[1].click();
fixture.detectChanges();
expect(fixture.componentInstance.carouselSlideCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.LEFT,
direction: NgbSlideEventDirection.START,
source: NgbSlideEventSource.INDICATOR
}));

spyCallBack.calls.reset();
indicatorElms[0].click();
fixture.detectChanges();
expect(fixture.componentInstance.carouselSlideCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.RIGHT,
direction: NgbSlideEventDirection.END,
source: NgbSlideEventSource.INDICATOR,
}));

spyCallBack.calls.reset();
indicatorElms[2].click();
fixture.detectChanges();
expect(fixture.componentInstance.carouselSlideCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.LEFT,
direction: NgbSlideEventDirection.START,
source: NgbSlideEventSource.INDICATOR
}));

Expand Down Expand Up @@ -446,38 +446,38 @@ describe('ngb-carousel', () => {
prevControlElm.click();
fixture.detectChanges();
expect(fixture.componentInstance.carouselSlideCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.RIGHT,
direction: NgbSlideEventDirection.END,
source: NgbSlideEventSource.ARROW_LEFT
}));
expect(spySingleCallBack.calls.allArgs()).toEqual([
[{isShown: false, direction: NgbSlideEventDirection.RIGHT, source: NgbSlideEventSource.ARROW_LEFT}, 'foo'],
[{isShown: true, direction: NgbSlideEventDirection.RIGHT, source: NgbSlideEventSource.ARROW_LEFT}, 'bar'],
[{isShown: false, direction: NgbSlideEventDirection.END, source: NgbSlideEventSource.ARROW_LEFT}, 'foo'],
[{isShown: true, direction: NgbSlideEventDirection.END, source: NgbSlideEventSource.ARROW_LEFT}, 'bar'],
]);

spyCallBack.calls.reset();
spySingleCallBack.calls.reset();
nextControlElm.click();
fixture.detectChanges();
expect(fixture.componentInstance.carouselSlideCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.LEFT,
direction: NgbSlideEventDirection.START,
source: NgbSlideEventSource.ARROW_RIGHT
}));
expect(spySingleCallBack.calls.allArgs()).toEqual([
[{isShown: false, direction: NgbSlideEventDirection.LEFT, source: NgbSlideEventSource.ARROW_RIGHT}, 'bar'],
[{isShown: true, direction: NgbSlideEventDirection.LEFT, source: NgbSlideEventSource.ARROW_RIGHT}, 'foo'],
[{isShown: false, direction: NgbSlideEventDirection.START, source: NgbSlideEventSource.ARROW_RIGHT}, 'bar'],
[{isShown: true, direction: NgbSlideEventDirection.START, source: NgbSlideEventSource.ARROW_RIGHT}, 'foo'],
]);

spyCallBack.calls.reset();
spySingleCallBack.calls.reset();
prevControlElm.click();
fixture.detectChanges();
expect(fixture.componentInstance.carouselSlideCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.RIGHT,
direction: NgbSlideEventDirection.END,
source: NgbSlideEventSource.ARROW_LEFT
}));
expect(spySingleCallBack.calls.allArgs()).toEqual([
[{isShown: false, direction: NgbSlideEventDirection.RIGHT, source: NgbSlideEventSource.ARROW_LEFT}, 'foo'],
[{isShown: true, direction: NgbSlideEventDirection.RIGHT, source: NgbSlideEventSource.ARROW_LEFT}, 'bar'],
[{isShown: false, direction: NgbSlideEventDirection.END, source: NgbSlideEventSource.ARROW_LEFT}, 'foo'],
[{isShown: true, direction: NgbSlideEventDirection.END, source: NgbSlideEventSource.ARROW_LEFT}, 'bar'],
]);

discardPeriodicTasks();
Expand Down Expand Up @@ -522,7 +522,7 @@ describe('ngb-carousel', () => {
fixture.detectChanges();
expectActiveSlides(fixture.nativeElement, [false, true]);
expect(spyCallBack).toHaveBeenCalledWith(jasmine.objectContaining({
direction: NgbSlideEventDirection.LEFT,
direction: NgbSlideEventDirection.START,
source: NgbSlideEventSource.TIMER
}));

Expand Down Expand Up @@ -787,7 +787,7 @@ describe('ngb-carousel', () => {
discardPeriodicTasks();
}));

it('should change on key arrowRight and arrowLeft', fakeAsync(() => {
it('should change on key arrowRight and arrowstart', fakeAsync(() => {
const html = `
<ngb-carousel [keyboard]="keyboard" [wrap]="false">
<ng-template ngbSlide>foo</ng-template>
Expand Down Expand Up @@ -990,7 +990,7 @@ if (isBrowserVisible('ngb-carousel animations')) {
expect(slideOne.className).toBe('carousel-item');
expect(slideTwo.className).toBe('carousel-item active');

expect(payload).toEqual({prev: 'one', current: 'two', direction: 'left', paused: false, source: 'indicator'});
expect(payload).toEqual({prev: 'one', current: 'two', direction: 'start', paused: false, source: 'indicator'});
expect(onSlidSpy).toHaveBeenCalledTimes(1);
done();
});
Expand All @@ -1001,8 +1001,8 @@ if (isBrowserVisible('ngb-carousel animations')) {
indicators[1].click();
fixture.detectChanges();

expect(slideOne.className).toBe('carousel-item active carousel-item-left');
expect(slideTwo.className).toBe('carousel-item carousel-item-next carousel-item-left');
expect(slideOne.className).toBe('carousel-item active carousel-item-start');
expect(slideTwo.className).toBe('carousel-item carousel-item-next carousel-item-start');
});

it(`should run slide transition (force-reduced-motion = true)`, () => {
Expand All @@ -1027,7 +1027,7 @@ if (isBrowserVisible('ngb-carousel animations')) {
expect(slideTwo.className).toBe('carousel-item active');

expect(onSlidSpy).toHaveBeenCalledWith(
{prev: 'one', current: 'two', direction: 'left', paused: false, source: 'indicator'});
{prev: 'one', current: 'two', direction: 'start', paused: false, source: 'indicator'});
expect(onSlidSpy).toHaveBeenCalledTimes(1);
});

Expand All @@ -1046,7 +1046,7 @@ if (isBrowserVisible('ngb-carousel animations')) {
expect(slideTwo.className).toBe('carousel-item');
expect(slideThree.className).toBe('carousel-item');

expect(payload).toEqual({prev: 'two', current: 'one', direction: 'right', paused: false, source: 'indicator'});
expect(payload).toEqual({prev: 'two', current: 'one', direction: 'end', paused: false, source: 'indicator'});
expect(onSlidSpy).toHaveBeenCalledTimes(1);

done();
Expand All @@ -1058,16 +1058,16 @@ if (isBrowserVisible('ngb-carousel animations')) {
indicators[1].click();
fixture.detectChanges();

expect(slideOne.className).toBe('carousel-item active carousel-item-left');
expect(slideTwo.className).toBe('carousel-item carousel-item-next carousel-item-left');
expect(slideOne.className).toBe('carousel-item active carousel-item-start');
expect(slideTwo.className).toBe('carousel-item carousel-item-next carousel-item-start');
expect(slideThree.className).toBe('carousel-item');

// Reverse only possible when clicking on previous one
indicators[2].click();
fixture.detectChanges();

expect(slideOne.className).toBe('carousel-item active carousel-item-left');
expect(slideTwo.className).toBe('carousel-item carousel-item-next carousel-item-left');
expect(slideOne.className).toBe('carousel-item active carousel-item-start');
expect(slideTwo.className).toBe('carousel-item carousel-item-next carousel-item-start');
expect(slideThree.className).toBe('carousel-item');

// Reverse
Expand Down Expand Up @@ -1117,9 +1117,9 @@ if (isBrowserVisible('ngb-carousel animations')) {
expect(slideThree.className).toBe('carousel-item');

expect(onSlidSpy.calls.allArgs()).toEqual([
[{prev: 'one', current: 'two', direction: 'left', paused: false, source: 'indicator'}],
[{prev: 'two', current: 'three', direction: 'left', paused: false, source: 'indicator'}],
[{prev: 'three', current: 'one', direction: 'right', paused: false, source: 'indicator'}],
[{prev: 'one', current: 'two', direction: 'start', paused: false, source: 'indicator'}],
[{prev: 'two', current: 'three', direction: 'start', paused: false, source: 'indicator'}],
[{prev: 'three', current: 'one', direction: 'end', paused: false, source: 'indicator'}],
]);

expect(onSlidSpy).toHaveBeenCalledTimes(3);
Expand Down
12 changes: 6 additions & 6 deletions src/carousel/carousel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,14 +329,14 @@ export class NgbCarousel implements AfterContentChecked,
* Navigates to the previous slide.
*/
prev(source?: NgbSlideEventSource) {
this._cycleToSelected(this._getPrevSlide(this.activeId), NgbSlideEventDirection.RIGHT, source);
this._cycleToSelected(this._getPrevSlide(this.activeId), NgbSlideEventDirection.END, source);
}

/**
* Navigates to the next slide.
*/
next(source?: NgbSlideEventSource) {
this._cycleToSelected(this._getNextSlide(this.activeId), NgbSlideEventDirection.LEFT, source);
this._cycleToSelected(this._getNextSlide(this.activeId), NgbSlideEventDirection.START, source);
}

/**
Expand All @@ -345,7 +345,7 @@ export class NgbCarousel implements AfterContentChecked,
pause() { this._pause$.next(true); }

/**
* Restarts cycling through the slides from left to right.
* Restarts cycling through the slides from start to end.
*/
cycle() { this._pause$.next(false); }

Expand Down Expand Up @@ -405,7 +405,7 @@ export class NgbCarousel implements AfterContentChecked,
const currentActiveSlideIdx = this._getSlideIdxById(currentActiveSlideId);
const nextActiveSlideIdx = this._getSlideIdxById(nextActiveSlideId);

return currentActiveSlideIdx > nextActiveSlideIdx ? NgbSlideEventDirection.RIGHT : NgbSlideEventDirection.LEFT;
return currentActiveSlideIdx > nextActiveSlideIdx ? NgbSlideEventDirection.END : NgbSlideEventDirection.START;
}

private _getSlideById(slideId: string): NgbSlide | null {
Expand Down Expand Up @@ -457,7 +457,7 @@ export interface NgbSlideEvent {
/**
* The slide event direction.
*
* Possible values are `'left' | 'right'`.
* Possible values are `'start' | 'end'`.
*/
direction: NgbSlideEventDirection;

Expand Down Expand Up @@ -492,7 +492,7 @@ export interface NgbSingleSlideEvent {
/**
* The slide event direction.
*
* Possible values are `'left' | 'right'`.
* Possible values are `'start' | 'end'`.
*/
direction: NgbSlideEventDirection;

Expand Down

0 comments on commit bebd9ab

Please sign in to comment.