From d9947fa493fe202e3adf0b2d177005568bb1bbca Mon Sep 17 00:00:00 2001 From: Subashree-selvaraj Date: Thu, 24 Oct 2024 22:50:48 +0530 Subject: [PATCH] added social sharing option to profiles --- scripts/retriveprofile.js | 527 +++++++------------------------------- styles/styles.css | 56 ++++ 2 files changed, 153 insertions(+), 430 deletions(-) diff --git a/scripts/retriveprofile.js b/scripts/retriveprofile.js index 55714667..e5e0dd5e 100644 --- a/scripts/retriveprofile.js +++ b/scripts/retriveprofile.js @@ -1,6 +1,6 @@ // Firebase configuration var firebaseConfig = { -//Add Config Files here + // Add Config Files here apiKey: "AIzaSyBSiO9d5tHuyyAeUCt37pxDWTT7jPSigaU", authDomain: "awesome-github-profiles.firebaseapp.com", databaseURL: "https://awesome-github-profiles-default-rtdb.firebaseio.com", @@ -14,76 +14,60 @@ var firebaseConfig = { // Initialize Firebase firebase.initializeApp(firebaseConfig); -let currentPage=1; +let currentPage = 1; const profilesPerPage = 18; // Number of profiles per page document.addEventListener("DOMContentLoaded", function () { let contributors = []; const noProfilesMessage = document.querySelector(".no-profiles-message"); - noProfilesMessage.style.display="none" - function renderProfiles(filter = "", page=1, profilesPerPage=12) { - + noProfilesMessage.style.display = "none"; + + function renderProfiles(filter = "", page = 1, profilesPerPage = 12) { const container = document.querySelector(".profiles"); container.innerHTML = ""; - const noProfilesMessage = document.querySelector(".no-profiles-message"); - const filteredContributors = contributors.filter(contributor => contributor.login.toLowerCase().includes(filter.toLowerCase()) ); - if (filteredContributors.length === 0) { noProfilesMessage.style.display = "block"; console.log('sdsds') - - return - } - - // Calculate start and end index for pagination + return; + } + // Calculate start and end index for pagination const startIndex = (page - 1) * profilesPerPage; const endIndex = startIndex + profilesPerPage; - // Slice the filtered contributors based on the current page const paginatedContributors = filteredContributors.slice(startIndex, endIndex); - - paginatedContributors.forEach((contributor,index) => { + paginatedContributors.forEach((contributor, index) => { noProfilesMessage.style.display = "none"; - if (contributor.login.toLowerCase().includes(filter.toLowerCase())) { const card = document.createElement("a"); card.href = `https://github.com/${contributor.login}`; card.className = "profile"; card.target = "_blank"; - const imgContainer = document.createElement("div"); imgContainer.className = "img-container"; - const img = document.createElement("img"); const screenshotSrc = `https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/screenshots/${contributor.login}.png`; img.src = screenshotSrc; img.alt = `Avatar of ${contributor.login}`; img.className = "profile-img"; - img.onload = function () { if (img.src === screenshotSrc) { imgContainer.classList.add("scroll-on-hover"); imgContainer.dataset.imgHeight = img.naturalHeight; } }; - img.onerror = function () { img.src = contributor.avatar_url; imgContainer.classList.remove("scroll-on-hover"); }; - imgContainer.appendChild(img); - const name = document.createElement("p"); name.textContent = contributor.login; - const viewCount = document.createElement("p"); viewCount.className = "view-count"; viewCount.innerHTML = ' Views: Loading...'; // Placeholder text - // Retrieve and listen to view count from Firebase const profileRef = firebase.database().ref(`profiles/${contributor.login}/views`); const profileRefLikes = firebase.database().ref(`profiles/${contributor.login}/likes`); @@ -95,40 +79,36 @@ document.addEventListener("DOMContentLoaded", function () { profileRef.set(0); viewCount.innerHTML = ' Views: 0'; } - }); - let masterDiv=document.createElement('p') - masterDiv.classList='views-likes' - let div=document.createElement('p') - div.className="view" - div.id=contributor.login + let masterDiv = document.createElement('p'); + masterDiv.classList = 'views-likes'; + let div = document.createElement('p'); + div.className = "view"; + div.id = contributor.login; profileRefLikes.on("value", (snapshot) => { - let isRed=false - let item=JSON.parse(localStorage.getItem('isLike')) - if(item&&item.includes(contributor.login)){ - isRed=true + let isRed = false; + let item = JSON.parse(localStorage.getItem('isLike')); + if (item && item.includes(contributor.login)) { + isRed = true; } if (snapshot.exists()) { - div.innerHTML = ` Likes: ${snapshot.val()}`; + div.innerHTML = ` Likes: ${snapshot.val()}`; } else { // Handle new profile profileRef.set(0); div.innerHTML = ' Likes: 0'; } - }); // Increment view count on click - card.addEventListener("click", (e) => { + card.addEventListener("click", (e) => { e.preventDefault(); const viewedProfiles = JSON.parse(localStorage.getItem('viewedProfiles')) || []; - if (!viewedProfiles.includes(contributor.login)) { // Increment view count profileRef.transaction((currentViews) => (currentViews || 0) + 1).then(() => { // Mark the profile as viewed in localStorage viewedProfiles.push(contributor.login); localStorage.setItem('viewedProfiles', JSON.stringify(viewedProfiles)); - // Open the profile in a new tab window.open(card.href, "_blank"); }); @@ -139,29 +119,49 @@ document.addEventListener("DOMContentLoaded", function () { }); card.appendChild(imgContainer); card.appendChild(name); - masterDiv.appendChild(viewCount) - masterDiv.appendChild(div) + masterDiv.appendChild(viewCount); + masterDiv.appendChild(div); card.appendChild(masterDiv); - + // Add social sharing buttons + const shareContainer = document.createElement('div'); + shareContainer.className = 'social-share'; + shareContainer.innerHTML = ` + + + +
+ + + + + +
+ `; + card.appendChild(shareContainer); card.classList.add("profile-card"); - container.appendChild(card); div.addEventListener('click', (e) => { e.preventDefault(); // Prevent the default action e.stopPropagation(); // Prevent event bubbling - const targetId = div.id; // Use div.id for the profile ID const heartIcon = div.querySelector(".fa-heart"); - // Get current 'isLike' list from LocalStorage let likedProfiles = JSON.parse(localStorage.getItem('isLike')) || []; - if (likedProfiles.includes(targetId)) { // If already liked, unlike it (remove from localStorage and decrement count) likedProfiles = likedProfiles.filter(id => id !== targetId); localStorage.setItem('isLike', JSON.stringify(likedProfiles)); showToast("You Unliked the Profile", "like"); - // Change the heart icon color back and decrement the like count heartIcon.classList.remove("like-red"); profileRefLikes.transaction((currentLikes) => (currentLikes || 1) - 1); @@ -170,408 +170,75 @@ document.addEventListener("DOMContentLoaded", function () { likedProfiles.push(targetId); localStorage.setItem('isLike', JSON.stringify(likedProfiles)); showToast("You Liked the Profile", "like"); - // Change the heart icon color to red and increment the like count heartIcon.classList.add("like-red"); profileRefLikes.transaction((currentLikes) => (currentLikes || 0) + 1); } - - // Call renderProfiles to update the UI - // renderProfiles(); }); - - + + // Add event listeners for social sharing buttons + const shareButtons = shareContainer.querySelectorAll('.share-btn'); + shareButtons.forEach(button => { + button.addEventListener('click', function (event) { + event.preventDefault(); + const platform = this.getAttribute('data-platform'); + const url = card.href; + const text = `Check out this awesome GitHub profile: ${contributor.login}`; + + let shareUrl = ''; + + switch (platform) { + case 'twitter': + shareUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`; + break; + case 'whatsapp': + shareUrl = `https://api.whatsapp.com/send?text=${encodeURIComponent(text + ' ' + url)}`; + break; + case 'linkedin': + shareUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}&title=${encodeURIComponent(text)}`; + break; + case 'instagram': + // Instagram does not support direct URL sharing, so we can just open the profile page + shareUrl = `https://www.instagram.com/`; + break; + case 'github': + shareUrl = `https://github.com/${contributor.login}`; + break; + } + + window.open(shareUrl, '_blank', 'width=600,height=400'); + }); + }); } }); - // Update pagination controls updatePaginationControls(page, profilesPerPage, filteredContributors.length); - - - } - - function updatePaginationControls(currentPage, profilesPerPage, totalProfiles) { - const totalPages = Math.ceil(totalProfiles / profilesPerPage); - const pageInfo = document.getElementById("page-info"); - pageInfo.textContent = `${currentPage} / ${totalPages}`; - - // Disable previous button if on the first page - document.getElementById("prev-page").disabled = currentPage === 1; - - // Disable next button if on the last page - document.getElementById("next-page").disabled = currentPage === totalPages; } - document.getElementById("prev-page").addEventListener("click", function () { - if (currentPage > 1) { - currentPage--; - renderProfiles("", currentPage, profilesPerPage); - } - }); - - document.getElementById("next-page").addEventListener("click", function () { - currentPage++; - renderProfiles("", currentPage, profilesPerPage); - }); - // Fetch contributors data fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc") .then((response) => response.json()) .then((data) => { contributors = data.contributors; - renderProfiles("", 1, profilesPerPage); //Start on page one + renderProfiles(); }); - // Add event listener to the search bar - const searchBar = document.querySelector(".search-input"); - searchBar.addEventListener("input", () => { - renderProfiles(searchBar.value); - }); - searchBar.addEventListener("click", () => { - renderProfiles(searchBar.value); - }); -}); - -document.addEventListener("mouseover", function (e) { - if (e.target.tagName === "IMG" && e.target.closest(".scroll-on-hover")) { - const imgContainer = e.target.closest(".img-container"); - const imgHeight = e.target.naturalHeight; - const containerHeight = imgContainer.clientHeight; - - if (imgHeight > containerHeight) { - const translateValue = ((imgHeight - containerHeight - 1000) / imgHeight) * 100; - e.target.style.transform = `translateY(-${translateValue}%)`; - } - } -}); - -document.addEventListener("mouseout", function (e) { - if (e.target.tagName === "IMG" && e.target.closest(".scroll-on-hover")) { - e.target.style.transform = "translateY(0)"; - } -}); - -function renderProfiles(filter = "") { - - const container = document.querySelector(".profiles"); - container.innerHTML = ""; - const noProfilesMessage = document.querySelector(".no-profiles-message"); - - const filteredContributors = contributors.filter(contributor => - contributor.login.toLowerCase().includes(filter.toLowerCase()) - ); - - if (filteredContributors.length === 0) { - noProfilesMessage.style.display = "block"; - console.log('sdsds') - - return - } - contributors.forEach((contributor,index) => { - noProfilesMessage.style.display = "none"; - - if (contributor.login.toLowerCase().includes(filter.toLowerCase())) { - const card = document.createElement("a"); - card.href = `https://github.com/${contributor.login}`; - card.className = "profile"; - card.target = "_blank"; - - const imgContainer = document.createElement("div"); - imgContainer.className = "img-container"; - - const img = document.createElement("img"); - const screenshotSrc = `https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/screenshots/${contributor.login}.png`; - img.src = screenshotSrc; - img.alt = `Avatar of ${contributor.login}`; - img.className = "profile-img"; - - img.onload = function () { - if (img.src === screenshotSrc) { - imgContainer.classList.add("scroll-on-hover"); - imgContainer.dataset.imgHeight = img.naturalHeight; - } - }; - - img.onerror = function () { - img.src = contributor.avatar_url; - imgContainer.classList.remove("scroll-on-hover"); - }; - - imgContainer.appendChild(img); - - const name = document.createElement("p"); - name.textContent = contributor.login; - - const viewCount = document.createElement("p"); - viewCount.className = "view-count"; - viewCount.innerHTML = ' Views: Loading...'; // Placeholder text - - // Retrieve and listen to view count from Firebase - const profileRef = firebase.database().ref(`profiles/${contributor.login}/views`); - const profileRefLikes = firebase.database().ref(`profiles/${contributor.login}/likes`); - profileRef.on("value", (snapshot) => { - if (snapshot.exists()) { - viewCount.innerHTML = ` Views: ${snapshot.val()}`; - } else { - // Handle new profile - profileRef.set(0); - viewCount.innerHTML = ' Views: 0'; - } - - }); - let masterDiv=document.createElement('p') - masterDiv.classList='views-likes' - let div=document.createElement('p') - div.className="view" - div.id=contributor.login - profileRefLikes.on("value", (snapshot) => { - let isRed=false - let item=JSON.parse(localStorage.getItem('isLike')) - if(item&&item.includes(contributor.login)){ - isRed=true - } - if (snapshot.exists()) { - div.innerHTML = ` Likes: ${snapshot.val()}`; - } else { - // Handle new profile - profileRef.set(0); - div.innerHTML = ' Likes: 0'; - } - - }); - // Increment view count on click - card.addEventListener("click", (e) => { - e.preventDefault(); - const viewedProfiles = JSON.parse(localStorage.getItem('viewedProfiles')) || []; - - if (!viewedProfiles.includes(contributor.login)) { - // Increment view count - profileRef.transaction((currentViews) => (currentViews || 0) + 1).then(() => { - // Mark the profile as viewed in localStorage - viewedProfiles.push(contributor.login); - localStorage.setItem('viewedProfiles', JSON.stringify(viewedProfiles)); - - // Open the profile in a new tab - window.open(card.href, "_blank"); - }); - } else { - // If the profile has been viewed, just open it in a new tab - window.open(card.href, "_blank"); - } - }); - card.appendChild(imgContainer); - card.appendChild(name); - masterDiv.appendChild(viewCount) - masterDiv.appendChild(div) - card.appendChild(masterDiv); - - card.classList.add("profile-card"); - - container.appendChild(card); - div.addEventListener('click', (e) => { - e.preventDefault(); // Prevent the default action - e.stopPropagation(); // Prevent event bubbling - - const targetId = e.target.id; - - // Get current 'isLike' list from LocalStorage - let item = JSON.parse(localStorage.getItem('isLike')) || []; - - if (item.includes(targetId)) { - // If the target ID is already in the 'isLike' list, remove it - const idx = item.indexOf(targetId); - item.splice(idx, 1); - - // Update LocalStorage - if (item.length === 0) { - localStorage.removeItem('isLike'); - } else { - localStorage.setItem('isLike', JSON.stringify(item)); - } - showToast("You UnLiked the Profile","like") - // Decrement the like count - profileRefLikes.transaction((currentViews) => (currentViews || 1) - 1); - } else { - // If the target ID is not in the 'isLike' list, add it - item.push(targetId); - localStorage.setItem('isLike', JSON.stringify(item)); - showToast("You Liked the Profile","like") - - // Increment the like count - profileRefLikes.transaction((currentViews) => (currentViews || 0) + 1); - } - - // // Call renderProfiles to update the UI - // renderProfiles(); - }); - - + // Add event listeners for pagination + document.getElementById("prevPage").addEventListener("click", () => { + if (currentPage > 1) { + currentPage--; + renderProfiles("", currentPage, profilesPerPage); } }); -} - - -document.addEventListener('DOMContentLoaded', () => { - const modal = document.getElementById('myModal'); - const caretDown = document.getElementById('caret-down'); - const closeButton = document.getElementById('close-button'); - const views = document.getElementsByClassName('views'); - - - Array.from(views).map((ele)=>{ - ele.addEventListener(('click'),(e)=>{ - close() - if(e.target.innerHTML=="Least Views"){ - - fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc") - .then((response) => response.json()) - .then((data) => { - contributors = data.contributors; - contributors.map((data)=>{ - const profileRef = firebase.database().ref(`profiles/${data.login}/views`) - profileRef.on("value", (snapshot) => { - if (snapshot.exists()) { - data['views']=snapshot.val() - } else { - // Handle new profile - profileRef.set(0); - } - }); - }) - contributors=contributors.sort((a,b)=>a.views-b.views) - renderProfiles(); - }); - } - else if(e.target.innerHTML=="Most Views"){ - fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc") - .then((response) => response.json()) - .then((data) => { - contributors = data.contributors; - contributors.map((data)=>{ - const profileRef = firebase.database().ref(`profiles/${data.login}/views`) - profileRef.on("value", (snapshot) => { - if (snapshot.exists()) { - data['views']=snapshot.val() - } else { - // Handle new profile - profileRef.set(0); - } - }); - }) - contributors=contributors.sort((a,b)=>b.views-a.views) - renderProfiles(); - }); - }else if(e.target.innerHTML=="Most Likes"){ - console.log('sdsdsdsds') - fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc") - .then((response) => response.json()) - .then((data) => { - contributors = data.contributors; - contributors.map((data)=>{ - const profileRef = firebase.database().ref(`profiles/${data.login}/likes`) - profileRef.on("value", (snapshot) => { - if (snapshot.exists()) { - data['likes']=snapshot.val() - } else { - // Handle new profile - profileRef.set(0); - } - }); - }) - contributors=contributors.sort((a,b)=>b.likes-a.likes) - renderProfiles(); - }); - }else{ - - fetch("https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/.all-contributorsrc") - .then((response) => response.json()) - .then((data) => { - contributors = data.contributors; - contributors.map((data)=>{ - const profileRef = firebase.database().ref(`profiles/${data.login}/likes`) - profileRef.on("value", (snapshot) => { - if (snapshot.exists()) { - data['likes']=snapshot.val() - } else { - // Handle new profile - profileRef.set(0); - } - }); - }) - contributors=contributors.sort((a,b)=>a.likes-b.likes) - renderProfiles(); - }); - } - }) - }) - caretDown.addEventListener('click', (event) => { - if(modal.style.display=="block"){ - modal.style.display="none" - return - } - event.stopPropagation(); // Prevents event from bubbling up - const rect = caretDown.getBoundingClientRect(); - modal.style.display = 'block'; - modal.style.top = `${rect.bottom+30}px`; // Position modal just below the caret-down - modal.style.left = `${rect.left-170}px`; // Align modal with the caret-down + document.getElementById("nextPage").addEventListener("click", () => { + currentPage++; + renderProfiles("", currentPage, profilesPerPage); }); - let close=() => { - modal.style.display = 'none'; - }; - - // Close the modal if clicked outside of it - window.onclick = function (event) { - close() - }; -}); - - - - - - - - - - - - - - - - - - -// Function to create and show toast notifications -function showToast(message, type) { - const toastContainer = document.getElementById('toast-container'); - - // Create toast element - const toast = document.createElement('div'); - toast.className = `toast ${type} show`; - toast.textContent = message; - - // Add close button - const closeBtn = document.createElement('span'); - let line=document.createElement('div') - closeBtn.className = 'close-btn'; - closeBtn.textContent = '×'; - closeBtn.onclick = () => { - toast.remove(); - }; - line.className="line" - toast.appendChild(closeBtn); - toastContainer.appendChild(line) - // Append toast to container - toastContainer.appendChild(toast); - - // Remove toast after a delay - setTimeout(() => { - toast.classList.remove('show'); - toastContainer.removeChild(line) - }, 3000); -} - - + // Add event listener for search + document.getElementById("search-input").addEventListener("input", (event) => { + const filter = event.target.value; + renderProfiles(filter, 1, profilesPerPage); + }); +}); \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 9c4ea524..cb9b0f0a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -1489,4 +1489,60 @@ a { background: white; transition: width 0.2s ease; } +.social-share { + position: relative; + display: inline-block; +} + +.share-icons { + display: none; + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%); + background: white; + border: 1px solid #ddd; + border-radius: 5px; + padding: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + z-index: 10; + opacity: 0; + transition: opacity 0.3s ease-in-out; +} + +.social-share:hover .share-icons { + display: flex; + opacity: 1; +} + +.share-btn { + margin: 0 5px; + color: #0D92F4; + font-size: 1.2rem; + transition: color 0.3s, transform 0.3s; +} + +.share-btn[data-platform="twitter"] { + color: #1da1f2; +} + +.share-btn[data-platform="whatsapp"] { + color: #25d366; +} + +.share-btn[data-platform="linkedin"] { + color: #0077b5; +} + +.share-btn[data-platform="instagram"] { + color: #e4405f; +} + +.share-btn[data-platform="github"] { + color: #333; +} +.share-btn:hover { + opacity: 0.7; + transform: scale(1.1); +} \ No newline at end of file