diff --git a/src/lib/flexbox/api/show-hide.ts b/src/lib/flexbox/api/show-hide.ts index ec6e15bf6..599e8a290 100644 --- a/src/lib/flexbox/api/show-hide.ts +++ b/src/lib/flexbox/api/show-hide.ts @@ -30,10 +30,10 @@ const FALSY = ['false', false, 0]; /** * For fxHide selectors, we invert the 'value' * and assign to the equivalent fxShow selector cache + * - When 'hide' === '' === true, do NOT show the element + * - When 'hide' === false or 0... we WILL show the element */ export function negativeOf(hide: any) { - // where 'hide' === '', do NOT show the element - // where 'hide' === false or 0... we WILL show the element return (hide === "") ? false : ((hide === "false") || (hide === 0)) ? true : !hide; } @@ -45,25 +45,11 @@ export function negativeOf(hide: any) { @Directive({ selector: ` [fxShow], - [fxShow.xs], - [fxShow.gt-xs], - [fxShow.sm], - [fxShow.gt-sm], - [fxShow.md], - [fxShow.gt-md], - [fxShow.lg], - [fxShow.gt-lg], - [fxShow.xl], + [fxShow.xs],[fxShow.gt-xs],[fxShow.sm],[fxShow.gt-sm], + [fxShow.md],[fxShow.gt-md],[fxShow.lg],[fxShow.gt-lg],[fxShow.xl], [fxHide], - [fxHide.xs], - [fxHide.gt-xs], - [fxHide.sm], - [fxHide.gt-sm], - [fxHide.md], - [fxHide.gt-md], - [fxHide.lg], - [fxHide.gt-lg], - [fxHide.xl] + [fxHide.xs],[fxHide.gt-xs],[fxHide.sm],[fxHide.gt-sm], + [fxHide.md],[fxHide.gt-md],[fxHide.lg],[fxHide.gt-lg],[fxHide.xl] ` }) export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChanges, OnDestroy { diff --git a/src/lib/media-query/match-media.spec.ts b/src/lib/media-query/match-media.spec.ts index 12a1a00be..30f0d847b 100644 --- a/src/lib/media-query/match-media.spec.ts +++ b/src/lib/media-query/match-media.spec.ts @@ -223,7 +223,7 @@ describe('match-media-observable', () => { // "all" mediaQuery is already active; total count should be (3) - expect(activationCount).toEqual(3); + expect(activationCount).toEqual(2); expect(deactivationCount).toEqual(0); subscription.unsubscribe(); diff --git a/src/lib/media-query/mock/mock-match-media.ts b/src/lib/media-query/mock/mock-match-media.ts index 43e4efb18..8488c5fa1 100644 --- a/src/lib/media-query/mock/mock-match-media.ts +++ b/src/lib/media-query/mock/mock-match-media.ts @@ -75,7 +75,7 @@ export class MockMatchMedia extends MatchMedia { * "xs" active == false * */ - private _activateWithOverlaps(mediaQuery: string, useOverlaps: boolean) { + private _activateWithOverlaps(mediaQuery: string, useOverlaps: boolean): boolean { if (useOverlaps) { let bp = this._breakpoints.findByQuery(mediaQuery); switch (bp ? bp.alias : 'unknown') { @@ -96,7 +96,7 @@ export class MockMatchMedia extends MatchMedia { } } // Activate last since the responsiveActivation is watching *this* mediaQuery - this._activateByQuery(mediaQuery); + return this._activateByQuery(mediaQuery); } /** diff --git a/src/lib/media-query/observable-media-service.spec.ts b/src/lib/media-query/observable-media-service.spec.ts index fcc8904f0..96e1b7c2e 100644 --- a/src/lib/media-query/observable-media-service.spec.ts +++ b/src/lib/media-query/observable-media-service.spec.ts @@ -94,7 +94,7 @@ describe('match-media-observable-provider', () => { subscription.unsubscribe(); })); - it('can can subscribe to built-in mediaQueries', async(inject( + it('can subscribe to built-in mediaQueries', inject( [ObservableMedia, MatchMedia], (media$, matchMedia) => { let current: MediaChange; @@ -117,6 +117,9 @@ describe('match-media-observable-provider', () => { matchMedia.activate('md'); expect(current.mediaQuery).toEqual(findMediaQuery('md')); + // Allow overlapping activations to be announced to observers + media$.filterOverlaps = false; + matchMedia.activate('gt-lg'); expect(current.mediaQuery).toEqual(findMediaQuery('gt-lg')); @@ -127,7 +130,7 @@ describe('match-media-observable-provider', () => { matchMedia.autoRegisterQueries = true; subscription.unsubscribe(); } - }))); + })); it('can `.unsubscribe()` properly', async(inject( [ObservableMedia, MatchMedia], diff --git a/src/lib/media-query/observable-media-service.ts b/src/lib/media-query/observable-media-service.ts index 6c6966d06..9b92b04bf 100644 --- a/src/lib/media-query/observable-media-service.ts +++ b/src/lib/media-query/observable-media-service.ts @@ -24,10 +24,12 @@ import {BreakPoint} from './breakpoints/break-point'; */ export abstract class ObservableMedia implements Subscribable { abstract isActive(query: string): boolean; + abstract asObservable(): Observable; + abstract subscribe(next?: (value: MediaChange) => void, - error?: (error: any) => void, - complete?: () => void): Subscription; + error?: (error: any) => void, + complete?: () => void): Subscription; } /** @@ -74,12 +76,15 @@ export abstract class ObservableMedia implements Subscribable { */ @Injectable() export class MediaService implements ObservableMedia { - private observable$: Observable; + /** + * Should we announce gt- breakpoint activations ? + */ + public filterOverlaps = true; constructor(private mediaWatcher: MatchMedia, private breakpoints: BreakPointRegistry) { - this._registerBreakPoints(); this.observable$ = this._buildObservable(); + this._registerBreakPoints(); } /** @@ -137,6 +142,10 @@ export class MediaService implements ObservableMedia { .map((change: MediaChange) => { // Inject associated (if any) alias information into the MediaChange event return mergeAlias(change, this._findByQuery(change.mediaQuery)); + }) + .filter((change: MediaChange) => { + let bp = this.breakpoints.findByQuery(change.mediaQuery); + return !bp ? true : !(this.filterOverlaps && bp.overlapping); }); } @@ -145,7 +154,7 @@ export class MediaService implements ObservableMedia { */ private _findByAlias(alias) { return this.breakpoints.findByAlias(alias); - }; + } /** * Breakpoint locator by mediaQuery @@ -162,6 +171,7 @@ export class MediaService implements ObservableMedia { return bp ? bp.mediaQuery : query; }; + private observable$: Observable; } /**