✨ Normalize sharing buttons for all devices/browsers

Author: Jonas Gossens

src/react-chayns-sharingbar/component/sharingActions.js

@@ -1,6 +1,10 @@
 function shareWithUrl(provider, link) {
     const openLink = provider.url.replace('{url}', link);
-    chayns.openUrlInBrowser(openLink);
+    if (openLink.startsWith('mailto')) {
+        window.open(openLink);
+    } else {
+        chayns.openUrlInBrowser(openLink);
+    }
 }
 
 function shareWithApp(provider, link) {
@@ -14,9 +18,16 @@ function shareWithApp(provider, link) {
 
 function copyToClipboard(provider, link) {
     const aux = document.createElement('input');
+    const range = document.createRange();
     aux.setAttribute('value', link);
+    aux.setAttribute('contenteditable', 'true');
     document.body.appendChild(aux);
     aux.select();
+    range.selectNodeContents(aux);
+    const s = window.getSelection();
+    s.removeAllRanges();
+    s.addRange(range);
+    aux.setSelectionRange(0, 999999);
     document.execCommand('copy');
     document.body.removeChild(aux);
 }

src/react-chayns-sharingbar/component/sharingProvider.js

@@ -1,43 +1,40 @@
 import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
 import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
 import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
-import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
-import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
-import { faSkype } from '@fortawesome/free-brands-svg-icons/faSkype';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons/faEnvelope';
-import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import { faCopy } from '@fortawesome/free-regular-svg-icons/faCopy';
 import { faShareAlt } from '@fortawesome/free-solid-svg-icons/faShareAlt';
 
 export const shareProvider = [
+    {
+        id: 2,
+        providerId: 1,
+        name: 'WhatsApp',
+        androidIdentifier: 'com.whatsapp',
+        icon: faWhatsapp,
+        action: 1,
+        url: 'https://api.whatsapp.com/send?text={url}',
+        available: true,
+    },
     {
         id: 0,
         providerId: -1,
         name: 'Zwischenablage',
         androidIdentifier: null,
-        icon: faLink,
+        icon: faCopy,
         action: 0,
         url: null,
-        available: false,
+        available: true,
     },
     {
         id: 1,
         providerId: 0,
         name: 'Mail',
         androidIdentifier: null,
         icon: faEnvelope,
-        action: 2,
-        url: null,
-        available: false,
-    },
-    {
-        id: 2,
-        providerId: 1,
-        name: 'WhatsApp',
-        androidIdentifier: 'com.whatsapp',
-        icon: faWhatsapp,
         action: 1,
-        url: null,
-        available: false,
+        url: 'mailto:?body={url}',
+        available: true,
     },
     {
         id: 3,
@@ -59,46 +56,6 @@ export const shareProvider = [
         url: 'http://twitter.com/intent/tweet?text=&url={url}&hashtags=chayns',
         available: true,
     },
-    {
-        id: 6,
-        providerId: -1,
-        name: 'Tumblr',
-        androidIdentifier: 'com.tumblr',
-        icon: faTumblr,
-        action: 1,
-        url: '//tumblr.com/widgets/share/tool?canonicalUrl={url}',
-        available: false,
-    },
-    {
-        id: 7,
-        providerId: -1,
-        name: 'Telegram',
-        androidIdentifier: 'org.telegram.messenger',
-        icon: faTelegram,
-        action: 1,
-        url: null,
-        available: false,
-    },
-    /*    {
-            'id': 8,
-            'providerId': -1,
-            'name': 'Snapchat',
-            'androidIdentifier': 'com.snapchat.android',
-            'icon': 'fa-snapchat-ghost',
-            'action': 2,
-            'url': null,
-            'available': false,
-        }, */
-    {
-        id: 9,
-        providerId: -1,
-        name: 'Skype',
-        androidIdentifier: 'com.skype.raider',
-        icon: faSkype,
-        action: 2,
-        url: null,
-        available: false,
-    },
     {
         id: 10,
         providerId: -1,