72 lines
3.1 KiB
JavaScript
72 lines
3.1 KiB
JavaScript
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)}"e=${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';
|
|
}
|
|
});
|
|
});
|