diff --git a/README.md b/README.md index 4d24133..67dd351 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,9 @@ Add the component in your vue view. Share in facebook + + Share in whatsapp + @@ -154,6 +157,7 @@ Google + | `googleplus` Pinterest | `pinterest` Reddit | `reddit` LinkedIn | `linkedin` +Whatsapp | `whatsapp` (mobile only) ## License diff --git a/dist/vue.social-shares.js b/dist/vue.social-shares.js index 5ac255b..209e999 100644 --- a/dist/vue.social-shares.js +++ b/dist/vue.social-shares.js @@ -5,20 +5,51 @@ * @author Alejandro Mostajo * @copyright 10Quality * @license MIT - * @version 1.0.0 + * @version 1.0.1 */ 'use strict'; /** * Inner component mixin. * @since 1.0.0 + * @since 1.0.1 Added different mixin options. * @var object */ -var _sr_mixin = { template: '',}; +var _sr_mixins = { + /** + * Mixin for popup like sharers. + * @since 1.0.0 + */ + popup: { template: '' }, + /** + * Mixin for direct link sharers. + * @since 1.0.1 + */ + direct: { + template: '', + methods: + { + /** + * Returns attribute value by key. + * @since 1.0.1 + * + * @param string key Attribute key. + * + * @return string + */ + attributes: function(key) + { + return this.attr !== undefined && this.attr[key] !== undefined + ? this.attr[key] + : undefined; + }, + } + }, +}; /** * Component. - * @since 1.0.0 + * @since 1.0.1 */ Vue.component('social-shares', Vue.extend({ props: @@ -91,6 +122,7 @@ Vue.component('social-shares', Vue.extend({ /** * Available sharing networks. * @since 1.0.0 + * @since 1.0.1 Added whatsapp * @param object */ networks: @@ -121,6 +153,10 @@ Vue.component('social-shares', Vue.extend({ { sharer: 'https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description', }, + whatsapp: + { + sharer: 'whatsapp://send?text=@url', + }, }, /** * Popup settings. @@ -142,35 +178,44 @@ Vue.component('social-shares', Vue.extend({ left: 0, window: undefined, }, - /** - * Mixin to apply to child components. - * @since 1.0.0 - * @var object - */ - childMixin: - { - template: '', - }, }; }, methods: { + /** + * Returns generated sharer url. + * @since 1.0.1 + * + * @param string network Social network key. + */ + _getSharer: function(network) + { + return this.networks[network].sharer.replace(/\@url/g, this.url) + .replace(/\@title/g, this.title) + .replace(/\@description/g, this.description) + .replace(/\@twitteruser/g, this.twitterUser); + }, /** * Shares URL in specified network. * @since 1.0.0 + * @since 1.0.1 _getSharer used. * * @param string network Social network key. */ share: function(network) { - if (this.url !== undefined) { - this._openSharer( - this.networks[network].sharer.replace(/\@url/g, this.url) - .replace(/\@title/g, this.title) - .replace(/\@description/g, this.description) - .replace(/\@twitteruser/g, this.twitterUser) - ); - } + if (this.url !== undefined) + this._openSharer(this._getSharer(network)); + this.$dispatch('social_shares_click', network, this.url); + }, + /** + * Touches network and dispatches click event. + * @since 1.0.1 + * + * @param string network Social network key. + */ + touch: function(network) + { this.$dispatch('social_shares_click', network, this.url); }, /** @@ -217,38 +262,45 @@ Vue.component('social-shares', Vue.extend({ }, /** * Set component aliases for buttons and links. + * @since 1.0.0 + * @since 1.0.1 Added whatsapp. */ components: { 'facebook': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'facebook'} }, }), 'twitter': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'twitter'} }, }), 'googleplus': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'googleplus'} }, }), 'pinterest': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'pinterest'} }, }), 'reddit': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'reddit'} }, }), 'linkedin': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'linkedin'} }, }), + 'whatsapp': Vue.extend({ + mixins: [_sr_mixins.direct], + data: function() { return {network: 'whatsapp', attr: {'data-action': 'share/whatsapp/share'}} }, + }), }, })); /** * Unset mixin. * @since 1.0.0 + * @since 1.0.1 Refactored to _sr_mixins. */ -_sr_mixin = undefined; \ No newline at end of file +_sr_mixins = undefined; \ No newline at end of file diff --git a/dist/vue.social-shares.min.js b/dist/vue.social-shares.min.js index 31d984a..e3c515a 100644 --- a/dist/vue.social-shares.min.js +++ b/dist/vue.social-shares.min.js @@ -1 +1 @@ -"use strict";var _sr_mixin={template:''};Vue.component("social-shares",Vue.extend({props:{url:{type:String,"default":void 0},title:{type:String,"default":""},description:{type:String,"default":""},twitterUser:{type:String,"default":""},withCounts:{type:[String,Boolean],"default":!1},googleKey:{type:String,"default":void 0}},data:function(){return{networks:{facebook:{sharer:"https://www.facebook.com/sharer/sharer.php?u=@url&summary=@title",stats:"https://api.facebook.com/method/links.getStats?urls=@url&format=json"},twitter:{sharer:"https://twitter.com/intent/tweet?url=@url&via=@twitteruser"},googleplus:{sharer:"https://plus.google.com/share?url=@url",stats:"https://plusone.google.com/_/+1/fastbutton?url=@url"},pinterest:{sharer:"https://pinterest.com/pin/create/button/?url=@url&description=@title"},reddit:{sharer:"http://www.reddit.com/submit?url=@url&title=@title"},linkedin:{sharer:"https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description"}},popup:{status:!1,resizable:!0,toolbar:!1,menubar:!1,scrollbars:!1,location:!1,directories:!1,width:626,height:436,top:0,left:0,window:void 0},childMixin:{template:''}}},methods:{share:function(a){void 0!==this.url&&this._openSharer(this.networks[a].sharer.replace(/\@url/g,this.url).replace(/\@title/g,this.title).replace(/\@description/g,this.description).replace(/\@twitteruser/g,this.twitterUser)),this.$dispatch("social_shares_click",a,this.url)},_openSharer:function(a){this.popup.window=window.open(a,"sharer","status="+(this.popup.status?"yes":"no")+",height="+this.popup.height+",width="+this.popup.width+",resizable="+(this.popup.resizable?"yes":"no")+",left="+this.popup.left+",top="+this.popup.top+",screenX="+this.popup.left+",screenY="+this.popup.top+",toolbar="+(this.popup.toolbar?"yes":"no")+",menubar="+(this.popup.menubar?"yes":"no")+",scrollbars="+(this.popup.scrollbars?"yes":"no")+",location="+(this.popup.location?"yes":"no")+",directories="+(this.popup.directories?"yes":"no"))}},ready:function(){void 0===this.url&&(this.url=window.location.href),this.popup.left=window.screen.width/2-(this.popup.width/2+10),this.popup.top=window.screen.height/2-(this.popup.height/2+50)},components:{facebook:Vue.extend({mixins:[_sr_mixin],data:function(){return{network:"facebook"}}}),twitter:Vue.extend({mixins:[_sr_mixin],data:function(){return{network:"twitter"}}}),googleplus:Vue.extend({mixins:[_sr_mixin],data:function(){return{network:"googleplus"}}}),pinterest:Vue.extend({mixins:[_sr_mixin],data:function(){return{network:"pinterest"}}}),reddit:Vue.extend({mixins:[_sr_mixin],data:function(){return{network:"reddit"}}}),linkedin:Vue.extend({mixins:[_sr_mixin],data:function(){return{network:"linkedin"}}})}})),_sr_mixin=void 0; \ No newline at end of file +"use strict";var _sr_mixins={popup:{template:''},direct:{template:'',methods:{attributes:function(a){return void 0!==this.attr&&void 0!==this.attr[a]?this.attr[a]:void 0}}}};Vue.component("social-shares",Vue.extend({props:{url:{type:String,"default":void 0},title:{type:String,"default":""},description:{type:String,"default":""},twitterUser:{type:String,"default":""},withCounts:{type:[String,Boolean],"default":!1},googleKey:{type:String,"default":void 0}},data:function(){return{networks:{facebook:{sharer:"https://www.facebook.com/sharer/sharer.php?u=@url&summary=@title",stats:"https://api.facebook.com/method/links.getStats?urls=@url&format=json"},twitter:{sharer:"https://twitter.com/intent/tweet?url=@url&via=@twitteruser"},googleplus:{sharer:"https://plus.google.com/share?url=@url",stats:"https://plusone.google.com/_/+1/fastbutton?url=@url"},pinterest:{sharer:"https://pinterest.com/pin/create/button/?url=@url&description=@title"},reddit:{sharer:"http://www.reddit.com/submit?url=@url&title=@title"},linkedin:{sharer:"https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description"},whatsapp:{sharer:"whatsapp://send?text=@url"}},popup:{status:!1,resizable:!0,toolbar:!1,menubar:!1,scrollbars:!1,location:!1,directories:!1,width:626,height:436,top:0,left:0,window:void 0}}},methods:{_getSharer:function(a){return this.networks[a].sharer.replace(/\@url/g,this.url).replace(/\@title/g,this.title).replace(/\@description/g,this.description).replace(/\@twitteruser/g,this.twitterUser)},share:function(a){void 0!==this.url&&this._openSharer(this._getSharer(a)),this.$dispatch("social_shares_click",a,this.url)},touch:function(a){this.$dispatch("social_shares_click",a,this.url)},_openSharer:function(a){this.popup.window=window.open(a,"sharer","status="+(this.popup.status?"yes":"no")+",height="+this.popup.height+",width="+this.popup.width+",resizable="+(this.popup.resizable?"yes":"no")+",left="+this.popup.left+",top="+this.popup.top+",screenX="+this.popup.left+",screenY="+this.popup.top+",toolbar="+(this.popup.toolbar?"yes":"no")+",menubar="+(this.popup.menubar?"yes":"no")+",scrollbars="+(this.popup.scrollbars?"yes":"no")+",location="+(this.popup.location?"yes":"no")+",directories="+(this.popup.directories?"yes":"no"))}},ready:function(){void 0===this.url&&(this.url=window.location.href),this.popup.left=window.screen.width/2-(this.popup.width/2+10),this.popup.top=window.screen.height/2-(this.popup.height/2+50)},components:{facebook:Vue.extend({mixins:[_sr_mixins.popup],data:function(){return{network:"facebook"}}}),twitter:Vue.extend({mixins:[_sr_mixins.popup],data:function(){return{network:"twitter"}}}),googleplus:Vue.extend({mixins:[_sr_mixins.popup],data:function(){return{network:"googleplus"}}}),pinterest:Vue.extend({mixins:[_sr_mixins.popup],data:function(){return{network:"pinterest"}}}),reddit:Vue.extend({mixins:[_sr_mixins.popup],data:function(){return{network:"reddit"}}}),linkedin:Vue.extend({mixins:[_sr_mixins.popup],data:function(){return{network:"linkedin"}}}),whatsapp:Vue.extend({mixins:[_sr_mixins.direct],data:function(){return{network:"whatsapp",attr:{"data-action":"share/whatsapp/share"}}}})}})),_sr_mixins=void 0; \ No newline at end of file diff --git a/package.json b/package.json index b92ee52..8d4f4c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-social-shares", - "version": "1.0.0", + "version": "1.0.1", "description": "Social network sharing component for Vue JS.", "main": "dist/vue.social-share.js", "repository": { diff --git a/src/vue.social-shares.js b/src/vue.social-shares.js index 5ac255b..209e999 100644 --- a/src/vue.social-shares.js +++ b/src/vue.social-shares.js @@ -5,20 +5,51 @@ * @author Alejandro Mostajo * @copyright 10Quality * @license MIT - * @version 1.0.0 + * @version 1.0.1 */ 'use strict'; /** * Inner component mixin. * @since 1.0.0 + * @since 1.0.1 Added different mixin options. * @var object */ -var _sr_mixin = { template: '',}; +var _sr_mixins = { + /** + * Mixin for popup like sharers. + * @since 1.0.0 + */ + popup: { template: '' }, + /** + * Mixin for direct link sharers. + * @since 1.0.1 + */ + direct: { + template: '', + methods: + { + /** + * Returns attribute value by key. + * @since 1.0.1 + * + * @param string key Attribute key. + * + * @return string + */ + attributes: function(key) + { + return this.attr !== undefined && this.attr[key] !== undefined + ? this.attr[key] + : undefined; + }, + } + }, +}; /** * Component. - * @since 1.0.0 + * @since 1.0.1 */ Vue.component('social-shares', Vue.extend({ props: @@ -91,6 +122,7 @@ Vue.component('social-shares', Vue.extend({ /** * Available sharing networks. * @since 1.0.0 + * @since 1.0.1 Added whatsapp * @param object */ networks: @@ -121,6 +153,10 @@ Vue.component('social-shares', Vue.extend({ { sharer: 'https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description', }, + whatsapp: + { + sharer: 'whatsapp://send?text=@url', + }, }, /** * Popup settings. @@ -142,35 +178,44 @@ Vue.component('social-shares', Vue.extend({ left: 0, window: undefined, }, - /** - * Mixin to apply to child components. - * @since 1.0.0 - * @var object - */ - childMixin: - { - template: '', - }, }; }, methods: { + /** + * Returns generated sharer url. + * @since 1.0.1 + * + * @param string network Social network key. + */ + _getSharer: function(network) + { + return this.networks[network].sharer.replace(/\@url/g, this.url) + .replace(/\@title/g, this.title) + .replace(/\@description/g, this.description) + .replace(/\@twitteruser/g, this.twitterUser); + }, /** * Shares URL in specified network. * @since 1.0.0 + * @since 1.0.1 _getSharer used. * * @param string network Social network key. */ share: function(network) { - if (this.url !== undefined) { - this._openSharer( - this.networks[network].sharer.replace(/\@url/g, this.url) - .replace(/\@title/g, this.title) - .replace(/\@description/g, this.description) - .replace(/\@twitteruser/g, this.twitterUser) - ); - } + if (this.url !== undefined) + this._openSharer(this._getSharer(network)); + this.$dispatch('social_shares_click', network, this.url); + }, + /** + * Touches network and dispatches click event. + * @since 1.0.1 + * + * @param string network Social network key. + */ + touch: function(network) + { this.$dispatch('social_shares_click', network, this.url); }, /** @@ -217,38 +262,45 @@ Vue.component('social-shares', Vue.extend({ }, /** * Set component aliases for buttons and links. + * @since 1.0.0 + * @since 1.0.1 Added whatsapp. */ components: { 'facebook': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'facebook'} }, }), 'twitter': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'twitter'} }, }), 'googleplus': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'googleplus'} }, }), 'pinterest': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'pinterest'} }, }), 'reddit': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'reddit'} }, }), 'linkedin': Vue.extend({ - mixins: [_sr_mixin], + mixins: [_sr_mixins.popup], data: function() { return {network: 'linkedin'} }, }), + 'whatsapp': Vue.extend({ + mixins: [_sr_mixins.direct], + data: function() { return {network: 'whatsapp', attr: {'data-action': 'share/whatsapp/share'}} }, + }), }, })); /** * Unset mixin. * @since 1.0.0 + * @since 1.0.1 Refactored to _sr_mixins. */ -_sr_mixin = undefined; \ No newline at end of file +_sr_mixins = undefined; \ No newline at end of file diff --git a/tests/sample.html b/tests/sample.html index 8d3c3ab..9ccfa06 100644 --- a/tests/sample.html +++ b/tests/sample.html @@ -33,9 +33,16 @@
  • LinkedIn
  • +
  • + Whatsapp +
  • +
    + {{{alert.message}}} +
    +