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

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