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

   1 import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } 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 {
  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     if (this.helpType === 'custom') {
  24       this.mainHtml = this.customHtml
  25       return
  26     }
  27
  28     if (this.helpType === 'markdownText') {
  29       this.mainHtml = this.formatMarkdownSupport(MarkdownService.TEXT_RULES)
  30       return
  31     }
  32
  33     if (this.helpType === 'markdownEnhanced') {
  34       this.mainHtml = this.formatMarkdownSupport(MarkdownService.ENHANCED_RULES)
  35       return
  36     }
  37   }
  38
  39   @HostListener('document:click', ['$event.target'])
  40   public onClick (targetElement) {
  41     const clickedInside = this.elementRef.nativeElement.contains(targetElement)
  42
  43     if (this.tooltipDirective.isOpen && !clickedInside) {
  44       this.tooltipDirective.hide()
  45     }
  46   }
  47
  48   private formatMarkdownSupport (rules: string[]) {
  49     return '<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank">Markdown</a> compatible that supports:' +
  50       this.createMarkdownList(rules)
  51   }
  52
  53   private createMarkdownList (rules: string[]) {
  54     const rulesToText = {
  55       'emphasis': 'Emphasis',
  56       'link': 'Links',
  57       'newline': 'New lines',
  58       'list': 'Lists',
  59       'image': 'Images'
  60     }
  61
  62     const bullets = rules.map(r => rulesToText[r])
  63       .filter(text => text)
  64       .map(text => '<li>' + text + '</li>')
  65       .join('')
  66
  67     return '<ul>' + bullets + '</ul>'
  68   }
  69 }