Add Web Share API button

Co-authored-by: Dimitrios Douros <dourosdimitris@outlook.com>
See: https://github.com/kytta/shareon/pull/67

index.html

@@ -44,6 +44,7 @@
           <a class="vkontakte"></a>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
+          <a class="web-share"></a>
         </div>
       </section>
       <section>
@@ -64,6 +65,7 @@
           <button class="vkontakte"></button>
           <button class="whatsapp"></button>
           <button class="copy-url"></button>
+          <button class="web-share"></button>
         </div>
       </section>
       <section>
@@ -89,27 +91,30 @@
           <a class="vkontakte"></a>
           <a class="whatsapp"></a>
           <a class="copy-url"></a>
+          <a class="web-share"></a>
         </div>
       </section>
       <section>
         <h2>Specimen</h2>
         <div class="shareon specimen">
-          <a class="facebook">Share</a>
+          <a class="facebook"></a>
           <a class="linkedin"></a>
           <a class="mastodon">Toot</a>
           <a class="messenger" data-fb-app-id="3619024578167617"></a>
           <a class="odnoklassniki"></a>
           <a class="pinterest">Pin</a>
-          <a class="pocket">Save</a>
-          <a class="reddit"></a>
           <br />
+          <a class="pocket"></a>
+          <a class="reddit"></a>
           <a class="teams"></a>
           <a class="telegram"></a>
           <a class="twitter">Tweet</a>
           <a class="viber"></a>
-          <a class="vkontakte">Отправить</a>
+          <br />
+          <a class="vkontakte">Поделиться</a>
           <a class="whatsapp"></a>
-          <a class="copy-url">Copy URL</a>
+          <a class="copy-url"></a>
+          <a class="web-share">Share</a>
         </div>
       </section>
     </main>

package.json

@@ -108,7 +108,7 @@
       "path": "./dist/shareon.min.css"
     },
     {
-      "limit": "1 KB",
+      "limit": "1069 B",
       "path": "./dist/shareon.es.js"
     }
   ],

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;
 }

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 = {