Browse Source

window removed for ssr support

feature/ssr-migration-schematic
erdemcaygor 1 year ago
parent
commit
f35e31cb3e
  1. 7
      npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts
  2. 22
      npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts

7
npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/languages.component.ts

@ -1,8 +1,8 @@
import { ConfigStateService, CoreModule, LanguageInfo, SessionStateService } from '@abp/ng.core'; import { ConfigStateService, CoreModule, LanguageInfo, SessionStateService } from '@abp/ng.core';
import { Component } from '@angular/core'; import { Component, inject } from '@angular/core';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map } from 'rxjs/operators'; import { map } from 'rxjs/operators';
import { CommonModule } from '@angular/common'; import { CommonModule, DOCUMENT } from '@angular/common';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
@Component({ @Component({
@ -42,8 +42,9 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
imports: [CommonModule, CoreModule, NgbDropdownModule], imports: [CommonModule, CoreModule, NgbDropdownModule],
}) })
export class LanguagesComponent { export class LanguagesComponent {
document = inject(DOCUMENT);
get smallScreen(): boolean { get smallScreen(): boolean {
return window.innerWidth < 992; return this.document.defaultView.innerWidth < 992;
} }
languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages'); languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');

22
npm/ng-packs/packages/theme-basic/src/lib/services/layout.service.ts

@ -1,11 +1,13 @@
import {RouterEvents, SubscriptionService} from '@abp/ng.core'; import { RouterEvents, SubscriptionService } from '@abp/ng.core';
import { ChangeDetectorRef, Injectable } from '@angular/core'; import { ChangeDetectorRef, inject, Injectable } from '@angular/core';
import { fromEvent } from 'rxjs'; import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import { eThemeBasicComponents } from '../enums'; import { eThemeBasicComponents } from '../enums';
import { DOCUMENT } from '@angular/common';
@Injectable() @Injectable()
export class LayoutService { export class LayoutService {
document = inject(DOCUMENT);
isCollapsed = true; isCollapsed = true;
smallScreen!: boolean; // do not set true or false smallScreen!: boolean; // do not set true or false
@ -16,16 +18,18 @@ export class LayoutService {
navItemsComponentKey = eThemeBasicComponents.NavItems; navItemsComponentKey = eThemeBasicComponents.NavItems;
constructor(private subscription: SubscriptionService, constructor(
private cdRef: ChangeDetectorRef, private subscription: SubscriptionService,
routerEvents:RouterEvents) { private cdRef: ChangeDetectorRef,
subscription.addOne(routerEvents.getNavigationEvents("End"),() => { routerEvents: RouterEvents,
) {
subscription.addOne(routerEvents.getNavigationEvents('End'), () => {
this.isCollapsed = true; this.isCollapsed = true;
}) });
} }
private checkWindowWidth() { private checkWindowWidth() {
const isSmallScreen = window.innerWidth < 992; const isSmallScreen = this.document.defaultView.innerWidth < 992;
if (isSmallScreen && this.smallScreen === false) { if (isSmallScreen && this.smallScreen === false) {
this.isCollapsed = false; this.isCollapsed = false;
setTimeout(() => { setTimeout(() => {
@ -39,7 +43,7 @@ export class LayoutService {
subscribeWindowSize() { subscribeWindowSize() {
this.checkWindowWidth(); this.checkWindowWidth();
const resize$ = fromEvent(window, 'resize').pipe(debounceTime(150)); const resize$ = fromEvent(this.document.defaultView, 'resize').pipe(debounceTime(150));
this.subscription.addOne(resize$, () => this.checkWindowWidth()); this.subscription.addOne(resize$, () => this.checkWindowWidth());
} }
} }

Loading…
Cancel
Save