From 3a72d84fb5a273755252ad402a557c8ce5fea111 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 28 Nov 2023 21:28:57 +0300 Subject: [PATCH] Cleanup and rename, use afterNextRender for SSR --- src/app/showcase/layout/app.component.ts | 51 ++-- .../doc/app.docsection-nav.component.ts | 2 +- .../layout/menu/app.menu.component.ts | 26 +- .../layout/news/app.news.component.ts | 22 +- .../layout/topbar/app.topbar.component.ts | 20 +- .../pages/landing/blocksection.component.ts | 2 +- .../landing/featuressection.component.ts | 2 +- .../pages/landing/footersection.component.ts | 288 +++++++++--------- .../pages/landing/herosection.component.ts | 2 +- .../pages/landing/landing.component.html | 15 +- .../pages/landing/landing.component.ts | 73 +---- .../landing/templatesection.component.ts | 4 +- .../pages/landing/themesection.component.ts | 2 +- .../pages/landing/userssection.component.ts | 119 ++++---- 14 files changed, 280 insertions(+), 348 deletions(-) diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index d75f5cbd60f..2c4be099585 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -1,6 +1,6 @@ -import { DOCUMENT, isPlatformBrowser } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { AfterViewInit, Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit, Renderer2, afterNextRender } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NavigationEnd, Router, RouterOutlet } from '@angular/router'; import { PrimeNGConfig } from 'primeng/api'; @@ -29,13 +29,22 @@ import { AppTopBarComponent } from './topbar/app.topbar.component'; imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent], providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService] }) -export class AppComponent implements OnInit, AfterViewInit, OnDestroy { - constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) {} +export class AppComponent implements OnInit, OnDestroy { + constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) { + afterNextRender(() => { + if (process.env.NODE_ENV === 'production') { + this.injectScripts(); + } + + this.bindRouteEvents(); + }); + } - public themeChangeSubscription: Subscription; - showConfigurator : boolean = false + themeChangeSubscription: Subscription; - showMenuButton : boolean = false + showConfigurator: boolean = false; + + showMenuButton: boolean = false; ngOnInit() { this.primeng.ripple = true; @@ -45,16 +54,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy { }); } - ngAfterViewInit() { - if (isPlatformBrowser(this.platformId)) { - if (window && window && process.env.NODE_ENV === 'production') { - this.injectScripts(); - } - - this.bindRouteEvents(); - } - } - injectScripts() { const script = this.renderer.createElement('script'); script.type = 'text/javascript'; @@ -88,17 +87,13 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy { this.switchTheme({ name: landingTheme, dark: darkMode }); } } - if(event instanceof NavigationEnd && event.url !== "/") { - this.showConfigurator = true - this.showMenuButton = true - } - - else if (event instanceof NavigationEnd){ - this.showConfigurator = false - this.showMenuButton = false - + if (event instanceof NavigationEnd && event.url !== '/') { + this.showConfigurator = true; + this.showMenuButton = true; + } else if (event instanceof NavigationEnd) { + this.showConfigurator = false; + this.showMenuButton = false; } - }); } @@ -142,4 +137,4 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy { this.themeChangeSubscription.unsubscribe(); } } -} \ No newline at end of file +} diff --git a/src/app/showcase/layout/doc/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/app.docsection-nav.component.ts index fd240d18bf7..f2d1d01647a 100644 --- a/src/app/showcase/layout/doc/app.docsection-nav.component.ts +++ b/src/app/showcase/layout/doc/app.docsection-nav.component.ts @@ -1,6 +1,6 @@ import { DOCUMENT, Location, isPlatformBrowser } from '@angular/common'; -import { Router } from '@angular/router'; import { Component, ElementRef, Inject, Input, NgZone, OnDestroy, OnInit, PLATFORM_ID, Renderer2, ViewChild } from '@angular/core'; +import { Router } from '@angular/router'; import { DomHandler } from 'primeng/dom'; import { ObjectUtils } from 'primeng/utils'; import { Subscription } from 'rxjs'; diff --git a/src/app/showcase/layout/menu/app.menu.component.ts b/src/app/showcase/layout/menu/app.menu.component.ts index a89d0abb6e7..cd63303ebe4 100644 --- a/src/app/showcase/layout/menu/app.menu.component.ts +++ b/src/app/showcase/layout/menu/app.menu.component.ts @@ -1,5 +1,5 @@ -import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { Component, ElementRef, Inject, OnDestroy, PLATFORM_ID } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Component, ElementRef, OnDestroy, afterNextRender } from '@angular/core'; import { NavigationEnd, Router, RouterModule } from '@angular/router'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { DomHandler } from 'primeng/dom'; @@ -38,16 +38,10 @@ export class AppMenuComponent implements OnDestroy { private routerSubscription: Subscription; - constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private el: ElementRef, private router: Router) { + constructor(private configService: AppConfigService, private el: ElementRef, private router: Router) { this.menu = MenuData.data; - } - - get isActive(): boolean { - return this.configService.state.menuActive; - } - ngOnInit() { - if (isPlatformBrowser(this.platformId)) { + afterNextRender(() => { setTimeout(() => { this.scrollToActiveItem(); }, 1); @@ -58,7 +52,11 @@ export class AppMenuComponent implements OnDestroy { DomHandler.unblockBodyScroll('blocked-scroll'); } }); - } + }); + } + + get isActive(): boolean { + return this.configService.state.menuActive; } scrollToActiveItem() { @@ -69,10 +67,8 @@ export class AppMenuComponent implements OnDestroy { } isInViewport(element) { - if (isPlatformBrowser(this.platformId)) { - const rect = element.getBoundingClientRect(); - return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth))); - } + const rect = element.getBoundingClientRect(); + return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth))); } ngOnDestroy() { diff --git a/src/app/showcase/layout/news/app.news.component.ts b/src/app/showcase/layout/news/app.news.component.ts index ff973b9668e..81737e4c70a 100644 --- a/src/app/showcase/layout/news/app.news.component.ts +++ b/src/app/showcase/layout/news/app.news.component.ts @@ -1,5 +1,5 @@ -import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { Component, afterNextRender } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { StyleClassModule } from 'primeng/styleclass'; import News from '../../data/news.json'; @@ -11,19 +11,13 @@ import { AppConfigService } from '../../service/appconfigservice'; templateUrl: './app.news.component.html', imports: [CommonModule, FormsModule, StyleClassModule] }) -export class AppNewsComponent implements OnInit { +export class AppNewsComponent { storageKey: string = 'primeng'; announcement: any; - constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService) {} - - get isNewsActive(): boolean { - return this.configService.state.newsActive; - } - - ngOnInit(): void { - if (isPlatformBrowser(this.platformId)) { + constructor(private configService: AppConfigService) { + afterNextRender(() => { const itemString = localStorage.getItem(this.storageKey); if (itemString) { @@ -39,7 +33,11 @@ export class AppNewsComponent implements OnInit { this.configService.state.newsActive = true; this.announcement = News; } - } + }); + } + + get isNewsActive(): boolean { + return this.configService.state.newsActive; } hideNews() { diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts index 70213969639..7e0d546b041 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/src/app/showcase/layout/topbar/app.topbar.component.ts @@ -1,5 +1,5 @@ -import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, Output, PLATFORM_ID, Renderer2 } from '@angular/core'; +import { CommonModule, DOCUMENT } from '@angular/common'; +import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, Renderer2, afterNextRender } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { Router, RouterModule } from '@angular/router'; import docsearch from '@docsearch/js'; @@ -14,7 +14,7 @@ import { AppConfigService } from '../../service/appconfigservice'; templateUrl: './app.topbar.component.html', imports: [CommonModule, FormsModule, StyleClassModule, RouterModule] }) -export class AppTopBarComponent implements OnInit, OnDestroy { +export class AppTopBarComponent implements OnDestroy { @Input() showConfigurator = true; @Input() showMenuButton = true; @@ -27,21 +27,19 @@ export class AppTopBarComponent implements OnInit, OnDestroy { private window: Window; - constructor(@Inject(DOCUMENT) private document: Document, private el: ElementRef, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, private router: Router, private configService: AppConfigService) { + constructor(@Inject(DOCUMENT) private document: Document, private el: ElementRef, private renderer: Renderer2, private router: Router, private configService: AppConfigService) { this.window = this.document.defaultView as Window; + + afterNextRender(() => { + this.bindScrollListener(); + this.initDocSearch(); + }); } get isDarkMode() { return this.configService.config.darkMode; } - ngOnInit() { - if (isPlatformBrowser(this.platformId)) { - this.bindScrollListener(); - this.initDocSearch(); - } - } - toggleMenu() { if (this.configService.state.menuActive) { this.configService.hideMenu(); diff --git a/src/app/showcase/pages/landing/blocksection.component.ts b/src/app/showcase/pages/landing/blocksection.component.ts index ddaaf17ca9f..3cbc2706e70 100644 --- a/src/app/showcase/pages/landing/blocksection.component.ts +++ b/src/app/showcase/pages/landing/blocksection.component.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; @Component({ - selector: 'template-block', + selector: 'block-section', standalone: true, imports: [CommonModule], template: ` diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts index 373949164d4..d2b2081c500 100644 --- a/src/app/showcase/pages/landing/featuressection.component.ts +++ b/src/app/showcase/pages/landing/featuressection.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; import { AppConfigService } from '../../service/appconfigservice'; @Component({ - selector: 'template-features', + selector: 'features-section', standalone: true, imports: [CommonModule], template: ` diff --git a/src/app/showcase/pages/landing/footersection.component.ts b/src/app/showcase/pages/landing/footersection.component.ts index 11c3e93b215..1a4398af676 100644 --- a/src/app/showcase/pages/landing/footersection.component.ts +++ b/src/app/showcase/pages/landing/footersection.component.ts @@ -1,155 +1,153 @@ -import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; import { RouterModule } from '@angular/router'; @Component({ - selector: 'template-footer', - standalone: true, - imports: [CommonModule, RouterModule], - template: ` -
-
-
-
- -
-
- -
-
- + selector: 'footer-section', + standalone: true, + imports: [CommonModule, RouterModule], + template: ` +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
-
- -
-
-
+
-
- - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
-
-
- ` +
+ ` }) -export class FooterSectionComponent { - -} +export class FooterSectionComponent {} diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts index 329404b5839..4bf1b48ae2e 100644 --- a/src/app/showcase/pages/landing/herosection.component.ts +++ b/src/app/showcase/pages/landing/herosection.component.ts @@ -18,7 +18,7 @@ import { Subscription } from 'rxjs'; import { AppConfigService } from '../../service/appconfigservice'; @Component({ - selector: 'template-hero', + selector: 'hero-section', standalone: true, imports: [CommonModule, RouterModule, InputNumberModule, DropdownModule, RadioButtonModule, CalendarModule, ChartModule, ChipModule, InputSwitchModule, SelectButtonModule, SliderModule, BadgeModule, TabMenuModule, FormsModule], template: ` diff --git a/src/app/showcase/pages/landing/landing.component.html b/src/app/showcase/pages/landing/landing.component.html index 62396fa8ab5..17ac7e9d8b8 100644 --- a/src/app/showcase/pages/landing/landing.component.html +++ b/src/app/showcase/pages/landing/landing.component.html @@ -1,9 +1,8 @@
- - - - - - - -
+ + + + + + + \ No newline at end of file diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts index 124e0da7cfd..3141567de0f 100644 --- a/src/app/showcase/pages/landing/landing.component.ts +++ b/src/app/showcase/pages/landing/landing.component.ts @@ -1,23 +1,6 @@ -import { CommonModule, DOCUMENT, NgOptimizedImage, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { CommonModule, NgOptimizedImage } from '@angular/common'; +import { Component, OnInit, afterNextRender } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; -import { RouterModule } from '@angular/router'; -import { BadgeModule } from 'primeng/badge'; -import { ButtonModule } from 'primeng/button'; -import { CalendarModule } from 'primeng/calendar'; -import { ChartModule } from 'primeng/chart'; -import { CheckboxModule } from 'primeng/checkbox'; -import { ChipModule } from 'primeng/chip'; -import { DropdownModule } from 'primeng/dropdown'; -import { InputNumberModule } from 'primeng/inputnumber'; -import { InputSwitchModule } from 'primeng/inputswitch'; -import { ProgressBarModule } from 'primeng/progressbar'; -import { RadioButtonModule } from 'primeng/radiobutton'; -import { SelectButtonModule } from 'primeng/selectbutton'; -import { SliderModule } from 'primeng/slider'; -import { TableModule } from 'primeng/table'; -import { TabMenuModule } from 'primeng/tabmenu'; -import { AppComponent } from '../../layout/app.component'; import { AppNewsComponent } from '../../layout/news/app.news.component'; import { AppTopBarComponent } from '../../layout/topbar/app.topbar.component'; import { AppConfigService } from '../../service/appconfigservice'; @@ -33,41 +16,19 @@ import { UsersSectionComponent } from './userssection.component'; selector: 'landing', standalone: true, templateUrl: './landing.component.html', - imports: [ - CommonModule, - NgOptimizedImage, - InputSwitchModule, - ButtonModule, - RadioButtonModule, - InputNumberModule, - TabMenuModule, - ChartModule, - ProgressBarModule, - ChipModule, - SelectButtonModule, - SliderModule, - BadgeModule, - CalendarModule, - TableModule, - RouterModule, - CheckboxModule, - DropdownModule, - AppNewsComponent, - AppTopBarComponent, - HeroSectionComponent, - FeaturesSectionComponent, - UsersSectionComponent, - ThemeSectionComponent, - BlockSectionComponent, - TemplateSectionComponent, - FooterSectionComponent - ] + imports: [CommonModule, NgOptimizedImage, AppNewsComponent, AppTopBarComponent, HeroSectionComponent, FeaturesSectionComponent, UsersSectionComponent, ThemeSectionComponent, BlockSectionComponent, TemplateSectionComponent, FooterSectionComponent] }) -export class LandingComponent implements OnInit, AfterViewInit { - private window: Window; - +export class LandingComponent implements OnInit { private tableTheme = 'lara-light-blue'; + constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) { + afterNextRender(() => { + if (this.configService.config.theme !== this.tableTheme) { + this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); + } + }); + } + get landingClass() { return { 'layout-dark': this.isDarkMode, @@ -84,21 +45,11 @@ export class LandingComponent implements OnInit, AfterViewInit { return this.configService.state.newsActive; } - constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, public app: AppComponent, private metaService: Meta, private titleService: Title) { - this.window = this.document.defaultView as Window; - } - ngOnInit() { this.titleService.setTitle('PrimeNG - Angular UI Component Library'); this.metaService.updateTag({ name: 'description', content: 'The ultimate collection of design-agnostic, flexible and accessible Angular UI Components.' }); } - ngAfterViewInit() { - if (isPlatformBrowser(this.platformId) && this.configService.config.theme !== this.tableTheme) { - this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - } - } - toggleDarkMode() { const theme = this.isDarkMode ? 'lara-light-blue' : 'lara-dark-blue'; const newTableTheme = this.isDarkMode ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); diff --git a/src/app/showcase/pages/landing/templatesection.component.ts b/src/app/showcase/pages/landing/templatesection.component.ts index a0386e7362c..f343223938f 100644 --- a/src/app/showcase/pages/landing/templatesection.component.ts +++ b/src/app/showcase/pages/landing/templatesection.component.ts @@ -1,9 +1,9 @@ -import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; import { AppConfigService } from '../../service/appconfigservice'; @Component({ - selector: 'template-templates', + selector: 'templates-section', standalone: true, imports: [CommonModule], template: ` diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts index 7e91d43bc73..56f026d99a5 100644 --- a/src/app/showcase/pages/landing/themesection.component.ts +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice'; import { CustomerService } from '../../service/customerservice'; @Component({ - selector: 'template-theme', + selector: 'theme-section', standalone: true, imports: [CommonModule, TableModule, ButtonModule, TagModule, ProgressBarModule], template: ` diff --git a/src/app/showcase/pages/landing/userssection.component.ts b/src/app/showcase/pages/landing/userssection.component.ts index 7411b43c8d0..64bccf5ffee 100644 --- a/src/app/showcase/pages/landing/userssection.component.ts +++ b/src/app/showcase/pages/landing/userssection.component.ts @@ -1,77 +1,74 @@ -import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { Component } from '@angular/core'; @Component({ - selector: 'template-users', - standalone: true, - imports: [CommonModule], - template: ` -
-
Who Uses
-

- PrimeTek libraries have reached over150 Million Downloadson npm! Join the PrimeLand community and experience the difference yourself. -

-
-
-
-
-
- + selector: 'users-section', + standalone: true, + imports: [CommonModule], + template: ` +
+
Who Uses
+

+ PrimeTek libraries have reached over150 Million Downloadson npm! Join the PrimeLand community and experience the difference yourself. +

+
+
+
+
+
+ +
-
-
-
- +
+
+ +
-
-
-
- +
+
+ +
+
-
-
-
-
-
-
-
- +
+
+
+
+
+ +
-
-
-
- +
+
+ +
-
-
-
- +
+
+ +
+
-
-
-
- ` +
+ ` }) export class UsersSectionComponent { - - usersData = [ - { name: 'fox', width: '51', height: '22' }, - { name: 'airbus', width: '87', height: '16' }, - { name: 'mercedes', width: '34', height: '34' }, - { name: 'ford', width: '64', height: '26' }, - { name: 'vw', width: '35', height: '34' }, - { name: 'intel', width: '53', height: '34' }, - { name: 'unicredit', width: '79', height: '18' }, - { name: 'lufthansa', width: '97', height: '18' }, - { name: 'nvidia', width: '86', height: '16' }, - { name: 'verizon', width: '102', height: '18' }, - { name: 'amex', width: '81', height: '30' } -]; - - + usersData = [ + { name: 'fox', width: '51', height: '22' }, + { name: 'airbus', width: '87', height: '16' }, + { name: 'mercedes', width: '34', height: '34' }, + { name: 'ford', width: '64', height: '26' }, + { name: 'vw', width: '35', height: '34' }, + { name: 'intel', width: '53', height: '34' }, + { name: 'unicredit', width: '79', height: '18' }, + { name: 'lufthansa', width: '97', height: '18' }, + { name: 'nvidia', width: '86', height: '16' }, + { name: 'verizon', width: '102', height: '18' }, + { name: 'amex', width: '81', height: '30' } + ]; }