vuepress-plugin-social-share
Version:
Social sharing plugin for VuePress
117 lines (116 loc) • 4.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("../utils");
const SocialShareNetwork = {
name: `SocialShareNetwork`,
inheritAttrs: false,
props: {
network: {
type: Object,
validator: (network) => {
if (!network.icon || !network.type)
return false;
if ([`popup`].includes(network.type))
return Boolean(network.sharer);
return true;
},
required: true,
},
isPlain: {
type: Boolean,
default: false,
},
},
computed: {
isSvgIcon() {
return (0, utils_1.isSVG)(this.network.icon);
},
shareUrl() {
let { sharer = '' } = this.network;
const { url, title, quote, media, hashtags, description, twitterUser } = this.$parent;
/**
* On IOS, Twitter sharing should't have a empty hashtag parameter
* See https://github.com/nicolasbeauvais/vue-social-sharing/issues/143
*/
if (['twitter'].includes(this.network.name) && !hashtags.length) {
sharer = sharer.replace('&hashtags=@hashtags', '');
}
return sharer
.replace(/@url/g, encodeURIComponent(url))
.replace(/@title/g, encodeURIComponent(title))
.replace(/@media/g, media)
.replace(/@description/g, encodeURIComponent(description))
.replace(/@quote/g, encodeURIComponent(quote))
.replace(/@hashtags/g, this.generateHashTags(hashtags))
.replace(/@twitteruser/g, twitterUser ? `&via=${twitterUser}` : '');
},
},
methods: {
/**
* Encode hashtags for the specified social network
* @param hashtags - All hashtags specified
*
* @returns hashtags string
*/
generateHashTags(hashtags = '') {
const { name } = this.network;
if (['facebook'].includes(name) && hashtags.length) {
return `%23${hashtags.split(',')[0]}`;
}
return hashtags;
},
/**
* Shares URL in specified network
*/
share() {
var _a, _b;
const { name, type } = this.network;
const parent = this.$parent;
switch (type) {
case 'popup':
(_a = parent.openSharer) === null || _a === void 0 ? void 0 : _a.call(parent, this.shareUrl, { name, url: parent.url });
break;
case 'qrcode':
(_b = parent.showQRCode) === null || _b === void 0 ? void 0 : _b.call(parent);
break;
case 'direct':
window.open(this.shareUrl, '_self');
break;
default:
break;
}
this.$root.$emit('social-share-open', { name, url: parent.url });
},
},
render(h) {
const renderShareIcon = (network) => this.isSvgIcon
? h('span', {
style: { color: !this.isPlain ? network.color : '' },
attrs: {
class: 'social-share-icon-svg',
focusable: 'false',
},
domProps: {
innerHTML: this.network.icon,
},
})
: h('span', {
style: { backgroundImage: `url(${network.icon})` },
attrs: { class: 'social-share-icon-img' },
});
const renderShareButton = (network) => h('button', {
attrs: {
'data-link': network.type === 'popup' ? `#share-${network.name}` : this.shareUrl,
class: 'social-share-btn',
title: network.name,
type: 'button',
role: 'button',
},
on: { click: this.share },
}, [renderShareIcon(network)]);
return h('li', {
attrs: { class: 'social-share-network', role: 'option' },
}, [renderShareButton(this.network)]);
},
};
exports.default = SocialShareNetwork;