New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-social-sharing

Package Overview
Dependencies
Maintainers
1
Versions
63
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-social-sharing - npm Package Compare versions

Comparing version 2.4.7 to 3.0.0-beta.1

nuxt/index.js
nuxt/vue-social-sharing-plugin.template.js.tpl
src/components/share-network.js
src/vue-social-sharing.js

8

CHANGELOG.md

@@ -0,1 +1,9 @@

<a name="3.0.0-beta.1"></a>
# [3.0.0-beta.1](https://github.com/nicolasbeauvais/vue-social-sharing/compare/2.4.7...3.0.0-beta.1) (2020-05-15)
- Complete rewrite of the package
- Updated Readme.md
- Only one component exported (`ShareNetwork`)
- New examples `yarn run example`
- Storybook stories `yarn run storybook`
<a name="2.4.7"></a>

@@ -2,0 +10,0 @@ # [2.4.7](https://github.com/nicolasbeauvais/vue-social-sharing/compare/2.4.6...2.4.7) (2019-11-07)

407

dist/vue-social-sharing.js

@@ -1,406 +0,1 @@

/*!
* vue-social-sharing v2.4.7
* (c) 2019 nicolasbeauvais
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
typeof define === 'function' && define.amd ? define(['vue'], factory) :
(global.VueSocialSharing = factory(global.Vue));
}(this, (function (Vue) { 'use strict';
Vue = 'default' in Vue ? Vue['default'] : Vue;
var SocialSharingNetwork = {
functional: true,
props: {
network: {
type: String,
default: ''
}
},
render: function (createElement, context) {
var network = context.parent._data.baseNetworks[context.props.network];
if (!network) {
return console.warn(("Network " + (context.props.network) + " does not exist"));
}
return createElement(context.parent.networkTag, {
staticClass: context.data.staticClass || null,
staticStyle: context.data.staticStyle || null,
class: context.data.class || null,
style: context.data.style || null,
attrs: {
id: context.data.attrs.id || null,
tabindex: context.data.attrs.tabindex || 0,
'data-link': network.type === 'popup'
? '#share-' + context.props.network
: context.parent.createSharingUrl(context.props.network),
'data-action': network.type === 'popup' ? null : network.action
},
on: {
click: network.type === 'popup' ? function () {
context.parent.share(context.props.network);
} : function () {
context.parent.touch(context.props.network);
}
}
}, context.children);
}
};
var email = {"sharer":"mailto:?subject=@title&body=@url%0D%0A%0D%0A@description","type":"direct"};
var facebook = {"sharer":"https://www.facebook.com/sharer/sharer.php?u=@url&title=@title&description=@description&quote=@quote&hashtag=@hashtags","type":"popup"};
var googleplus = {"sharer":"https://plus.google.com/share?url=@url","type":"popup"};
var line = {"sharer":"http://line.me/R/msg/text/?@description%0D%0A@url","type":"popup"};
var linkedin = {"sharer":"https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description","type":"popup"};
var odnoklassniki = {"sharer":"https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@url&st.comments=@description","type":"popup"};
var pinterest = {"sharer":"https://pinterest.com/pin/create/button/?url=@url&media=@media&description=@title","type":"popup"};
var reddit = {"sharer":"https://www.reddit.com/submit?url=@url&title=@title","type":"popup"};
var skype = {"sharer":"https://web.skype.com/share?url=@description%0D%0A@url","type":"popup"};
var telegram = {"sharer":"https://t.me/share/url?url=@url&text=@description","type":"popup"};
var twitter = {"sharer":"https://twitter.com/intent/tweet?text=@title&url=@url&hashtags=@hashtags@twitteruser","type":"popup"};
var viber = {"sharer":"viber://forward?text=@url @description","type":"direct"};
var vk = {"sharer":"https://vk.com/share.php?url=@url&title=@title&description=@description&image=@media&noparse=true","type":"popup"};
var weibo = {"sharer":"http://service.weibo.com/share/share.php?url=@url&title=@title","type":"popup"};
var whatsapp = {"sharer":"https://api.whatsapp.com/send?text=@description%0D%0A@url","type":"popup","action":"share/whatsapp/share"};
var sms = {"sharer":"sms:?body=@url%20@description","type":"direct"};
var sms_ios = {"sharer":"sms:;body=@url%20@description","type":"direct"};
var BaseNetworks = {
email: email,
facebook: facebook,
googleplus: googleplus,
line: line,
linkedin: linkedin,
odnoklassniki: odnoklassniki,
pinterest: pinterest,
reddit: reddit,
skype: skype,
telegram: telegram,
twitter: twitter,
viber: viber,
vk: vk,
weibo: weibo,
whatsapp: whatsapp,
sms: sms,
sms_ios: sms_ios
};
var inBrowser = typeof window !== 'undefined';
var $window = inBrowser ? window : null;
var SocialSharing = {
props: {
/**
* URL to share.
* @var string
*/
url: {
type: String,
default: inBrowser ? window.location.href : ''
},
/**
* Sharing title, if available by network.
* @var string
*/
title: {
type: String,
default: ''
},
/**
* Sharing description, if available by network.
* @var string
*/
description: {
type: String,
default: ''
},
/**
* Facebook quote
* @var string
*/
quote: {
type: String,
default: ''
},
/**
* Twitter hashtags
* @var string
*/
hashtags: {
type: String,
default: ''
},
/**
* Twitter user.
* @var string
*/
twitterUser: {
type: String,
default: ''
},
/**
* Flag that indicates if counts should be retrieved.
* - NOT WORKING IN CURRENT VERSION
* @var mixed
*/
withCounts: {
type: [String, Boolean],
default: false
},
/**
* Google plus key.
* @var string
*/
googleKey: {
type: String,
default: undefined
},
/**
* Pinterest Media URL.
* Specifies the image/media to be used.
*/
media: {
type: String,
default: ''
},
/**
* Network sub component tag.
* Default to span tag
*/
networkTag: {
type: String,
default: 'span'
},
/**
* Additional or overridden networks.
* Default to BaseNetworks
*/
networks: {
type: Object,
default: function () {
return {};
}
}
},
data: function data () {
return {
/**
* Available sharing networks.
* @param object
*/
baseNetworks: BaseNetworks,
/**
* Popup settings.
* @param object
*/
popup: {
status: false,
resizable: true,
toolbar: false,
menubar: false,
scrollbars: false,
location: false,
directories: false,
width: 626,
height: 436,
top: 0,
left: 0,
window: undefined,
interval: null
}
};
},
methods: {
/**
* Returns generated sharer url.
*
* @param network Social network key.
*/
createSharingUrl: function createSharingUrl (network) {
var ua = navigator.userAgent.toLowerCase();
/**
* On IOS, SMS sharing link need a special formating
* Source: https://weblog.west-wind.com/posts/2013/Oct/09/Prefilling-an-SMS-on-Mobile-Devices-with-the-sms-Uri-Scheme#Body-only
*/
if (network === 'sms' && (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1)) {
network += '_ios';
}
var url = this.baseNetworks[network].sharer;
/**
* On IOS, Twitter sharing shouldn't include a hashtag parameter if the hashtag value is empty
* Source: https://github.com/nicolasbeauvais/vue-social-sharing/issues/143
*/
if (network === 'twitter' && this.hashtags.length === 0) {
url = url.replace('&hashtags=@hashtags', '');
}
return url
.replace(/@url/g, encodeURIComponent(this.url))
.replace(/@title/g, encodeURIComponent(this.title))
.replace(/@description/g, encodeURIComponent(this.description))
.replace(/@quote/g, encodeURIComponent(this.quote))
.replace(/@hashtags/g, this.generateHashtags(network, this.hashtags))
.replace(/@media/g, this.media)
.replace(/@twitteruser/g, this.twitterUser ? '&via=' + this.twitterUser : '');
},
/**
* Encode hashtags for the specified social network.
*
* @param network Social network key
* @param hashtags All hashtags specified
*/
generateHashtags: function generateHashtags (network, hashtags) {
if (network === 'facebook' && hashtags.length > 0) {
return '%23' + hashtags.split(',')[0];
}
return hashtags;
},
/**
* Shares URL in specified network.
*
* @param network Social network key.
*/
share: function share (network) {
this.openSharer(network, this.createSharingUrl(network));
this.$root.$emit('social_shares_open', network, this.url);
this.$emit('open', network, this.url);
},
/**
* Touches network and emits click event.
*
* @param network Social network key.
*/
touch: function touch (network) {
window.open(this.createSharingUrl(network), '_self');
this.$root.$emit('social_shares_open', network, this.url);
this.$emit('open', network, this.url);
},
/**
* Opens sharer popup.
*
* @param network Social network key
* @param url Url to share.
*/
openSharer: function openSharer (network, url) {
var this$1 = this;
// If a popup window already exist it will be replaced, trigger a close event.
var popupWindow = null;
if (popupWindow && this.popup.interval) {
clearInterval(this.popup.interval);
popupWindow.close();// Force close (for Facebook)
this.$root.$emit('social_shares_change', network, this.url);
this.$emit('change', network, this.url);
}
popupWindow = window.open(
url,
'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')
);
popupWindow.focus();
// Create an interval to detect popup closing event
this.popup.interval = setInterval(function () {
if (!popupWindow || popupWindow.closed) {
clearInterval(this$1.popup.interval);
popupWindow = undefined;
this$1.$root.$emit('social_shares_close', network, this$1.url);
this$1.$emit('close', network, this$1.url);
}
}, 500);
}
},
/**
* Merge base networks list with user's list
*/
beforeMount: function beforeMount () {
this.baseNetworks = Vue.util.extend(this.baseNetworks, this.networks);
},
/**
* Sets popup default dimensions.
*/
mounted: function mounted () {
if (!inBrowser) {
return;
}
/**
* Center the popup on dual screens
* http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen/32261263
*/
var dualScreenLeft = $window.screenLeft !== undefined ? $window.screenLeft : screen.left;
var dualScreenTop = $window.screenTop !== undefined ? $window.screenTop : screen.top;
var width = $window.innerWidth ? $window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width);
var height = $window.innerHeight ? $window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height);
this.popup.left = ((width / 2) - (this.popup.width / 2)) + dualScreenLeft;
this.popup.top = ((height / 2) - (this.popup.height / 2)) + dualScreenTop;
},
/**
* Set component aliases for buttons and links.
*/
components: {
'network': SocialSharingNetwork
}
};
SocialSharing.version = '2.4.7';
SocialSharing.install = function (Vue) {
Vue.component('social-sharing', SocialSharing);
};
if (typeof window !== 'undefined') {
window.SocialSharing = SocialSharing;
}
return SocialSharing;
})));
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSocialSharing=e():t.VueSocialSharing=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function r(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=t,r.c=e,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(o,i,function(e){return t[e]}.bind(null,i));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=3)}([function(t,e){t.exports=function(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}},function(t){t.exports=JSON.parse('{"email":{"sharer":"mailto:?subject=@title&body=@url%0D%0A%0D%0A@description","type":"direct"},"facebook":{"sharer":"https://www.facebook.com/sharer/sharer.php?u=@url&title=@title&description=@description&quote=@quote&hashtag=@hashtags","type":"popup"},"line":{"sharer":"http://line.me/R/msg/text/?@description%0D%0A@url","type":"popup"},"linkedin":{"sharer":"https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description","type":"popup"},"odnoklassniki":{"sharer":"https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@url&st.comments=@description","type":"popup"},"pinterest":{"sharer":"https://pinterest.com/pin/create/button/?url=@url&media=@media&description=@title","type":"popup"},"reddit":{"sharer":"https://www.reddit.com/submit?url=@url&title=@title","type":"popup"},"skype":{"sharer":"https://web.skype.com/share?url=@description%0D%0A@url","type":"popup"},"telegram":{"sharer":"https://t.me/share/url?url=@url&text=@description","type":"popup"},"twitter":{"sharer":"https://twitter.com/intent/tweet?text=@title&url=@url&hashtags=@hashtags@twitteruser","type":"popup"},"viber":{"sharer":"viber://forward?text=@url @description","type":"direct"},"vk":{"sharer":"https://vk.com/share.php?url=@url&title=@title&description=@description&image=@media&noparse=true","type":"popup"},"weibo":{"sharer":"http://service.weibo.com/share/share.php?url=@url&title=@title","type":"popup"},"whatsapp":{"sharer":"https://api.whatsapp.com/send?text=@description%0D%0A@url","type":"popup","action":"share/whatsapp/share"},"sms":{"sharer":"sms:?body=@url%20@description","type":"direct"},"sms_ios":{"sharer":"sms:;body=@url%20@description","type":"direct"}}')},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e,r){t.exports=r(4)},function(t,e,r){"use strict";r.r(e),r.d(e,"default",(function(){return h}));var o=r(2),i=r.n(o),s=r(0),n=r.n(s),p=r(1),a={name:"ShareNetwork",props:{network:{type:String,required:!0},url:{type:String,required:!0},title:{type:String,default:""},description:{type:String,default:""},quote:{type:String,default:""},hashtags:{type:String,default:""},twitterUser:{type:String,default:""},media:{type:String,default:""},tag:{type:String,default:"a"}},data:function(){return{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,interval:null}}},computed:{computedNetwork:function(){var t=this.network,e=navigator.userAgent.toLowerCase();return"sms"===t&&(e.indexOf("iphone")>-1||e.indexOf("ipad")>-1)&&(t+="_ios"),this.$SocialSharing.options.networks[t]},encodedHashtags:function(){return"facebook"===this.network&&this.hashtags.length?"%23"+this.hashtags.split(",")[0]:this.hashtags},sharingUrl:function(){var t=this.computedNetwork.sharer;return"twitter"===this.network&&(this.hashtags.length||t.replace("&hashtags=@hashtags",""),this.twitterUser||t.replace("@twitteruser","")),t.replace(/@url/g,encodeURIComponent(this.url)).replace(/@title/g,encodeURIComponent(this.title)).replace(/@description/g,encodeURIComponent(this.description)).replace(/@quote/g,encodeURIComponent(this.quote)).replace(/@hashtags/g,this.encodedHashtags).replace(/@media/g,encodeURIComponent(this.media)).replace(/@twitteruser/g,"&via="+encodeURIComponent(this.twitterUser))}},render:function(t){var e=this;if(!Object.prototype.hasOwnProperty.call(this.$SocialSharing.options.networks,this.network))throw new Error("Network ".concat(this.network," does not exist"));return t(this.tag,{class:"share-network-".concat(this.network),on:{click:function(){return e["popup"===e.computedNetwork.type?"share":"touch"]()}}},this.$slots.default)},methods:{share:function(){this.openSharer(),this.$root.$emit("social_shares_open",this.computedNetwork,this.url),this.$emit("open",this.computedNetwork,this.url)},touch:function(){window.open(this.sharingUrl,"_self"),this.$root.$emit("social_shares_open",this.computedNetwork,this.url),this.$emit("open",this.computedNetwork,this.url)},openSharer:function(){var t=this;this.popup.window&&this.popup.interval&&(clearInterval(this.popup.interval),this.popup.window.close(),this.$root.$emit("social_shares_change",this.computedNetwork,this.url),this.$emit("change",this.computedNetwork,this.url)),this.popup.window=window.open(this.sharingUrl,"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")),this.popup.window.focus(),this.popup.interval=setInterval((function(){t.popup.window&&!t.popup.window.closed||(clearInterval(t.popup.interval),t.popup.window=void 0,t.$root.$emit("social_shares_close",t.computedNetwork,t.url),t.$emit("close",t.computedNetwork,t.url))}),500)}}};function u(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,o)}return r}function c(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?u(Object(r),!0).forEach((function(e){n()(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}var h=function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};i()(this,t),n()(this,"options",{networks:p}),Object.prototype.hasOwnProperty.call(e,"networks")&&(this.options.networks=c(c({},p),e.networks))};h.install=function(t,e){var r=new h(e);t.component(a.name,a),t.prototype.$SocialSharing=r}}])}));

