Add new events + unit tests

CHANGELOG.md

@@ -1,3 +1,9 @@
+<a name="2.2.0"></a>
+# [2.2.0](https://github.com/nicolasbeauvais/vue-social-sharing/compare/2.1.5...2.2.0) (2017-03-29)
+- Internal methods refactor
+- Rename `social_shares_click` event to `social_shares_open`
+- Add `social_shares_change` and `social_shares_close` event
+
 <a name="2.1.5"></a>
 # [2.1.5](https://github.com/nicolasbeauvais/vue-social-sharing/compare/2.1.4...2.1.5) (2017-03-18)
 - Vue 2.2.4 compatibility

README.md

@@ -101,6 +101,25 @@ Prop           | Data Type  | Default   | Description
 `twitter-user` | String     |           | Twitter user (Twitter only).
 `media`        | String     |           | Url to a media (Pinterest only).
 
+#### Available events
+
+Events are emitted on the vue $root instance:
+
+Name                   | Data                       | Description
+---------------------- | -------------------------- | --------------------------------------------------------------------------
+`social_shares_open`   | Network object, shared url | Fired when a sharing popup is open
+`social_shares_change` | Network object, shared url | Fired when the user open a new sharing popup while another is already open
+`social_shares_close`  | Network object, shared url | Fired when a sharing popup is closed or changed by another popup
+
+You can listen to a `vue-social-sharing` event by using the following code:
+```javascript
+Vue.$root.$on('social_shares_open', function (network, url) {
+  // your event code
+});
+```
+
+> Note that the `social_shares_close` event is not fired for Whatsapp.
+
 ## Feature request
 Feel free to open an issue to ask for a new social network support.
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-social-sharing",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "homepage": "https://github.com/nicolasbeauvais/vue-social-sharing",
   "authors": [
     "nicolasbeauvais <[email protected]>"

dist/vue-social-sharing.common.js

@@ -1,5 +1,5 @@
 /*!
- * vue-social-sharing v2.1.4 
+ * vue-social-sharing v2.2.0 
  * (c) 2017 nicolasbeauvais
  * Released under the MIT License.
  */
@@ -46,7 +46,7 @@ var SocialSharingNetwork = {
         id: context.data.attrs.id || null,
         'data-link': network.type === 'popup'
           ? '#share-' + context.props.network
-          : context.parent._getSharer(context.props.network),
+          : context.parent.createSharingUrl(context.props.network),
         'data-action': network.type === 'popup' ? null : network.action
       },
       on: {
@@ -181,7 +181,8 @@ var SocialSharing = {
         height: 436,
         top: 0,
         left: 0,
-        window: undefined
+        window: undefined,
+        interval: null
       }
     };
   },
