From b2e34489c12bdc458489a3a8829a772da304871f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 30 Oct 2023 17:04:10 +0300 Subject: [PATCH 1/5] Fixed #13970 - Add pAnimateOnScroll directive --- .../animateonscroll/animateonscroll.ts | 168 +++++++++++++++ .../animateonscroll/ng-package.json | 6 + .../components/animateonscroll/public_api.ts | 1 + .../showcase/doc/animateonscroll/basicdoc.ts | 198 ++++++++++++++++++ .../showcase/doc/animateonscroll/importdoc.ts | 19 ++ src/app/showcase/doc/apidoc/index.json | 69 ++++++ src/app/showcase/layout/app-routing.module.ts | 2 +- .../animateonscrolldemo-routing.module.ts | 9 + .../pages/animate/animateonscrolldemo.html | 1 + .../animate/animateonscrolldemo.module.ts | 11 + .../pages/animate/animateonscrolldemo.ts | 27 +++ src/assets/showcase/data/menu.json | 4 +- 12 files changed, 512 insertions(+), 3 deletions(-) create mode 100644 src/app/components/animateonscroll/animateonscroll.ts create mode 100644 src/app/components/animateonscroll/ng-package.json create mode 100644 src/app/components/animateonscroll/public_api.ts create mode 100644 src/app/showcase/doc/animateonscroll/basicdoc.ts create mode 100644 src/app/showcase/doc/animateonscroll/importdoc.ts create mode 100755 src/app/showcase/pages/animate/animateonscrolldemo-routing.module.ts create mode 100755 src/app/showcase/pages/animate/animateonscrolldemo.html create mode 100755 src/app/showcase/pages/animate/animateonscrolldemo.module.ts create mode 100755 src/app/showcase/pages/animate/animateonscrolldemo.ts diff --git a/src/app/components/animateonscroll/animateonscroll.ts b/src/app/components/animateonscroll/animateonscroll.ts new file mode 100644 index 00000000000..2df209ae062 --- /dev/null +++ b/src/app/components/animateonscroll/animateonscroll.ts @@ -0,0 +1,168 @@ +import { CommonModule } from '@angular/common'; +import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit } from '@angular/core'; +import { DomHandler } from 'primeng/dom'; + +interface AnimateOnScrollOptions { + root?: HTMLElement; + rootMargin?: string; + threshold?: number; +} + +/** + * AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling. + * @group Components + */ +@Directive({ + selector: '[pAnimateOnScroll]', + host: { + '[class.p-animateonscroll]': 'true' + } +}) +export class AnimateOnScroll implements OnInit, AfterViewInit { + /** + * Selector to define the CSS class for enter animation. + * @group Props + */ + @Input() enterClass: string | undefined; + /** + * Selector to define the CSS class for leave animation. + * @group Props + */ + @Input() leaveClass: string | undefined; + /** + * Specifies the root option of the IntersectionObserver API. + * @group Props + */ + @Input() root: HTMLElement | undefined | null; + /** + * Specifies the rootMargin option of the IntersectionObserver API. + * @group Props + */ + @Input() rootMargin: string | undefined; + /** + * Specifies the threshold option of the IntersectionObserver API + * @group Props + */ + @Input() threshold: number | undefined; + /** + * Whether the scroll event listener should be removed after initial run. + * @group Props + */ + @Input() once: boolean = true; + + observer: IntersectionObserver | undefined; + + resetObserver: any; + + isObserverActive: boolean = false; + + animationState: any; + + animationEndListener: VoidFunction | undefined; + + constructor(private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {} + + ngOnInit() { + this.renderer.setStyle(this.host.nativeElement, 'opacity', this.enterClass ? '0' : ''); + } + + ngAfterViewInit() { + this.bindIntersectionObserver(); + } + + get options(): AnimateOnScrollOptions { + return { + root: this.root, + rootMargin: this.rootMargin, + threshold: this.threshold + } + } + + bindIntersectionObserver() { + this.observer = new IntersectionObserver(([entry]) => { + if(this.isObserverActive) { + if(entry.boundingClientRect.top > 0) { + entry.isIntersecting ? this.enter() : this.leave(); + } + } else if(entry.isIntersecting) { + this.enter(); + } + + this.isObserverActive = true; + }, this.options); + + setTimeout(() => this.observer.observe(this.host.nativeElement), 0); + + // Reset + + this.resetObserver = new IntersectionObserver(([entry]) => { + if (entry.boundingClientRect.top > 0 && !entry.isIntersecting) { + this.host.nativeElement.style.opacity = this.enterClass ? '0' : ''; + DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]); + + this.resetObserver.unobserve(this.host.nativeElement); + } + + this.animationState = undefined; + }, {...this.options, threshold: 0}) + } + + enter() { + if (this.animationState !== 'enter' && this.enterClass) { + this.host.nativeElement.style.opacity = ''; + DomHandler.removeMultipleClasses(this.host.nativeElement, this.leaveClass); + DomHandler.addMultipleClasses(this.host.nativeElement, this.enterClass); + + this.once && this.unbindIntersectionObserver(); + + this.bindAnimationEvents(); + this.animationState = 'enter'; + } + } + + leave() { + if (this.animationState !== 'leave' && this.leaveClass) { + this.host.nativeElement.style.opacity = this.enterClass ? '0' : ''; + DomHandler.removeMultipleClasses(this.host.nativeElement, this.enterClass); + DomHandler.addMultipleClasses(this.host.nativeElement, this.leaveClass); + + this.bindAnimationEvents(); + this.animationState = 'leave'; + } + } + + bindAnimationEvents() { + if (!this.animationEndListener) { + this.animationEndListener = this.renderer.listen(this.host.nativeElement, 'animationend', () => { + DomHandler.removeMultipleClasses(this.host.nativeElement, [this.enterClass, this.leaveClass]); + !this.once && this.resetObserver.observe(this.host.nativeElement); + this.unbindAnimationEvents(); + }) + } + } + + unbindAnimationEvents() { + if (this.animationEndListener) { + this.animationEndListener(); + this.animationEndListener = null; + } + } + + unbindIntersectionObserver() { + this.observer?.unobserve(this.host.nativeElement); + this.resetObserver?.unobserve(this.host.nativeElement); + this.isObserverActive = false; + } + + ngOnDestroy() { + this.unbindAnimationEvents(); + this.unbindIntersectionObserver(); + } +} + +@NgModule({ + imports: [CommonModule], + exports: [AnimateOnScroll], + declarations: [AnimateOnScroll] +}) +export class AnimateOnScrollModule {} diff --git a/src/app/components/animateonscroll/ng-package.json b/src/app/components/animateonscroll/ng-package.json new file mode 100644 index 00000000000..0e529e387d7 --- /dev/null +++ b/src/app/components/animateonscroll/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } +} \ No newline at end of file diff --git a/src/app/components/animateonscroll/public_api.ts b/src/app/components/animateonscroll/public_api.ts new file mode 100644 index 00000000000..594bf70f981 --- /dev/null +++ b/src/app/components/animateonscroll/public_api.ts @@ -0,0 +1 @@ +export * from './animateonscroll'; diff --git a/src/app/showcase/doc/animateonscroll/basicdoc.ts b/src/app/showcase/doc/animateonscroll/basicdoc.ts new file mode 100644 index 00000000000..0c006041ae9 --- /dev/null +++ b/src/app/showcase/doc/animateonscroll/basicdoc.ts @@ -0,0 +1,198 @@ +import { Component, Input } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'basic-doc', + template: `
+ +

