feat(operators): add support for vendor specific examples in operator docs

package.json

@@ -32,7 +32,7 @@
     "@angular/common": "5.1.1",
     "@angular/compiler": "5.1.1",
     "@angular/core": "5.1.1",
-    "@angular/flex-layout": "2.0.0-beta.10-4905443",
+    "@angular/flex-layout": "2.0.0-beta.12",
     "@angular/forms": "5.1.1",
     "@angular/http": "5.1.1",
     "@angular/material": "5.0.1",
@@ -55,7 +55,6 @@
     "@types/jasmine": "2.5.53",
     "@types/jasminewd2": "2.0.2",
     "@types/lodash": "4.14.77",
-    "@types/node": "6.0.60",
     "angular2-template-loader": "0.6.2",
     "codelyzer": "4.0.2",
     "commitizen": "^2.9.6",

src/app/material/material.module.ts

@@ -12,7 +12,8 @@ import {
   MatInputModule,
   MatMenuModule,
   MatTooltipModule,
-  MatSnackBarModule
+  MatSnackBarModule,
+  MatTabsModule
 } from '@angular/material';
 
 @NgModule({
@@ -28,7 +29,8 @@ import {
     MatInputModule,
     MatMenuModule,
     MatTooltipModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatTabsModule
   ],
   exports: [
     MatToolbarModule,
@@ -41,7 +43,8 @@ import {
     MatInputModule,
     MatMenuModule,
     MatTooltipModule,
-    MatSnackBarModule
+    MatSnackBarModule,
+    MatTabsModule
   ]
 })
 export class MaterialModule {}

src/app/operators/_operator-theme.scss

@@ -19,13 +19,53 @@ $link-color: #2196f3;
     }
   }
 
