Skip to content

Commit

Permalink
Attempt to restore uiuniversal#458
Browse files Browse the repository at this point in the history
  • Loading branch information
@chivesrs
chivesrs committed Jun 9, 2023
1 parent 634001f commit 6c83cf5
Showing 1 changed file with 50 additions and 76 deletions.
126 changes: 50 additions & 76 deletions libs/ngu/carousel/src/lib/ngu-carousel/ngu-carousel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,7 @@ type DirectionSymbol = '' | '-';
// eslint-disable-next-line @angular-eslint/component-class-suffix
export class NguCarousel<T>
extends NguCarouselStore
implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, DoCheck
{
implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, DoCheck {
/** Public property that may be accessed outside of the component. */
activePoint = 0;

Expand Down Expand Up @@ -136,6 +135,8 @@ export class NguCarousel<T>

private _destroy$ = new Subject<void>();

private ngu_dirty: boolean = true;

/**
* Tracking function that will be used to check the differences in data changes. Used similarly
* to `ngFor` `trackBy` function. Optimize Items operations by identifying a Items based on its data
Expand Down Expand Up @@ -172,46 +173,32 @@ export class NguCarousel<T>
this._setupButtonListeners();
}

ngOnInit() {
this._dataDiffer = this._differs.find([]).create((_i: number, item: any) => {
return this.trackBy ? this.trackBy(_i, item) : item;
});
}

ngDoCheck() {
this._arrayChanges = this._dataDiffer.diff(this.dataSource)!;
if (this._arrayChanges && this._defDirectives) {
this._observeRenderChanges();
if (this.ngu_dirty) {
this.ngu_dirty = false;
const dataStream = this._dataSource;
if (!this._arrayChanges && !!dataStream) {
this._dataDiffer = this._differs
.find(dataStream)
.create((index: number, item: any) => (this.trackBy ? this.trackBy(index, item) : item))!;
}
}
if (this._dataDiffer && this._defDirectives) {
this._arrayChanges = this._dataDiffer.diff(this._dataSource)!;
if (this._arrayChanges) {
this.renderNodeChanges(Array.from(this._dataSource!));
}
}
}

private _switchDataSource(dataSource: any): any {
this._dataSource = dataSource;
if (this._defDirectives) {
this._observeRenderChanges();
}
}

private _observeRenderChanges() {
let dataStream: Observable<any[]> | undefined;

if (this._dataSource instanceof Observable) {
dataStream = this._dataSource;
} else if (Array.isArray(this._dataSource)) {
dataStream = of(this._dataSource);
}

dataStream
?.pipe(takeUntil(this._intervalController$), takeUntil(this._destroy$))
.subscribe(data => {
this.renderNodeChanges(data);
this.isLast = this._pointIndex === this.currentSlide;
});
this.ngu_dirty = true;
}

private renderNodeChanges(data: any[]) {
if (!this._arrayChanges) return;

this.isLast = this._pointIndex === this.currentSlide;
const viewContainer = this._nodeOutlet.viewContainer;

this._arrayChanges.forEachOperation(
Expand Down Expand Up @@ -286,8 +273,6 @@ export class NguCarousel<T>
}

ngAfterContentInit() {
this._observeRenderChanges();

this._cdr.markForCheck();
}

Expand Down Expand Up @@ -404,8 +389,8 @@ export class NguCarousel<T>
valt =
this.type === 'responsive'
? (Math.abs(ev - this.dexVal) /
(this.vertical.enabled ? this.vertical.height : this.carouselWidth)) *
100
(this.vertical.enabled ? this.vertical.height : this.carouselWidth)) *
100
: valt;
this.dexVal = ev;
this.touch.swipe = e;
Expand Down Expand Up @@ -460,12 +445,12 @@ export class NguCarousel<T>
this.deviceWidth >= breakpoints?.xl!
? 'xl'
: this.deviceWidth >= breakpoints?.lg!
? 'lg'
: this.deviceWidth >= breakpoints?.md!
? 'md'
: this.deviceWidth >= breakpoints?.sm!
? 'sm'
: 'xs';
? 'lg'
: this.deviceWidth >= breakpoints?.md!
? 'md'
: this.deviceWidth >= breakpoints?.sm!
? 'sm'
: 'xs';

this.items = this.inputs.grid[this.deviceType]!;
this.itemWidth = this.carouselWidth / this.items;
Expand Down Expand Up @@ -564,21 +549,16 @@ export class NguCarousel<T>

let itemStyle = '';
if (this.vertical.enabled) {
const itemWidthXS = `${this._styleid} > .item {height: ${
this.vertical.height / +this.inputs.grid.xs
}px}`;
const itemWidthSM = `${this._styleid} > .item {height: ${
this.vertical.height / +this.inputs.grid.sm
}px}`;
const itemWidthMD = `${this._styleid} > .item {height: ${
this.vertical.height / +this.inputs.grid.md
}px}`;
const itemWidthLG = `${this._styleid} > .item {height: ${
this.vertical.height / +this.inputs.grid.lg
}px}`;
const itemWidthXL = `${this._styleid} > .item {height: ${
this.vertical.height / +this.inputs.grid.xl!
}px}`;
const itemWidthXS = `${this._styleid} > .item {height: ${this.vertical.height / +this.inputs.grid.xs
}px}`;
const itemWidthSM = `${this._styleid} > .item {height: ${this.vertical.height / +this.inputs.grid.sm
}px}`;
const itemWidthMD = `${this._styleid} > .item {height: ${this.vertical.height / +this.inputs.grid.md
}px}`;
const itemWidthLG = `${this._styleid} > .item {height: ${this.vertical.height / +this.inputs.grid.lg
}px}`;
const itemWidthXL = `${this._styleid} > .item {height: ${this.vertical.height / +this.inputs.grid.xl!
}px}`;

itemStyle = `@media (max-width:${breakpoints?.sm! - 1}px){${itemWidthXS}}
@media (max-width:${breakpoints?.sm}px){${itemWidthSM}}
Expand All @@ -588,25 +568,19 @@ export class NguCarousel<T>
} else if (this.type === 'responsive') {
const itemWidthXS =
this.inputs.type === 'mobile'
? `${this._styleid} .item {flex: 0 0 ${95 / +this.inputs.grid.xs}%; width: ${
95 / +this.inputs.grid.xs
}%;}`
: `${this._styleid} .item {flex: 0 0 ${100 / +this.inputs.grid.xs}%; width: ${
100 / +this.inputs.grid.xs
}%;}`;

const itemWidthSM = `${this._styleid} > .item {flex: 0 0 ${
100 / +this.inputs.grid.sm
}%; width: ${100 / +this.inputs.grid.sm}%}`;
const itemWidthMD = `${this._styleid} > .item {flex: 0 0 ${
100 / +this.inputs.grid.md
}%; width: ${100 / +this.inputs.grid.md}%}`;
const itemWidthLG = `${this._styleid} > .item {flex: 0 0 ${
100 / +this.inputs.grid.lg
}%; width: ${100 / +this.inputs.grid.lg}%}`;
const itemWidthXL = `${this._styleid} > .item {flex: 0 0 ${
100 / +this.inputs.grid.xl!
}%; width: ${100 / +this.inputs.grid.xl!}%}`;
? `${this._styleid} .item {flex: 0 0 ${95 / +this.inputs.grid.xs}%; width: ${95 / +this.inputs.grid.xs
}%;}`
: `${this._styleid} .item {flex: 0 0 ${100 / +this.inputs.grid.xs}%; width: ${100 / +this.inputs.grid.xs
}%;}`;

const itemWidthSM = `${this._styleid} > .item {flex: 0 0 ${100 / +this.inputs.grid.sm
}%; width: ${100 / +this.inputs.grid.sm}%}`;
const itemWidthMD = `${this._styleid} > .item {flex: 0 0 ${100 / +this.inputs.grid.md
}%; width: ${100 / +this.inputs.grid.md}%}`;
const itemWidthLG = `${this._styleid} > .item {flex: 0 0 ${100 / +this.inputs.grid.lg
}%; width: ${100 / +this.inputs.grid.lg}%}`;
const itemWidthXL = `${this._styleid} > .item {flex: 0 0 ${100 / +this.inputs.grid.xl!
}%; width: ${100 / +this.inputs.grid.xl!}%}`;

itemStyle = `@media (max-width:${breakpoints?.sm! - 1}px){${itemWidthXS}}
@media (min-width:${breakpoints?.sm}px){${itemWidthSM}}
Expand Down

0 comments on commit 6c83cf5

Please sign in to comment.