Copy link to clipboard & WebShare API support (#31)

Author: samuelbeaulieu

README.md

@@ -14,6 +14,10 @@ Simple, powerful, customizable and super lightweight (1 Kb Gzip) social buttons
 * Android
 * iOS
 
+Copy to clipboard is not supported on IE, see [browser compatibility for more information](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#browser_compatibility)
+
+WebShare API is only partially supported, see [browser compatibility for more information](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#browser_compatibility)
+
 ## Install
 
 ### Available in NPM
@@ -83,6 +87,8 @@ Hacker News | hn
 Xing      | xi
 EMail     | mail
 Print     | print
+Copy     | copy
+WebShare API     | shareSheet
 
 ## Customizing
 

example/index.html

@@ -45,6 +45,8 @@
         <a class="btn-xing" data-id="xi"><i class="fab fa-xing"></i> Xing</a>
         <a class="btn-mail" data-id="mail"><i class="fas fa-at"></i> EMail</a>
         <a class="btn-print" data-id="print"><i class="fas fa-print"></i> Print</a>
+        <a class="btn-copy" data-id="copy"><i class="fas fa-copy"></i> Copy</a>
+        <a class="btn-shareSheet" data-id="shareSheet"><i class="fas fa-ellipsis-h"></i> ShareSheet</a>
     </div>
 
     <script src="../src/share-buttons.js"></script>

src/share-buttons.js

@@ -44,7 +44,9 @@
             HN_CLASS_NAME = 'hn',
             XI_CLASS_NAME = 'xi',
             MAIL_CLASS_NAME = 'mail',
-            PRINT_CLASS_NAME = 'print';
+            PRINT_CLASS_NAME = 'print',
+            COPY_CLASS_NAME = 'copy',
+            SHARESHEET_CLASS_NAME = 'shareSheet';
 
         /**
          * Method for get string in the special format by arguments
@@ -75,6 +77,24 @@
             for (i = share.length; i--;) {
                 initForElement(share[i]);
             }
+
+            // Check if navigator.clipboard is supported. If not, hide all shareSheet buttons.
+            if(!navigator.clipboard) {
+                var buttons = document.querySelectorAll(`[data-id="${COPY_CLASS_NAME}"]`);
+                for (i = 0; i < buttons.length; i++) {
+                    buttons[i].style.display = 'none';
+                }
+                console.log('navigator.clipboard(): This feature is not supported on this browser or operating system.');
+            }
+
+            // Check if navigator.share is supported. If not, hide all shareSheet buttons.
+            if(!navigator.canShare) {
+                var buttons = document.querySelectorAll(`[data-id="${SHARESHEET_CLASS_NAME}"]`);
+                for (i = 0; i < buttons.length; i++) {
+                    buttons[i].style.display = 'none';
+                }
+                console.log('navigator.share(): This feature is not supported on this browser or operating system.');
+            }
         };
 
         /**
@@ -208,6 +228,14 @@
             return encodeURIComponent(text);
         };
 
+        /**
+         * Method for decoding URL format to text
+         * @param {string} text
+         */
+        var decode = function (text) {
+            return decodeURIComponent(text);
+        };
+
         /**
          * Method for handling chosen links
          * @param {string} id
@@ -361,6 +389,25 @@
                 window.print();
                 break;
 
+            case COPY_CLASS_NAME:
+                navigator.clipboard.writeText(decode(url));
+                break;
+
+            case SHARESHEET_CLASS_NAME:
+                text = decode(mergeForTitle([title, desc]));
+                var shareData = {
+                    title: text,
+                    text: text,
+                    url: decode(url),
+                };
+
+                navigator.share(shareData).then(() => {
+                    console.log('navigator.share(): Success');
+                }).catch((err) => {
+                    console.log('navigator.share(): Error', err);
+                });
+                break;
+
             default:
                 break;
             }