import { ChangeDetectorRef , Component , ComponentFactoryResolver , HostListener , Inject , OnDestroy , OnInit , PLATFORM_ID , ViewChild , } from '@angular/core' ; import { DynamicHostDirective } from '../../directives/dynamic-host.directive' ; import { NotificationsToasterComponent } from '../../../modules/notifications/toaster.component' ; import { Session } from '../../../services/session' ; import { ThemeService } from '../../services/theme.service' ; import { ConfigsService } from '../../services/configs.service' ; import { isPlatformBrowser } from '@angular/common' ; import { SidebarNavigationService } from '../sidebar/navigation.service' ; import { TopbarService } from '../topbar.service' ; import { NavigationEnd , Router } from '@angular/router' ; import { PageLayoutService } from '../page-layout.service' ; import { FeaturesService } from '../../../services/features.service' ; import { AuthModalService } from '../../../modules/auth/modal/auth-modal.service' ; import { Observable } from 'rxjs' ; @ Component ( { selector : 'm-v3topbar' , templateUrl : 'v3-topbar.component.html' , } ) export class V3TopbarComponent implements OnInit , OnDestroy { readonly cdnAssetsUrl : string ; timeout ; isTouchScreen = false ; @ ViewChild ( DynamicHostDirective , { static : true } ) notificationsToasterHost : DynamicHostDirective ; componentRef ; componentInstance : NotificationsToasterComponent ; showTopbar : boolean = true ; marketingPages : boolean = false ; showSearchBar : boolean = true ; isMobile : boolean = false ; onAuthPages : boolean = false ; router$ ; constructor ( protected sidebarService , protected themeService , protected configs , protected session , protected cd , protected componentFactoryResolver , protected topbarService , protected router , @ Inject ( PLATFORM_ID ) private platformId , public pageLayoutService , private featuresService , private authModal ) { this . cdnAssetsUrl = this . configs . get ( 'cdn_assets_url' ) ; if ( isPlatformBrowser ( this . platformId ) ) { this . onResize ( ) ; } } ngOnInit ( ) { if ( ! this . featuresService . has ( 'notifications-v3' ) ) { this . loadComponent ( ) ; } this . topbarService . setContainer ( this ) ; this . session . isLoggedIn ( ( ) => this . detectChanges ( ) ) ; this . listen ( ) ; } getCurrentUser ( ) { return this . session . getLoggedInUser ( ) ; } loadComponent ( ) { const componentFactory = this . componentFactoryResolver . resolveComponentFactory ( NotificationsToasterComponent ) , viewContainerRef = this . notificationsToasterHost . viewContainerRef ; viewContainerRef . clear ( ) ; this . componentRef = viewContainerRef . createComponent ( componentFactory ) ; this . componentInstance = this . componentRef . instance ; } detectChanges ( ) { this . cd . markForCheck ( ) ; this . cd . detectChanges ( ) ; } param { void } public toggleSidebarNav ( ) { this . sidebarService . isOpened$ . next ( true ) ; } private listen ( ) { this . setOnAuthPages ( this . router . url ) ; this . router$ = this . router . events . subscribe ( ( navigationEvent ) => { if ( navigationEvent instanceof NavigationEnd ) { if ( ! navigationEvent . urlAfterRedirects ) { return ; } this . setOnAuthPages ( navigationEvent . urlAfterRedirects || navigationEvent . url ) ; } } ) ; } private setOnAuthPages ( url ) { this . onAuthPages = url === '/login' || url === '/register' ; this . detectChanges ( ) ; } shouldShowLogo ( ) { if ( this . marketingPages ) { return true ; } else { return ! this . isMobile ; } } toggleVisibility ( visible ) { this . showTopbar = visible ; this . detectChanges ( ) ; } toggleMarketingPages ( visible ) { this . marketingPages = visible ; this . detectChanges ( ) ; } toggleSearchBar ( visible ) { this . showSearchBar = visible ; this . detectChanges ( ) ; } @ HostListener ( 'window:resize' ) onResize ( ) { this . isMobile = window . innerWidth <= 540 ; } ngOnDestroy ( ) { if ( this . timeout ) { clearTimeout ( this . timeout ) ; } if ( this . router$ ) { this . router$ . unsubscribe ( ) ; } } async onJoinNowClick ( ) { try { await this . authModal . open ( ) ; this . doRedirect ( ) ; } catch ( e ) { if ( e === 'DismissedModalException' ) { return ; } console . error ( e ) ; } } returns { Promise < void > } async onLoginClick ( ) { try { await this . authModal . open ( { formDisplay : 'login' } ) ; this . doRedirect ( ) ; } catch ( e ) { if ( e === 'DismissedModalException' ) { return ; } console . error ( e ) ; } } doRedirect ( ) { if ( this . router . url === '/' || this . router . url === '/about' ) { this . router . navigate ( [ '/newsfeed/subscriptions/latest' ] ) ; } } returns { string } public getMainLogoUrl ( ) { return this . session . getLoggedInUser ( ) ? '/newsfeed/subscriptions/latest' : '/' ; } returns { Observable < boolean > } get isDarkTheme$ ( ) : Observable < boolean > { return this . themeService . isDark$ ; } }