132

package.json
{
"name": "vue-social-sharing",
"version": "3.0.0-beta.1",
"description": "A Vue.js component for sharing links to social networks",
"version": "2.4.7",
"author": {
"name": "nicolasbeauvais",
"email": "nicolasbeauvais1@gmail.com"
},
"author": "Nicolas Beauvais <nicolas@bvs.email>",
"license": "MIT",
"homepage": "https://github.com/nicolasbeauvais/vue-social-sharing#readme",
"bugs": {
"url": "https://github.com/nicolasbeauvais/vue-social-sharing/issues"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.0",
"babel-plugin-coverage": "^1.0.0",
"babel-plugin-espower": "^2.0.0",
"babel-preset-es2015": "^6.1.18",
"buble": "^0.13.1",
"chromedriver": "^2.21.2",
"conventional-changelog-cli": "^1.1.1",
"conventional-github-releaser": "^1.1.3",
"cross-spawn": "^4.0.0",
"dotenv": "^2.0.0",
"eslint": "^3.4.0",
"eslint-config-vue": "^1.1.0",
"eslint-loader": "^1.3.0",
"eslint-plugin-html": "^1.5.2",
"html-webpack-plugin": "^2.19.0",
"http-server": "^0.11.1",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"json-loader": "^0.5.4",
"karma": "^0.13.9",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.0.0",
"karma-coveralls": "^1.1.2",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.4",
"karma-phantomjs-launcher": "^1.0.0",
"karma-safari-launcher": "^1.0.0",
"karma-sauce-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"nightwatch": "^0.9.0",
"nightwatch-helpers": "^1.0.0",
"phantomjs-prebuilt": "^2.1.1",
"power-assert": "^1.2.0",
"rollup": "^0.34.10",
"rollup-plugin-buble": "^0.13.0",
"rollup-plugin-replace": "^1.1.0",
"selenium-server": "2.53.1",
"uglify-js": "^2.6.1",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1",
"rollup-plugin-json": "^2.1.0"
},
"files": [
"dist/vue-social-sharing.js",
"dist/vue-social-sharing.min.js",
"dist/vue-social-sharing.common.js",
"src"
],
"homepage": "https://github.com/nicolasbeauvais/vue-social-sharing#readme",
"jsnext:main": "src/index.js",
"keywords": [

@@ -74,6 +18,16 @@ "plugin",

],
"license": "MIT",
"main": "dist/vue-social-sharing.common.js",
"engines": {
"node": ">= 6.0"
"main": "dist/vue-social-sharing.js",
"files": [
"dist",
"src",
"nuxt"
],
"scripts": {
"test": "jest tests",
"lint": "eslint --ext js --ext vue src nuxt examples .storybook tests",
"storybook": "start-storybook",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"build-storybook": "build-storybook -c .storybook -o docs",
"example": "poi -s examples/index.js",
"release": "conventional-github-releaser -p angular && npm publish"
},

@@ -84,22 +38,36 @@ "repository": {

},
"scripts": {
"build": "node config/build.js",
"changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
"release": "conventional-github-releaser -p angular && npm publish",
"clean": "rm -rf coverage && rm -rf dist/*.js* && rm ./*.log",
"dev": "webpack-dev-server --quiet --config config/webpack.dev.conf.js --host 0.0.0.0",
"lint": "eslint src test config",
"sauce": "npm run sauce:coolkids && npm run sauce:ie && npm run sauce:mobile",
"sauce:coolkids": "karma start config/karma.sauce.conf.js -- 0",
"sauce:ie": "karma start config/karma.sauce.conf.js -- 1",
"sauce:mobile": "karma start config/karma.sauce.conf.js -- 2",
"test": "npm run lint && npm run test:cover && npm run test:e2e -- --env phantomjs",
"test:cover": "karma start config/karma.cover.conf.js",
"test:coveralls": "karma start config/karma.coveralls.conf.js",
"test:e2e": "npm run build && node test/e2e/runner.js",
"test:unit": "karma start config/karma.unit.conf.js"
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@storybook/addon-notes": "^5.1.10",
"@storybook/vue": "^5.1.10",
"@vue/test-utils": "^1.0.2",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.0.1",
"babel-loader": "^8.0.6",
"babel-preset-vue": "^2.0.2",
"conventional-github-releaser": "^3.1.3",
"cross-env": "^5.2.0",
"eslint": "^7.0.0",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-jest": "^23.11.0",
"eslint-plugin-vue": "^6.2.2",
"husky": "^3.0.2",
"jest": "^26.0.1",
"lint-staged": "^9.2.1",
"poi": "^12.7.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue": "^2.6.10",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.7.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"vue": "^2.2.4"
"peerDependencies": {
"vue": "^2.6.10"
}
}

178

README.md

@@ -10,3 +10,3 @@ <h1 align="center">Vue Social Sharing</h1>

<a href="https://github.com/nicolasbeauvais/vue-social-sharing/releases"><img src="https://img.shields.io/github/release/nicolasbeauvais/vue-social-sharing.svg?style=flat-square" alt="Release"></a>
<a href="https://travis-ci.org/nicolasbeauvais/vue-social-sharing"><img src="https://img.shields.io/travis/nicolasbeauvais/vue-social-sharing/master.svg?style=flat-square" alt="Build Status"></a>
<a href="https://travis-ci.com/nicolasbeauvais/vue-social-sharing"><img src="https://img.shields.io/travis/com/nicolasbeauvais/vue-social-sharing/master.svg?style=flat-square" alt="Build Status"></a>
<a href="https://coveralls.io/github/nicolasbeauvais/vue-social-sharing?branch=master"><img src="https://img.shields.io/coveralls/nicolasbeauvais/vue-social-sharing/master.svg?style=flat-square" alt="Coverage Status"></a>

@@ -19,13 +19,21 @@ <a href="https://www.npmjs.com/package/vue-social-sharing"><img src="https://img.shields.io/npm/dt/vue-social-sharing.svg?style=flat-square" alt="Downloads"></a>

<h3 align="center">A Vue.js component for sharing links on major social networks. Less than 2kb gzipped.</h3>
<h3 align="center">Vue.js renderless components for sharing links on major social networks</h3>
<h4 align="center">Less than 2.5kb gzipped</h4>
---
##### For Vue.js prior to v2.x use vue-social-sharing v0.x
##### For Vue.js v2.x support use vue-social-sharing v2.x
##### For SSR and Vue.js v3.x support use vue-social-sharing v3.x
##### For Vue.js prior to < V2 use vue-social-sharing v0.x
##### For SSR and Vue.js 2 support use vue-social-sharing v2.x
### [Demo](https://nicolasbeauvais.github.io/vue-social-sharing/)
### What is a renderless component?
Renderless components give you the highest possible control over your markup and styling. This means that `vue-social-sharing` ship with minimal HTML and no CSS to let you adapt the look and feel of the components to your needs. You can learn more about renderless components in [this blog article](https://adamwathan.me/renderless-components-in-vuejs/) by [@adamwathan](https://github.com/adamwathan).
### Understanding social sharing
Before using this package it is important to understand how Social Network handle sharing links on their platform. When you share a link on a Social Network, the Social Network will crawl the link to detect [Open Graph meta tags](https://ogp.me/). If you share links that do not contain Open Graph meta tags, the Social Network will not be able to display a rich content for your link. You can refer to the [Available properties](https://github.com/nicolasbeauvais/vue-social-sharing#available-properties) section of the documentation to check which Social Network accept properties without Open Graph tags.
## Installation

@@ -51,3 +59,3 @@

```javascript
var SocialSharing = require('vue-social-sharing');
import VueSocialSharing from 'vue-social-sharing'

@@ -60,65 +68,37 @@ Vue.use(SocialSharing);

```html
<script src="/dist/vue-social-sharing.min.js"></script>
<script src="/dist/vue-social-sharing.js"></script>
```
### Using the social sharing component
### Using the Share Network component
```html
<social-sharing url="https://vuejs.org/"
title="The Progressive JavaScript Framework"
description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
quote="Vue is a progressive framework for building user interfaces."
hashtags="vuejs,javascript,framework"
twitter-user="vuejs"
inline-template>
<div>
<network network="email">
<i class="fa fa-envelope"></i> Email
</network>
<network network="facebook">
<i class="fa fa-facebook"></i> Facebook
</network>
<network network="googleplus">
<i class="fa fa-google-plus"></i> Google +
</network>
<network network="line">
<i class="fa fa-line"></i> Line
</network>
<network network="linkedin">
<i class="fa fa-linkedin"></i> LinkedIn
</network>
<network network="odnoklassniki">
<i class="fa fa-odnoklassniki"></i> Odnoklassniki
</network>
<network network="pinterest">
<i class="fa fa-pinterest"></i> Pinterest
</network>
<network network="reddit">
<i class="fa fa-reddit"></i> Reddit
</network>
<network network="skype">
<i class="fa fa-skype"></i> Skype
</network>
<network network="sms">
<i class="fa fa-commenting-o"></i> SMS
</network>
<network network="telegram">
<i class="fa fa-telegram"></i> Telegram
</network>
<network network="twitter">
<i class="fa fa-twitter"></i> Twitter
</network>
<network network="vk">
<i class="fa fa-vk"></i> VKontakte
</network>
<network network="weibo">
<i class="fa fa-weibo"></i> Weibo
</network>
<network network="whatsapp">
<i class="fa fa-whatsapp"></i> Whatsapp
</network>
</div>
</social-sharing>
<ShareNetwork
network="facebook"
url="https://news.vuejs.org/issues/180"
title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
quote="The hot reload is so fast it\'s near instant. - Evan You"
hashtags="vuejs,vite"
>
Share on Facebook
</ShareNetwork>
```
#### Available Networks
- Facebook
- Line
- LinkedIn
- Odnoklassniki
- Pinterest
- Reddit
- Skype
- Telegram
- Twitter
- Viber
- Vk
- Weibo
- Whatsapp
- Custom
#### Available properties

@@ -137,3 +117,3 @@

`media` | String | | Url to a media (Pinterest only).
`network-tag` | String | "span" | Tag the network component should render.
`tag` | String | "a" | Tag the network component should render.

@@ -147,13 +127,13 @@ <aside class="notice">

Events are emitted on the vue $root instance:
Events that 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
`share_network_open` | Network object, shared url | Fired when a sharing popup is open
`share_network_change` | Network object, shared url | Fired when the user open a new sharing popup while another is already open
`share_network_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` $root event by using the following code:
```javascript
Vue.$root.$on('social_shares_open', function (network, url) {
Vue.$root.$on('share_network_open', function (network, url) {
// your event code

@@ -163,3 +143,3 @@ });

And on the Local Vue-social-sharing instance:
Events that are emitted on the local `vue-social-sharing` instance:

@@ -172,46 +152,38 @@ Name | Data | Description

You can listen to a `vue-social-sharing` local event by using the following code:
You can listen to a `ShareNetwork` local event by using the following code:
```html
<some-component>
<social-sharing @open="open()" @change="change()" @close="close()">
</social-sharing>
</some-component>
<ShareNetwork @open="open()" @change="change()" @close="close()" />
```
> Note that the `social_shares_close` event is not fired for the Whatsapp, SMS and Email sharers.
> Note that the `share_network_close` event will not be fired for the WhatsApp, SMS and Email sharers.
## Extending the network list
Since version `2.3.1` you can extend and override the list of available networks by passing the additional networks as attribute. You can see a working example of the feature in the `examples/vue2-example.html` file:
In version `3.x` you can extend and override the list of available networks. You can see a working example of the feature in the `examples/index.js` file:
```html
<social-sharing :networks="overriddenNetworks" inline-template>
<div>
<network network="custom">
Custom network
</network>
</div>
</social-sharing>
```javascript
import Vue from 'vue'
import VueSocialSharing from '@/vue-social-sharing'
<script>
...
new Vue({
data: {
overriddenNetworks: {
"custom": {
"sharer": "https://mycustomdomain.com",
"type": "popup"
},
}
}
});
</script>
Vue.use(VueSocialSharing, {
networks: {
fakeblock: {
sharer: 'https://fakeblock.com/share?url=@url&title=@title',
type: 'popup'
}
}
})
new Vue({
el: '#app',
})
```
There are two available network types:
You can choose between two behavior type while defining a custom network:
Type | Effect
---------------------- | --------------------------
`popup` | Open the sharing link in a new popup
`direct` | Open directly the sharing link (suitable for mobile apps sharing, emails, sms, ...)
`direct` | Open the sharing link directly (suitable for mobile apps sharing, emails, sms, ...)

@@ -222,3 +194,3 @@ ## Feature request

## Changelog
Details changes for each release are documented in the [CHANGELOG.md](https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/CHANGELOG.md).
Detailed changes for each release can be found in [CHANGELOG.md](https://github.com/nicolasbeauvais/vue-social-sharing/blob/master/CHANGELOG.md).

@@ -225,0 +197,0 @@ ## Issues

5

src/networks.json

@@ -12,7 +12,2 @@ {

"googleplus": {
"sharer": "https://plus.google.com/share?url=@url",
"type": "popup"
},
"line": {

@@ -19,0 +14,0 @@ "sharer": "http://line.me/R/msg/text/?@description%0D%0A@url",

dist/README.md
dist/vue-social-sharing.common.js
dist/vue-social-sharing.min.js
src/index.js
src/social-sharing-network.js
src/social-sharing.js
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc