client/src/app/shared/misc/help.component.ts

   1 import { Component, Input, OnChanges, OnInit } from '@angular/core'
   2 import { MarkdownService } from '@app/videos/shared'
   3
   4 @Component({
   5   selector: 'my-help',
   6   styleUrls: [ './help.component.scss' ],
   7   templateUrl: './help.component.html'
   8 })
   9
  10 export class HelpComponent implements OnInit, OnChanges {
  11   @Input() preHtml = ''
  12   @Input() postHtml = ''
  13   @Input() customHtml = ''
  14   @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
  15
  16   mainHtml = ''
  17
  18   ngOnInit () {
  19     this.init()
  20   }
  21
  22   ngOnChanges () {
  23     this.init()
  24   }
  25
  26   private init () {
  27     if (this.helpType === 'custom') {
  28       this.mainHtml = this.customHtml
  29       return
  30     }
  31
  32     if (this.helpType === 'markdownText') {
  33       this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES)
  34       return
  35     }
  36
  37     if (this.helpType === 'markdownEnhanced') {
  38       this.mainHtml = this.formatMarkdownSupport(MarkdownService.ENHANCED_RULES)
  39       return
  40     }
  41   }
  42
  43   private formatMarkdownSupport (rules: string[]) {
  44     return '<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> ' +
  45       'compatible that supports:' +
  46       this.createMarkdownList(rules)
  47   }
  48
  49   private createMarkdownList (rules: string[]) {
  50     const rulesToText = {
  51       'emphasis': 'Emphasis',
  52       'link': 'Links',
  53       'newline': 'New lines',
  54       'list': 'Lists',
  55       'image': 'Images'
  56     }
  57
  58     const bullets = rules.map(r => rulesToText[r])
  59       .filter(text => text)
  60       .map(text => '<li>' + text + '</li>')
  61       .join('')
  62
  63     return '<ul>' + bullets + '</ul>'
  64   }
  65 }