Implemented comment share functionality

2 files changed, 29 insertions, 6 deletions

diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html
index a22907a..27a11e6 100644
--- a/src/app/components/comment/comment.component.html
+++ b/src/app/components/comment/comment.component.html
@@ -1,6 +1,6 @@
 <app-loading *ngIf="!loaded"></app-loading>
 
-<section class="card flex-row" *ngIf="loaded">
+<section class="card flex-row" [hidden]="loaded" (mouseleave)="resetShareBtn()">
 	<aside class="left-pane">
 		<img class="author-picture round-image hover-half-opacity" [src]="user.profilePictureURL" (click)="goToAuthorProfile()">
 	</aside>
@@ -34,7 +34,7 @@
 			<button class="padding-small lighter-hover click-effect border-radius-smaller" *ngIf="loggedInAuthor" (click)="toggleEditing()">
 				<img src="/assets/icons/tabler-icon-edit.svg">
 			</button>
-						<button class="flexible padding-small lighter-hover click-effect border-radius-smaller">
+			<button #share ngxClipboard [cbContent]="getPostLink()" class="flexible padding-small lighter-hover click-effect border-radius-smaller" (click)="showCopiedMessage()">
 				<img src="/assets/icons/tabler-icon-link.svg">
 				&nbsp;Share
 			</button>
diff --git a/src/app/components/comment/comment.component.ts b/src/app/components/comment/comment.component.ts
index 0096c18..2a54f92 100644
--- a/src/app/components/comment/comment.component.ts
+++ b/src/app/components/comment/comment.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
-import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Guid } from 'guid-typescript';
 import { CommentService } from 'src/app/services/comment.service';
@@ -13,7 +13,7 @@ import { User } from 'src/models/identity/user.model';
   templateUrl: './comment.component.html',
   styleUrls: ['./comment.component.css']
 })
-export class CommentComponent implements OnInit {
+export class CommentComponent implements OnInit, AfterViewInit {
   public loaded = false;
   public loggedInAuthor = false;
   public editingComment = false;
@@ -22,8 +22,11 @@ export class CommentComponent implements OnInit {
   public timeCreated: string;
   @Input() paramId: string;
   public editCommentFormGroup: FormGroup;
+  @ViewChild('share') shareBtn: ElementRef;
+  private _defaultShareBtnInnerHTML: string;
+  private _linkShared = false;
 
-  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder)
+  constructor(private _router: Router, private _commentService: CommentService, private _userService: UserService, private _tokenService: TokenService, private _fb: FormBuilder, private _elem: ElementRef, private _renderer: Renderer2)
   { }
 
   ngOnInit(): void {
@@ -59,6 +62,10 @@ export class CommentComponent implements OnInit {
     });
   }
 
+  ngAfterViewInit(): void {
+    this._defaultShareBtnInnerHTML = this.shareBtn.nativeElement.innerHTML;
+  }
+
   goToAuthorProfile(): void {
     this._router.navigate(['/profile/' + this.comment.issuerUsername]);
   }
@@ -100,4 +107,20 @@ export class CommentComponent implements OnInit {
     this._router.onSameUrlNavigation = 'reload';
     this._router.navigate([this._router.url]);
   }
+
+  resetShareBtn(): void {
+    if (this._linkShared) {
+      this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', this._defaultShareBtnInnerHTML);
+      this._linkShared = false;
+    }
+  }
+
+  showCopiedMessage(): void {
+    this._renderer.setProperty(this.shareBtn.nativeElement, 'innerHTML', 'Link copied to clipboard!');
+    this._linkShared = true;
+  }
+
+  getPostLink(): string {
+    return location.origin + '/comment/' + this.paramId;
+  }
 }