Switch to lara on navigation to landing

primefaces · Nov 28, 2023 · d79fdce · d79fdce
1 parent 65823e4
commit d79fdce
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 74 deletions.
diff --git 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 { HttpClientModule } from '@angular/common/http';
-import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
+import { AfterViewInit, Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { PrimeNGConfig } from 'primeng/api';
@@ -29,13 +29,8 @@ 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, 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) {
-        if (isPlatformBrowser(platformId) && window && process.env.NODE_ENV === 'production') {
-            this.injectScripts();
-        }
-        isPlatformBrowser(this.platformId) && this.handleRouteEvents();
-    }
+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) {}
 
     public themeChangeSubscription: Subscription;
 
@@ -47,6 +42,16 @@ export class AppComponent implements OnInit, 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';
@@ -65,14 +70,20 @@ export class AppComponent implements OnInit, OnDestroy {
         this.renderer.appendChild(this.document.body, scriptBody);
     }
 
-    handleRouteEvents() {
+    bindRouteEvents() {
         this.router.events.subscribe((event) => {
             if (event instanceof NavigationEnd) {
                 if (typeof window['gtag'] === 'function') {
                     window['gtag']('event', 'page_view', {
                         page_path: event.urlAfterRedirects
                     });
                 }
+
+                const { theme, darkMode } = this.configService.config;
+                const landingTheme = darkMode ? 'lara-dark-blue' : 'lara-light-blue';
+                if (event.urlAfterRedirects === '/' && theme !== landingTheme) {
+                    this.switchTheme({ name: landingTheme, dark: darkMode });
+                }
             }
         });
     }

diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts
@@ -58,24 +58,7 @@ export class AppTopBarComponent implements OnInit, OnDestroy {
             appId: 'XG1L2MUWT9',
             apiKey: '6057fe1af77fee4e7e41907b0b3ec79d',
             indexName: 'primeng',
-            container: '#docsearch',
-            transformItems: this.handleDocSearchTransformItems.bind(this)
-        });
-    }
-
-    handleDocSearchTransformItems(results) {
-        const valid = process.env.NODE_ENV !== 'production';
-        return results.map((result) => {
-            if (valid) {
-                const url = new URL(result.url);
-
-                url.protocol = this.window.location.protocol;
-                url.hostname = this.window.location.hostname;
-                url.port = this.window.location.port;
-                result.url = url.toString();
-            }
-
-            return result;
+            container: '#docsearch'
         });
     }
 

diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts
@@ -1,8 +1,7 @@
 import { CommonModule, DOCUMENT, NgOptimizedImage, isPlatformBrowser } from '@angular/common';
-import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { AfterViewInit, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
-import docsearch from '@docsearch/js';
 import { BadgeModule } from 'primeng/badge';
 import { ButtonModule } from 'primeng/button';
 import { CalendarModule } from 'primeng/calendar';
@@ -64,7 +63,7 @@ import { UsersSectionComponent } from './userssection.component';
         FooterSectionComponent
     ]
 })
-export class LandingComponent implements OnInit {
+export class LandingComponent implements OnInit, AfterViewInit {
     private window: Window;
 
     private tableTheme = 'lara-light-blue';
@@ -85,56 +84,19 @@ export class LandingComponent implements OnInit {
         return this.configService.state.newsActive;
     }
 
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        @Inject(PLATFORM_ID) private platformId: any,
-        private configService: AppConfigService,
-        private cd: ChangeDetectorRef,
-        public app: AppComponent,
-        private metaService: Meta,
-        private titleService: Title
-    ) {
+    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.' });
-        this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue');
-
-        if (isPlatformBrowser(this.platformId)) {
-            this.initDocSearch();
-        }
-    }
-
-    initDocSearch() {
-        docsearch({
-            appId: 'XG1L2MUWT9',
-            apiKey: '6057fe1af77fee4e7e41907b0b3ec79d',
-            indexName: 'primeng',
-            container: '#docsearch',
-            transformItems: this.handleDocSearchTransformItems.bind(this)
-        });
-    }
-
-    handleDocSearchTransformItems(results) {
-        const valid = process.env.NODE_ENV !== 'production';
-        return results.map((result) => {
-            if (valid) {
-                const url = new URL(result.url);
-
-                url.protocol = this.window.location.protocol;
-                url.hostname = this.window.location.hostname;
-                url.port = this.window.location.port;
-                result.url = url.toString();
-            }
-
-            return result;
-        });
     }
 
     ngAfterViewInit() {
-        this.cd.detectChanges();
+        if (isPlatformBrowser(this.platformId) && this.configService.config.theme !== this.tableTheme) {
+            this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue');
+        }
     }
 
     toggleDarkMode() {
@@ -146,9 +108,7 @@ export class LandingComponent implements OnInit {
     }
 
     changeTableTheme(value: string) {
-        if (isPlatformBrowser(this.platformId)) {
-            this.replaceTableTheme(value);
-        }
+        this.replaceTableTheme(value);
     }
 
     replaceTableTheme(newTheme: string) {