feat(operators): operator browser page

ngsw-manifest.json

@@ -2,9 +2,14 @@
   "external": {
     "urls": [
       {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
-      {"url": "https://fonts.googleapis.com/css?family=Roboto"},
+      {"url": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"},
       {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
-      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/typescript.min.js"},
+      {"url": "http://reactivex.io/rxjs/img/combineAll.png"},
+      {"url": "http://reactivex.io/rxjs/img/combineLatest.png"}
     ]
   }
 }

package.json

@@ -33,6 +33,7 @@
     "@types/hammerjs": "2.0.35",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
+    "ngx-clipboard": "8.1.0",
     "rxjs": "5.4.2",
     "zone.js": "0.8.14"
   },

src/app/app.component.html

@@ -12,14 +12,14 @@
   <mat-sidenav-container>
     <mat-sidenav #sidenav role="navigation">
       <mat-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" 
-          [routerLinkActiveOptions]="menu.options" 
+        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
+          [routerLinkActiveOptions]="menu.options"
           [routerLink]="menu.link">
           {{menu.title}}
         </a>
       </mat-nav-list>
     </mat-sidenav>
-    <main class="body-margin">
+    <main class="app-content">
       <router-outlet></router-outlet>
     </main>
   </mat-sidenav-container>

src/app/app.component.scss

@@ -2,3 +2,38 @@
   padding: 0 16px;
   font-weight: 600;
 }
+
+.app-fullpage {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+
+  header {
+    z-index: 10;
+  }
+}
+
+mat-sidenav-container {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
+
+mat-sidenav {
+  width: 200px;
+}
+
+.app-content {
+  min-height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+
+
+

src/app/operators/_operator-theme.scss

@@ -0,0 +1,55 @@
+@import '~@angular/material/theming';
+
+$operator-border: #f3f3f3;
+$operator-active: #62757f;
+$link-color: #2196F3;
+
+@mixin operator-theme($theme) {
+  $primary: mat-color(map-get($theme, primary));
+  $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;
+      &.active-operator {
+        background-color: $operator-border;
+        // color: white;
+        &:hover {
+          background-color: $operator-border;
+        }
+      }
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .section-list {
+    padding: 1px;
+    list-style-type: none;
+    margin-top: 0;
+
+    li {
+      padding-bottom: 5px;
+      &:last-child {
+        padding-bottom: 0;
+      }
+    }
+  }
+}

src/app/operators/components/additional-resources/additional-resources.component.html

@@ -0,0 +1,12 @@
+<h2> Additional Resources </h2>
+<ul class="section-list">
+  <li>
+    <a [href]="sourceUrl" target="_blank"> Source Code </a>
+  </li>
+  <li>
+    <a [href]="specsUrl" target="_blank"> Specs </a>
+  </li>
+  <li *ngFor="let resource of additionalResources">
+    <a [href]="resource.url" target="_blank"> {{ resource.description }} </a>
+  </li>
+</ul>

src/app/operators/components/additional-resources/additional-resources.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { OperatorReference } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-additional-resources',
+  templateUrl: './additional-resources.component.html',
+  styleUrls: ['./additional-resources.component.scss']
+})
+export class AdditionalResourcesComponent {
+  @Input() additionalResources: OperatorReference[];
+  @Input() sourceUrl: string;
+  @Input() specsUrl: string;
+}

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

@@ -0,0 +1,9 @@
+<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.scss

@@ -0,0 +1,14 @@
+@import '../../../../styles/media-helpers';
+
+.marble-wrapper {
+  background-color: white;
+  text-align: center;
+}
+
+.marble-diagram {
+  max-width: 640px;
+
+  @media #{$mat-sm-down} {
+    max-width: 100%;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { OperatorParameters } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-marble-diagram',
+  templateUrl: './marble-diagram.component.html',
+  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.html

@@ -0,0 +1,21 @@
+<h2> Examples </h2>
+<div
+  class="code-example"
+  *ngFor="let example of operatorExamples"
+  appHighlightJs>
+  <div class="code-block mat-elevation-z2">
+    <div class="example-header">
+      <div class="header-title" [innerHTML]="example.name"></div>
+      <button
+        mat-icon-button
+        ngxClipboard
+        [cbContent]="example.code"
+        matTooltip="Copy">
+        <mat-icon>content_copy</mat-icon>
+      </button>
+    </div>
+    <div class="bin-wrapper">
+      <iframe [src]="example.externalLink.url | safeUrl"></iframe>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,42 @@
+.code-block {
+  position: relative;
+
+  pre {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+
+.menu-button {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.example-options {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.example-header {
+  align-content: center;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 8px 6px 8px 18px;
+  color: rgba(0, 0, 0, 0.692);
+  background: #fafafa;
+
+  .header-title {
+    flex: 1 1 auto;
+  }
+}
+
+.bin-wrapper {
+  iframe {
+    border: none;
+    width:100%;
+    height: 350px;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { OperatorExample } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-examples',
+  templateUrl: './operator-examples.component.html',
+  styleUrls: ['./operator-examples.component.scss']
+})
+export class OperatorExamplesComponent {
+  @Input() operatorExamples: OperatorExample[];
+}

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

@@ -0,0 +1,12 @@
+<div
+  class="extra-tip"
+  *ngFor="let tip of tips">
+  <mat-icon class="tip-info">info</mat-icon>
+  <h3 [innerHTML]="tip.text"></h3>
+</div>
+<div
+  class="extra-tip"
+  *ngFor="let warning of warnings">
+  <mat-icon class="tip-warning">warning</mat-icon>
+  <h3 [innerHTML]="warning.text"></h3>
+</div>

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

@@ -0,0 +1,13 @@
+h3 {
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 10px;
+}
+
+.tip-warning {
+  color: rgb(244, 67, 54);
+}
+
+.tip-info {
+  color: rgb(33, 150, 243);
+}

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+import { OperatorExtra } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-extras',
+  templateUrl: './operator-extras.component.html',
+  styleUrls: ['./operator-extras.component.scss']
+})
+export class OperatorExtrasComponent {
+  @Input() operatorExtras: OperatorExtra[] = [];
+
+  get tips() {
+    return this.operatorExtras.filter(e => e.type === 'Tip');
+  }
+
+  get warnings() {
+    return this.operatorExtras.filter(e => e.type === 'Warning');
+  }
+}

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

@@ -0,0 +1,6 @@
+<mat-toolbar class="operator-name">
+  {{ operatorName }}
+</mat-toolbar>
+<mat-toolbar class="signature">
+  {{ operatorSignature }}
+</mat-toolbar>

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

@@ -0,0 +1,15 @@
+@import '../../operator-theme';
+
+.operator-name {
+  font-size:30px;
+}
+
+.signature {
+  margin-bottom: 24px;
+}
+
+mat-toolbar {
+  background: $operator-active !important;
+  color: rgba(255, 255, 255, 0.87);
+  font-weight: normal;
+}

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

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-operator-header',
+  templateUrl: './operator-header.component.html',
+  styleUrls: ['./operator-header.component.scss']
+})
+export class OperatorHeaderComponent {
+  @Input() operatorName: string;
+  @Input() operatorSignature: string;
+}

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

@@ -0,0 +1,19 @@
+<h2> Parameters </h2>
+<table class="parameter-table mat-elevation-z2">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Type</th>
+      <th>Attribute</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let parameter of operatorParameters">
+      <td> {{parameter.name}} </td>
+      <td> {{parameter.type}} </td>
+      <td> {{parameter.attribute}} </td>
+      <td> {{parameter.description}} </td>
+    </tr>
+  </tbody>
+</table>