feat(docs): correcting example viewer (#234)

Setting min height, hiding bottom shade when showing whole sourse and correcting munber's generation.
positive-js · Sep 9, 2019 · fc04ceb · fc04ceb
1 parent 5098f5d
commit fc04ceb
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.html b/packages/docs/src/app/shared/example-viewer/example-viewer.html
@@ -23,7 +23,7 @@
                     </span>
                     <pre class="docs-example-source">
                         <doc-viewer #viewer [documentUrl]="exampleTabs[tabName]" class="docs-example-source-viewer"></doc-viewer>
-                        <div class="docs-example-source-shadow"></div>
+                        <div class="docs-example-source-shadow {{showSource ? shadowHide : null}}"></div>
                     </pre>
                 </div>
             </mc-tab>

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.scss b/packages/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -9,21 +9,19 @@
     }
 }
 
-.docs-example-viewer__source_hidden {
-    .docs-example-source-wrapper {
-        max-height: 211px;
-        overflow-y: hidden;
-    }
-}
-
 .docs-example-source-shadow {
     position: absolute;
     bottom: 0;
     margin: 0;
     left: 0;
     height: 44px;
     width: 100%;
+    opacity: 1;
     background: linear-gradient(0deg, rgba(234,236,241,1) 0%, rgba(234,236,241,0.5) 50%, rgba(234,236,241,0) 100%);
+
+    &_hidden {
+        opacity: 0;
+    }
 }
 
 .docs-example-source__show {
@@ -63,6 +61,7 @@
 }
 
 .docs-example-source-wrapper {
+    min-height: 201px;
     display: flex;
 }
 
@@ -72,6 +71,13 @@
     }
 }
 
+.docs-example-viewer__source_hidden {
+    .docs-example-source-wrapper {
+        height: 201px;
+        overflow-y: hidden;
+    }
+}
+
 .docs-example-numbers {
     $color: #eaedf1;
     background-color: fade_out($color, 0.5);

diff --git a/packages/docs/src/app/shared/example-viewer/example-viewer.ts b/packages/docs/src/app/shared/example-viewer/example-viewer.ts
@@ -1,5 +1,5 @@
 import { ComponentPortal } from '@angular/cdk/portal';
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, ElementRef, Inject, Input, ViewChild } from '@angular/core';
 import { EXAMPLE_COMPONENTS, LiveExample } from '@ptsecurity/mosaic-examples';
 import { McTooltip } from '@ptsecurity/mosaic/tooltip';
 
@@ -15,6 +15,7 @@ const fileExtensionRegex = /(.*)\.(\w+)/;
     styleUrls: ['./example-viewer.scss']
 })
 export class ExampleViewer {
+    elementRef: ElementRef;
     /** Component portal for the currently displayed example. */
     selectedPortal: ComponentPortal<any>;
 
@@ -26,6 +27,7 @@ export class ExampleViewer {
 
     /** Whether the source for the example is being displayed. */
     showSource = false;
+    shadowHide = 'docs-example-source-shadow_hidden';
     numbers = '1\n2\n3\n4\n5\n6\n7\n8\n9\n10\n';
     mcTooltipDelay = 3000;
     /** String key of the currently displayed example. */
@@ -49,11 +51,14 @@ export class ExampleViewer {
     private _example: string;
 
     @ViewChild('tooltip', { static: false }) tooltip: McTooltip;
-    constructor(private copier: CopierService) {
+    constructor(private copier: CopierService,
+                @Inject(ElementRef) elementRef: ElementRef) {
+        this.elementRef = elementRef;
     }
 
     setNumbers() {
-        const length = document.querySelector('.docs-example-source').textContent.match(/\n/g).length + 1;
+        const exampleSource = this.elementRef.nativeElement.querySelector('.docs-example-source-viewer');
+        const length = exampleSource.textContent.match(/\n/g).length + 1;
         this.numbers = '';
         for (let i = 1; i <= length; i++) {
             this.numbers += `${i}\n`;