Merge pull request #64 from koushik-dev/develop

share community button #56

Author: Caballerog

src/app/pages/main/components/sidenav/sidenav.component.html

@@ -24,6 +24,16 @@
               <i class="fas fa-link" aria-hidden="true"></i>
             </a>
           </mat-chip>
+          <mat-chip class="social social-share">
+            <span (click)="onShare()" (keyup.enter)="onShare()" class="community-share" tabindex="0">
+              Share
+              <i class="fa fa-share-alt" aria-hidden="true"></i>
+            </span>
+            <span (click)="onCopy()" (keyup.enter)="onCopy()" class="community-copy" tabindex="0">
+              Copy URL
+              <i class="fa fa-copy" aria-hidden="true"></i>
+            </span>
+          </mat-chip>
         </mat-chip-list>
       </div>
     </header>
@@ -88,4 +98,17 @@
       </span>
     </a>
   </ng-template>
+  <ng-template #emptyCommunityTwitter>
+    <a class="social-buttons__button social-button social-button--twitter" aria-label="Twitter">
+      <span class="social-button__inner">
+        <i class="fab fa-twitter"></i>
+      </span>
+    </a>
+  </ng-template>
+  <ng-template #linkCopied>
+    <p class="community-link-copied">
+      Link Copied!
+      <button mat-raised-button (click)="onCloseSnackBar()">Dismiss</button>
+    </p>
+  </ng-template>
 </mat-sidenav-container>

src/app/pages/main/components/sidenav/sidenav.component.scss

@@ -79,3 +79,28 @@ mat-form-field {
 .community-detail-container {
   padding: 60px 25px 0 25px;
 }
+
+.community-copy {
+  display: block;
+}
+.community-share {
+  display: none;
+}
+
+.community-link-copied {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  font-weight: 900;
+  color: white;
+}
+
+@media (max-width: 599px) {
+  .community-copy {
+    display: none;
+  }
+  .community-share {
+    display: block;
+  }
+}

src/app/pages/main/components/sidenav/sidenav.component.ts

@@ -1,19 +1,23 @@
 import { Communities, Community } from '@shared/interfaces';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'ngcommunity-sidenav',
   templateUrl: './sidenav.component.html',
   styleUrls: ['./sidenav.component.scss'],
 })
 export class SidenavComponent {
+  constructor(private clipboard: Clipboard, private snackBar: MatSnackBar) {}
   @Input() community: Community;
   @Input() communities: Communities;
 
   @Output()
   selected = new EventEmitter<Community>();
   @Output()
   closeInfo = new EventEmitter<void>();
+  @ViewChild('linkCopied') copied: TemplateRef<any>;
 
   onSelected(selected: Community) {
     this.selected.emit(selected);
@@ -22,4 +26,28 @@ export class SidenavComponent {
   onCloseInfo() {
     this.closeInfo.emit();
   }
+
+  onShare() {
+    const nav = window.navigator as any;
+    if (nav.share) {
+      nav
+        .share({
+          title: this.community.name,
+          url: location.href,
+        })
+        .then(() => console.log('Successful share'))
+        .catch(error => console.error('Error sharing', error));
+    }
+  }
+
+  onCopy() {
+    this.clipboard.copy(location.href);
+    this.snackBar.openFromTemplate(this.copied, {
+      duration: 2000
+    });
+  }
+
+  onCloseSnackBar() {
+    this.snackBar.dismiss();
+  }
 }

src/app/shared/shared.module.ts

@@ -23,6 +23,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { NgModule } from '@angular/core';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 const CORE_MODULES = [BrowserAnimationsModule, CommonModule, FormsModule, ReactiveFormsModule];
 
@@ -45,6 +46,7 @@ const MATERIAL_MODULES = [
   MatDividerModule,
   ScrollingModule,
   MatChipsModule,
+  ClipboardModule
 ];
 
 @NgModule({

src/styles.scss

@@ -120,6 +120,9 @@ a {
   &.social-linkedin {
     background-color: #0077b4;
   }
+  &.social-share {
+    background-color: blue;
+  }
 }
 
 mat-sidenav-container mat-sidenav-content header i {