fix(observableMedia): consistently emit initial value

angular · Oct 21, 2017 · f19bff2 · f19bff2
1 parent 3602f7b
commit f19bff2
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts b/src/demo-app/app/docs-layout-responsive/responsiveRowColumns.demo.ts
@@ -37,7 +37,7 @@ import {ObservableMedia} from '@angular/flex-layout';
           </div>
         </div>
       </mat-card-content>
-      <mat-card-footer style="width:95%">
+      <mat-card-footer style="width:95%; font-size: 0.9em; padding-left: 25px;">
         <div fxLayout="row" class="hint" fxLayoutAlign="space-around">
           <div>&lt;div fxLayout="{{ firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxHide.md &gt;
           </div>

diff --git a/src/demo-app/app/shared/media-query-status.ts b/src/demo-app/app/shared/media-query-status.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 import {MediaChange} from '@angular/flex-layout';
 import {ObservableMedia} from '@angular/flex-layout';
@@ -8,13 +8,13 @@ import {Observable} from 'rxjs/Observable';
   moduleId: module.id,
   selector : 'media-query-status',
   template : `
-    <div class="mqInfo" *ngIf="change$ | async as change">
-      <span title="Active MediaQuery">{{  buildMQInfo(change) }}</span>
+    <div class="mqInfo" *ngIf="media$ | async as event">
+      <span title="Active MediaQuery">{{  extractQuery(event) }}</span>
     </div>
   `,
   styles: [
       ` .mqInfo {
-      padding-left: 5px;
+      padding-left: 25px;
       margin-bottom: 5px;
       margin-top: 10px;
     }`,
@@ -26,18 +26,16 @@ import {Observable} from 'rxjs/Observable';
       ` .mqInfo > span:before {
       content: attr(title) ': ';
     }`
-  ]
+  ],
+  changeDetection : ChangeDetectionStrategy.OnPush
 })
 export class MediaQueryStatus {
-  change$: Observable<MediaChange> = this.media$.asObservable();
+  media$: Observable<MediaChange> = this.mediaService.asObservable();
 
-  constructor(private media$: ObservableMedia) {
+  constructor(private mediaService: ObservableMedia) {
   }
 
-  buildMQInfo(change: MediaChange): string {
-    if (change.mediaQuery.indexOf('orientation') > -1) {
-      return '';
-    }
+  extractQuery(change: MediaChange): string {
     return change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
   }
 }
diff --git a/src/lib/api/flexbox/flex-offset.spec.ts b/src/lib/api/flexbox/flex-offset.spec.ts
@@ -58,7 +58,10 @@ describe('flex directive', () => {
 
       let dom = fixture.debugElement.children[0].nativeElement;
       let isBox = _.hasStyle(dom, 'margin-left', '32px');
-      let hasFlex = _.hasStyle(dom, 'flex', '1 1 auto');
+      let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') ||         // IE
+                _.hasStyle(dom, 'flex', '1 1 1e-9px') ||          // Chrome
+                _.hasStyle(dom, 'flex', '1 1 0.000000001px') ||   // Safari
+                _.hasStyle(dom, 'flex', '1 1 0px');
 
       expect(isBox).toBeTruthy();
       expect(hasFlex).toBe(true);

diff --git a/src/lib/api/flexbox/flex.spec.ts b/src/lib/api/flexbox/flex.spec.ts
@@ -65,7 +65,10 @@ describe('flex directive', () => {
 
       let dom = fixture.debugElement.children[0].nativeElement;
       let isBox = _.hasStyle(dom, 'box-sizing', 'border-box');
-      let hasFlex = _.hasStyle(dom, 'flex', '1 1 auto');
+      let hasFlex = _.hasStyle(dom, 'flex', '1 1 1e-09px') ||         // IE
+          _.hasStyle(dom, 'flex', '1 1 1e-9px') ||          // Chrome
+          _.hasStyle(dom, 'flex', '1 1 0.000000001px') ||   // Safari
+          _.hasStyle(dom, 'flex', '1 1 0px');
 
       expect(isBox).toBeTruthy();
       expect(hasFlex).toBeTruthy();

diff --git a/src/lib/media-query/observable-media.ts b/src/lib/media-query/observable-media.ts
@@ -136,6 +136,7 @@ export class MediaService implements ObservableMedia {
    */
   private _buildObservable() {
     const self = this;
+    const media$ = this.mediaWatcher.observe();
     const activationsOnly = (change: MediaChange) => {
       return change.matches === true;
     };
@@ -152,14 +153,16 @@ export class MediaService implements ObservableMedia {
      * Inject associated (if any) alias information into the MediaChange event
      * Exclude mediaQuery activations for overlapping mQs. List bounded mQ ranges only
      */
-    return filter.call(
-        map.call(
+    return map.call(
+        filter.call(
             filter.call(
-                this.mediaWatcher.observe(),
+                media$,
                 activationsOnly
             ),
-            addAliasInformation),
-        excludeOverlaps);
+            excludeOverlaps
+        ),
+        addAliasInformation
+    );
   }
 
   /**