Update app.R

app.R

@@ -116,89 +116,90 @@ ui <- fluidPage(
   tags$div(
     style = "text-align: left; margin: 0.5em 0 0.5em 0em;",
     HTML('
-  <button id="share-button"
-          style="
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            padding: 5px 10px;
-            font-size: 16px;
-            font-weight: normal;
-            color: #000;
-            background-color: #fff;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            cursor: pointer;
-            box-shadow: 0 1.5px 0 #000;
-          ">
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <circle cx="18" cy="5" r="3"></circle>
-      <circle cx="6" cy="12" r="3"></circle>
-      <circle cx="18" cy="19" r="3"></circle>
-      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
-      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
-    </svg>
-    <strong>Share</strong>
-  </button>
+        <button id="share-button" 
+                style="
+                  display: inline-flex;
+                  align-items: center;
+                  justify-content: center;
+                  gap: 8px; 
+                  padding: 5px 10px;
+                  font-size: 16px;
+                  font-weight: normal;
+                  color: #000;
+                  background-color: #fff;
+                  border: 1px solid #ddd;
+                  border-radius: 6px;
+                  cursor: pointer;
+                  box-shadow: 0 1.5px 0 #000;
+                ">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" 
+               stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="18" cy="5" r="3"></circle>
+            <circle cx="6" cy="12" r="3"></circle>
+            <circle cx="18" cy="19" r="3"></circle>
+            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+          </svg>
+          <strong>Share</strong>
+        </button>
       '),
     tags$script(
       HTML("
-          (function () {
-  const shareBtn = document.getElementById('share-button');
-
-  function showCopyNotification(targetBtn) {
-    const notification = document.createElement('div');
-    notification.innerText = 'Copied to clipboard';
-    notification.style.position = 'absolute';
-    notification.style.pointerEvents = 'none';
-    notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
-    notification.style.color = '#fff';
-    notification.style.padding = '6px 10px';
-    notification.style.borderRadius = '4px';
-    notification.style.fontSize = '14px';
-    notification.style.whiteSpace = 'nowrap';
-    notification.style.zIndex = '10000';
-
-    const rect = targetBtn.getBoundingClientRect();
-    const top = rect.top + window.scrollY - 40;         // 40 px above the button
-    const left = rect.left + window.scrollX + rect.width / 2;
-
-    notification.style.top = top + 'px';
-    notification.style.left = left + 'px';
-    notification.style.transform = 'translateX(-50%)';
-
-    document.body.appendChild(notification);
-    setTimeout(() => notification.remove(), 2000);
-  }
-
-  shareBtn.addEventListener('click', function () {
-    const currentURL = window.location.href;
-    const pageTitle = document.title || 'Check this out!';
-
-    if (navigator.share) {
-      navigator.share({ title: pageTitle, url: currentURL })
-        .catch(error => console.log('Sharing failed', error));
-    } else if (navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(currentURL)
-        .then(() => showCopyNotification(shareBtn))
-        .catch(err => console.error('Could not copy text: ', err));
-    } else {
-      const textArea = document.createElement('textarea');
-      textArea.value = currentURL;
-      document.body.appendChild(textArea);
-      textArea.select();
-      try {
-        document.execCommand('copy');
-        showCopyNotification(shareBtn);
-      } catch (err) {
-        alert('Please copy this link:\n' + currentURL);
-      }
-      document.body.removeChild(textArea);
-    }
-  });
-})();
+          (function() {
+            const shareBtn = document.getElementById('share-button');
+            // Reusable helper function to show a small “Copied!” message
+            function showCopyNotification() {
+              const notification = document.createElement('div');
+              notification.innerText = 'Copied to clipboard';
+              notification.style.position = 'fixed';
+              notification.style.bottom = '20px';
+              notification.style.right = '20px';
+              notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+              notification.style.color = '#fff';
+              notification.style.padding = '8px 12px';
+              notification.style.borderRadius = '4px';
+              notification.style.zIndex = '9999';
+              document.body.appendChild(notification);
+              setTimeout(() => { notification.remove(); }, 2000);
+            }
+            shareBtn.addEventListener('click', function() {
+              const currentURL = window.location.href;
+              const pageTitle  = document.title || 'Check this out!';
+              // If browser supports Web Share API
+              if (navigator.share) {
+                navigator.share({
+                  title: pageTitle,
+                  text: '',
+                  url: currentURL
+                })
+                .catch((error) => {
+                  console.log('Sharing failed', error);
+                });
+              } else {
+                // Fallback: Copy URL
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                  navigator.clipboard.writeText(currentURL).then(() => {
+                    showCopyNotification();
+                  }, (err) => {
+                    console.error('Could not copy text: ', err);
+                  });
+                } else {
+                  // Double fallback for older browsers
+                  const textArea = document.createElement('textarea');
+                  textArea.value = currentURL;
+                  document.body.appendChild(textArea);
+                  textArea.select();
+                  try {
+                    document.execCommand('copy');
+                    showCopyNotification();
+                  } catch (err) {
+                    alert('Please copy this link:\\n' + currentURL);
+                  }
+                  document.body.removeChild(textArea);
+                }
+              }
+            });
+          })();
         ")
     )
   ), 
@@ -375,4 +376,3 @@ server <- function(input, output, session) {
 # Run the app
 shinyApp(ui, server)
 
-