feat(render): make virtual scroller works for #114

phodal · Apr 24, 2020 · 6848e76 · 6848e76
1 parent 66d6ffd
commit 6848e76
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 21 deletions.
diff --git a/projects/ledge-render/src/lib/ledge-render.component.html b/projects/ledge-render/src/lib/ledge-render.component.html
@@ -5,7 +5,7 @@
 </div>
 
 <div class="ledge-render" *ngIf="virtualScroll">
- <virtual-scroller #scroll [items]="markdownData" (vsUpdate)="vsUpdate($event)">
+ <virtual-scroller #scroll [items]="markdownData" (vsChange)="vsChange($event)">
  <div *ngFor="let item of scroll.viewPortItems" class="markdown render-item">
  <ng-template *ngTemplateOutlet="renderItem; context: {$implicit: item}"></ng-template>
  </div>

diff --git a/projects/ledge-render/src/lib/ledge-render.component.ts b/projects/ledge-render/src/lib/ledge-render.component.ts
@@ -10,7 +10,7 @@ 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';
+import { IPageInfo, VirtualScrollerComponent } from 'ngx-virtual-scroller';
 
 @Component({
  selector: 'ledge-render',
@@ -64,7 +64,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
  if (!this.virtualScroller) {
  return;
  }
- this.virtualScroller.scrollToIndex(this.headingMap[this.scrollToItem], false, 66, 0);
+ this.virtualScroller.scrollToIndex(this.headingMap[this.scrollToItem], true, 0, 0, () => {
+ this.scrolling = false;
+ });
  }
  }
 
@@ -384,15 +386,9 @@ export class LedgeRenderComponent implements OnInit, OnChanges {
  return JSON.stringify(str);
  }
 
- vsUpdate($event: any[]) {
- for (const mdItem of $event) {
- if (mdItem.type === 'heading') {
- if (mdItem.headingIndex !== this.lastHeading) {
- this.lastHeading = mdItem.headingIndex;
- this.headingChange.emit(mdItem);
- }
- return;
- }
+ vsChange($event: IPageInfo) {
+ if (this.indexHeadingMap[$event.startIndex]) {
+ this.headingChange.emit(this.markdownData[$event.startIndex]);
  }
  }
 }
diff --git a/src/app/features/markdown-render/markdown-render.component.ts b/src/app/features/markdown-render/markdown-render.component.ts
@@ -48,7 +48,7 @@ export class MarkdownRenderComponent
 
  toItem = 0;
  tocFragmentMap = {};
- private tocIndex = 0;
+ private tocIndex = -1;
 
  private lastTocId: string;
  private scrollItems: any[] = [];
@@ -69,13 +69,15 @@ export class MarkdownRenderComponent
  markedOptions
  ).bind(this);
  if (this.virtualScroll) {
- /* this.router.events.subscribe((event: any) => {
+ this.router.events.subscribe((event: any) => {
  if (event instanceof ActivationEnd) {
  const activationEnd = event as ActivationEnd;
- const tocIndex = this.tocFragmentMap[encodeURIComponent(activationEnd.snapshot.fragment)];
+ const tocIndex = this.tocFragmentMap[
+ encodeURIComponent(activationEnd.snapshot.fragment)
+ ];
  this.toItem = tocIndex;
  }
- });*/
+ });
  }
  }
 
@@ -154,18 +156,16 @@ export class MarkdownRenderComponent
 
  render() {
  const items = this.tocify.tocItems;
- this.tocIndex = 0;
+ this.tocIndex = -1;
  this.tocStr = this.renderToc(items).join('');
  if (this.tocEl && this.tocEl.nativeElement) {
  this.tocEl.nativeElement.innerHTML = this.tocStr;
  }
 
- this.tocIndex = 0;
  this.tocLeftStr = this.renderTocLeftPoint(items).join('');
  if (this.tocLeftEl && this.tocLeftEl.nativeElement) {
  this.tocLeftEl.nativeElement.innerHTML = this.tocLeftStr;
  }
- this.tocIndex = 0;
  this.tocify.reset();
 
  setTimeout(() => this.startSyncMenu(), 10);
@@ -215,9 +215,12 @@ export class MarkdownRenderComponent
  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 parentIndex = JSON.stringify(this.tocIndex);
  const childrenItems = this.renderToc(item.children);
- return `<div class="level_${item.level}" data-tocId="${this.tocIndex}">
-${link}<div class="level_child">${childrenItems.join('')}</div>
+ return `<div class="level_${
+ item.level
+ }" data-tocId="${parentIndex}">${link}
+<div class="level_child">${childrenItems.join('')}</div>
 </div>`;
  } else {
  return `<div class="level_${item.level}" data-tocId="${this.tocIndex}">${link}</div>`;