diff --git a/index.html b/index.html index 5f0d3cf..e621210 100644 --- a/index.html +++ b/index.html @@ -1950,6 +1950,204 @@ } } } + +// Generate a shareable link for a proposal +function getShareableLink(proposalId) { + const baseUrl = window.location.origin + window.location.pathname; + return `${baseUrl}?proposal=${proposalId}`; +} + +// Copy link to clipboard and show feedback +function copyToClipboard(text) { + navigator.clipboard.writeText(text) + .then(() => { + showToastMessage('✓ Link copied to clipboard!', '#11cc77'); + + // Find all share buttons and reset them + const shareButtons = document.querySelectorAll('.share-button'); + shareButtons.forEach(button => { + button.classList.remove('copied'); + }); + + // Find the specific button that was clicked (if any) + const clickedButton = document.querySelector(`.share-button[data-proposal-id="${text.split('proposal=')[1]}"]`); + if (clickedButton) { + clickedButton.classList.add('copied'); + setTimeout(() => { + clickedButton.classList.remove('copied'); + }, 2000); + } + }) + .catch(err => { + console.error('Failed to copy: ', err); + showToastMessage('⚠️ Failed to copy link', '#ff0099'); + }); +} + +// Create a modal to display when a proposal is opened via direct link +function createProposalViewModal(proposal) { + // Create modal elements + const modalOverlay = document.createElement('div'); + modalOverlay.className = 'modal-overlay'; + + const modalContainer = document.createElement('div'); + modalContainer.className = 'modal-container proposal-view'; + + // Modal header + const modalHeader = document.createElement('div'); + modalHeader.className = 'modal-header'; + + const modalTitle = document.createElement('h3'); + modalTitle.textContent = 'Petition Details'; + + const closeButton = document.createElement('button'); + closeButton.className = 'modal-close'; + closeButton.textContent = '✕'; + closeButton.setAttribute('aria-label', 'Close modal'); + + modalHeader.appendChild(modalTitle); + modalHeader.appendChild(closeButton); + + // Modal body + const modalBody = document.createElement('div'); + modalBody.className = 'modal-body'; + + // Add petition info + const netVotes = proposal.upvotes - proposal.downvotes; + const voteClass = netVotes > 0 ? 'positive' : netVotes < 0 ? 'negative' : ''; + + const badgeHtml = proposal.trending ? + `
🔥 Trending
` : + (netVotes > 5 ? `
💯 Popular
` : ''); + + modalBody.innerHTML = ` + ${badgeHtml} +
${proposal.author_name}
+
${proposal.text}
+ + ${proposal.meme_url ? `
+ Meme for petition +
` : ''} + + ${proposal.petition_signatures > 0 ? `
+ ✓ + ${proposal.petition_signatures || proposal.upvotes} + verified signatures +
` : ''} + +
+
+ + + ${netVotes > 0 ? '+' : ''}${netVotes} +
+
${formatDate(proposal.timestamp)}
+
+ +
+

Share this petition:

+
+ + +
+ +
+ + + +
+
+ `; + + modalContainer.appendChild(modalHeader); + modalContainer.appendChild(modalBody); + + modalOverlay.appendChild(modalContainer); + document.body.appendChild(modalOverlay); + + // Add event listeners + closeButton.addEventListener('click', () => { + document.body.removeChild(modalOverlay); + + // Update URL to remove the proposal parameter without page reload + const newUrl = window.location.pathname; + window.history.pushState({}, '', newUrl); + }); + + const copyLinkButton = document.getElementById('modal-copy-link'); + if (copyLinkButton) { + copyLinkButton.addEventListener('click', () => { + const linkField = document.querySelector('.share-link-field'); + linkField.select(); + copyToClipboard(getShareableLink(proposal.id)); + + // Add flash animation + copyLinkButton.classList.add('flash-animation'); + setTimeout(() => { + copyLinkButton.classList.remove('flash-animation'); + }, 500); + }); + } + + // Add event listeners for vote buttons + const upvoteButton = document.getElementById('modal-upvote'); + const downvoteButton = document.getElementById('modal-downvote'); + + if (upvoteButton) { + upvoteButton.addEventListener('click', () => { + handleVote(proposal.id, 'upvote'); + }); + } + + if (downvoteButton) { + downvoteButton.addEventListener('click', () => { + handleVote(proposal.id, 'downvote'); + }); + } + + // Add event listeners for social share buttons + const twitterButton = document.getElementById('share-twitter'); + const facebookButton = document.getElementById('share-facebook'); + const whatsappButton = document.getElementById('share-whatsapp'); + + if (twitterButton) { + twitterButton.addEventListener('click', () => { + const text = `Check out this RADICAL petition: "${proposal.text.substring(0, 100)}${proposal.text.length > 100 ? '...' : ''}"`; + const url = getShareableLink(proposal.id); + window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`, '_blank'); + }); + } + + if (facebookButton) { + facebookButton.addEventListener('click', () => { + const url = getShareableLink(proposal.id); + window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`, '_blank'); + }); + } + + if (whatsappButton) { + whatsappButton.addEventListener('click', () => { + const text = `Check out this RADICAL petition: "${proposal.text.substring(0, 100)}${proposal.text.length > 100 ? '...' : ''}"`; + const url = getShareableLink(proposal.id); + window.open(`https://wa.me/?text=${encodeURIComponent(text + ' ' + url)}`, '_blank'); + }); + } +} \ No newline at end of file