operator display tweaks

Author: btroncone

ngsw-manifest.json

@@ -7,7 +7,9 @@
       {"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": "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"}
     ]
   }
 }

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

@@ -4,7 +4,7 @@ <h2> Additional Resources </h2>
     <a [href]="sourceUrl" target="_blank"> Source Code </a>
   </li>
   <li>
-    <a [href]="specUrl" target="_blank"> Specs </a>
+    <a [href]="specsUrl" target="_blank"> Specs </a>
   </li>
   <li *ngFor="let resource of additionalResources">
     <a [href]="resource.url" target="_blank"> {{ resource.description }} </a>

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

@@ -9,4 +9,5 @@ import { OperatorReference } from '../../../../operator-docs';
 export class AdditionalResourcesComponent {
   @Input() additionalResources: OperatorReference[];
   @Input() sourceUrl: string;
+  @Input() specsUrl: string;
 }

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

@@ -14,14 +14,16 @@ <h3 [innerHTML]="example.name"></h3>
         [href]="link.url"
         target="_blank"
         *ngFor="let link of example.externalLinks">
-        {{link.platform}}
+        <mat-icon>open_in_new</mat-icon>
+        <span>{{link.platform}}</span>
       </a>
-      <span
+      <button
         mat-menu-item
         ngxClipboard
         [cbContent]="example.code">
-        Copy To Clipboard
-      </span>
+        <mat-icon>content_copy</mat-icon>
+        <span>Copy To Clipboard</span>
+      </button>
     </mat-menu>
     <pre [innerHTML]="example.code"></pre>
   </div>

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

@@ -30,6 +30,7 @@ <h3 class="short-description" [innerHTML]="shortDescription"></h3>
   </app-related-operators>
   <app-additional-resources
     [additionalResources]="additionalResources"
-    [sourceUrl]="sourceUrl">
+    [sourceUrl]="sourceUrl"
+    [specsUrl]="specsUrl">
   </app-additional-resources>
 </section>

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

@@ -53,7 +53,7 @@ export class OperatorComponent {
     return `${this.baseSourceUrl}/${this.operatorName}.ts`;
   }
 
-  get specUrl() {
+  get specsUrl() {
     return `${this.baseSpecUrl}/${this.operatorName}-spec.js.html`;
   }
 

src/operator-docs/combination/combineAll.ts

@@ -50,12 +50,13 @@ export const combineAll: OperatorDoc = {
         const clicks = Rx.Observable.fromEvent(document, 'click');
         const higherOrder = clicks.map(ev =>
           Rx.Observable.interval(Math.random()*2000).take(3)
-        ).take(2);
+        )
+        .take(2);
         const result = higherOrder.combineAll();
         result.subscribe(x => console.log(x));
       `,
       'externalLinks': [
-        { 'platform': 'JSBin', 'url': 'test'},
+        { 'platform': 'JSBin', 'url': 'jsbin.com'},
         { 'platform': 'JSFiddle', 'url': 'https://jsfiddle.net/sba9k56v/'}
       ]
     }

src/operator-docs/combination/combineLatest.ts

@@ -2,5 +2,64 @@ import { OperatorDoc } from '../operator.model';
 
 export const combineLatest: OperatorDoc = {
   'name': 'combineLatest',
-  'operatorType': 'combination'
+  'operatorType': 'combination',
+  'signature': 'public combineLatest(observables: ...Observable, project: function): Observable',
+  'parameters': [
+    {
+      'name': 'other',
+      'type': 'Observable',
+      'attribute': '',
+      'description': 'An input Observable to combine with the source Observable. More than one input Observables may be given as argument.'
+    },
+    {
+      'name': 'other',
+      'type': 'function',
+      'attribute': 'optional',
+      'description': 'An optional function to project the values from the combined latest values into a new value on the output Observable.'
+    }
+  ],
+  'marbleUrl': 'http://reactivex.io/rxjs/img/combineLatest.png',
+  'shortDescription': {
+    'description': 'Combines multiple Observables to create an Observable whose values are calculated from the latest values of each of its input Observables.',
+    'extras': [
+      { 'type': 'Tip', 'text': 'This operator can be used as either a static or instance method!' },
+      { 'type': 'Tip', 'text': '<a class="markdown-code" href="/operators#combineAll">combineAll</a> can be used to apply <span class="markdown-code">combineLatest</span> to emitted observables when a source completes!' }
+    ]
+  },
+  'walkthrough': {
+    'description': `
+      <p>
+        <span class="markdown-code">combineLatest</span> combines the values from this Observable with values from
+        Observables passed as arguments. This is done by subscribing to each
+        Observable, in order, and collecting an array of each of the most recent
+        values any time any of the input Observables emits, then either taking that
+        array and passing it as arguments to an optional <span class="markdown-code">project</span> function and
+        emitting the return value of that, or just emitting the array of recent
+        values directly if there is no <span class="markdown-code">project</span> function.
+      </p>
+    `
+  },
+  'examples': [
+    {
+      'name': 'Dynamically calculate the Body-Mass Index from an Observable of weight and one for height',
+      'code': `
+        const weight = Rx.Observable.of(70, 72, 76, 79, 75);
+        const height = Rx.Observable.of(1.76, 1.77, 1.78);
+        const bmi = weight.combineLatest(height, (w, h) => w / (h * h));
+        /*
+           Output:
+           BMI is 24.212293388429753
+           BMI is 23.93948099205209
+           BMI is 23.671253629592222
+        */
+        bmi.subscribe(x => console.log('BMI is ' + x));
+      `,
+      'externalLinks': [
+        { 'platform': 'JSBin', 'url': 'jsbin.com'},
+        { 'platform': 'JSFiddle', 'url': 'https://jsfiddle.net/sba9k56v/'}
+      ]
+    }
+  ],
+  'relatedOperators': [ 'combineAll', 'merge', 'withLatestFrom' ],
+  'additionalResources': []
 };