-  app-operator a {
-    text-decoration: none;
-    color: $link-color;
+  app-operator-general,
+  app-operator-vendor-examples {
+    .main-operator-container {
+      padding: 5px;
+      display: flex;
+      flex-direction: column;
+      padding: 0 16px;
+      margin-bottom: 32px;
+    }
+
+    .short-description {
+      margin: 16px 0 32px;
+    }
+
+    a {
+      text-decoration: none;
+      color: $link-color;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .extra-tip {
+      display: flex;
+    }
+
+    h3 {
+      display: inline-block;
+      vertical-align: middle;
+      padding-left: 10px;
+    }
+
+    .tip-warning {
+      color: rgb(244, 67, 54);
+    }
+
+    .tip-info {
+      color: rgb(33, 150, 243);
+    }
   }
 
-  app-operator a:hover {
-    text-decoration: underline;
+  .operator-section-tabs {
+    .mat-ink-bar {
+      background-color: $accent !important;
+      height: 3px;
+    }
   }
 
   .operator-list {
@@ -56,4 +96,21 @@ $link-color: #2196f3;
       }
     }
   }
+
+  .code-block {
+    position: relative;
+
+    pre {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+
+  .frame-wrapper {
+    iframe {
+      border: none;
+      width: 100%;
+      height: 350px;
+    }
+  }
 }

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

@@ -1,14 +1,22 @@
 <h2> Examples </h2>
-<div class="code-example" *ngFor="let example of operatorExamples" appHighlightJs>
+<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 (click)="copyToClipboard.emit(example.code)" value="Copy" aria-label="Copy" matTooltip="Copy">
+      <div class="header-title"
+           [innerHTML]="example.name"></div>
+      <button mat-icon-button
+              (click)="copyToClipboard.emit(example.code)"
+              value="Copy"
+              aria-label="Copy"
+              matTooltip="Copy">
         <mat-icon>content_copy</mat-icon>
       </button>
     </div>
-    <div class="bin-wrapper">
-      <iframe [src]="example.externalLink.url | safeUrl" [title]="example.name"></iframe>
+    <div class="frame-wrapper">
+      <iframe [src]="example.externalLink.url | safeUrl"
+              [title]="example.name"></iframe>
     </div>
   </div>
 </div>

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

@@ -1,12 +1,3 @@
-.code-block {
-  position: relative;
-
-  pre {
-    margin-top: 0;
-    padding-top: 0;
-  }
-}
-
 .menu-button {
   position: absolute;
   right: 0;
@@ -36,11 +27,3 @@
 .code-example {
   margin-bottom: 16px;
 }
-
-.bin-wrapper {
-  iframe {
-    border: none;
-    width: 100%;
-    height: 350px;
-  }
-}

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

@@ -1,17 +1 @@
-.extra-tip {
-    display: flex;
-}
 
-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-general/operator-general.component.html

@@ -0,0 +1,34 @@
+<section class="main-operator-container mat-typography">
+  <h3 class="short-description"
+      [innerHTML]="operator?.shortDescription?.description">
+  </h3>
+  <app-operator-extras class="margin-bottom-16"
+                       *ngIf="operator?.shortDescription"
+                       [operatorExtras]="operator?.shortDescription?.extras">
+  </app-operator-extras>
+  <app-marble-diagram class="margin-bottom-32"
+                      [operatorName]="operator?.name"
+                      [useInteractiveMarbles]="operator?.useInteractiveMarbles"
+                      [url]="operator?.marbleUrl">
+  </app-marble-diagram>
+  <app-operator-examples [operatorExamples]="operator?.examples"
+                         (copyToClipboard)="copyToClipboard($event)"
+                         class="margin-bottom-16">
+  </app-operator-examples>
+  <app-operator-parameters [operatorParameters]="operator?.parameters"
+                           *ngIf="operator?.parameters?.length">
+  </app-operator-parameters>
+  <app-operator-walkthrough class="margin-bottom-16"
+                            [operatorWalkthrough]="operator?.walkthrough?.description">
+  </app-operator-walkthrough>
+  <app-operator-extras class="margin-bottom-16"
+                       *ngIf="operator?.walthrough?.extras"
+                       [operatorExtras]="operator?.walkthrough?.extras">
+  </app-operator-extras>
+  <app-related-operators [relatedOperators]="operator?.relatedOperators">
+  </app-related-operators>
+  <app-additional-resources [additionalResources]="operator?.additionalResources"
+                            [sourceUrl]="sourceUrl"
+                            [specsUrl]="specsUrl">
+  </app-additional-resources>
+</section>

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,61 @@
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  ViewEncapsulation
+} from '@angular/core';
+import { OperatorDoc, ALL_OPERATORS } from '../../../../operator-docs';
+import { CopierService } from '../../../core/services/copier.service';
+import { MatSnackBar } from '@angular/material';
+import { OperatorComponent } from '../operator/operator.component';
+import { ActivatedRoute } from '@angular/router';
+import { takeUntil } from 'rxjs/operators/takeUntil';
+import { Subject } from 'rxjs/Subject';
+
+@Component({
+  selector: 'app-operator-general',
+  templateUrl: './operator-general.component.html',
+  styleUrls: ['./operator-general.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class OperatorGeneralComponent implements OnInit, OnDestroy {
+  public operator: OperatorDoc;
+  private _onDestroy = new Subject();
+  private readonly baseSourceUrl = 'https://github.com/ReactiveX/rxjs/blob/master/src/operators/';
+  private readonly baseSpecUrl = 'http://reactivex.io/rxjs/test-file/spec-js/operators';
+
+  constructor(
+    private _operatorComponent: OperatorComponent,
+    private _activateRoute: ActivatedRoute,
+    private _copierService: CopierService,
+    private _snackBar: MatSnackBar
+  ) {}
+
+  ngOnInit() {
+    this._activateRoute.params.pipe(takeUntil(this._onDestroy)).subscribe(_ => {
+      this.operator = this._operatorComponent.operator;
+    });
+  }
+
+  copyToClipboard(code: string) {
+    this._copierService.copyText(code);
+    this._snackBar.open(
+      'The example has been copied to your clipboard!',
+      null,
+      { duration: 3000 }
+    );
+  }
+
+  get sourceUrl() {
+    return `${this.baseSourceUrl}/${this.operator.name}.ts`;
+  }
+
+  get specsUrl() {
+    return `${this.baseSpecUrl}/${this.operator.name}-spec.js.html`;
+  }
+
+  ngOnDestroy() {
+    this._onDestroy.next();
+  }
+}

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

@@ -1,11 +1,7 @@
 @import '../../operator-theme';
 
 .operator-name {
-  font-size:30px;
-}
-
-.signature {
-  margin-bottom: 24px;
+  font-size: 30px;
 }
 
 mat-toolbar {

src/app/operators/components/operator-vendor-examples/operator-vendor-examples.component.html

@@ -0,0 +1,13 @@
+<section class="main-operator-container mat-typography margin-top-32">
+  <div class="code-example"
+       *ngFor="let example of examples">
+    <h2> {{ example.name }} </h2>
+    <p> {{ example.description }} </p>
+    <div class="mat-elevation-z2">
+      <div class="frame-wrapper">
+        <iframe [src]="example.externalLink.url | safeUrl"
+                [title]="example.name"></iframe>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,6 @@
+$stackblitz-blue: #0077cf;
+$stackblitz-grey: #353535;
+
+.frame-wrapper {
+  background-color: $stackblitz-blue;
+}

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

@@ -0,0 +1,35 @@
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { OperatorComponent } from '../operator/operator.component';
+import { Subject } from 'rxjs/Subject';
+import { takeUntil } from 'rxjs/operators/takeUntil';
+import { VendorExample } from '../../../../operator-docs';
+
+@Component({
+  selector: 'app-operator-vendor-examples',
+  templateUrl: './operator-vendor-examples.component.html',
+  styleUrls: ['./operator-vendor-examples.component.scss']
+})
+export class OperatorVendorExamplesComponent implements OnInit, OnDestroy {
+  public examples: VendorExample[] = [];
+  private _onDestroy = new Subject();
+
+  constructor(
+    private _operatorComponent: OperatorComponent,
+    private _activedRoute: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this._activedRoute.params.pipe(takeUntil(this._onDestroy)).subscribe(p => {
+      this.examples = this._operatorComponent.operator.vendorExamples.filter(
+        e => {
+          return e.vendorName === p['vendor'];
+        }
+      );
+    });
+  }
+
+  ngOnDestroy() {
+    this._onDestroy.next();
+  }
+}