-
Notifications
You must be signed in to change notification settings - Fork 773
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(core): MediaObserver can report 1..n activations (#994)
Previous versions of MediaObserver suffered from a significant design flaw. Those versions assumed that a breakpoint change would only activate/match a single mediaQuery. Additionally those versions would not (by default) report overlapping activations. Applications interested in notifications for all current activations would therefore not receive proper event-notifications. The current enhancements provide several features: * Report 1..n mediaQuery activations (matches === true) in a single event * Report activations sorted by descending priority * By default, reports include overlapping breakpoint activations * Debounce notifications to a single grouped event > useful to reduce browser reflow thrashing BREAKING CHANGE: The stream data type for `asObservable` is now **MediaChange[]** instead of *MediaChange* and `media$` is deprecated in favor of `asObservable()`. * `filterOverlaps` now defaults to `false`
- Loading branch information
1 parent
ca4c03c
commit 8307655
Showing
10 changed files
with
278 additions
and
189 deletions.
There are no files selected for viewing
22 changes: 11 additions & 11 deletions
22
src/apps/demo-app/src/app/media-query-status/media-query-status.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,25 @@ | ||
import {ChangeDetectionStrategy, Component} from '@angular/core'; | ||
import {Component} from '@angular/core'; | ||
import {MediaChange, MediaObserver} from '@angular/flex-layout'; | ||
import {Observable} from 'rxjs'; | ||
|
||
@Component({ | ||
selector: 'media-query-status', | ||
template: ` | ||
<div class="mqInfo" *ngIf="media$ | async as event"> | ||
<span title="Active MediaQuery">{{ extractQuery(event) }}</span> | ||
<div class="mqInfo"> | ||
Active MediaQuery(s): | ||
<ul> | ||
<li *ngFor="let change of (media$ | async) as changes"> | ||
{{change.mqAlias}} = {{change.mediaQuery}} | ||
</li> | ||
</ul> | ||
</div> | ||
`, | ||
styleUrls: ['./media-query-status.component.scss'], | ||
changeDetection : ChangeDetectionStrategy.OnPush | ||
}) | ||
export class MediaQueryStatusComponent { | ||
media$: Observable<MediaChange>; | ||
media$: Observable<MediaChange[]>; | ||
|
||
constructor(mediaObserver: MediaObserver) { | ||
this.media$ = mediaObserver.media$; | ||
} | ||
|
||
extractQuery(change: MediaChange): string { | ||
return change ? `'${change.mqAlias}' = (${change.mediaQuery})` : ''; | ||
constructor(media: MediaObserver) { | ||
this.media$ = media.asObservable(); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.