feat(render): make scroll enable

phodal · Apr 24, 2020 · 66d6ffd · 66d6ffd
1 parent 6e5c954
commit 66d6ffd
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts
@@ -4,12 +4,13 @@ import {
   Input,
   OnChanges,
   OnInit, Output,
-  SimpleChanges,
+  SimpleChanges, ViewChild,
 } from '@angular/core';
 import { Token, Tokens, TokensList } from 'marked';
 import marked, { Slugger } from 'marked/lib/marked';
 import LedgeMarkdownConverter from './components/model/ledge-markdown-converter';
 import LedgeColors from './support/ledgeColors';
+import { VirtualScrollerComponent } from 'ngx-virtual-scroller';
 
 @Component({
   selector: 'ledge-render',
@@ -29,6 +30,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
   @Output()
   headingChange = new EventEmitter<any>();
 
+  @ViewChild(VirtualScrollerComponent)
+  private virtualScroller: VirtualScrollerComponent;
+
   markdownData: any[] = [];
   token = null;
   tokens: TokensList | any = [];
@@ -42,16 +46,26 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
   headingIndex = 0;
   headingMap = {};
   indexHeadingMap = {};
+  scrolling = false;
 
   ngOnInit(): void {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     const {content, scrollToItem} = changes;
-    this.content = content.currentValue;
-    this.renderContent(this.content);
+    if (content) {
+      this.content = content.currentValue;
+      this.renderContent(this.content);
+    }
 
-    console.log(scrollToItem);
+    if (scrollToItem) {
+      this.scrolling = true;
+      this.scrollToItem = scrollToItem.currentValue;
+      if (!this.virtualScroller) {
+        return;
+      }
+      this.virtualScroller.scrollToIndex(this.headingMap[this.scrollToItem], false, 66, 0);
+    }
   }
 
   private renderContent(content: string) {

diff --git a/src/app/features/markdown-render/markdown-render.component.ts b/src/app/features/markdown-render/markdown-render.component.ts
@@ -12,7 +12,7 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, ActivationEnd, Router } from '@angular/router';
 import { Slugger } from 'marked/lib/marked';
 import { MarkdownService } from 'ngx-markdown';
 import Tocify, { TocItem } from './tocify';
@@ -47,6 +47,7 @@ export class MarkdownRenderComponent
   tocSlugger = new Slugger();
 
   toItem = 0;
+  tocFragmentMap = {};
   private tocIndex = 0;
 
   private lastTocId: string;
@@ -58,14 +59,24 @@ export class MarkdownRenderComponent
     private route: ActivatedRoute,
     private renderer2: Renderer2,
     @Inject(DOCUMENT) private document: Document,
-    private myElement: ElementRef
+    private myElement: ElementRef,
+    private router: Router
   ) {}
 
   ngOnInit(): void {
     const markedOptions: any = this.markdownService.options;
     this.markdownService.renderer.heading = this.renderHeading(
       markedOptions
     ).bind(this);
+    if (this.virtualScroll) {
+      /*   this.router.events.subscribe((event: any) => {
+        if (event instanceof ActivationEnd) {
+          const activationEnd = event as ActivationEnd;
+          const tocIndex = this.tocFragmentMap[encodeURIComponent(activationEnd.snapshot.fragment)];
+          this.toItem = tocIndex;
+        }
+      });*/
+    }
   }
 
   ngAfterViewInit(): void {
@@ -143,6 +154,7 @@ export class MarkdownRenderComponent
 
   render() {
     const items = this.tocify.tocItems;
+    this.tocIndex = 0;
     this.tocStr = this.renderToc(items).join('');
     if (this.tocEl && this.tocEl.nativeElement) {
       this.tocEl.nativeElement.innerHTML = this.tocStr;
@@ -201,6 +213,7 @@ export class MarkdownRenderComponent
       this.tocIndex++;
       const href = `${this.location.path()}#${item.anchor}`;
       const link = `<a id="menu-${item.anchor}" href="${href}" title=${item.text}>${item.text}</a>`;
+      this.tocFragmentMap[encodeURIComponent(item.anchor)] = this.tocIndex;
       if (item.children) {
         const childrenItems = this.renderToc(item.children);
         return `<div class="level_${item.level}" data-tocId="${this.tocIndex}">

diff --git a/src/styles/_markdown-render.scss b/src/styles/_markdown-render.scss
@@ -2,7 +2,8 @@
 
 .virtual-scroll-render {
   .ledge-render {
-    height: calc(100% - 66px);
+    top: 66px;
+    height: 100%;
 
     virtual-scroller,
     ledge-render {