ngx-acuw
Version:
Angular components using WEBGL (threejs)
103 lines (102 loc) • 4.01 kB
TypeScript
import { AnimationBuilder } from '@angular/animations';
import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, QueryList, SimpleChanges } from '@angular/core';
import { PerformanceMonitorComponent } from '../performance-monitor/performance-monitor.component';
import * as i0 from "@angular/core";
export declare class CarouselItem {
private el;
htmlElement: HTMLElement;
constructor(el: ElementRef);
static ɵfac: i0.ɵɵFactoryDeclaration<CarouselItem, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<CarouselItem, "acuw-carousel-item", never, {}, {}, never>;
}
export declare class CarouselComponent implements AfterViewInit, OnDestroy, OnChanges {
private ngZone;
private animationBuilder;
showDots: boolean;
dotColor: string;
activeDotColor: string;
dotAnimationCircleColor: string;
activeCarouselElement: number;
initAnimation: boolean;
radius: number;
yPosition: number;
cameraFov: number;
cameraDistance: number;
autoPlay: boolean;
autoPlayInterval: number;
rotationDuration: number;
showPerformanceMonitor: boolean;
activeElementChanged: EventEmitter<number>;
threejsContainer: ElementRef;
dots: ElementRef;
performanceMonitor: PerformanceMonitorComponent;
carouselItemTemplates: QueryList<CarouselItem>;
private animationFrameId;
private css3dRenderer;
private scene;
private camera;
private objectControls;
private carouselElements;
private carouselGroup;
private carouselObjSubsciptions;
private rotationSubscription;
private animation;
userMove: boolean;
private dotAnimationPlayer;
constructor(ngZone: NgZone, animationBuilder: AnimationBuilder);
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* Resizes the canvas and updates the texture resulution information of the images
*/
resize(): void;
/**
* Animation
*/
private animate;
/**
* starts the animation of the indication dots
* @param index index number for which dot the animation should be started
* @returns
*/
private startDotAnimation;
/**
* Resets the dot animation
*/
private resetDotAnimation;
/**
* Initialize the carousel objects
*/
private initCarouselObjects;
/**
* Rotate to next carousel item
* @returns Promise with the new active element number
*/
next(): Promise<number>;
/**
* Rotate to previous carousel item#
* @returns Promise with the new active element number
*/
previous(): Promise<number>;
/**
* Rotates to a sepcific carousel item
* @param targetIndex index of the carousel item
*/
rotateTo(targetIndex: number, skipAnimation?: boolean): Promise<number>;
/**
* things to do when rotation is completed
* @param targetIndex
*/
private rotationCompleted;
/**
* Updates and reinits the carousel items
*/
updateCarouselItems(): void;
/**
* Updates the radius of the carousel items
*/
private updateRadius;
static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "acuw-carousel", never, { "showDots": "showDots"; "dotColor": "dotColor"; "activeDotColor": "activeDotColor"; "dotAnimationCircleColor": "dotAnimationCircleColor"; "activeCarouselElement": "activeCarouselElement"; "initAnimation": "initAnimation"; "radius": "radius"; "yPosition": "yPosition"; "cameraFov": "cameraFov"; "cameraDistance": "cameraDistance"; "autoPlay": "autoPlay"; "autoPlayInterval": "autoPlayInterval"; "rotationDuration": "rotationDuration"; "showPerformanceMonitor": "showPerformanceMonitor"; }, { "activeElementChanged": "activeElementChanged"; }, ["carouselItemTemplates"], never>;
}