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

   1 import { Component, Input, OnChanges, OnInit } from '@angular/core'
   2 import { I18n } from '@ngx-translate/i18n-polyfill'
   3 import { MarkdownService } from '@app/shared/renderer'
   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   @Input() preHtml = ''
  13   @Input() postHtml = ''
  14   @Input() customHtml = ''
  15   @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
  16   @Input() tooltipPlacement = 'right'
  17
  18   isPopoverOpened = false
  19   mainHtml = ''
  20
  21   constructor (private i18n: I18n) { }
  22
  23   ngOnInit () {
  24     this.init()
  25   }
  26
  27   ngOnChanges () {
  28     this.init()
  29   }
  30
  31   onPopoverHidden () {
  32     this.isPopoverOpened = false
  33   }
  34
  35   onPopoverShown () {
  36     this.isPopoverOpened = true
  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     // tslint:disable:max-line-length
  58     return this.i18n('<a href="https://en.wikipedia.org/wiki/Markdown#Example" target="_blank" rel="noopener noreferrer">Markdown</a> compatible that supports:') +
  59       this.createMarkdownList(rules)
  60   }
  61
  62   private createMarkdownList (rules: string[]) {
  63     const rulesToText = {
  64       'emphasis': this.i18n('Emphasis'),
  65       'link': this.i18n('Links'),
  66       'newline': this.i18n('New lines'),
  67       'list': this.i18n('Lists'),
  68       'image': this.i18n('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 }