shareable links
This commit is contained in:
Omar Najjar
parent
da95b9e3be
commit
c9690b539e
1 changed files with 198 additions and 0 deletions
198
index.html
198
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 ?
|
||||||
|
`<div class="power-badge trending-badge" style="position: static; display: inline-block; margin-bottom: 15px;">🔥 Trending</div>` :
|
||||||
|
(netVotes > 5 ? `<div class="power-badge" style="position: static; display: inline-block; margin-bottom: 15px;">💯 Popular</div>` : '');
|
||||||
|
|
||||||
|
modalBody.innerHTML = `
|
||||||
|
${badgeHtml}
|
||||||
|
<div class="proposal-author" style="font-size: 1.1rem;">${proposal.author_name}</div>
|
||||||
|
<div class="proposal-text" style="font-size: 1.3rem; margin: 20px 0;">${proposal.text}</div>
|
||||||
|
|
||||||
|
${proposal.meme_url ? `<div class="proposal-meme">
|
||||||
|
<img src="${proposal.meme_url}" alt="Meme for petition" onerror="this.style.display='none'" />
|
||||||
|
</div>` : ''}
|
||||||
|
|
||||||
|
${proposal.petition_signatures > 0 ? `<div class="petition-info" style="margin: 20px 0;">
|
||||||
|
<span class="petition-icon">✓</span>
|
||||||
|
<span class="petition-count">${proposal.petition_signatures || proposal.upvotes}</span>
|
||||||
|
<span>verified signatures</span>
|
||||||
|
</div>` : ''}
|
||||||
|
|
||||||
|
<div class="proposal-stats" style="margin-top: 20px; padding-top: 20px;">
|
||||||
|
<div class="vote-buttons">
|
||||||
|
<button class="vote-button ${proposal.userVote === 'upvote' ? 'upvoted' : ''}" id="modal-upvote" data-proposal-id="${proposal.id}" data-vote-type="upvote">
|
||||||
|
<span class="vote-icon">✓</span>
|
||||||
|
<span>Sign</span>
|
||||||
|
</button>
|
||||||
|
<button class="vote-button ${proposal.userVote === 'downvote' ? 'downvoted' : ''}" id="modal-downvote" data-proposal-id="${proposal.id}" data-vote-type="downvote">
|
||||||
|
<span class="vote-icon">✕</span>
|
||||||
|
<span>Oppose</span>
|
||||||
|
</button>
|
||||||
|
<span class="net-votes ${voteClass}">${netVotes > 0 ? '+' : ''}${netVotes}</span>
|
||||||
|
</div>
|
||||||
|
<div class="proposal-time">${formatDate(proposal.timestamp)}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 25px; border-top: 1px solid var(--border); padding-top: 20px;">
|
||||||
|
<p style="margin-bottom: 15px; font-size: 0.9rem;">Share this petition:</p>
|
||||||
|
<div class="share-link-container">
|
||||||
|
<input type="text" class="share-link-field" value="${getShareableLink(proposal.id)}" readonly>
|
||||||
|
<button class="share-copy-button" id="modal-copy-link">Copy</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="social-share-buttons">
|
||||||
|
<button class="social-share-button" id="share-twitter">
|
||||||
|
<span class="social-icon">🐦</span>
|
||||||
|
<span>Twitter</span>
|
||||||
|
</button>
|
||||||
|
<button class="social-share-button" id="share-facebook">
|
||||||
|
<span class="social-icon">📘</span>
|
||||||
|
<span>Facebook</span>
|
||||||
|
</button>
|
||||||
|
<button class="social-share-button" id="share-whatsapp">
|
||||||
|
<span class="social-icon">📱</span>
|
||||||
|
<span>WhatsApp</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
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');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Add table
Reference in a new issue