rx-marbles integration + responsive updates

Author: btroncone

src/app/operators/_operator-theme.scss

@@ -9,6 +9,21 @@ $link-color: #2196F3;
   $accent: mat-color(map-get($theme, accent));
   $operator-active-background: rgba($operator-active, .7);
 
+  rx-marbles > div {
+    text-align: center;
+    min-width: 840px;
+
+    circle {
+      // temp fix: current broken on marble component
+      filter: none !important;
+    }
+  }
+
+  app-operator a {
+    text-decoration: none;
+    color: $link-color;
+  }
+
   .operator-list {
     a {
       border-bottom: 1px solid $operator-border;
@@ -37,9 +52,4 @@ $link-color: #2196F3;
       }
     }
   }
-
-  app-operator a {
-    text-decoration: none;
-    color: $link-color;
-  }
 }

src/app/operators/components/marble-diagram/marble-diagram.component.html

@@ -1,3 +1,9 @@
-<div class="marble-wrapper mat-elevation-z2">
+<div
+  *ngIf="!useInteractiveMarbles"
+  class="marble-wrapper mat-elevation-z2">
   <img class="marble-diagram" [src]="url" *ngIf="url"/>
 </div>
+<rx-marbles
+  *ngIf="useInteractiveMarbles"
+  [attr.key]="operatorName">
+</rx-marbles>

src/app/operators/components/marble-diagram/marble-diagram.component.ts

@@ -7,5 +7,7 @@ import { OperatorParameters } from '../../../../operator-docs';
   styleUrls: ['./marble-diagram.component.scss']
 })
 export class MarbleDiagramComponent {
+  @Input() operatorName: string;
+  @Input() useInteractiveMarbles: boolean;
   @Input() url: string;
 }

src/app/operators/components/operator-examples/operator-examples.component.scss

@@ -24,7 +24,7 @@
   align-items: center;
   display: flex;
   justify-content: center;
-  padding: 8px 18px;
+  padding: 8px 6px 8px 18px;
   color: rgba(0, 0, 0, 0.692);
   background: #fafafa;
 

src/app/operators/components/operator-header/operator-header.component.scss

@@ -1,5 +1,9 @@
 @import '../../operator-theme';
 
+:host {
+  position: sticky;
+  top: 0px;
+}
 .operator-name {
   font-size:30px;
 }
@@ -13,3 +17,8 @@ mat-toolbar {
   color: rgba(255, 255, 255, 0.87);
   font-weight: normal;
 }
+
+.operator-header {
+  position: sticky;
+  top: 0px;
+}

src/app/operators/components/operator/operator.component.html

@@ -13,7 +13,9 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
   </app-operator-extras>
   <app-marble-diagram
     class="margin-bottom-32"
-    [url]="marbleUrl" >
+    [operatorName]="operatorName"
+    [useInteractiveMarbles]="useInteractiveMarbles"
+    [url]="marbleUrl">
   </app-marble-diagram>
   <app-operator-examples
     [operatorExamples]="examples" class="margin-bottom-16">

src/app/operators/components/operator/operator.component.ts

@@ -25,6 +25,10 @@ export class OperatorComponent {
     return this.operator.marbleUrl;
   }
 
+  get useInteractiveMarbles() {
+    return this.operator.useInteractiveMarbles;
+  }
+
   get shortDescription() {
     return this.operator.shortDescription && this.operator.shortDescription.description;
   }

src/app/operators/operators.component.html

@@ -1,19 +1,17 @@
 <mat-sidenav-container
-  class="operator-container"
-  appOperatorScroll
-  (activeOperator)="activeOperator = $event">
+  class="operator-container">
   <mat-sidenav
-    mode="side"
-    [opened]="true"
-    [fixedTopGap]="64"
+    [mode]="sidenavMode"
+    [opened]="!smallScreen"
+    [fixedTopGap]="operatorMenuGap"
     [fixedInViewport]="true"
-    class="operator-list-sidenav">
+    class="operator-list-sidenav"
+    #operatorSidenav>
     <mat-nav-list *ngFor="let category of categories" class="operator-list">
       <h3 mat-subheader class="category-subheader">{{ category }}</h3>
       <a mat-list-item
         *ngFor="let operator of groupedOperators[category]"
