Merge pull request #510 from MurhafSousli/cdk-clipboard

feat: Use the CDK Clipboard

Author: MurhafSousli

CHANGELOG.MD

@@ -1,5 +1,9 @@
 # Changelog
 
+## 8.0.3
+
+- feat(core): Use Angular CDK Clipboard module for the copy link button, in [431cf9a](https://github.com/MurhafSousli/ngx-sharebuttons/pull/510/commits/431cf9af4f246cb741375d9e0784584a4e52cf54).
+
 ## 8.0.2
 
 - fix(core): Update Xing share URL, closes [#498](https://github.com/MurhafSousli/ngx-sharebuttons/issues/498) in [4b0c745](https://github.com/JustDoItSascha/ngx-sharebuttons/commit/4b0c7458779a87d6823b81ed21696dab5776692f).

projects/ngx-sharebuttons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-sharebuttons",
-  "version": "8.0.2",
+  "version": "8.0.3",
   "author": {
     "name": "Murhaf Sousli",
     "url": "https://github.com/MurhafSousli",
@@ -25,7 +25,6 @@
     "pinterest",
     "tumblr",
     "stumbleupon",
-    "googleplus",
     "linkedin",
     "reddit",
     "telegram",

projects/ngx-sharebuttons/src/lib/share-button.directive.ts

@@ -16,6 +16,7 @@ import {
 import { DOCUMENT } from '@angular/common';
 import { Meta } from '@angular/platform-browser';
 import { Platform } from '@angular/cdk/platform';
+import { Clipboard } from '@angular/cdk/clipboard';
 import { EMPTY, Observable, Subject, Subscriber } from 'rxjs';
 import { takeUntil, tap } from 'rxjs/operators';
 
@@ -83,6 +84,7 @@ export class ShareDirective implements OnInit, OnChanges, OnDestroy {
   constructor(_el: ElementRef,
               private _meta: Meta,
               private _platform: Platform,
+              private _clipboard: Clipboard,
               private _share: ShareService,
               private _cd: ChangeDetectorRef,
               @Inject(DOCUMENT) private _document: any) {
@@ -103,7 +105,7 @@ export class ShareDirective implements OnInit, OnChanges, OnDestroy {
       const click = this.shareButton.share ? this.open(params) : this.shareButton.func({
         params,
         data: this.shareButton.data,
-        platform: this._platform,
+        clipboard: this._clipboard,
         updater: this._updater
       });
 

projects/ngx-sharebuttons/src/lib/share.models.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-import { Platform } from '@angular/cdk/platform';
+import { Clipboard } from '@angular/cdk/clipboard';
 import { Observable, Subject } from 'rxjs';
 
 export const SHARE_BUTTONS_CONFIG = new InjectionToken<ShareButtonsConfig>('shareButtonsConfig');
@@ -91,7 +91,7 @@ export class IShareButton {
   /**
    * Some button do not open a share window, instead they execute a function like Print and Copy buttons.
    */
-  func?: (args: { data: any; params: ShareParams; platform: Platform; updater: Subject<ShareDirectiveUpdater> }) => Observable<any>;
+  func?: (args: ShareButtonFuncArgs<any>) => Observable<any>;
 }
 
 /**
@@ -127,7 +127,7 @@ interface ShareParamsFuncMetaData {
  * Share button function arguments (used in copyToClipboard as function arguments)
  */
 export interface ShareButtonFuncArgs<T> {
-  platform?: Platform;
+  clipboard?: Clipboard;
   params?: ShareParams;
   data?: T;
   updater?: Subject<ShareDirectiveUpdater>;

projects/ngx-sharebuttons/src/lib/share.module.ts

@@ -1,12 +1,14 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { PlatformModule } from '@angular/cdk/platform';
+import { ClipboardModule } from '@angular/cdk/clipboard';
 
 import { ShareDirective } from './share-button.directive';
 import { SHARE_BUTTONS_CONFIG, ShareButtonsConfig } from './share.models';
 
 @NgModule({
   imports: [
-    PlatformModule
+    PlatformModule,
+    ClipboardModule
   ],
   declarations: [
     ShareDirective

projects/ngx-sharebuttons/src/lib/utils.ts

@@ -1,5 +1,5 @@
-import { EMPTY, Observable, of, Subscriber } from 'rxjs';
-import { catchError, delay, take, tap } from 'rxjs/operators';
+import { Observable, of, Subscriber } from 'rxjs';
+import { delay, take, tap } from 'rxjs/operators';
 import { ShareButtonFuncArgs } from './share.models';
 
 /**
@@ -50,39 +50,16 @@ export function printPage(): Observable<void> {
   return new Observable((sub: Subscriber<any>) => document.defaultView.print());
 }
 
-export function copyToClipboard({params, data, platform, updater}: ShareButtonFuncArgs<CopyToClipboardDataArgs>): Observable<void> {
+export function copyToClipboard({params, data, clipboard, updater}: ShareButtonFuncArgs<CopyToClipboardDataArgs>): Observable<void> {
   return of(null).pipe(
     tap(() => {
-      const textArea: HTMLTextAreaElement = document.createElement('textarea') as HTMLTextAreaElement;
-
-      textArea.value = decodeURIComponent(params.url);
-      document.body.appendChild(textArea);
-
-      // highlight TextArea to copy the sharing link
-      if (platform.IOS) {
-        const range = document.createRange();
-        range.selectNodeContents(textArea);
-        const selection = document.defaultView.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        textArea.readOnly = true;
-        textArea.setSelectionRange(0, 999999);
-      } else {
-        textArea.select();
-      }
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-
+      clipboard.copy(params.url);
       // Disable copy button
       updater.next({icon: data.successIcon, text: data.successText, disabled: true});
     }),
     delay(data.delay),
     tap(() => updater.next({icon: data.icon, text: data.text, disabled: false})),
-    take(1),
-    catchError(err => {
-      console.warn('Copy link failed!', err.message);
-      return EMPTY;
-    })
+    take(1)
   );
 }