update

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 4.0.1
+
+ - fix wrong rollup config for **HttpClientModule**
+ - add default styles in the dist package
+ - fix(Universal support) Add **UniversalSupportService** to be used internally
+ - refactor(ShareButtonDirective)
+ - add `gaTracking` option to global options
+ - update online docs
+
 ## 4.0.0@beta
 
 Version 4 has been rewritten from scratch

README.md

@@ -1,10 +1,10 @@
 <p align="center">
   <img height="200px" width="200px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-sharebuttons/master/assets/logo.svg">
   <h1 align="center">Angular Share Buttons</h1>
-  <p align="center"><img src="https://camo.githubusercontent.com/27616547b01ca8d5695bb33ebe5c889e9fe681cb/68747470733a2f2f63646e2e7261776769742e636f6d2f4d7572686166536f75736c692f6e67322d7368617265627574746f6e732f6d61737465722f6173736574732f627574746f6e732e706e67" data-canonical-src="https://cdn.rawgit.com/MurhafSousli/ngx-sharebuttons/master/assets/logo.svg" style="max-width:100%;"></a>
+  <p align="center"><img src="https://image.ibb.co/k7y8rG/Capture.png" alt="Capture" border="0"></p>
 </p>
 
-Simple yet massively customizable share buttons | [live demo](https://murhafsousli.github.io/ngx-sharebuttons/)
+#### Share buttons components for Angular 4.3+ | [Docs/live demo](https://murhafsousli.github.io/ngx-sharebuttons/)
 
 [![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-sharebuttons/)
 [![npm](https://img.shields.io/npm/v/ngx-sharebuttons.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-sharebuttons) 
@@ -14,9 +14,9 @@ Simple yet massively customizable share buttons | [live demo](https://murhafsous
 
 
 
-### Version 3 is no longer maintained, please consider upgrading to version 4
+**Version 3 is no longer maintained, please consider upgrading to version 4**
 
-I am keeping the documentation for version 3 in the [Wiki](https://github.com/MurhafSousli/ngx-sharebuttons/wiki) page temporarily!
+The documentation for version 3 is kept in the [Wiki](https://github.com/MurhafSousli/ngx-sharebuttons/wiki) page temporarily!
 
 ## Issues
 
@@ -28,7 +28,7 @@ Show your love by hitting the star button.
 
 ## Premium Themes
 
-You can purchase the premium themes on [Patreon](). 
+You can purchase the premium themes on [Patreon](https://www.patreon.com/murhaf/posts?tag=share-buttons). 
 
 ## Development
 
@@ -40,8 +40,8 @@ You can purchase the premium themes on [Patreon]().
 
 *It would be great to have [plunker](https://plnkr.co/edit/C2Ke4Fhk2wBZZzm0JCao?p=preview)/stackblitz example for the PR*
 
-This plugin uses [generator-ngx-library](https://github.com/tinesoft/generator-ngx-library#development) by @tinesoft (Thanks!)
-You may want to check it out for more details.
+This library was generated with [generator-ngx-library](https://github.com/tinesoft/generator-ngx-library#development) by @tinesoft (Thanks!)
+You may want to check it out for development info
 
 ## License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-sharebuttons",
-  "description": "Simple yet massively customizable share buttons for Angular",
-  "version": "4.0.0",
+  "description": "Share buttons components for Angular 4.3+",
+  "version": "4.0.1",
   "filename": "./src/ngx-sharebuttons.js",
   "homepage": "http://github.com/MurhafSousli/ngx-sharebuttons",
   "author": {

src/classes/copy.class.ts

@@ -15,8 +15,8 @@ export class CopyButton implements IShareButton {
   }
 
   link(url: string, args?: ShareButtonArgs) {
-
-    return this.prop.type;
+    this.copyURLToClipboard(url, args.directive);
+    return null;
   }
 
   count() {
@@ -25,7 +25,7 @@ export class CopyButton implements IShareButton {
   }
 
   /** copy URL to clipboard */
-  copyURLToClipboard(directive: ShareButtonDirective, url: string) {
+  copyURLToClipboard(url: string, directive: ShareButtonDirective) {
 
     const temp = {text: directive.shareButton.prop.text, icon: directive.shareButton.prop.icon};
     Observable.of({}).take(1).do(() => {
@@ -57,7 +57,8 @@ export class CopyButton implements IShareButton {
 
         textArea.select();
 
-        directive.doc.execCommand('copy');
+        document.execCommand('copy');
+
         directive.renderer.removeChild(directive.el, textArea);
 
         directive.shareButton.prop.text = this.prop.successText;

src/classes/print.class.ts

@@ -11,7 +11,8 @@ export class PrintButton implements IShareButton {
 
   link(url: string, args?: ShareButtonArgs) {
 
-    return this.prop.type;
+    args.directive.window.print();
+    return null;
   }
 
   count() {

src/directives/share-button.directive.ts

@@ -6,22 +6,23 @@ import {
   EventEmitter,
   ElementRef,
   Renderer2,
-  ChangeDetectorRef,
-  Inject
+  ChangeDetectorRef
 } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
 import { ShareButtonsService } from '../services/share-buttons.service';
 import { IShareButton } from '../models/share-buttons.models';
-import { CopyButton } from '../classes/copy.class';
+import { UniversalSupportService } from '../services/universal-support.service';
 
-/** Track with google analytics */
+/** Google analytics ref */
 declare const ga: Function;
 
 @Directive({
   selector: '[shareButton]'
 })
 export class ShareButtonDirective {
 
+  /** Window ref that supports Universal */
+  window: Window;
+
   /** Element ref */
   el: HTMLElement;
 
@@ -32,32 +33,30 @@ export class ShareButtonDirective {
   url: string;
 
   /** Share meta tags */
-  @Input() sbTitle: string;
-  @Input() sbDescription: string;
-  @Input() sbImage: string;
-  @Input() sbTags: string;
+  @Input() sbTitle = this.share.title;
+  @Input() sbDescription = this.share.description;
+  @Input() sbImage = this.share.image;
+  @Input() sbTags = this.share.tags;
 
   /** Set button class, e.g. 'sb-facebook' */
   buttonClass: string;
 
-  /** Create a new button of type <buttonName> */
+  /** Set share button e.g facebook, twitter...etc  */
   @Input('shareButton')
   set createButton(buttonName: string) {
 
+    /** Create a new button of type <buttonName> */
     const button = this.share.createShareButton(buttonName);
 
     if (button) {
       this.shareButton = button;
 
-      /** Remove old button class in case user changed button */
+      /** Remove old button class in case user changed the button */
       this.renderer.removeClass(this.el, 'sb-' + this.buttonClass);
 
       /** Add new button class e.g.: sb-facebook, sb-twitter ...etc */
       this.renderer.addClass(this.el, 'sb-' + button.prop.type);
 
-      /** Keep ref of current class */
-      this.buttonClass = button.prop.type;
-
       /** Get link's shared count */
       this.getCount();
     } else {
@@ -77,7 +76,7 @@ export class ShareButtonDirective {
   }
 
   /** Google analytics tracking*/
-  @Input() gaTracking = true;
+  @Input() gaTracking = this.share.gaTracking;
 
   /** Share count event */
   @Output() sbCount = new EventEmitter<number>();
@@ -92,22 +91,28 @@ export class ShareButtonDirective {
               public renderer: Renderer2,
               public cd: ChangeDetectorRef,
               el: ElementRef,
-              @Inject(DOCUMENT) public doc: Document) {
+              universal: UniversalSupportService) {
     this.el = el.nativeElement;
+    this.window = universal.nativeWindow;
   }
 
   /** Open share dialog */
   @HostListener('click')
   onClick() {
+    /** Set user did not set the url using [sbUrl], use window URL */
+    if (!this.url) {
+      this.url = encodeURIComponent(this.window.location.href);
+    }
 
-    /** Get the proper link for sharing */
-    const shareUrl = this.shareButton.link(this.url || encodeURIComponent(this.doc.URL), {
-      title: this.sbTitle || this.share.title,
-      description: this.sbDescription || this.share.description,
-      image: this.sbImage || this.share.image,
-      tags: this.sbTags || this.share.tags,
+    /** Get sharing link */
+    const shareUrl = this.shareButton.link(this.url, {
+      title: this.sbTitle,
+      description: this.sbDescription,
+      image: this.sbImage,
+      tags: this.sbTags,
       mobile: this.share.getMobileOS(),
-      via: this.share.twitterAccount
+      via: this.share.twitterAccount,
+      directive: this
     });
 
     /** GA tracking */
@@ -116,26 +121,19 @@ export class ShareButtonDirective {
     }
 
     let popUp;
-    switch (shareUrl) {
-      case this.share.meta.copy.type:
-        (<CopyButton>this.shareButton).copyURLToClipboard(this, this.url);
-        break;
-      case this.share.meta.print.type:
-        popUp = this.doc.execCommand('print');
-        break;
-      default:
-        /** Open share dialog */
-        popUp = this.doc.open(shareUrl, 'newwindow', this.share.dialogSize);
-
-        /** Emit opened dialog type */
-        this.sbOpened.emit(this.shareButton.prop.type);
+    if (shareUrl) {
+      /** Open share dialog */
+      popUp = this.window.open(shareUrl, 'newwindow', this.share.dialogSize);
     }
 
+    /** Emit opened dialog type */
+    this.sbOpened.emit(this.shareButton.prop.type);
+
     /** If dialog closed event has subscribers, emit closed dialog type */
     if (this.sbClosed.observers.length && popUp) {
-      const pollTimer = window.setInterval(() => {
+      const pollTimer = this.window.setInterval(() => {
         if (popUp.closed) {
-          window.clearInterval(pollTimer);
+          this.window.clearInterval(pollTimer);
           this.sbClosed.emit(this.shareButton.prop.type);
         }
       }, 200);
@@ -147,7 +145,7 @@ export class ShareButtonDirective {
     /** Only if share count has observers & the button has support for share count */
     if (this.url && this.sbCount.observers.length && this.shareButton.prop.supportCount) {
 
-      /** Emits share count to sbCount Output */
+      /** Emit share count to (sbCount) Output */
       this.shareButton.count(this.url).subscribe((count: number) => this.sbCount.emit(count));
     }
   }
@@ -164,7 +162,7 @@ export class ShareButtonDirective {
       console.warn(`[ShareButtons]: The share URL "${url}" is invalid!`);
     }
     /** fallback to current page URL */
-    return encodeURIComponent(this.doc.URL);
+    return encodeURIComponent(this.window.location.href);
   }
 
 }

src/modules/share-directive.module.ts

@@ -6,6 +6,7 @@ import { ShareButtonsService } from '../services/share-buttons.service';
 import { ShareButtonDirective } from '../directives/share-button.directive';
 import { NFormatterPipe } from '../pipes/n-formatter.pipe';
 import { ShareButtonsMeta, ShareButtonsOptions } from '../models/share-buttons.models';
+import { UniversalSupportService } from '../services/universal-support.service';
 
 /** Options tokens */
 const OPTIONS = new InjectionToken<ShareButtonsOptions>('OPTIONS');
@@ -29,7 +30,8 @@ export function ShareButtonsFactory(httpClient: HttpClient, options: ShareButton
     CommonModule,
     ShareButtonDirective,
     NFormatterPipe
-  ]
+  ],
+  providers: [ UniversalSupportService ]
 })
 export class ShareDirectiveModule {
   static forRoot(options?: ShareButtonsOptions, buttonsMeta?: ShareButtonsMeta) {