Animation classes are defined with the enterClass and leaveClass properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.

+ +
+
+ Scroll Down + + + +
+
+
+ fade-in +
+
+
+ fade-left +
+
+
+ fade-right +
+
+
+ zoom +
+
+
+ flip-left +
+
+
+ flip-y +
+
+
+ scalein +
+
+ +
`, + styles: [ + ` + :host { + @keyframes slidedown-icon { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(20px); + } + + 100% { + transform: translateY(0); + } + } + + .slidedown-icon { + animation: slidedown-icon; + animation-duration: 3s; + animation-iteration-count: infinite; + } + + .box { + background-image: radial-gradient(var(--primary-300), var(--primary-600)); + border-radius: 50% !important; + color: var(--primary-color-text); + } + } + ` + ] +}) +export class BasicDoc { + @Input() id: string; + + @Input() title: string; + + code: Code = { + basic: ` +
+ Scroll Down + + + +
+
+
+ fade-in +
+
+
+ fade-left +
+
+
+ fade-right +
+
+
+ zoom +
+
+
+ flip-left +
+
+
+ flip-y +
+
+
+ scalein +
`, + html: ` +
+
+ Scroll Down + + + +
+
+
+ fade-in +
+
+
+ fade-left +
+
+
+ fade-right +
+
+
+ zoom +
+
+
+ flip-left +
+
+
+ flip-y +
+
+
+ scalein +
+
`, + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'animate-on-scroll-basic-demo', + templateUrl: './animate-on-scroll-basic-demo.html', + styles: [ + \` + :host { + @keyframes slidedown-icon { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(20px); + } + + 100% { + transform: translateY(0); + } + } + + .slidedown-icon { + animation: slidedown-icon; + animation-duration: 3s; + animation-iteration-count: infinite; + } + + .box { + background-image: radial-gradient(var(--primary-300), var(--primary-600)); + border-radius: 50% !important; + color: var(--primary-color-text); + } + } + \` + ] +}) +export class AnimateOnScrollBasicDemo {}` + }; +} diff --git a/src/app/showcase/doc/animateonscroll/importdoc.ts b/src/app/showcase/doc/animateonscroll/importdoc.ts new file mode 100644 index 00000000000..f4264dd08c7 --- /dev/null +++ b/src/app/showcase/doc/animateonscroll/importdoc.ts @@ -0,0 +1,19 @@ +import { Component, Input } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'import-doc', + template: `
+ + +
` +}) +export class ImportDoc { + @Input() id: string; + + @Input() title: string; + + code: Code = { + typescript: `import { AnimateOnScrollModule } from 'primeng/animateonscroll';` + }; +} diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 940d29058f2..74644a6efe2 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -332,6 +332,61 @@ } } }, + "animateonscroll": { + "components": { + "AnimateOnScroll": { + "description": "Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "enterClass", + "optional": false, + "readonly": false, + "type": "string", + "description": "Selector to define the CSS class for enter animation." + }, + { + "name": "leaveClass", + "optional": false, + "readonly": false, + "type": "string", + "description": "Selector to define the CSS class for leave animation." + }, + { + "name": "root", + "optional": false, + "readonly": false, + "type": "HTMLElement", + "description": "Specifies the root option of the IntersectionObserver API." + }, + { + "name": "rootMargin", + "optional": false, + "readonly": false, + "type": "string", + "description": "Specifies the rootMargin option of the IntersectionObserver API." + }, + { + "name": "threshold", + "optional": false, + "readonly": false, + "type": "number", + "description": "Specifies the threshold option of the IntersectionObserver API" + }, + { + "name": "once", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Whether the scroll event listener should be removed after initial run." + } + ] + } + } + } + }, "blockableui": { "components": {} }, @@ -2312,6 +2367,13 @@ "readonly": false, "type": "number", "description": "Time to wait in milliseconds to hide the tooltip even it is active." + }, + { + "name": "id", + "optional": true, + "readonly": false, + "type": "string", + "description": "When present, it adds a custom id to the tooltip." } ] } @@ -11753,6 +11815,13 @@ "type": "string", "description": "Attribute of the image element." }, + { + "name": "loading", + "optional": false, + "readonly": false, + "type": "\"eager\" | \"lazy\"", + "description": "Attribute of the image element." + }, { "name": "appendTo", "optional": false, diff --git a/src/app/showcase/layout/app-routing.module.ts b/src/app/showcase/layout/app-routing.module.ts index a1017a986a9..d7f4225123f 100644 --- a/src/app/showcase/layout/app-routing.module.ts +++ b/src/app/showcase/layout/app-routing.module.ts @@ -115,7 +115,7 @@ const routes: Routes = [ { path: 'uikit', loadChildren: () => import('../pages/uikit/uikit.module').then((m) => m.UIKitModule) }, { path: 'autofocus', loadChildren: () => import('../pages/autofocus/autofocusdemo.module').then((m) => m.AutoFocusDemoModule) }, { path: 'overlay', loadChildren: () => import('../pages/overlay/overlaydemo.module').then((m) => m.OverlayDemoModule) }, - { path: 'animate', loadChildren: () => import('../pages/animate/animatedemo.module').then((m) => m.AnimateDemoModule) }, + { path: 'animateonscroll', loadChildren: () => import('../pages/animate/animateonscrolldemo.module').then((m) => m.AnimateOnScrollDemoModule) }, { path: 'templates', loadChildren: () => import('../pages/templates/templates.module').then((m) => m.TemplatesModule) } ] }, diff --git a/src/app/showcase/pages/animate/animateonscrolldemo-routing.module.ts b/src/app/showcase/pages/animate/animateonscrolldemo-routing.module.ts new file mode 100755 index 00000000000..b4907cf8138 --- /dev/null +++ b/src/app/showcase/pages/animate/animateonscrolldemo-routing.module.ts @@ -0,0 +1,9 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { AnimateOnScrollDemo } from './animateonscrolldemo'; + +@NgModule({ + imports: [RouterModule.forChild([{ path: '', component: AnimateOnScrollDemo }])], + exports: [RouterModule] +}) +export class AnimateOnScrollDemoRoutingModule {} diff --git a/src/app/showcase/pages/animate/animateonscrolldemo.html b/src/app/showcase/pages/animate/animateonscrolldemo.html new file mode 100755 index 00000000000..4724daef07c --- /dev/null +++ b/src/app/showcase/pages/animate/animateonscrolldemo.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/showcase/pages/animate/animateonscrolldemo.module.ts b/src/app/showcase/pages/animate/animateonscrolldemo.module.ts new file mode 100755 index 00000000000..6799a65e560 --- /dev/null +++ b/src/app/showcase/pages/animate/animateonscrolldemo.module.ts @@ -0,0 +1,11 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { AnimateOnScrollDocModule } from '../../doc/animateonscroll/animateonscrolldoc.module'; +import { AnimateOnScrollDemoRoutingModule } from './animateonscrolldemo-routing.module'; +import { AnimateOnScrollDemo } from './animateonscrolldemo'; + +@NgModule({ + imports: [CommonModule, AnimateOnScrollDemoRoutingModule, AnimateOnScrollDocModule], + declarations: [AnimateOnScrollDemo] +}) +export class AnimateOnScrollDemoModule {} diff --git a/src/app/showcase/pages/animate/animateonscrolldemo.ts b/src/app/showcase/pages/animate/animateonscrolldemo.ts new file mode 100755 index 00000000000..299d2d4aaa3 --- /dev/null +++ b/src/app/showcase/pages/animate/animateonscrolldemo.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { ImportDoc } from '../../doc/animateonscroll/importdoc'; +import { BasicDoc } from '../../doc/animateonscroll/basicdoc'; +import { AccessibilityDoc } from '../../doc/animateonscroll/accessibilitydoc'; + +@Component({ + templateUrl: './animateonscrolldemo.html' +}) +export class AnimateOnScrollDemo { + docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'accessibility', + label: 'Accessibility', + component: AccessibilityDoc + } + ]; +} diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json index 46e4e1c918f..8db1d0711c0 100644 --- a/src/assets/showcase/data/menu.json +++ b/src/assets/showcase/data/menu.json @@ -447,8 +447,8 @@ "routerLink": "/autofocus" }, { - "name": "Animate", - "routerLink": "/animate" + "name": "AnimateOnScroll", + "routerLink": "/animateonscroll" } ] }, From 34ebe4004b00cfb304625aef8fe423e13cc93ebc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 30 Oct 2023 17:04:37 +0300 Subject: [PATCH 2/5] Add new method to domhandler --- src/app/components/dom/domhandler.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/components/dom/domhandler.ts b/src/app/components/dom/domhandler.ts index d2c1d2813d8..6a25e2555da 100755 --- a/src/app/components/dom/domhandler.ts +++ b/src/app/components/dom/domhandler.ts @@ -46,6 +46,15 @@ export class DomHandler { } } + public static removeMultipleClasses(element, classNames) { + if (element && classNames) { + [classNames] + .flat() + .filter(Boolean) + .forEach((cNames) => cNames.split(' ').forEach((className) => this.removeClass(element, className))); + } + } + public static hasClass(element: any, className: string): boolean { if (element && className) { if (element.classList) return element.classList.contains(className); From c8255bec44776dbea377b7214c390dd5d51cbc93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 30 Oct 2023 17:05:02 +0300 Subject: [PATCH 3/5] Add animateonscroll doc --- .../doc/animateonscroll/accessibilitydoc.ts | 24 +++++++++++++++++++ .../animateonscrolldoc.module.ts | 16 +++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 src/app/showcase/doc/animateonscroll/accessibilitydoc.ts create mode 100644 src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts diff --git a/src/app/showcase/doc/animateonscroll/accessibilitydoc.ts b/src/app/showcase/doc/animateonscroll/accessibilitydoc.ts new file mode 100644 index 00000000000..d9d00a220ff --- /dev/null +++ b/src/app/showcase/doc/animateonscroll/accessibilitydoc.ts @@ -0,0 +1,24 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'accessibility-doc', + template: ` +
+ +

Screen Reader

+

+ AnimateOnScroll does not require any roles and attributes. +

+

Keyboard Support

+

+ Component does not include any interactive elements. +

+ +
` +}) +export class AccessibilityDoc { + @Input() id: string; + + @Input() title: string; + +} diff --git a/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts b/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts new file mode 100644 index 00000000000..1a2d23dc361 --- /dev/null +++ b/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts @@ -0,0 +1,16 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { AppCodeModule } from '../../layout/doc/code/app.code.component'; +import { ImportDoc } from './importdoc'; +import { BasicDoc } from './basicdoc'; +import { AccessibilityDoc } from './accessibilitydoc'; +import { AnimateOnScrollModule } from 'primeng/animateonscroll'; + +@NgModule({ + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, AnimateOnScrollModule], + declarations: [ImportDoc, BasicDoc, AccessibilityDoc], + exports: [AppDocModule] +}) +export class AnimateOnScrollDocModule {} From 77e031910bc9dec1519c23d41cc7f0e47a354b07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 30 Oct 2023 17:05:15 +0300 Subject: [PATCH 4/5] remove animate directive demo pages --- .../showcase/doc/animate/animatedoc.module.ts | 15 ------ src/app/showcase/doc/animate/basicdoc.ts | 54 ------------------- src/app/showcase/doc/animate/importdoc.ts | 19 ------- .../pages/animate/animate-routing.module.ts | 9 ---- .../showcase/pages/animate/animatedemo.html | 1 - .../pages/animate/animatedemo.module.ts | 11 ---- src/app/showcase/pages/animate/animatedemo.ts | 21 -------- 7 files changed, 130 deletions(-) delete mode 100644 src/app/showcase/doc/animate/animatedoc.module.ts delete mode 100644 src/app/showcase/doc/animate/basicdoc.ts delete mode 100644 src/app/showcase/doc/animate/importdoc.ts delete mode 100755 src/app/showcase/pages/animate/animate-routing.module.ts delete mode 100755 src/app/showcase/pages/animate/animatedemo.html delete mode 100755 src/app/showcase/pages/animate/animatedemo.module.ts delete mode 100755 src/app/showcase/pages/animate/animatedemo.ts diff --git a/src/app/showcase/doc/animate/animatedoc.module.ts b/src/app/showcase/doc/animate/animatedoc.module.ts deleted file mode 100644 index 2c3a4ec6dd4..00000000000 --- a/src/app/showcase/doc/animate/animatedoc.module.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/code/app.code.component'; -import { ImportDoc } from './importdoc'; -import { BasicDoc } from './basicdoc'; -import { AnimateModule } from 'primeng/animate'; - -@NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, AnimateModule], - declarations: [ImportDoc, BasicDoc], - exports: [AppDocModule] -}) -export class AnimateDocModule {} diff --git a/src/app/showcase/doc/animate/basicdoc.ts b/src/app/showcase/doc/animate/basicdoc.ts deleted file mode 100644 index 6328dfa7231..00000000000 --- a/src/app/showcase/doc/animate/basicdoc.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'basic-doc', - template: `
- -

