diff --git a/index.html b/index.html index 2382fbb..c3df923 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,7 @@ +
@@ -64,6 +65,7 @@ +
@@ -89,6 +91,7 @@ +
@@ -110,6 +113,7 @@ Отправить Copy URL +
diff --git a/src/shareon.css b/src/shareon.css index 15e3499..6100d5c 100644 --- a/src/shareon.css +++ b/src/shareon.css @@ -175,6 +175,10 @@ background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.199 4.841H.11c.194 9.312 4.85 14.907 13.012 14.907h.462v-5.327c3 .299 5.268 2.492 6.178 5.327H24c-1.164-4.237-4.223-6.58-6.133-7.475 1.91-1.105 4.596-3.79 5.238-7.432h-3.85c-.836 2.955-3.313 5.641-5.67 5.895V4.84h-3.85v10.326C7.347 14.57 4.333 11.675 4.199 4.84Z'/%3E%3C/svg%3E"); } +.shareon > .web-share:before { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51l6.83 3.98m-.01-10.98l-6.82 3.98'/%3E%3C/g%3E%3C/svg%3E"); +} + .shareon > .whatsapp { background-color: #25d366; } diff --git a/src/shareon.js b/src/shareon.js index f86fd4f..47f9b31 100644 --- a/src/shareon.js +++ b/src/shareon.js @@ -66,6 +66,29 @@ const init = () => { }); } + // if it's "Web Share" + if (cls === "web-share") { + const data = { + title: + child.dataset.title || + container.dataset.title || + document.title, + text: child.dataset.text || container.dataset.text || "", + url: + child.dataset.url || + container.dataset.url || + window.location.href, + }; + + if (navigator.canShare && navigator.canShare(data)) { + child.addEventListener("click", () => { + navigator.share(data); + }); + } else { + child.style.display = "none"; + } + } + // if it's one of the networks if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) { const preset = {