@@ -192,7 +193,7 @@ var SocialSharing = {
      *
      * @param network Social network key.
      */
-    _getSharer: function (network) {
+    createSharingUrl: function createSharingUrl (network) {
       return this.networks[network].sharer
         .replace(/@url/g, encodeURIComponent(this.url))
         .replace(/@title/g, encodeURIComponent(this.title))
@@ -208,27 +209,36 @@ var SocialSharing = {
      *
      * @param string network Social network key.
      */
-    share: function (network) {
-      this._openSharer(this._getSharer(network));
-      this.$root.$emit('social_shares_click', network, this.url);
+    share: function share (network) {
+      this.openSharer(network, this.createSharingUrl(network));
+      this.$root.$emit('social_shares_open', network, this.url);
     },
 
     /**
      * Touches network and emits click event.
      *
      * @param string network Social network key.
      */
-    touch: function (network) {
-      window.open(this._getSharer(network), '_self');
-      this.$root.$emit('social_shares_click', network, this.url);
+    touch: function touch (network) {
+      window.open(this.createSharingUrl(network), '_self');
+      this.$root.$emit('social_shares_open', network, this.url);
     },
 
     /**
      * Opens sharer popup.
      *
      * @param string url Url to share.
      */
-    _openSharer: function (url) {
+    openSharer: function openSharer (network, url) {
+      var this$1 = this;
+
+      // If a popup window already exist it will be replaced, trigger a close event.
+      if (this.popup.window && this.popup.interval) {
+        clearInterval(this.popup.interval);
+        this.popup.window.close();// Force close (for Facebook)
+        this.$root.$emit('social_shares_change', network, this.url);
+      }
+
       this.popup.window = window.open(
         url,
         'sharer',
@@ -246,13 +256,24 @@ var SocialSharing = {
         ',location=' + (this.popup.location ? 'yes' : 'no') +
         ',directories=' + (this.popup.directories ? 'yes' : 'no')
       );
+
+      this.popup.window.focus();
+
+      // Create an interval to detect popup closing event
+      this.popup.interval = setInterval(function () {
+        if (this$1.popup.window.closed) {
+          clearInterval(this$1.popup.interval);
+          this$1.popup.window = undefined;
+          this$1.$root.$emit('social_shares_close', network, this$1.url);
+        }
+      }, 500);
     }
   },
 
   /**
    * Sets popup default dimensions.
    */
-  mounted: function () {
+  mounted: function mounted () {
     if (!inBrowser) {
       return;
     }
@@ -279,7 +300,7 @@ var SocialSharing = {
   }
 };
 
-SocialSharing.version = '2.1.4';
+SocialSharing.version = '2.2.0';
 
 SocialSharing.install = function (Vue) {
   Vue.component('social-sharing', SocialSharing);

dist/vue-social-sharing.js

@@ -1,5 +1,5 @@
 /*!
- * vue-social-sharing v2.1.4 
+ * vue-social-sharing v2.2.0 
  * (c) 2017 nicolasbeauvais
  * Released under the MIT License.
  */
@@ -50,7 +50,7 @@ var SocialSharingNetwork = {
         id: context.data.attrs.id || null,
         'data-link': network.type === 'popup'
           ? '#share-' + context.props.network
-          : context.parent._getSharer(context.props.network),
+          : context.parent.createSharingUrl(context.props.network),
         'data-action': network.type === 'popup' ? null : network.action
       },
       on: {
@@ -185,7 +185,8 @@ var SocialSharing = {
         height: 436,
         top: 0,
         left: 0,
-        window: undefined
+        window: undefined,
+        interval: null
       }
     };
   },
@@ -196,7 +197,7 @@ var SocialSharing = {
      *
      * @param network Social network key.
      */
-    _getSharer: function (network) {
+    createSharingUrl: function createSharingUrl (network) {
       return this.networks[network].sharer
         .replace(/@url/g, encodeURIComponent(this.url))
         .replace(/@title/g, encodeURIComponent(this.title))
@@ -212,27 +213,36 @@ var SocialSharing = {
      *
      * @param string network Social network key.
      */
-    share: function (network) {
-      this._openSharer(this._getSharer(network));
-      this.$root.$emit('social_shares_click', network, this.url);
+    share: function share (network) {
+      this.openSharer(network, this.createSharingUrl(network));
+      this.$root.$emit('social_shares_open', network, this.url);
     },
 
     /**
      * Touches network and emits click event.
      *
      * @param string network Social network key.
      */
-    touch: function (network) {
-      window.open(this._getSharer(network), '_self');
-      this.$root.$emit('social_shares_click', network, this.url);
+    touch: function touch (network) {
+      window.open(this.createSharingUrl(network), '_self');
+      this.$root.$emit('social_shares_open', network, this.url);
     },
 
     /**
      * Opens sharer popup.
      *
      * @param string url Url to share.
      */
-    _openSharer: function (url) {
+    openSharer: function openSharer (network, url) {
+      var this$1 = this;
+
+      // If a popup window already exist it will be replaced, trigger a close event.
+      if (this.popup.window && this.popup.interval) {
+        clearInterval(this.popup.interval);
+        this.popup.window.close();// Force close (for Facebook)
+        this.$root.$emit('social_shares_change', network, this.url);
+      }
+
       this.popup.window = window.open(
         url,
         'sharer',
@@ -250,13 +260,24 @@ var SocialSharing = {
         ',location=' + (this.popup.location ? 'yes' : 'no') +
         ',directories=' + (this.popup.directories ? 'yes' : 'no')
       );
+
+      this.popup.window.focus();
+
+      // Create an interval to detect popup closing event
+      this.popup.interval = setInterval(function () {
+        if (this$1.popup.window.closed) {
+          clearInterval(this$1.popup.interval);
+          this$1.popup.window = undefined;
+          this$1.$root.$emit('social_shares_close', network, this$1.url);
+        }
+      }, 500);
     }
   },
 
   /**
    * Sets popup default dimensions.
    */
-  mounted: function () {
+  mounted: function mounted () {
     if (!inBrowser) {
       return;
     }
@@ -283,7 +304,7 @@ var SocialSharing = {
   }
 };
 
-SocialSharing.version = '2.1.4';
+SocialSharing.version = '2.2.0';
 
 SocialSharing.install = function (Vue) {
   Vue.component('social-sharing', SocialSharing);