Add functionality

Display of content in markdown format

Issue-ID: USECASEUI-844
Change-Id: I5907225117e5405e6ac7bff7405fedbb497dce6e
Signed-off-by: kaixiliu <liukaixi@chinamobile.com>

1 files changed, 38 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts b/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
new file mode 100644
index 00000000..31247184
--- /dev/null
+++ b/usecaseui-portal/src/app/views/maas/use/code-block.directive.ts
@@ -0,0 +1,38 @@
+import { AfterViewChecked, AfterViewInit, Directive, ElementRef, Renderer2 } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { NzMessageService } from 'ng-zorro-antd';
+import { ClipboardService } from 'ngx-clipboard';
+
+@Directive({
+  selector: '[appCodeBlock]'
+})
+export class CodeBlockDirective implements AfterViewChecked {
+
+  constructor(private el: ElementRef, private renderer: Renderer2, private clipboardService: ClipboardService,
+    private message: NzMessageService, private translate: TranslateService
+  ) { }
+
+  ngAfterViewChecked() {
+    this.setCopyButton();
+  }
+
+setCopyButton() {
+  const preElements = this.el.nativeElement.querySelectorAll('pre');
+
+  preElements.forEach(pre => {
+    const codeElement = pre.querySelector('code');
+    const copyButtonExists = pre.querySelector('button.copy-button');
+    if (codeElement && !copyButtonExists) {
+      const copyButton = this.renderer.createElement('button');
+      this.renderer.addClass(copyButton, 'copy-button');
+      this.renderer.setProperty(copyButton, 'innerHTML', 'Copy');
+      this.renderer.listen(copyButton, 'click', () => {
+        this.clipboardService.copyFromContent(codeElement.innerText);
+        this.message.success(this.translate.instant('maas.copy_to_clipboard'));
+      });
+      this.renderer.insertBefore(pre, copyButton, codeElement);
+    }
+  });
+}
+
+}