vuepress-plugin-social-share
Version:
Social sharing plugin for VuePress
269 lines (268 loc) • 11 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("../utils");
const SocialShareNetwork_1 = __importDefault(require("./SocialShareNetwork"));
const SocialShare = {
name: 'SocialShare',
props: {
networks: {
type: Array,
default: () => ['twitter', 'facebook', 'reddit'],
},
tags: {
type: Array,
default: () => [],
},
twitterUser: {
type: String,
},
fallbackImage: {
type: String,
},
autoQuote: {
type: Boolean,
default: true,
},
isPlain: {
type: Boolean,
default: false,
},
qrcodeOptions: {
type: Object,
default: () => ({}),
},
networksData: {
type: Object,
default: () => ({}),
},
},
computed: {
visible() {
return !!this.networks.length && !this.$frontmatter.noSocialShare;
},
url() {
return (this.$frontmatter.$shareUrl ||
this.$frontmatter.shareUrl ||
(utils_1.inBrowser ? location.href : ''));
},
title() {
return (this.$frontmatter.$shareTitle ||
this.$frontmatter.shareTitle ||
this.$frontmatter.title ||
(utils_1.inBrowser ? document.title : this.$title));
},
description() {
return (this.$frontmatter.$shareDescription ||
this.$frontmatter.shareDescription ||
this.$frontmatter.description ||
(0, utils_1.getMetaContentByName)('description') ||
this.$description);
},
media() {
const mediaUrl = this.$frontmatter.$shareImage ||
this.$frontmatter.shareImage ||
this.$frontmatter.image ||
this.fallbackImage;
if (!mediaUrl)
return '';
if ((0, utils_1.isExternalUrl)(mediaUrl))
return mediaUrl;
const realUrl = utils_1.inBrowser ? `${location.origin}${this.$withBase(mediaUrl)}` : '';
return realUrl;
},
quote() {
return (this.$frontmatter.$shareQuote ||
this.$frontmatter.shareQuote ||
(this.autoQuote ? this.description : ``));
},
hashtags() {
const shareTags = this.$frontmatter.$shareTags ||
this.$frontmatter.shareTags ||
this.$frontmatter.tags ||
this.$frontmatter.tag ||
this.tags ||
(0, utils_1.getMetaContentByName)('keywords');
if (Array.isArray(shareTags)) {
return shareTags.join(',');
}
if (typeof shareTags === 'string') {
return shareTags.replace(/\s/g, '');
}
return '';
},
qrcodeRenderOptions() {
return Object.assign({ errorCorrectionLevel: 'H', width: 250, scale: 1, margin: 1.5 }, this.qrcodeOptions);
},
},
data() {
// Remove duplicated networks
const networks = [...new Set(this.networks)];
const userNetworks = Object.keys(this.networksData)
.map(name => (Object.assign({ name }, this.networksData[name])))
.filter(network => networks.includes(network.name))
.sort((prev, next) => networks.indexOf(prev.name) - networks.indexOf(next.name));
return {
userNetworks,
popup: {
status: false,
resizable: false,
toolbar: false,
menubar: false,
scrollbars: false,
location: false,
directories: false,
width: 626,
height: 436,
top: 0,
left: 0,
interval: null,
},
};
},
methods: {
/**
* Opens sharer popup
*
* @param shareUrl - target sharer url
* @param options - sharer Options `name` and `url`
*/
openSharer(shareUrl, options) {
var _a;
// If a popup window already exist it will be replaced, trigger a close event
let popupWindow = null;
const shareParams = [
`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 = window.open(shareUrl, 'sharer', shareParams.join(','));
(_a = popupWindow === null || popupWindow === void 0 ? void 0 : popupWindow.focus) === null || _a === void 0 ? void 0 : _a.call(popupWindow);
// Create an interval to detect popup closing event
this.popup.interval = window.setInterval(() => {
if (popupWindow && popupWindow.closed) {
clearInterval(this.popup.interval);
popupWindow = null;
this.$root.$emit('social-share-close', options);
}
}, 500);
},
/**
* Show QRCode modal
*/
showQRCode() {
return __awaiter(this, void 0, void 0, function* () {
const body = document.body;
const socialShareEl = document.querySelector('#__VUEPRESS_SOCIAL_SHARE__');
const socialShareOverlay = document.createElement('div');
socialShareOverlay.id = '__VUEPRESS_SOCIAL_SHARE__';
socialShareOverlay.classList.add('social-share-overlay');
if (socialShareEl && socialShareEl.parentNode) {
socialShareEl.remove();
}
try {
const QRCode = yield Promise.resolve().then(() => __importStar(require('qrcode')));
const url = yield QRCode.toDataURL(this.url, this.qrcodeRenderOptions);
socialShareOverlay.innerHTML = `<img class="social-share-qrcode" src="${url}" />`;
body.append(socialShareOverlay);
socialShareOverlay.classList.add('show');
socialShareOverlay.addEventListener('click', evt => {
socialShareOverlay.classList.remove('show');
socialShareOverlay.remove();
evt.stopPropagation();
});
}
catch (err) {
console.log(err);
}
});
},
},
render(h) {
if (!this.visible)
return null;
const renderSocialNetworkList = (networks) => h('ul', { attrs: { class: 'social-share-list', role: 'listbox' } }, networks.map(network => h(SocialShareNetwork_1.default, { props: { network, isPlain: this.isPlain } })));
return h('div', { attrs: { class: 'social-share' } }, [
renderSocialNetworkList(this.userNetworks),
this.$slots.default,
]);
},
mounted() {
if (!utils_1.inBrowser)
return false;
/**
* Center the popup on dual screens
* http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen/32261263
*/
const rootEl = document.documentElement;
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;
const width = window.innerWidth
? window.innerWidth
: rootEl.clientWidth
? rootEl.clientWidth
: screen.width;
const height = window.innerHeight
? window.innerHeight
: rootEl.clientHeight
? rootEl.clientHeight
: screen.height;
this.popup.left = width / 2 - this.popup.width / 2 + dualScreenLeft;
this.popup.top = height / 2 - this.popup.height / 2 + dualScreenTop;
},
};
exports.default = SocialShare;