Skip to content

Commit

Permalink
fix(module: carousel): fix set Carousel component selectedIndex inval…
Browse files Browse the repository at this point in the history 
…id. (#269)
  • Loading branch information
@Guoyuanqiang @fisherspy
Guoyuanqiang authored and fisherspy committed Jan 29, 2019
1 parent 2a579a2 commit 55ae6d2
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 31 deletions.
1 change: 1 addition & 0 deletions components/carousel/carousel.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ describe('CarouselComponent', () => {
[infinite]="true"
[vertical]="true"
[dragging]="dragging"
[selectedIndex]="1"
(beforeChange)="beforeChange($event)"
(afterChange)="afterChange($event)"
>
Expand Down
69 changes: 40 additions & 29 deletions components/carousel/carousel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
private _spaceWidth: number = 0;
private _observer: MutationObserver;
private _shouldDragging: boolean = true;
private _currentSelectedIndex: number = 0;
private _selectedIndex: number = 0;

@ContentChildren(CarouselSlideComponent)
items: QueryList<CarouselSlideComponent>;

@Input()
speed: number = 500;
@Input()
selectedIndex: number = 0;
@Input()
dots: boolean = true;
@Input()
vertical: boolean = false;
Expand All @@ -73,6 +73,16 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
swipeSpeed: number = 12;
@Input()
dragging: boolean = true;
@Input()
get selectedIndex() {
return this._selectedIndex;
}
set selectedIndex(value) {
this._selectedIndex = value;
if (this._nodeArr.length > 0) {
this.carousel(1);
}
}
@Output()
afterChange: EventEmitter<any> = new EventEmitter();
@Output()
Expand All @@ -99,11 +109,12 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
};
}


@HostListener('mousemove', ['$event'])
@HostListener('touchmove', ['$event'])
panmove(event) {
event.stopPropagation();
if (!this.dragging && !this._isMouseDown) {
if (!this.dragging || !this._isMouseDown) {
return;
}
const { direction } = this.swipeDirection(
Expand All @@ -113,14 +124,10 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
touchEvent.getEventTarget(event).pageY
);

if (direction !== 0) {
event.preventDefault();
}

const length = this.vertical
? Math.abs(touchEvent.getEventTarget(event).pageY - this.touchObject.startY)
: Math.abs(touchEvent.getEventTarget(event).pageX - this.touchObject.startX);
const offset = -this.touchObject.direction * length - this.selectedIndex * this._rationWidth;
const offset = -this.touchObject.direction * length - this._currentSelectedIndex * this._rationWidth;
this.touchObject = {
startX: this.touchObject.startX,
startY: this.touchObject.startY,
Expand All @@ -131,7 +138,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
offset
};
if (direction !== 0) {
this.setSlideStyles(this.selectedIndex, this.touchObject.direction);
this.setSlideStyles(this._currentSelectedIndex, this.touchObject.direction);
}

this.getListStyles(offset);
Expand All @@ -142,7 +149,8 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
@HostListener('touchend', ['$event'])
panend(event) {
event.stopPropagation();
if (!this.dragging && !this._isMouseDown) {
if (!this.dragging || !this._isMouseDown || !this.touchObject.length || this.touchObject.length === undefined) {
this._isMouseDown = false;
return;
}
this._isMouseDown = false;
Expand Down Expand Up @@ -255,7 +263,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
getAfterNode(pre) {
let nextIndex;
if (pre) {
if (this.selectedIndex <= 0) {
if (this._currentSelectedIndex <= 0) {
this.getListStyles(this._rationWidth);
setTimeout(() => {
this._nodeArr.forEach((v, tempIndex) => {
Expand All @@ -270,46 +278,46 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
this.getListStyles(-this._rationWidth * (this.items.length - 1));
}, this.speed);
nextIndex = !this.infinite ? null : this._lastIndex;
this.beforeChange.emit({ from: this.selectedIndex, to: nextIndex });
this.beforeChange.emit({ from: this._currentSelectedIndex, to: nextIndex });
return nextIndex;
}
nextIndex = this.selectedIndex - 1;
nextIndex = this._currentSelectedIndex - 1;
this.getListStyles(nextIndex * this._rationWidth * this.touchObject.direction);
this._nodeArr.forEach((v, tempIndex) => {
if (0 === tempIndex && nextIndex === this._nodeArr.length - 2) {
v.left = 0;
v.top = 0;
}
});
this.beforeChange.emit({ from: this.selectedIndex, to: nextIndex });
this.beforeChange.emit({ from: this._currentSelectedIndex, to: nextIndex });
return nextIndex;
} else {
if (this.selectedIndex >= this._lastIndex) {
this.setSlideStyles(this.selectedIndex, 1);
if (this._currentSelectedIndex >= this._lastIndex) {
this.setSlideStyles(this._currentSelectedIndex, 1);
this.getListStyles(-(this._lastIndex + 1) * this._rationWidth);
nextIndex = !this.infinite ? null : 0;
this.beforeChange.emit({ from: this.selectedIndex, to: nextIndex });
this.beforeChange.emit({ from: this._currentSelectedIndex, to: nextIndex });
return nextIndex;
}
nextIndex = this.selectedIndex + 1;
this.setSlideStyles(this.selectedIndex, 1);
nextIndex = this._currentSelectedIndex + 1;
this.setSlideStyles(this._currentSelectedIndex, 1);
this.getListStyles(-nextIndex * this._rationWidth);
this.beforeChange.emit({ from: this.selectedIndex, to: nextIndex });
this.beforeChange.emit({ from: this._currentSelectedIndex, to: nextIndex });
return nextIndex;
}
}

caculateDirectionLeftCurrentIndex() {
const previousIndex = this.selectedIndex;
this.selectedIndex = (previousIndex + 1) % this.items.length;
const previousIndex = this._currentSelectedIndex;
this._currentSelectedIndex = (previousIndex + 1) % this.items.length;
}

caculateDirectionRightCurrentIndex() {
if (this.selectedIndex === 0) {
this.selectedIndex = this.items.length;
if (this._currentSelectedIndex === 0) {
this._currentSelectedIndex = this.items.length;
}
const previousIndex = this.selectedIndex;
this.selectedIndex = (previousIndex - 1) % this.items.length;
const previousIndex = this._currentSelectedIndex;
this._currentSelectedIndex = (previousIndex - 1) % this.items.length;
}

gotoCarousel(afterIndex) {
Expand All @@ -333,8 +341,8 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
this.getListStyles(0);
}, this.speed);
}
this.selectedIndex = afterIndex;
this.afterChange.emit(this.selectedIndex);
this._currentSelectedIndex = afterIndex;
this.afterChange.emit(this._currentSelectedIndex);
}

getCurrentIndex() {
Expand Down Expand Up @@ -449,7 +457,7 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
}

get page() {
return this.dots ? this.selectedIndex : 0;
return this.dots ? this._currentSelectedIndex : 0;
}

get pageCount() {
Expand All @@ -468,6 +476,9 @@ export class CarouselComponent implements AfterViewInit, OnDestroy {
});
this.initCarouselSize();
const index = this.items.length > 1 ? this.selectedIndex : 0;
setTimeout(() => {
this._currentSelectedIndex = index;
}, 0);
this.getListStyles(-index * this._rationWidth);
this.carouselInit(this.items);
const nativeElement = this._ele.nativeElement;
Expand Down
2 changes: 1 addition & 1 deletion components/carousel/demo/basic-dynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Component } from '@angular/core';
>
<CarouselSlide *ngFor="let item of state.data;let i = index" [ngStyle]="{'height': state.imgHeight}">
<div style="display: inline-block; width: 100%;" [ngStyle]="{'height': state.imgHeight}">
<img src="https://zos.alipayobjects.com/rmsportal/{{item}}.png" style="width: 100%;"/>
<img src="https://zos.alipayobjects.com/rmsportal/{{item}}.png" style="pointer-events: none; width: 100%;"/>
</div>
</CarouselSlide>
</Carousel>
Expand Down
2 changes: 1 addition & 1 deletion components/carousel/demo/basic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Component } from '@angular/core';
>
<CarouselSlide *ngFor="let item of state.data">
<div style="display: inline-block; width: 100%;" [ngStyle]="{'height': state.imgHeight}">
<img src="https://zos.alipayobjects.com/rmsportal/{{item}}.png" style="width: 100%;"/>
<img src="https://zos.alipayobjects.com/rmsportal/{{item}}.png" style=" pointer-events: none; width: 100%;"/>
</div>
</CarouselSlide>
</Carousel>
Expand Down

1 comment on commit 55ae6d2

@Guoyuanqiang
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

close #265

Please sign in to comment.