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 ThyCarouselFadeEngine extends ThyCarouselBaseEngine {
    contentsEl: HTMLElement[];
    constructor(thyCarouselComponent: ThyCarouselComponent, cdr: ChangeDetectorRef, renderer: Renderer2, platform: Platform) {
        super(thyCarouselComponent, cdr, renderer, platform);
    }

    dragging(pointerVector: ThyDistanceVector, rect: DOMRect): void {
        const { x } = pointerVector;
        const { width } = rect;
        const activeIndex = this.carouselComponent!.activeIndex;
        const currentContent = this.contentsEl[activeIndex];
        this.renderer.setStyle(currentContent, 'opacity', `${1 - Math.abs(x) / width}`);
    }

    initializeCarouselContents(contents: QueryList<ThyCarouselItemDirective> | null): void {
        this.initializeContents(contents);
        this.contentsEl = [];
        contents.forEach((content, index) => {
            this.contentsEl.push(content.el);
            this.renderer.setStyle(content.el, 'opacity', this.carouselComponent!.activeIndex === index ? '1' : '0');
            this.renderer.setStyle(content.el, 'position', 'absolute');
            this.renderer.setStyle(content.el, 'left', '0');
            this.renderer.setStyle(content.el, `transition-property`, 'opacity');
            this.renderer.setStyle(content.el, `transition-timing-function`, 'ease');
        });
    }

    switch(to: number, from: number): Observable<void> {
        const switch$ = new Subject<void>();
        const currentEl = this.contentsEl[from];
        const nextEl = this.contentsEl[(to + this.length) % this.length];
        this.renderer.setStyle(currentEl, `transition-duration`, `${this.playTime}ms`);
        this.renderer.setStyle(nextEl, `transition-duration`, `${this.playTime}ms`);
        this.renderer.setStyle(currentEl, 'opacity', '0');
        this.renderer.setStyle(nextEl, 'opacity', '1');
        setTimeout(() => {
            switch$.next();
        }, 0);
        setTimeout(() => {
            this.renderer.setStyle(currentEl, `transition-duration`, `0s`);
            this.renderer.setStyle(nextEl, `transition-duration`, `0s`);
            switch$.complete();
        }, this.playTime);
        return switch$.asObservable();
    }

    correctionOffset(): void {}
}

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 ThyCarouselFadeEngine extends ThyCarouselBaseEngine {	×
10	contentsEl: HTMLElement[];	×
11	constructor(thyCarouselComponent: ThyCarouselComponent, cdr: ChangeDetectorRef, renderer: Renderer2, platform: Platform) {	×
12	super(thyCarouselComponent, cdr, renderer, platform);	×
13	}
14
15	dragging(pointerVector: ThyDistanceVector, rect: DOMRect): void {	×
16	const { x } = pointerVector;	×
17	const { width } = rect;	×
18	const activeIndex = this.carouselComponent!.activeIndex;	×
19	const currentContent = this.contentsEl[activeIndex];	×
20	this.renderer.setStyle(currentContent, 'opacity', `${1 - Math.abs(x) / width}`);	×
21	}	×
22		×
23	initializeCarouselContents(contents: QueryList<ThyCarouselItemDirective> \| null): void {	×
24	this.initializeContents(contents);
25	this.contentsEl = [];
26	contents.forEach((content, index) => {
27	this.contentsEl.push(content.el);	×
28	this.renderer.setStyle(content.el, 'opacity', this.carouselComponent!.activeIndex === index ? '1' : '0');	×
29	this.renderer.setStyle(content.el, 'position', 'absolute');	×
30	this.renderer.setStyle(content.el, 'left', '0');	×
31	this.renderer.setStyle(content.el, `transition-property`, 'opacity');	×
32	this.renderer.setStyle(content.el, `transition-timing-function`, 'ease');	×
33	});	×
34	}	×
35		×
36	switch(to: number, from: number): Observable<void> {
37	const switch$ = new Subject<void>();	×
38	const currentEl = this.contentsEl[from];	×
39	const nextEl = this.contentsEl[(to + this.length) % this.length];	×
40	this.renderer.setStyle(currentEl, `transition-duration`, `${this.playTime}ms`);	×
41	this.renderer.setStyle(nextEl, `transition-duration`, `${this.playTime}ms`);
42	this.renderer.setStyle(currentEl, 'opacity', '0');	×
43	this.renderer.setStyle(nextEl, 'opacity', '1');
44	setTimeout(() => {
45	switch$.next();
46	}, 0);
47	setTimeout(() => {
48	this.renderer.setStyle(currentEl, `transition-duration`, `0s`);
49	this.renderer.setStyle(nextEl, `transition-duration`, `0s`);
50	switch$.complete();
51	}, this.playTime);
52	return switch$.asObservable();
53	}
54
55	correctionOffset(): void {}
56	}

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