diff --git a/src/main/resources/static/css/feed/feed.css b/src/main/resources/static/css/feed/feed.css index 69c214c4061868080d381fbafdfeff1e1ede9c11..df8ce1011508b92a93e215b566685363e0caaab5 100644 --- a/src/main/resources/static/css/feed/feed.css +++ b/src/main/resources/static/css/feed/feed.css @@ -178,7 +178,7 @@ using the same styles used for the create new category modal, since we did not u we just copy paste in order not to affect other form styles. */ -.create-new-modal { +.create-new-modal, .share-modal { position: fixed; display: none; /* initially hidden */ top: 0; @@ -192,16 +192,46 @@ we just copy paste in order not to affect other form styles. overflow: auto; } -.modal-content { +.modal-content, .share-box { background: var(--background-color); padding: 24px; border-radius: 10px; } -.modal-header { +.modal-header , .share-controls{ display: flex; margin-bottom: 20px; } + +.share-options { + display: flex; + gap: 15px; + align-items: center; + font-size: 36px; +} + +.share-options > button { + border: none; + background: none; + cursor: pointer; + font-size: 32px; +} +.share-options > a { + text-decoration: none !important; + color: var(--primary-color); +} + +.share-controls { + width: 100%; + +} + +.share-controls > button { + border: none; + background: none; + cursor: pointer; + font-size: 16px; +} .modal-title-desc{ flex: 1; } diff --git a/src/main/resources/static/js/feed/feed.js b/src/main/resources/static/js/feed/feed.js index 427c780e52de859104bf87acd5abf4bd0db2877a..456e8ae0dbb475b4060d0c53a0fb0a6d438178b6 100644 --- a/src/main/resources/static/js/feed/feed.js +++ b/src/main/resources/static/js/feed/feed.js @@ -90,7 +90,9 @@ async function renderPost(post) { const timestamp = postElement.querySelector('.timestamp'); timestamp.textContent = new Date(post.postTime).toLocaleDateString(); - + // share button func + const shareButton = postElement.querySelector('.share-post'); + shareButton.addEventListener('click', () => sharePost(post.postId)); // Set data attributes for reference const postDiv = postElement.querySelector('.post'); @@ -151,6 +153,44 @@ async function handleLike(postId, likeCountElement, likeButton) { } } +// share funtionality +function sharePost(postId) { + const postUrl = encodeURIComponent(`${window.location.origin}/post/${postId}`); + const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${postUrl}`; + const twitterUrl = `https://twitter.com/intent/tweet?url=${postUrl}`; + const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${postUrl}`; + + const shareModal = document.createElement('div'); + shareModal.innerHTML = ` + <div class="share-box"> + <div class="share-controls"><button class="close-share"><i class="bi bi-x-lg"></button></i></div> + <div class="share-options"> + <a href="${facebookUrl}" target="_blank" style="color:#4267B2"><i class="bi bi-facebook"></i></a> + <a href="${twitterUrl}" target="_blank" style="color:#1DA1F2"><i class="bi bi-twitter"></i></a> + <a href="${linkedinUrl}" target="_blank" style="color:#0A66C2"><i class="bi bi-linkedin"></i></a> + <button id="copyLink"><i class="bi bi-link-45deg"></i></button> + </div> + </div> + `; + + document.body.appendChild(shareModal); + shareModal.classList.add('share-modal'); + shareModal.style.display = 'flex'; + + shareModal.querySelector('.close-share').addEventListener('click', () => { + shareModal.remove(); + }) + + document.getElementById('copyLink').addEventListener('click', () => { + navigator.clipboard.writeText(decodeURIComponent(postUrl)).then(() => { + alert('Post link copied to clipboard!'); + }).catch(err => { + console.error('Failed to copy: ', err); + }); + }); +} + + // handling form submission whether update or post postForm.addEventListener('submit', async (event) => { diff --git a/src/main/resources/templates/feed/feed.html b/src/main/resources/templates/feed/feed.html index 22d741511465a03b310f94c996b039cbe9f6f5d7..058d86c2839162c3036e38cca1d1b74d172ae8cb 100644 --- a/src/main/resources/templates/feed/feed.html +++ b/src/main/resources/templates/feed/feed.html @@ -61,7 +61,7 @@ <i class="bi bi-chat-left"></i> <span>35</span> </button> - <button title="Share post"> + <button title="Share post" id="share-post" class="share-post"> <i class="bi bi-share"></i> </button> </div>