`
let shHtmlTemplateFallBack_svgdefs = `
`
/** HTML:END ***********/
/** CSS ****************/
let shWidgetCSS = `
:root {
--sh-text-color: #000000;
}
[data-theme="dark"] {
--sh-text-color: #FFFFFF;
}
.share-l214 {
position: relative;
}
.share-l214 .jsl-share-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.share-l214 .jsl-share-button {
display: flex;
align-items: center;
flex-direction: column;
color: var(--sh-text-color);
text-decoration: underline;
margin: 0 15px 12px 15px;
}
@media all and (min-width: 768px) {
.share-l214 .jsl-share-button {
flex-direction: row;
}
}
.share-l214 .jsl-share-button .jsl-share-ico {
width: 20px;
height: 20px;
box-sizing: content-box;
}
.share-l214 .jsl-share-button:hover .jsl-share-ico {
transform: scale(.95);
}
.share-l214 .jsl-share-button.jsl-facebook .jsl-share-ico {color: #3b5998 ;}
.share-l214 .jsl-share-button.jsl-twitter .jsl-share-ico {color: #1da1f2;}
.share-l214 .jsl-share-button.jsl-pinterest .jsl-share-ico {color: #E71D27;}
.share-l214 .jsl-share-button.jsl-email .jsl-share-ico {color: #F89B12;}
.share-l214 .jsl-share-button.jsl-gmail .jsl-share-ico {color: #D44F3E;}
.share-l214 .jsl-share-button.jsl-linkedin .jsl-share-ico {color: #0077B5;}
.share-l214 .jsl-share-button.jsl-whatsapp .jsl-share-ico {color: #25D366;}
.share-l214 .jsl-share-button.jsl-copylink .jsl-share-ico {color: var(--sh-text-color);}
.share-l214 .jsl-share-button.jsl-share .jsl-share-ico {color: var(--sh-text-color);}
.share-l214 .jsl-share-button .jsl-share-label {
font-size: 15px;
color: var(--sh-text-color);
font-weight: 700;
text-transform: uppercase;
padding-top: 4px;
margin: 0;
}
@media all and (min-width: 768px) {
.share-l214 .jsl-share-button .jsl-share-label {
padding: 0;
margin-left: 14px;
}
}
@media all and (min-width: 768px) {
.jsl-whatsapp {display: none !important;}
}
.share-l214 .jsl-share-button.jsl-copylink {
position: relative;
}
.share-l214 .jsl-share-button.jsl-copylink .done {
position: absolute;
left: 0; top: 0; right: 0;
text-align: center;
text-transform: none;
font-size: 12px;
color: var(--sh-text-color);
opacity: 0;
transform: translateY(-1em);
transition: all .500s;
}
.share-l214 .jsl-share-button.jsl-copylink.copied .done {
opacity: 1;
transform: translateY(-2em);
}
/* SHARE API CSS */
.share-l214 .jsl-share-button.jsl-share {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background:none;
color: var(--sh-text-color);
text-decoration: none;
border: none;
outline: none;
}
.share-l214 .jsl-share-button.jsl-share .jsl-share-ico {
width: 27px;
height: 30px;
}
.share-l214 .jsl-share-button.jsl-share .jsl-share-label {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
color: var(--sh-text-color);
margin-right: 20px;
}
.share-l214 .jsl-share-button.jsl-share {
flex-direction: row;
margin: 0;
}
`
/** CSS:END ************/
function shBuildWidget(widget, noshareapi) {
if (!widget) {
return false;
}
// Url
const canonical = shGetCanonicalUrl();
const url = widget.dataset.url || (canonical ? canonical : window.location.href);
// Titles
const title = widget.dataset.title || document.title;
const titleEmail = widget.dataset.mailTitle || title;
// Messages
const metaDescription = shGetAttribute(document.querySelector("meta[name='description']"), 'content');
const message = widget.dataset.message || (metaDescription ? metaDescription : '');
const messagePlusUrl = message + ' ' + url;
const messageEmail = widget.dataset.mailMessage || messagePlusUrl;
const messageWhatsApp = widget.dataset.whatsappMessage || messagePlusUrl;
const tweet = widget.dataset.tweet || message;
const tweetUrl = tweet.indexOf(url) !== -1 ? '' : url;
// Images
const metaImage = shGetAttribute(document.querySelector("meta[property='og:image']"), 'content');
const image = widget.dataset.image || (metaImage ? metaImage : '');
// Web Share API or Fallback ?
let shareapi = widget.dataset.shareApi ? widget.dataset.shareApi === "1" : false;
shareapi = shareapi && typeof navigator.share !== 'undefined';
// Restrict to specifics verified user agents ?
const shareapi_agents = widget.dataset.shareApiAgents || '';
const shareapi_is_allowed = shareapi_agents ? new RegExp(shareapi_agents, 'i').test(navigator.userAgent) : true;
shareapi = shareapi && shareapi_is_allowed;
// Temporary : if Web Share API is allowed by verified agents, run an A/B test
const test_Ab = shareapi && (widget.dataset.testAb ? widget.dataset.testAb === "1" : false);
if (test_Ab) {
shareapi = Math.random() < 0.5;
// Track result on GA for check
shGASend('Display', shareapi ? 'Web Share API': 'Share Fallback');
}
// Block or Force Web Share API ?
shareapi = shareapi && !noshareapi;
shareapi = shareapi || (widget.dataset.forceapishare ? widget.dataset.forceapishare === "1" : false);
if (shareapi) {
widget.innerHTML = shHtmlTemplateShareAPI;
// Web share API handlers
widget.addEventListener('click', function(event) {
try {
if (test_Ab) {
shGASend('Share', 'Web Share API');
}
navigator.share({"title": title, "url": url, "text": message})
} catch (err) {
shBuildWidget(widget, true);
shSentryCapture(err.message);
console.error(err.message);
}
})
if (typeof(trace) !== 'undefined') {
trace(widget.dataset, widget, 'Dataset');
trace({
navigatorShare: navigator.share,
navigatorUserAgent: navigator.userAgent,
shareapi_is_allowed,
shareapi,
test_Ab
}, widget, 'Config');
} //End trace
} else {
// Url paramters : all these url parameters have not empty default values
widget.innerHTML = shHtmlTemplateFallBack
.replace(/--url--/g, url)
.replace(/--urlEncoded--/g, encodeURIComponent(url))
.replace(/--titleEncoded--/g, encodeURIComponent(title))
.replace(/--titleMailEncoded--/g, encodeURIComponent(titleEmail))
.replace(/--messageEncoded--/g, encodeURIComponent(message))
.replace(/--messagePlusUrlEncoded--/g, encodeURIComponent(messagePlusUrl))
.replace(/--messageMailEncoded--/g, encodeURIComponent(messageEmail))
.replace(/--messageWhatsAppEncoded--/g, encodeURIComponent(messageWhatsApp))
.replace(/--tweetEncoded--/g, encodeURIComponent(tweet))
.replace(/--imageEncoded--/g, encodeURIComponent(image))
.replace(/--openMode--/g, `onclick="window.open(this.href, '_blank','left=20,top=20,width=600,height=700,toolbar=0,resizable=1'); return false;"`);
// Optional url parameters (if not empty)
widget.innerHTML = widget.innerHTML.replace(/--tweetUrlEncodedOptParam--/g, tweetUrl ? '&url=' + encodeURIComponent(tweetUrl) : '');
// Options
isPinterest = widget.dataset.pinterest ? (widget.dataset.pinterest === "1") : false;
isLinkedin = widget.dataset.linkedin ? (widget.dataset.linkedin === "1") : false;
theme = widget.dataset.theme || 'light';
widget.innerHTML = widget.innerHTML.replace(/--theme--/g, theme);
widget.querySelector('.jsl-pinterest').style.display = isPinterest ? '' : 'none';
widget.querySelector('.jsl-linkedin').style.display = isLinkedin ? '' : 'none';
widget.querySelector('.jsl-copylink').style.display = navigator.clipboard ? '': 'none';
widget.addEventListener('click', function(event) {
const event_target = event.target.closest('.jsl-share-button');
if (event_target) {
const button_rs = event_target.getAttribute('data-rs');
if (test_Ab && button_rs !== 'copy') {
shGASend('Share', button_rs === 'copy' ? 'Copy' : 'Fallback');
}
}
})
// Trace function is defined only in demo.html
if (typeof(trace) !== 'undefined') {
trace({
canonical: shGetCanonicalUrl(),
title: document.title,
description: metaDescription,
image: metaImage
}, widget, 'Metas');
trace(widget.dataset, widget, 'Dataset');
trace({
navigatorClipboard: navigator.clipboard,
navigatorShare: navigator.share,
navigatorUserAgent: navigator.userAgent,
shareapi_is_allowed,
shareapi,
test_Ab,
isPinterest,
isLinkedin,
}, widget, 'Config');
trace_urls(widget, 'Urls');
} //End trace
}
}
function shareL214() {
if (!shSupportsQuerySelectors) {
throw {
id: SH_ERROR_NO_QUERYSELECTORS,
message: 'querySelector/querySelectorAll methods are not supported on this browser',
}
}
let shareWidgets = document.querySelectorAll(".js-share-l214")
if (shareWidgets) {
for (index = 0; index < shareWidgets.length; ++index) {
const widget = shareWidgets[index];
shBuildWidget(widget, false);
}
// Add SVGs defs
document.body.insertAdjacentHTML('beforeend', shHtmlTemplateFallBack_svgdefs);
// Add styles
shJslAddCss(shWidgetCSS);
}
}
try {
document.addEventListener("DOMContentLoaded", function(event) {
shareL214();
});
} catch (err) {
shSentryCapture(err.message);
console.error(err.message);
}
/* *********************** */
/* ** HELPERS ************ */
/* *********************** */
// Add inline css code into
function shJslAddCss(cssCode)
{
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
// Copy text in clipboard
async function shJslCopyToClipboard(event, text)
{
/* To prevent url change */
event = event || window.event;
event.preventDefault();
try {
await navigator.clipboard.writeText(text);
// 'Copied!' animation trigger
copyLink = document.querySelector('.jsl-copylink');
copyLink.classList.add('copied');
var temp = setInterval( function(){
copyLink.classList.remove('copied');
clearInterval(temp);
}, 600 );
} catch (err) {
shSentryCapture(err.message);
console.error(err.message);
}
return false;
}
// Get attribute 'att' of an elements (false if element is invalid or attribute not found)
function shGetAttribute(el, att) {
if (!el) {
return false;
}
if (!el.hasAttribute(att)) {
return false;
}
return el.getAttribute(att);
}
// Return canonical url of the docuement (false if not found or invalid)
function shGetCanonicalUrl() {
const canonical_link = document.querySelector("link[rel='canonical']");
if (!canonical_link) {
return false;
}
return shGetAttribute(canonical_link, "href");
}
// Because querySelector/querySelectorAll are not supported on old IE browsers (6/7/8)
function shSupportsQuerySelectors() {
return ((document['querySelector'] && document['querySelectorAll']) != null);
}
function shSentryCapture(message) {
if (typeof Sentry !== "undefined") {
Sentry.captureException(message);
}
}
function shGASend(action, label) {
if (typeof ga !== "undefined") {
ga('send', {
hitType: 'event',
eventCategory: 'Share bar',
eventAction: action,
eventLabel: label
});
}
}