feat(demo): add demo to show fxHide with used with custom breakpoint

Add demo showing custom breakpoint working with `fxHide.yba-min-height` Refs #961.
angular · Jan 13, 2019 · 1e704eb · 1e704eb
1 parent 7d2db14
commit 1e704eb
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
     "karma-coverage": "^1.1.2",
     "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.1.2",
-    "karma-sauce-launcher": "^1.2.0",
+    "karma-sauce-launcher": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
     "magic-string": "^0.22.5",
     "merge2": "^1.2.3",

diff --git a/src/apps/demo-app/src/app/app.module.ts b/src/apps/demo-app/src/app/app.module.ts
@@ -6,9 +6,12 @@ import {FlexLayoutModule, BREAKPOINT} from '@angular/flex-layout';
 import {RoutingModule} from './routing.module';
 import {AppComponent} from './app.component';
 import {DemoMaterialModule} from './material.module';
+import {
+  YBA_BREAKPOINT_PROVIDER
+} from './stack-overflow/hide-custom-bp/hide-with-custom-bp.component';
 import {WatermarkComponent} from './watermark.component';
 
-const EXTRA_BREAKPOINT = [{
+const EXTRA_BREAKPOINTS = [{
   alias: 'xs.landscape',
   suffix: 'XsLandscape',
   mediaQuery: 'screen and (orientation: landscape) and (max-width: 559px)',
@@ -18,7 +21,8 @@ const EXTRA_BREAKPOINT = [{
 
 @NgModule({
   declarations: [
-    AppComponent, WatermarkComponent
+    AppComponent,
+    WatermarkComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -30,7 +34,14 @@ const EXTRA_BREAKPOINT = [{
       printWithBreakpoints: ['md', 'lt-lg', 'lt-xl', 'gt-sm', 'gt-xs']
     }),
   ],
-  providers: [{provide: BREAKPOINT, useValue: EXTRA_BREAKPOINT, multi: true}],
+  providers: [
+    YBA_BREAKPOINT_PROVIDER,
+    {
+      provide: BREAKPOINT,
+      useValue: EXTRA_BREAKPOINTS,
+      multi: true
+    }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss b/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss
@@ -0,0 +1,34 @@
+.bounds {
+      background-color:#ddd;
+      height :800px;
+    }
+
+    .sec1 {
+      background: red;
+      color:white;
+      text-transform: uppercase;
+      padding: 20px;
+    }
+
+    .sec2 {
+      background: yellow;
+      color:blue;
+      padding: 20px;
+    }
+
+    .sec3 {
+      background: blue;
+      color:white;
+      text-transform: uppercase;
+      padding: 20px;
+    }
+
+    .sec1, .sec2, .sec3 {
+      padding-top:20px;
+      text-align:center
+    }
+
+    .content {
+      min-width: 300px;
+      /*height: 400px;*/
+    }
diff --git a/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts b/src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.component.ts
@@ -0,0 +1,67 @@
+import {Component, Directive} from '@angular/core';
+import {BREAKPOINT, ShowHideDirective} from '@angular/flex-layout';
+
+const YBA_BREAKPOINT = {
+  alias: 'yba',
+  suffix: 'Yba',
+  mediaQuery: 'screen and (max-height: 600px)',
+  overlapping: false,
+};
+
+export const YBA_BREAKPOINT_PROVIDER = {
+  provide: BREAKPOINT,
+  useValue: [YBA_BREAKPOINT],
+  multi: true
+};
+
+const inputs = ['fxHide', 'fxHide.yba'];
+const selector = `[fxHide], [fxHide.yba]`;
+
+@Directive({selector, inputs})
+export class CustomHideDirective extends ShowHideDirective {
+  protected inputs = inputs;
+}
+
+@Component({
+  selector: 'demo-hide-custom-bp',
+  styleUrls: [
+    'hide-custom-bp.component.scss'
+  ],
+  template: `
+    <mat-card class="card-demo">
+      <mat-card-title><a
+          href="http://bit.ly/2D2dAxM"
+          target="_blank">StackBlitz</a></mat-card-title>
+      <mat-card-subtitle>Hide when height < 800px using custom breakpoint <span
+          style="font-weight: bold; color: #7a7af7;">fxHide.yba</span>
+      </mat-card-subtitle>
+      <mat-card-content>
+        <div class="content"
+             fxHide.yba
+             fxLayout="row"
+             fxLayout.md="column"
+             fxFlexFill>
+
+          <div fxFlex="15" fxFlex.md="55" class="sec1" fxFlex.xs="55">
+            first-section
+          </div>
+          <div fxFlex="30" fxFlex.md="15" class="sec2">
+            second-section
+          </div>
+          <div fxFlex="55" fxFlex.md="30" class="sec3" fxFlex.xs="15">
+            third-section
+          </div>
+
+        </div>
+      </mat-card-content>
+      <mat-card-footer class="bottomPad">
+        <div class="hint">&lt;div fxLayout="row" fxLayout.xs="column" fxFlexFill fxHide.yba &gt;
+        </div>
+      </mat-card-footer>
+    </mat-card>
+  `
+})
+export class HideWithCustomBPComponent {
+}
+
+
diff --git a/src/apps/demo-app/src/app/stack-overflow/stack-overflow.module.ts b/src/apps/demo-app/src/app/stack-overflow/stack-overflow.module.ts
@@ -5,13 +5,17 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 import {MatCardModule} from '@angular/material/card';
 
 import {StackOverflowComponent} from './stack-overflow/stack-overflow.component';
-import {
-  ComplexColumnOrderingComponent
-} from './complex-column-ordering/complex-column-ordering.component';
 import {GridAreaRowSpanComponent} from './grid-area-row-span/grid-area-row-span.component';
 import {GridColumnSpanComponent} from './grid-column-span/grid-column-span.component';
 import {MozHolyGrailComponent} from './moz-holy-grail/moz-holy-grail.component';
 import {RoutingModule} from './routing.module';
+import {
+  ComplexColumnOrderingComponent
+} from './complex-column-ordering/complex-column-ordering.component';
+import {
+  HideWithCustomBPComponent,
+  CustomHideDirective
+} from './hide-custom-bp/hide-with-custom-bp.component';
 
 @NgModule({
   imports: [
@@ -27,6 +31,8 @@ import {RoutingModule} from './routing.module';
     GridAreaRowSpanComponent,
     GridColumnSpanComponent,
     MozHolyGrailComponent,
+    CustomHideDirective,
+    HideWithCustomBPComponent
   ]
 })
 export class DocsStackOverflowModule {}
diff --git a/src/apps/demo-app/src/app/stack-overflow/stack-overflow/stack-overflow.component.ts b/src/apps/demo-app/src/app/stack-overflow/stack-overflow/stack-overflow.component.ts
@@ -3,6 +3,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'demo-stack-overflow',
   template: `
+    <demo-hide-custom-bp></demo-hide-custom-bp>
     <demo-moz-holy-grail class='small-demo'></demo-moz-holy-grail>
     <demo-complex-column-ordering></demo-complex-column-ordering>
     <demo-grid-area-row-span></demo-grid-area-row-span>

diff --git a/src/apps/demo-app/src/styles.scss b/src/apps/demo-app/src/styles.scss
@@ -144,7 +144,7 @@ div.colored > div:nth-child(10n+7), .seven {
 }
 
 .hint {
-  margin: 5px 5px 0;
+  margin: 5px 5px 0 20px;
   font-size: 0.9em;
   color: #a3a3a3;
 }
@@ -324,7 +324,7 @@ mat-card-content pre {
 .hint {
   color: #a3a3a3;
   font-size: 0.9em;
-  margin: 5px 5px 0;
+  margin: 5px 5px 0 20px;
 }
 
 .forceAbove {

diff --git a/src/lib/core/media-marshaller/media-marshaller.ts b/src/lib/core/media-marshaller/media-marshaller.ts
@@ -74,14 +74,14 @@ export class MediaMarshaller {
       if (mc.matches && this.activatedBreakpoints.indexOf(bp) === -1) {
         this.activatedBreakpoints.push(bp);
         this.activatedBreakpoints.sort(sortDescendingPriority);
-
+        // logBreakpoint(mc, bp);
         this.updateStyles();
 
       } else if (!mc.matches && this.activatedBreakpoints.indexOf(bp) !== -1) {
         // Remove the breakpoint when it's deactivated
         this.activatedBreakpoints.splice(this.activatedBreakpoints.indexOf(bp), 1);
         this.activatedBreakpoints.sort(sortDescendingPriority);
-
+        // logBreakpoint(mc, bp);
         this.updateStyles();
       }
     }
@@ -339,3 +339,7 @@ function initBuilderMap(map: BuilderMap,
   }
 }
 
+// function logBreakpoint(mc: MediaChange, bp: BreakPoint) {
+//   const state = mc.matches ? 'Activating' : 'Deactivating';
+//   console.log(`${state}: ${bp.alias}`);
+// }
diff --git a/src/lib/extended/show-hide/show-hide.ts b/src/lib/extended/show-hide/show-hide.ts
@@ -108,6 +108,7 @@ export class ShowHideDirective extends BaseDirective2 implements AfterViewInit,
         if (inputKey[0] === 'fxHide') {
           shouldShow = !shouldShow;
         }
+        // console.log(`ShowHideDirective::setValue(${shouldShow}, ${bp})`);
         this.setValue(shouldShow, bp);
       }
     });

diff --git a/yarn.lock b/yarn.lock
@@ -967,7 +967,7 @@ archiver-utils@^1.3.0:
     normalize-path "^2.0.0"
     readable-stream "^2.0.0"
 
-archiver@2.1.1, archiver@^2.1.1:
+archiver@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc"
   integrity sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=
@@ -1183,13 +1183,6 @@ [email protected], async@^1.3.0, async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
-[email protected]:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.0.1.tgz#b709cc0280a9c36f09f4536be823c838a9049e25"
-  integrity sha1-twnMAoCpw28J9FNr6CPIOKkEniU=
-  dependencies:
-    lodash "^4.8.0"
-
 [email protected]:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
@@ -5952,15 +5945,14 @@ karma-parallel@^0.3.1:
     istanbul "^0.4.5"
     lodash "^4.17.11"
 
-karma-sauce-launcher@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/karma-sauce-launcher/-/karma-sauce-launcher-1.2.0.tgz#6f2558ddef3cf56879fa27540c8ae9f8bfd16bca"
-  integrity sha512-lEhtGRGS+3Yw6JSx/vJY9iQyHNtTjcojrSwNzqNUOaDceKDu9dPZqA/kr69bUO9G2T6GKbu8AZgXqy94qo31Jg==
+karma-sauce-launcher@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/karma-sauce-launcher/-/karma-sauce-launcher-2.0.2.tgz#dbf98e70d86bf287b03a537cf637eb7aefa975c3"
+  integrity sha512-jLUFaJhHMcKpxFWUesyWYihzM5FvQiJsDwGcCtKeOy2lsWhkVw0V0Byqb1d+wU6myU1mribBtsIcub23HS4kWA==
   dependencies:
-    q "^1.5.0"
-    sauce-connect-launcher "^1.2.2"
-    saucelabs "^1.4.0"
-    wd "^1.4.0"
+    sauce-connect-launcher "^1.2.4"
+    saucelabs "^1.5.0"
+    selenium-webdriver "^4.0.0-alpha.1"
 
 karma-sourcemap-loader@^0.3.7:
   version "0.3.7"
@@ -6469,11 +6461,6 @@ lodash.values@^2.4.1, lodash.values@~2.4.1:
   dependencies:
     lodash.keys "~2.4.1"
 
-[email protected], lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.10:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
-
 [email protected]:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@@ -6484,6 +6471,11 @@ lodash@^3.10.1:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
   integrity sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=
 
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.8.0, lodash@~4.17.10:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
 lodash@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-1.0.2.tgz#8f57560c83b59fc270bd3d561b690043430e2551"
@@ -8233,7 +8225,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
   integrity sha1-VXBbzZPF82c1MMLCy8DCs63cKG4=
 
-q@^1.4.1, q@^1.5.0, q@^1.5.1, q@~1.5.0:
+q@^1.4.1, q@^1.5.1, q@~1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -8618,7 +8610,7 @@ replace-homedir@^1.0.0:
     is-absolute "^1.0.0"
     remove-trailing-separator "^1.1.0"
 
-request@2.88.0, request@^2.55.0, request@^2.72.0, request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.85.0, request@^2.87.0, request@^2.88.0:
+request@^2.55.0, request@^2.72.0, request@^2.74.0, request@^2.79.0, request@^2.81.0, request@^2.85.0, request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -8885,7 +8877,7 @@ sass-graph@^2.2.4:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
-sauce-connect-launcher@^1.2.2:
+sauce-connect-launcher@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sauce-connect-launcher/-/sauce-connect-launcher-1.2.4.tgz#8d38f85242a9fbede1b2303b559f7e20c5609a1c"
   integrity sha512-X2vfwulR6brUGiicXKxPm1GJ7dBEeP1II450Uv4bHGrcGOapZNgzJvn9aioea5IC5BPp/7qjKdE3xbbTBIVXMA==
@@ -8896,7 +8888,7 @@ sauce-connect-launcher@^1.2.2:
     lodash "^4.16.6"
     rimraf "^2.5.4"
 
-saucelabs@^1.4.0, saucelabs@^1.5.0:
+saucelabs@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
   integrity sha512-jlX3FGdWvYf4Q3LFfFWS1QvPg3IGCGWxIc8QBFdPTbpTJnt/v17FHXYVAn7C8sHf1yUXo2c7yIM0isDryfYtHQ==
@@ -8939,6 +8931,16 @@ [email protected], "selenium-webdriver@>= 2.53.1", selenium-webdriver@^3.
     tmp "0.0.30"
     xml2js "^0.4.17"
 
+selenium-webdriver@^4.0.0-alpha.1:
+  version "4.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-alpha.1.tgz#cc93415e21d2dc1dfd85dfc5f6b55f3ac53933b1"
+  integrity sha512-z88rdjHAv3jmTZ7KSGUkTvo4rGzcDGMq0oXWHNIDK96Gs31JKVdu9+FMtT4KBrVoibg8dUicJDok6GnqqttO5Q==
+  dependencies:
+    jszip "^3.1.3"
+    rimraf "^2.5.4"
+    tmp "0.0.30"
+    xml2js "^0.4.17"
+
 semver-diff@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/semver-diff/-/semver-diff-2.1.0.tgz#4bbb8437c8d37e4b0cf1a68fd726ec6d645d6d36"
@@ -10601,11 +10603,6 @@ validate.js@^0.12.0:
   resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.12.0.tgz#17f989e37c192ea2f826bbf19bf4e97e6e4be68f"
   integrity sha512-/x2RJSvbqEyxKj0RPN4xaRquK+EggjeVXiDDEyrJzsJogjtiZ9ov7lj/svVb4DM5Q5braQF4cooAryQbUwOxlA==
 
-[email protected]:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/vargs/-/vargs-0.1.0.tgz#6b6184da6520cc3204ce1b407cac26d92609ebff"
-  integrity sha1-a2GE2mUgzDIEzhtAfKwm2SYJ6/8=
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -10709,19 +10706,6 @@ void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
-wd@^1.4.0:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/wd/-/wd-1.11.1.tgz#21a33e21977ad20522bb189f6529c3b55ac3862c"
-  integrity sha512-XNK6EbOrXF7cG8f3pbps6mb/+xPGZH2r1AL1zGJluGynA/Xt6ip1Tvqj2AkavyDFworreaGXoe+0AP/r7EX9pg==
-  dependencies:
-    archiver "2.1.1"
-    async "2.0.1"
-    lodash "4.17.11"
-    mkdirp "^0.5.1"
-    q "1.4.1"
-    request "2.88.0"
-    vargs "0.1.0"
-
 [email protected]:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz#57d7a93c00db4cc8d556e4d3db4b5db0a80c3bb7"