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   @Input() tooltipPlacement = 'right'
  16
  17   mainHtml = ''
  18
  19   ngOnInit () {
  20     this.init()
  21   }
  22
  23   ngOnChanges () {
  24     this.init()
  25   }
  26
  27   private init () {
  28     if (this.helpType === 'custom') {
  29       this.mainHtml = this.customHtml
  30       return
  31     }
  32
  33     if (this.helpType === 'markdownText') {
  34       this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES)
  35       return
  36     }
  37
  38     if (this.helpType === 'markdownEnhanced') {
  39       this.mainHtml = this.formatMarkdownSupport(MarkdownService.ENHANCED_RULES)
  40       return
  41     }
  42   }
  43
  44   private formatMarkdownSupport (rules: string[]) {
  45     return '<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> ' +
  46       'compatible that supports:' +
  47       this.createMarkdownList(rules)
  48   }
  49
  50   private createMarkdownList (rules: string[]) {
  51     const rulesToText = {
  52       'emphasis': 'Emphasis',
  53       'link': 'Links',
  54       'newline': 'New lines',
  55       'list': 'Lists',
  56       'image': 'Images'
  57     }
  58
  59     const bullets = rules.map(r => rulesToText[r])
  60       .filter(text => text)
  61       .map(text => '<li>' + text + '</li>')
  62       .join('')
  63
  64     return '<ul>' + bullets + '</ul>'
  65   }
  66 }