-        [href]="'/operators#' + operator.name"
-        [class.active-operator]="activeOperator === operator.name">
+        [href]="'/operators#' + operator.name">
         {{ operator.name }}
       </a>
     </mat-nav-list>
@@ -23,3 +21,13 @@ <h3 mat-subheader class="category-subheader">{{ category }}</h3>
     [operator]="operator">
   </app-operator>
 </mat-sidenav-container>
+<button
+  *ngIf="smallScreen"
+  mat-mini-fab
+  color="primary"
+  class="sidenav-toggle"
+  [@growInOut]="'in'"
+  (click)="operatorSidenav.toggle()">
+  <mat-icon>view_list</mat-icon>
+</button>
+

src/app/operators/operators.component.scss

@@ -20,3 +20,10 @@ $subheader-color: #333;
 .operator-list-sidenav {
   width: 300px;
 }
+
+.sidenav-toggle {
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 4;
+}

src/app/operators/operators.component.ts

@@ -1,32 +1,52 @@
 import { Component, OnInit, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
 import { Router, ActivatedRoute } from '@angular/router';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { Subscription } from 'rxjs/Subscription';
 import { Observable } from 'rxjs/Observable';
 import { ALL_OPERATORS } from '../../operator-docs';
 import { OperatorDoc } from '../../operator-docs/operator.model';
 
+const OPERATOR_MENU_GAP_LARGE = 64;
+const OPERATOR_MENU_GAP_SMALL = 54;
+
 @Component({
   selector: 'app-operators',
   templateUrl: './operators.component.html',
   styleUrls: ['./operators.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  animations: [
+    trigger('growInOut', [
+      state('in', style({opacity: 1})),
+      transition('void => *', [
+        style({
+          opacity: 0,
+          transform: 'scale3d(.3, .3, .3)'
+        }),
+        animate(`150ms ease-in`)
+      ]),
+      transition('* => void', [
+        animate(`150ms ease-out`, style({
+          opacity: 0,
+          transform: 'scale3d(.3, .3, .3)'
+        }))
+      ])
+    ])
+  ]
 })
 export class OperatorsComponent implements OnInit, AfterViewInit {
   public operators = ALL_OPERATORS;
   public groupedOperators = groupOperatorsByType(ALL_OPERATORS);
   public categories = Object.keys(this.groupedOperators);
-  public activeOperator: string;
 
   private _subscription: Subscription;
 
   constructor(
+    private _breakpointObserver: BreakpointObserver,
     private _router: Router,
     private _activatedRoute: ActivatedRoute
   ) { }
 
   ngOnInit() {
-    this.activeOperator = this._activatedRoute.snapshot.fragment || this.operators[0].name;
-
     this._subscription = this._activatedRoute
       .fragment
       .subscribe(name => this.scrollToOperator(name));
@@ -37,8 +57,8 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
     const name = this._activatedRoute.snapshot.fragment;
 
     if (name) {
-      // wait a tick for scroll to be accurate
-      Promise.resolve().then(_ => this.scrollToOperator(name));
+      // slight delay for scroll to be accurate
+      setTimeout(() => this.scrollToOperator(name), 100);
     }
   }
 
@@ -53,6 +73,23 @@ export class OperatorsComponent implements OnInit, AfterViewInit {
       element.scrollIntoView();
     }
   }
+
+  get extraSmallScreen() {
+    return this._breakpointObserver.isMatched('(max-width: 601px)');
+  }
+
+  get smallScreen() {
+    return this._breakpointObserver.isMatched('(max-width: 901px)');
+  }
+
+  get operatorMenuGap() {
+    return this.extraSmallScreen ? OPERATOR_MENU_GAP_SMALL : OPERATOR_MENU_GAP_LARGE;
+  }
+
+  get sidenavMode() {
+    return this.smallScreen ? 'over' : 'side';
+  }
+
 }
 
 export function groupOperatorsByType(operators: OperatorDoc[]) {