fix(fxHide,fxShow): fix standalone breakpoint selectors (#121)

* fix(fxHide,fxShow): fix standalone breakpoint selectors * Many directive selectors were missing a `,` separator between then xs and gt-xs breakpoints * fxShow, fxHide preserve and restore the element's original display CSS style * added more tests standalone breakpoint selectors, disabled selectors, and deactivated mediaQueries fixes #62, closes ##59. * fix(api): add missing comma-delimiter in breakpoint selectors * add test to use md breakpoint via `fxHide.md` * fix(fxShow, fxHide): restore proper display mode when not active The fxHide and fxShow should not change the display mode to 'flex'. Instead the display mode (when not 'none') should be the default (=== 'block') or the explicitly assigned display mode for that element. Fixes #105.
angular · Jan 24, 2017 · 0ca7d07 · 0ca7d07
1 parent 04d24d5
commit 0ca7d07
Show file tree

Hide file tree

Showing 14 changed files with 415 additions and 137 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
@@ -25,8 +25,7 @@ import {MatchMediaObservable} from "../../../lib/media-query/match-media";
                     [fxLayout.gt-lg]="firstColGtLg" 
                     fxFlex="50%" 
                     fxFlex.gt-sm="25"
-                    fxShow="true"
-                    fxShow.md="false" 
+                    fxHide.md 
                     (click)="toggleLayoutFor(1)" style="cursor: pointer;">
                 <div fxFlex>Col #1: First item in row</div>
                 <div fxFlex>Col #1: Second item in row</div>
@@ -43,7 +42,7 @@ import {MatchMediaObservable} from "../../../lib/media-query/match-media";
       <!--</md-card-actions>-->
       <md-card-footer style="width:95%">
          <div fxLayout="row" class="hint" fxLayoutAlign="space-around" > 
-            <div>&lt;div fxLayout="{{ firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxShow.md="false" &gt;</div>
+            <div>&lt;div fxLayout="{{ firstCol }}" fxFlex="50%" fxFlex.gt-sm="25%" fxHide.md &gt;</div>
             <div fxFlex></div>
             <div>&lt;div  fxLayout="{{ secondCol }}" fxFlex &gt;</div>
          </div>

diff --git a/src/lib/flexbox/api/base.ts b/src/lib/flexbox/api/base.ts
@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
- import {ElementRef, Renderer, OnDestroy} from '@angular/core';
+import {ElementRef, Renderer, OnDestroy} from '@angular/core';
 import {applyCssPrefixes} from '../../utils/auto-prefixer';
 
 import {ResponsiveActivation, KeyOptions} from '../responsive/responsive-activation';
@@ -20,6 +20,11 @@ export type StyleDefinition = string|{[property: string]: string|number};
 
 /** Abstract base class for the Layout API styling directives. */
 export abstract class BaseFxDirective implements OnDestroy {
+  /**
+   * Original dom Elements CSS display style
+   */
+  protected _display;
+
   /**
    * MediaQuery Activation Tracker
    */
@@ -36,6 +41,7 @@ export abstract class BaseFxDirective implements OnDestroy {
   constructor(private _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
               private _renderer: Renderer) {
+    this._display = this._getDisplayStyle();
   }
 
   // *********************************************
@@ -65,6 +71,26 @@ export abstract class BaseFxDirective implements OnDestroy {
   // Protected Methods
   // *********************************************
 
+  /**
+   * Was the directive's default selector used ?
+   * If not, use the fallback value!
+   */
+  protected _getDefaultVal(key: string, fallbackVal: any): string|boolean {
+    let val = this._queryInput(key);
+    let hasDefaultVal = (val !== undefined && val !== null);
+    return (hasDefaultVal && val !== '') ? val : fallbackVal;
+  }
+
+  /**
+   * Quick accessor to the current HTMLElement's `display` style
+   * Note: this allows use to preserve the original style
+   * and optional restore it when the mediaQueries deactivate
+   */
+  protected _getDisplayStyle(): string {
+    let element: HTMLElement = this._elementRef.nativeElement;
+    return (element.style as any)['display'] || "flex";
+  }
+
   /**
    * Applies styles given via string pair or object map to the directive element.
    */
@@ -137,13 +163,13 @@ export abstract class BaseFxDirective implements OnDestroy {
    */
   protected get childrenNodes() {
     var obj = this._elementRef.nativeElement.childNodes;
-    var array = [];
+    var buffer = [];
 
     // iterate backwards ensuring that length is an UInt32
     for ( var i = obj.length; i--; ) {
-      array[i] = obj[i];
+      buffer[i] = obj[i];
     }
-    return array;
+    return buffer;
   }
 
 }
diff --git a/src/lib/flexbox/api/flex-align.ts b/src/lib/flexbox/api/flex-align.ts
@@ -28,12 +28,12 @@ import {MediaMonitor} from '../../media-query/media-monitor';
 @Directive({
   selector: `
   [fxFlexAlign],
-  [fxFlexAlign.xs]
+  [fxFlexAlign.xs],
   [fxFlexAlign.gt-xs],
   [fxFlexAlign.sm],
-  [fxFlexAlign.gt-sm]
+  [fxFlexAlign.gt-sm],
   [fxFlexAlign.md],
-  [fxFlexAlign.gt-md]
+  [fxFlexAlign.gt-md],
   [fxFlexAlign.lg],
   [fxFlexAlign.gt-lg],
   [fxFlexAlign.xl]

diff --git a/src/lib/flexbox/api/flex-offset.ts b/src/lib/flexbox/api/flex-offset.ts
@@ -28,12 +28,12 @@ import {MediaMonitor} from '../../media-query/media-monitor';
  */
 @Directive({selector: `
   [fxFlexOffset],
-  [fxFlexOffset.xs]
+  [fxFlexOffset.xs],
   [fxFlexOffset.gt-xs],
   [fxFlexOffset.sm],
-  [fxFlexOffset.gt-sm]
+  [fxFlexOffset.gt-sm],
   [fxFlexOffset.md],
-  [fxFlexOffset.gt-md]
+  [fxFlexOffset.gt-md],
   [fxFlexOffset.lg],
   [fxFlexOffset.gt-lg],
   [fxFlexOffset.xl]

diff --git a/src/lib/flexbox/api/flex-order.ts b/src/lib/flexbox/api/flex-order.ts
@@ -27,12 +27,12 @@ import {MediaMonitor} from '../../media-query/media-monitor';
  */
 @Directive({selector: `
   [fxFlexOrder],
-  [fxFlexOrder.xs]
+  [fxFlexOrder.xs],
   [fxFlexOrder.gt-xs],
   [fxFlexOrder.sm],
-  [fxFlexOrder.gt-sm]
+  [fxFlexOrder.gt-sm],
   [fxFlexOrder.md],
-  [fxFlexOrder.gt-md]
+  [fxFlexOrder.gt-md],
   [fxFlexOrder.lg],
   [fxFlexOrder.gt-lg],
   [fxFlexOrder.xl]

diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts
@@ -44,9 +44,9 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | '
   [fxFlex.xs],
   [fxFlex.gt-xs],
   [fxFlex.sm],
-  [fxFlex.gt-sm]
+  [fxFlex.gt-sm],
   [fxFlex.md],
-  [fxFlex.gt-md]
+  [fxFlex.gt-md],
   [fxFlex.lg],
   [fxFlex.gt-lg],
   [fxFlex.xl]