webshare api

This commit is contained in:
Dimitrios Douros 2023-07-12 23:32:28 +03:00
parent aeeca82c7a
commit 63581855a8
3 changed files with 38 additions and 1 deletions

View File

@ -43,6 +43,7 @@
<a class="vkontakte"></a>
<a class="whatsapp"></a>
<a class="ms_teams"></a>
<a class="web-share"></a>
<a class="copy-url"></a>
</div>
</section>
@ -63,6 +64,7 @@
<button class="vkontakte"></button>
<button class="whatsapp"></button>
<button class="ms_teams"></button>
<button class="web-share"></button>
<button class="copy-url"></button>
</div>
</section>
@ -88,6 +90,7 @@
<a class="vkontakte"></a>
<a class="whatsapp"></a>
<a class="ms_teams"></a>
<a class="web-share"></a>
<a class="copy-url"></a>
</div>
</section>
@ -108,6 +111,7 @@
<a class="viber"></a>
<a class="vkontakte">Отправить</a>
<a class="whatsapp"></a>
<a class="web-share">WebShare API</a>
<a class="copy-url">Copy URL</a>
</div>
</section>

View File

@ -81,6 +81,10 @@
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.shareon > .web-share:before {
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%22M19.199%2024C19.199%2013.467%2010.533%204.8%200%204.8V0c13.165%200%2024%2010.835%2024%2024h-4.801zM3.291%2017.415c1.814%200%203.293%201.479%203.293%203.295%200%201.813-1.485%203.29-3.301%203.29C1.47%2024%200%2022.526%200%2020.71s1.475-3.294%203.291-3.295zM15.909%2024h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727%200%2015.909%207.184%2015.909%2015.91z%22%2F%3E%3C%2Fsvg%3E");
}
.shareon > .facebook {
background-color: #1877f2;
}
@ -176,7 +180,7 @@
}
.shareon > .ms_teams {
background-color: #545cc8;
background-color: #6264A7;
}
.shareon > .ms_teams:before {
background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D%22M20.625%208.127q-.55%200-1.025-.205-.475-.205-.832-.563-.358-.357-.563-.832Q18%206.053%2018%205.502q0-.54.205-1.02t.563-.837q.357-.358.832-.563.474-.205%201.025-.205.54%200%201.02.205t.837.563q.358.357.563.837.205.48.205%201.02%200%20.55-.205%201.025-.205.475-.563.832-.357.358-.837.563-.48.205-1.02.205zm0-3.75q-.469%200-.797.328-.328.328-.328.797%200%20.469.328.797.328.328.797.328.469%200%20.797-.328.328-.328.328-.797%200-.469-.328-.797-.328-.328-.797-.328zM24%2010.002v5.578q0%20.774-.293%201.46-.293.685-.803%201.194-.51.51-1.195.803-.686.293-1.459.293-.445%200-.908-.105-.463-.106-.85-.329-.293.95-.855%201.729-.563.78-1.319%201.336-.756.557-1.67.861-.914.305-1.898.305-1.148%200-2.162-.398-1.014-.399-1.805-1.102-.79-.703-1.312-1.664t-.674-2.086h-5.8q-.411%200-.704-.293T0%2016.881V6.873q0-.41.293-.703t.703-.293h8.59q-.34-.715-.34-1.5%200-.727.275-1.365.276-.639.75-1.114.475-.474%201.114-.75.638-.275%201.365-.275t1.365.275q.639.276%201.114.75.474.475.75%201.114.275.638.275%201.365t-.275%201.365q-.276.639-.75%201.113-.475.475-1.114.75-.638.276-1.365.276-.188%200-.375-.024-.188-.023-.375-.058v1.078h10.875q.469%200%20.797.328.328.328.328.797zM12.75%202.373q-.41%200-.78.158-.368.158-.638.434-.27.275-.428.639-.158.363-.158.773%200%20.41.158.78.159.368.428.638.27.27.639.428.369.158.779.158.41%200%20.773-.158.364-.159.64-.428.274-.27.433-.639.158-.369.158-.779%200-.41-.158-.773-.159-.364-.434-.64-.275-.275-.639-.433-.363-.158-.773-.158zM6.937%209.814h2.25V7.94H2.814v1.875h2.25v6h1.875zm10.313%207.313v-6.75H12v6.504q0%20.41-.293.703t-.703.293H8.309q.152.809.556%201.5.405.691.985%201.19.58.497%201.318.779.738.281%201.582.281.926%200%201.746-.352.82-.351%201.436-.966.615-.616.966-1.43.352-.815.352-1.752zm5.25-1.547v-5.203h-3.75v6.855q.305.305.691.452.387.146.809.146.469%200%20.879-.176.41-.175.715-.48.304-.305.48-.715t.176-.879Z%22%2F%3E%3C%2Fsvg%3E");

View File

@ -66,6 +66,35 @@ const init = () => {
});
}
// if it's "Web Share"
if (cls === "web-share") {
child.addEventListener("click", () => {
const url =
child.dataset.url ||
container.dataset.url ||
window.location.href;
const title =
child.dataset.title ||
container.dataset.title ||
'';
const text =
child.dataset.text ||
container.dataset.text ||
'';
console.log(url);
if (navigator.share) {
navigator.share({
title: title,
text: url
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
} else {
console.log('Web Share API not available.')
}
});
}
// if it's one of the networks
if (Object.prototype.hasOwnProperty.call(urlBuilderMap, cls)) {
const preset = {