- Animate uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes enterClass and leaveClass properties to simply add animation class during scroll or page load to manage elements - animation if the element is entering or leaving the viewport. -

- -
-
- flip -
-
-
- flip up -
-
- -
` -}) -export class BasicDoc { - @Input() id: string; - - @Input() title: string; - - code: Code = { - basic: ` -
- flip -
`, - html: ` -
-
- flip -
-
-
- flipup -
-
`, - typescript: ` -import { Component } from '@angular/core'; - -@Component({ - selector: 'animate-basic-demo', - templateUrl: './animate-basic-demo.html' -}) -export class AnimateBasicDemo {}` - }; -} diff --git a/src/app/showcase/doc/animate/importdoc.ts b/src/app/showcase/doc/animate/importdoc.ts deleted file mode 100644 index 291961d19bd..00000000000 --- a/src/app/showcase/doc/animate/importdoc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'import-doc', - template: `
- - -
` -}) -export class ImportDoc { - @Input() id: string; - - @Input() title: string; - - code: Code = { - typescript: `import { AnimateModule } from 'primeng/animate';` - }; -} diff --git a/src/app/showcase/pages/animate/animate-routing.module.ts b/src/app/showcase/pages/animate/animate-routing.module.ts deleted file mode 100755 index bbed763177c..00000000000 --- a/src/app/showcase/pages/animate/animate-routing.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { AnimateDemo } from './animatedemo'; - -@NgModule({ - imports: [RouterModule.forChild([{ path: '', component: AnimateDemo }])], - exports: [RouterModule] -}) -export class AnimateDemoRoutingModule {} diff --git a/src/app/showcase/pages/animate/animatedemo.html b/src/app/showcase/pages/animate/animatedemo.html deleted file mode 100755 index e9bed087dd2..00000000000 --- a/src/app/showcase/pages/animate/animatedemo.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/showcase/pages/animate/animatedemo.module.ts b/src/app/showcase/pages/animate/animatedemo.module.ts deleted file mode 100755 index 14e652786e4..00000000000 --- a/src/app/showcase/pages/animate/animatedemo.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { AnimateDocModule } from '../../doc/animate/animatedoc.module'; -import { AnimateDemoRoutingModule } from './animate-routing.module'; -import { AnimateDemo } from './animatedemo'; - -@NgModule({ - imports: [CommonModule, AnimateDemoRoutingModule, AnimateDocModule], - declarations: [AnimateDemo] -}) -export class AnimateDemoModule {} diff --git a/src/app/showcase/pages/animate/animatedemo.ts b/src/app/showcase/pages/animate/animatedemo.ts deleted file mode 100755 index c62330ff305..00000000000 --- a/src/app/showcase/pages/animate/animatedemo.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/animate/importdoc'; -import { BasicDoc } from '../../doc/animate/basicdoc'; - -@Component({ - templateUrl: './animatedemo.html' -}) -export class AnimateDemo { - docs = [ - { - id: 'import', - label: 'Import', - component: ImportDoc - }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - } - ]; -} From 2c485594e1cf786888c0fceaf4642999b94033a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 1 Nov 2023 15:03:46 +0300 Subject: [PATCH 5/5] Refactor --- .../components/animateonscroll/animateonscroll.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/app/components/animateonscroll/animateonscroll.ts b/src/app/components/animateonscroll/animateonscroll.ts index 2df209ae062..705a9d794ed 100644 --- a/src/app/components/animateonscroll/animateonscroll.ts +++ b/src/app/components/animateonscroll/animateonscroll.ts @@ -1,5 +1,5 @@ -import { CommonModule } from '@angular/common'; -import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit } from '@angular/core'; +import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { AfterViewInit, Directive, ElementRef, Input, NgModule, Renderer2, OnInit, Inject, PLATFORM_ID } from '@angular/core'; import { DomHandler } from 'primeng/dom'; interface AnimateOnScrollOptions { @@ -60,14 +60,18 @@ export class AnimateOnScroll implements OnInit, AfterViewInit { animationEndListener: VoidFunction | undefined; - constructor(private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {} + constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {} ngOnInit() { - this.renderer.setStyle(this.host.nativeElement, 'opacity', this.enterClass ? '0' : ''); + if(isPlatformBrowser(this.platformId)){ + this.renderer.setStyle(this.host.nativeElement, 'opacity', this.enterClass ? '0' : ''); + } } ngAfterViewInit() { - this.bindIntersectionObserver(); + if(isPlatformBrowser(this.platformId)){ + this.bindIntersectionObserver(); + } } get options(): AnimateOnScrollOptions {