changes to blocks and styles

assets/js/highlight-to-share.js

@@ -0,0 +1,71 @@
+document.addEventListener("DOMContentLoaded", function () {
+  // Get reference to the popup element
+  const popup = document.getElementById('popup');
+  const facebookShareLink = document.getElementById('facebook-share');
+  const twitterShareLink = document.getElementById('twitter-share');
+  
+  // Function to check if selection intersects with any <p> tag
+  function isSelectionInParagraph(selection) {
+      const range = selection.getRangeAt(0);  // Get the selected range
+      const paragraphs = document.querySelectorAll('p');  // Get all <p> elements
+
+      for (let p of paragraphs) {
+          // Check if the selected range intersects with this <p> tag
+          const pRect = p.getBoundingClientRect();
+          const rangeRect = range.getBoundingClientRect();
+
+          // Check if the range and the <p> element's bounding boxes overlap
+          if (rangeRect.top < pRect.bottom && rangeRect.bottom > pRect.top && 
+              rangeRect.left < pRect.right && rangeRect.right > pRect.left) {
+              return true;  // Selection intersects with this <p> tag
+          }
+      }
+
+      return false;  // No intersection with any <p> tag
+  }
+
+  // Function to show the popup near the selected text
+  function showPopup(e) {
+      const selection = window.getSelection();
+      
+      // Check if any text is selected and if it is inside or intersects with a <p> tag
+      if (selection.toString().length > 0 && isSelectionInParagraph(selection)) {
+          // Get the bounding rectangle of the selected text
+          const range = selection.getRangeAt(0);
+          const rect = range.getBoundingClientRect();
+          
+          // Position the popup above the selection (adjust for spacing)
+          popup.style.left = `${rect.left + window.scrollX}px`;
+          popup.style.top = `${rect.top + window.scrollY - popup.offsetHeight - 5}px`;
+          
+          // Show the popup
+          popup.style.display = 'block';
+
+          // Set up share links with the selected text and page URL
+          const selectedText = selection.toString();
+          const pageUrl = window.location.href;
+
+          // Facebook share link
+          facebookShareLink.setAttribute('href', `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}&quote=${encodeURIComponent(selectedText)}`);
+          
+          // Twitter/X share link
+          twitterShareLink.setAttribute('href', `https://twitter.com/intent/tweet?text=${encodeURIComponent(selectedText)}&url=${encodeURIComponent(pageUrl)}`);
+      } else {
+          // Hide the popup if no text is selected or it's not inside or overlapping a <p> tag
+          popup.style.display = 'none';
+      }
+  }
+
+  // Listen for mouse-up event (when selection ends)
+  document.addEventListener('mouseup', showPopup);
+
+  // Optionally, listen for touchend event for mobile devices
+  document.addEventListener('touchend', showPopup);
+
+  // Hide the popup if user clicks anywhere else
+  document.addEventListener('click', function(event) {
+    if (!popup.contains(event.target) && !window.getSelection().toString()) {
+      popup.style.display = 'none';
+    }
+  });
+});