Commit 933511f4 authored by Shane Eckenrode's avatar Shane Eckenrode

Merge branch 'feature/theming-utils' into 'develop'

Add filter to prevent cases of no and/or multiple fulfilled breakpoints

See merge request !10
parents 31f050be 418b706c
Pipeline #85251 passed with stages
in 4 minutes and 12 seconds
......@@ -21,7 +21,7 @@ export class ResponsiveDirective implements OnInit, OnDestroy {
constructor(private responsiveService: ResponsiveService) {}
ngOnInit(): void {
public ngOnInit(): void {
this.responsiveService.currentScreenSize$
.pipe(
filter(size => !!size),
......
import { BreakpointObserver } from '@angular/cdk/layout';
import { Injectable, OnDestroy } from '@angular/core';
import { combineLatest, Observable, ReplaySubject, Subject } from 'rxjs';
import { map, takeUntil, tap } from 'rxjs/operators';
import { filter, map, takeUntil, tap } from 'rxjs/operators';
import { PSU_BREAKPOINTS } from './breakpoints.model';
import { ScreenSize } from './screen-size.model';
......@@ -45,23 +45,29 @@ export class ResponsiveService implements OnDestroy {
combineLatest(this.isMobile$, this.isTabletSmall$, this.isTabletLarge$, this.isDesktop$)
.pipe(
map(([mobile, tabletSmall, tabletLarge, desktop]) => ({ mobile, tabletSmall, tabletLarge, desktop })),
filter(responsiveChange => {
const values = Object.values(responsiveChange);
return values.some(breakpoints => !!breakpoints) && values.filter(val => !!val).length === 1;
}),
tap(responsiveChange => {
let screenSize: ScreenSize;
if (responsiveChange.mobile) {
screenSize = ScreenSize.MOBILE;
this.isMobile = true;
} else if (responsiveChange.tabletSmall) {
screenSize = ScreenSize.TABLET_SM;
this.isTabletSmall = true;
if (responsiveChange.desktop) {
screenSize = ScreenSize.DESKTOP;
this.isDesktop = true;
} else if (responsiveChange.tabletLarge) {
screenSize = ScreenSize.TABLET;
this.isTabletLarge = true;
} else {
screenSize = ScreenSize.DESKTOP;
this.isDesktop = true;
} else if (responsiveChange.tabletSmall) {
screenSize = ScreenSize.TABLET_SM;
this.isTabletSmall = true;
} else if (responsiveChange.mobile) {
screenSize = ScreenSize.MOBILE;
this.isMobile = true;
}
this.screenSizeChange(screenSize);
if (!!screenSize) {
this.screenSizeChange(screenSize);
}
}),
takeUntil(this._destroy$)
)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment