From d95d5753b442ea1974643de9236d3257a7044987 Mon Sep 17 00:00:00 2001 From: Davide Negretti Date: Thu, 23 Nov 2023 00:34:05 +0100 Subject: [PATCH] [DURACOM-195] New host-window service methods --- src/app/shared/host-window.service.ts | 57 +++++++++++++++---- .../testing/host-window-service.stub.ts | 4 ++ 2 files changed, 51 insertions(+), 10 deletions(-) diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts index 6d13d921e0..1c71bf5075 100644 --- a/src/app/shared/host-window.service.ts +++ b/src/app/shared/host-window.service.ts @@ -10,13 +10,15 @@ import { AppState } from '../app.reducer'; import { CSSVariableService } from './sass-helper/css-variable.service'; export enum WidthCategory { - XS, - SM, - MD, - LG, - XL + XS = 0, + SM = 1, + MD = 2, + LG = 3, + XL = 4, } +export const maxMobileWidth = WidthCategory.SM; + const hostWindowStateSelector = (state: AppState) => state.hostWindow; const widthSelector = createSelector(hostWindowStateSelector, (hostWindow: HostWindowState) => hostWindow.width); @@ -31,11 +33,11 @@ export class HostWindowService { /* See _exposed_variables.scss */ variableService.getAllVariables() .subscribe((variables) => { - this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10); - this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10); - this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10); - this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10); - }); + this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10); + this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10); + this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10); + this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10); + }); } private getWidthObs(): Observable { @@ -99,6 +101,41 @@ export class HostWindowService { ); } + is(exactWidthCat: WidthCategory): Observable { + return this.widthCategory.pipe( + map((widthCat: WidthCategory) => widthCat === exactWidthCat), + distinctUntilChanged() + ); + } + + isIn(widthCatArray: [WidthCategory]): Observable { + return this.widthCategory.pipe( + map((widthCat: WidthCategory) => widthCatArray.includes(widthCat)), + distinctUntilChanged() + ); + } + + isUpTo(maxWidthCat: WidthCategory): Observable { + return this.widthCategory.pipe( + map((widthCat: WidthCategory) => widthCat <= maxWidthCat), + distinctUntilChanged() + ); + } + + isMobile(): Observable { + return this.widthCategory.pipe( + map((widthCat: WidthCategory) => widthCat <= maxMobileWidth), + distinctUntilChanged() + ); + } + + isDesktop(): Observable { + return this.widthCategory.pipe( + map((widthCat: WidthCategory) => widthCat > maxMobileWidth), + distinctUntilChanged() + ); + } + isXsOrSm(): Observable { return observableCombineLatest( this.isXs(), diff --git a/src/app/shared/testing/host-window-service.stub.ts b/src/app/shared/testing/host-window-service.stub.ts index ecb8c26acb..b64d6fbffc 100644 --- a/src/app/shared/testing/host-window-service.stub.ts +++ b/src/app/shared/testing/host-window-service.stub.ts @@ -20,4 +20,8 @@ export class HostWindowServiceStub { isXsOrSm(): Observable { return this.isXs(); } + + isMobile(): Observable { + return this.isXs(); + } }