Update app.R

app.R

@@ -117,90 +117,89 @@ 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');
-            // 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);
-                }
-              }
-            });
-          })();
+          (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);
+    }
+  });
+})();
         ")
     )
   ), 
@@ -377,3 +376,4 @@ server <- function(input, output, session) {
 # Run the app
 shinyApp(ui, server)
 
+