d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ChangeDetectorRef, QueryList, Renderer2 } from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { Observable, Subject } from 'rxjs';
import { ThyCarouselComponent } from '../carousel.component';
import { ThyDistanceVector } from '../typings';
import { ThyCarouselItemDirective } from '../carousel-item.directive';
import { ThyCarouselBaseEngine } from '../engine/carousel-base';

export class ThyCarouselSlideEngine extends ThyCarouselBaseEngine {
    constructor(thyCarouselComponent: ThyCarouselComponent, cdr: ChangeDetectorRef, renderer: Renderer2, platform: Platform) {
        super(thyCarouselComponent, cdr, renderer, platform);
    }

    private prepareHorizontalContext(activeIndex: number): void {
        if (activeIndex >= this.maxIndex) {
            this.renderer.setStyle(this.firstEl, 'left', `${this.length * this.contentWidth}px`);
            this.renderer.setStyle(this.lastEl, 'left', null);
        } else if (activeIndex <= 0) {
            this.renderer.setStyle(this.firstEl, 'left', null);
            this.renderer.setStyle(this.lastEl, 'left', `${-this.length * this.contentWidth}px`);
        } else {
            this.resetContext();
        }
    }

    private resetContext() {
        this.renderer.setStyle(this.lastEl, 'left', null);
        this.renderer.setStyle(this.firstEl, 'left', null);
    }

    initializeCarouselContents(contents: QueryList<ThyCarouselItemDirective> | null): void {
        this.initializeContents(contents);
    }

    dragging(pointerVector: ThyDistanceVector, rect: DOMRect): void {
        const { x } = pointerVector;
        const { width, height } = rect;
        this.contentWidth = width;
        this.contentHeight = height;
        const activeIndex = this.carouselComponent!.activeIndex;
        if (this.length > 1) {
            this.prepareHorizontalContext(activeIndex);
        }
        this.renderer.setStyle(this.wrapperEl, 'transform', `translate3d(${-activeIndex * this.contentWidth + x}px,0 , 0)`);
    }

    switch(to: number, from: number): Observable<void> {
        const switch$ = new Subject<void>();
        if (Math.abs(from - to) === 1 || from === to) {
            this.prepareHorizontalContext(to);
        }
        this.renderer.setStyle(this.wrapperEl, `transition-duration`, `${this.playTime}ms`);
        this.renderer.setStyle(this.wrapperEl, `transform`, `translate3d(${-to * this.contentWidth}px,0 , 0)`);
        setTimeout(() => {
            switch$.next();
        }, 0);
        setTimeout(() => {
            this.resetContext();
            this.renderer.setStyle(this.wrapperEl, `transition-duration`, `0s`);
            this.renderer.setStyle(
                this.wrapperEl,
                `transform`,
                `translate3d(${-((to + this.length) % this.length) * this.contentWidth}px,0 , 0)`
            );
            switch$.complete();
        }, this.playTime);
        return switch$.asObservable();
    }

    correctionOffset(): void {
        super.correctionOffset();
        const { activeIndex } = this.carouselComponent!;
        this.renderer.setStyle(this.wrapperEl, `transform`, `translate3d(${-activeIndex * this.contentWidth}px,0 , 0)`);
    }
}

1	import { ChangeDetectorRef, QueryList, Renderer2 } from '@angular/core';
2	import { Platform } from '@angular/cdk/platform';
3	import { Observable, Subject } from 'rxjs';
4	import { ThyCarouselComponent } from '../carousel.component';
5	import { ThyDistanceVector } from '../typings';	×
6	import { ThyCarouselItemDirective } from '../carousel-item.directive';
7	import { ThyCarouselBaseEngine } from '../engine/carousel-base';
8		×
9	export class ThyCarouselSlideEngine extends ThyCarouselBaseEngine {	×
10	constructor(thyCarouselComponent: ThyCarouselComponent, cdr: ChangeDetectorRef, renderer: Renderer2, platform: Platform) {	×
11	super(thyCarouselComponent, cdr, renderer, platform);
12	}	×
13		×
14	private prepareHorizontalContext(activeIndex: number): void {	×
15	if (activeIndex >= this.maxIndex) {
16	this.renderer.setStyle(this.firstEl, 'left', `${this.length * this.contentWidth}px`);
17	this.renderer.setStyle(this.lastEl, 'left', null);	×
18	} else if (activeIndex <= 0) {
19	this.renderer.setStyle(this.firstEl, 'left', null);
20	this.renderer.setStyle(this.lastEl, 'left', `${-this.length * this.contentWidth}px`);
21	} else {	×
22	this.resetContext();	×
23	}
24	}
25		×
26	private resetContext() {
27	this.renderer.setStyle(this.lastEl, 'left', null);
28	this.renderer.setStyle(this.firstEl, 'left', null);	×
29	}	×
30		×
31	initializeCarouselContents(contents: QueryList<ThyCarouselItemDirective> \| null): void {	×
32	this.initializeContents(contents);	×
33	}	×
34		×
35	dragging(pointerVector: ThyDistanceVector, rect: DOMRect): void {
36	const { x } = pointerVector;	×
37	const { width, height } = rect;
38	this.contentWidth = width;
39	this.contentHeight = height;	×
40	const activeIndex = this.carouselComponent!.activeIndex;	×
41	if (this.length > 1) {	×
42	this.prepareHorizontalContext(activeIndex);
43	}	×
44	this.renderer.setStyle(this.wrapperEl, 'transform', `translate3d(${-activeIndex * this.contentWidth + x}px,0 , 0)`);	×
45	}	×
46		×
47	switch(to: number, from: number): Observable<void> {
48	const switch$ = new Subject<void>();	×
49	if (Math.abs(from - to) === 1 \|\| from === to) {	×
50	this.prepareHorizontalContext(to);	×
51	}	×
52	this.renderer.setStyle(this.wrapperEl, `transition-duration`, `${this.playTime}ms`);	×
53	this.renderer.setStyle(this.wrapperEl, `transform`, `translate3d(${-to * this.contentWidth}px,0 , 0)`);
54	setTimeout(() => {	×
55	switch$.next();
56	}, 0);
57	setTimeout(() => {	×
58	this.resetContext();	×
59	this.renderer.setStyle(this.wrapperEl, `transition-duration`, `0s`);	×
60	this.renderer.setStyle(
61	this.wrapperEl,
62	`transform`,
63	`translate3d(${-((to + this.length) % this.length) * this.contentWidth}px,0 , 0)`
64	);
65	switch$.complete();
66	}, this.playTime);
67	return switch$.asObservable();
68	}
69
70	correctionOffset(): void {
71	super.correctionOffset();
72	const { activeIndex } = this.carouselComponent!;
73	this.renderer.setStyle(this.wrapperEl, `transform`, `translate3d(${-activeIndex * this.contentWidth}px,0 , 0)`);
74	}
75	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous