1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
|
{"version":3,"file":"primeng-animateonscroll.mjs","sources":["../../src/app/components/animateonscroll/animateonscroll.ts","../../src/app/components/animateonscroll/primeng-animateonscroll.ts"],"sourcesContent":["import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID, booleanAttribute, numberAttribute } from '@angular/core';\nimport { DomHandler } from 'primeng/dom';\n\ninterface AnimateOnScrollOptions {\n root?: HTMLElement;\n rootMargin?: string;\n threshold?: number;\n}\n\n/**\n * AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.\n * @group Components\n */\n@Directive({\n selector: '[pAnimateOnScroll]',\n host: {\n '[class.p-animateonscroll]': 'true'\n }\n})\nexport class AnimateOnScroll implements OnInit, AfterViewInit {\n /**\n * Selector to define the CSS class for enter animation.\n * @group Props\n */\n @Input() enterClass: string | undefined;\n /**\n * Selector to define the CSS class for leave animation.\n * @group Props\n */\n @Input() leaveClass: string | undefined;\n /**\n * Specifies the root option of the IntersectionObserver API.\n * @group Props\n */\n @Input() root: HTMLElement | undefined | null;\n /**\n * Specifies the rootMargin option of the IntersectionObserver API.\n * @group Props\n */\n @Input() rootMargin: string | undefined;\n /**\n * Specifies the threshold option of the IntersectionObserver API\n * @group Props\n */\n @Input({ transform: numberAttribute }) threshold: number | undefined;\n /**\n * Whether the scroll event listener should be removed after initial run.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) once: boolean = true;\n\n observer: IntersectionObserver | undefined;\n\n resetObserver: any;\n\n isObserverActive: boolean = false;\n\n animationState: any;\n\n animationEndListener: VoidFunction | undefined;\n\n constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {}\n\n ngOnInit() {\n if (isPlatformBrowser(this.platformId)) {\n this.renderer.setStyle(this.host.nativeElement, 'opacity', this.enterClass ? '0' : '');\n }\n }\n\n ngAfterViewInit() {\n if (isPlatformBrowser(this.platformId)) {\n this.bindIntersectionObserver();\n }\n }\n\n get options(): AnimateOnScrollOptions {\n return {\n root: this.root,\n rootMargin: this.rootMargin,\n threshold: this.threshold\n };\n }\n\n bindIntersectionObserver() {\n this.observer = new IntersectionObserver(([entry]) => {\n if (this.isObserverActive) {\n if (entry.boundingClientRect.top > 0) {\n entry.isIntersecting ? this.enter() : this.leave();\n }\n } else if (entry.isIntersecting) {\n this.enter();\n }\n\n this.isObserverActive = true;\n }, this.options);\n\n setTimeout(() => this.observer.observe(this.host.nativeElement), 0);\n\n // Reset\n\n this.resetObserver = new IntersectionObserver(\n ([entry]) => {\n if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) {\n this.host.nativeElement.style.opacity = this.enterClass ? '0' : '';\n DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]);\n\n this.resetObserver.unobserve(this.host.nativeElement);\n }\n\n this.animationState = undefined;\n },\n { ...this.options, threshold: 0 }\n );\n }\n\n enter() {\n if (this.animationState !== 'enter' && this.enterClass) {\
|