// addCSS('js-share-l214.css') //let shareWidgets = document.querySelectorAll(".js-share-l214") /** HTML ***********/ let htmlTemplateShareAPI = `

` let htmlTemplateFallBack = ` ` /** HTML:END ***********/ /** CSS ****************/ let widgetCSS = ` .share-l214 { display: inline-flex; position: relative; box-sizing: border-box; } .share-l214 a { display: inline-flex; width: 50px; height: 50px; margin: 4px 5px; } .share-l214 a.jsl-facebook {color: #3b5998 ;} .share-l214 a.jsl-twitter {color: #1da1f2;} .share-l214 a.jsl-email {color: #777;} .share-l214 a.jsl-gmail {color: #E22;} .share-l214 a.jsl-linkedin {color: #0077B5;} .share-l214 a.jsl-whatsapp {color: #1bd741;} .share-l214 a.jsl-copylink {color: #555;} .share-l214 a span {display: none;} .share-l214 a svg { width: 100%; height: auto; /* margin-right: 4px; */ background: white; border-radius: 100px; margin:2px; padding: 2px; box-sizing: content-box; box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.10), 1px 1px 7px rgba(0, 0, 0, 0.2); transition: all .2s ease-out; } .share-l214 a:hover svg { transform: scale(.95); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.12); } .share-l214 a:hover span { position: absolute; left:0; top:110%; width:100%; display:block; color: #444; text-align:center; white-space: nowrap; } .share-l214 .jsl-label { text-align:center; } @media all and (min-width: 940px) { .jsl-whatsapp {display: none !important;} } .share-l214 a.jsl-copylink:focus svg { animation: copyanim .8s; } @keyframes copyanim { 0% { background-color: orange; } 100% { background-color: white; } } /* SHARE API CSS */ .share-l214-shareapi button.jsl-shareapi { display:block; background:none; color:orange; text-decoration:none; border: none; outline: none; } .share-l214-shareapi button.jsl-shareapi svg { display:inline-block; width: 50px; height: 50px; background: #FFF; border-radius:50px; padding:10px; border:orange solid 3px; box-shadow: 1px 3px 7px #ddd, 1px 1px 3px #aaa; vertical-align: middle; } .share-l214-shareapi button.jsl-shareapi span { display:inline-block; color: #000; padding-left:5px; } .share-l214-shareapi button.jsl-shareapi:hover svg { animation: focusanim 8s; } @keyframes focusanim { 0% { background-color: white; color: orange; } 25% { background-color: orange; color: white; } 50% { background-color: white; color: orange; } 75% { background-color: orange; color: white; } 100% { background-color: white; color: orange; } } ` /** CSS:END ************/ function shareL214() { let isLinkedin = false; let isCopyButton = false; let shareWidgets = document.querySelectorAll(".js-share-l214") shareWidgets.forEach(function(widget) { const metaDescription = document.querySelector("meta[name='description']"); let url = widget.dataset.url || document.querySelector("link[rel='canonical']").getAttribute("href"); let title = widget.dataset.title || document.title; let message = widget.dataset.message || (metaDescription ? metaDescription.getAttribute('content') : url); let tweet = widget.dataset.tweet || url; // For now, Web Share API is disabled because of issues on Windows and Chrome OS const shareApiSupport = false || widget.dataset.forceapishare; //typeof navigator.share !== "undefined"; let widgetCode = shareApiSupport ? htmlTemplateShareAPI : htmlTemplateFallBack; isLinkedin = widget.dataset.linkedin ? (widget.dataset.linkedin === "1") : false; isCopyButton = (navigator.clipboard) ? true : false; widget.innerHTML = widgetCode .replace(/--url--/g, url) .replace(/--urlEncoded--/g, encodeURIComponent(url)) .replace(/--titleEncoded--/g, encodeURIComponent(title)) .replace(/--tweetEncoded--/g, encodeURIComponent(tweet)) .replace(/--messageEncoded--/g, encodeURIComponent(message)) if(shareApiSupport) { widget.addEventListener('click', function(event) { event.stopPropagation(); navigator.share({"title": title, "url": url, "text": message}); return false; }) } }) if(!isLinkedin) { widgetCSS += `.share-l214 a.jsl-linkedin {display:none;}`; } if(!isCopyButton) { widgetCSS += `.share-l214 a.jsl-copylink {display:none;}`; } jslAddCss(widgetCSS) } shareL214(); /* *********************** */ /* ** HELPERS ************ */ /* *********************** */ function jslAddCss(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); } async function jslCopyToClipboard(event, text) { /* To prevent url change */ event = event || window.event; event.preventDefault(); try { await navigator.clipboard.writeText(text); } catch (err) { console.error('Échec de la copie', err); } return false; }