1- // const hamBurger = document.querySelector(".hamburger");
2- // const nMenu = document.querySelector(".nav-menu");
3-
4- // document.addEventListener("DOMContentLoaded", function () {
5- // setTimeout(function () {
6- // document.querySelector("body").classList.add("loaded");
7- // }, 500);
8- // });
9- // const loading = document.getElementById("loading1");
10- // loading.innerHTML = `<h1 class="loading">Loading</h1>`;
11- // Hamburger menu
12- // hamBurger.addEventListener("click", mobileMenu);
13- // function mobileMenu() {
14- // hamBurger.classList.toggle("active");
15- // nMenu.classList.toggle("active");
16- // }
17-
181const cont = document . getElementById ( "team-grid1" ) ;
2+ const loadMoreButton = document . getElementById ( "load-more" ) ;
193const owner = "mdazfar2" ;
204const repoName = "HelpOps-Hub" ;
5+ const itemsPerPage = 10 ; // Number of items per page
6+ let currentPage = 1 ; // Initialize the page number
7+ let allContributors = [ ] ; // To store all contributors data
8+ let pageNumber = 1 ; // Initialize the page number
219// const loading = document.getElementById("skeleton-wrapper");
2210// cont.appendChild(loading);
2311async function fetchContributors ( pageNumber ) {
@@ -110,107 +98,86 @@ async function fetchContributors(pageNumber) {
11098 const contributorsData = await response . json ( ) ;
11199 const cont = document . getElementById ( "team-grid1" ) ;
112100 cont . removeChild ( cont . firstChild ) ;
113-
101+ console . log ( cont . removeChild ( cont . firstChild ) ) ;
114102 return contributorsData ;
115103}
116104
117105// Function to fetch all contributors
118- async function fetchAllContributors ( ) {
119- let allContributors = [ ] ;
120- let pageNumber = 1 ;
121-
122- try {
123- while ( true ) {
124- const contributorsData = await fetchContributors ( pageNumber ) ;
125- if ( contributorsData . length === 0 ) {
126- break ;
127- }
128- allContributors = allContributors . concat ( contributorsData ) ;
129- pageNumber ++ ;
106+ function renderContributors ( contributors ) {
107+ var cheak = 0 ;
108+ contributors . forEach ( ( contributor ) => {
109+ if ( contributor . login === owner ) {
110+ return ;
130111 }
131- var cheak = 0 ;
132- allContributors . forEach ( ( contributor ) => {
133- if ( contributor . login === owner ) {
134- return ;
135- }
136112
137- const contributorCard = document . createElement ( "div" ) ;
138- contributorCard . classList . add ( "team-member7" ) ;
139- const avatarImg = document . createElement ( "img" ) ;
140- avatarImg . src = contributor . avatar_url ;
141- avatarImg . alt = `${ contributor . login } 's Picture` ;
142- let name = contributor . name || contributor . login ;
143- if ( name . length > 12 ) {
144- name = name . slice ( 0 , 10 ) + "..." ;
145- }
113+ const contributorCard = document . createElement ( "div" ) ;
114+ contributorCard . classList . add ( "team-member7" ) ;
115+ const avatarImg = document . createElement ( "img" ) ;
116+ avatarImg . src = contributor . avatar_url ;
117+ avatarImg . alt = `${ contributor . login } 's Picture` ;
118+ let name = contributor . name || contributor . login ;
119+ if ( name . length > 12 ) {
120+ name = name . slice ( 0 , 10 ) + "..." ;
121+ }
146122
147- const loginLink = document . createElement ( "a" ) ;
148- const loginLink1 = document . createElement ( "a" ) ;
149- loginLink1 . href = `https://github.com/sponsors/${ name } ` ;
150- loginLink . href = contributor . html_url ;
151- loginLink . target = "_blank" ;
152- const contri = contributor . contributions ;
153- contributorCard . innerHTML = ` <div class="card7">
154- <div class="badge7" >Developer</div>
155- <div class="image-div7">
156- <img src=${ avatarImg . src } alt=${ avatarImg . alt } />
157- </div>
158- <div class="info-div7">
159- <h2>${ name } </h2>
160- <p>Open Source Contributor</p>
161- </div>
123+ const loginLink = document . createElement ( "a" ) ;
124+ loginLink . href = contributor . html_url ;
125+ loginLink . target = "_blank" ;
126+ const contri = contributor . contributions ;
127+ contributorCard . innerHTML = `
128+ <div class="card7">
129+ <div class="badge7">Developer</div>
130+ <div class="image-div7">
131+ <img src=${ avatarImg . src } alt=${ avatarImg . alt } />
132+ </div>
133+ <div class="info-div7">
134+ <h2>${ name } </h2>
135+ <p>Open Source Contributor</p>
136+ </div>
137+ </div>
138+ <div class="data7">
139+ <div class="contributions7">
140+ <div class="contributions-count7">${ contri } </div>
141+ <div class="contributions-label7">Contributions</div>
142+ </div>
143+ <div class="social-links7">
144+ <a href=${ loginLink } >
145+ <i class="fab fa-github"></i>
146+ </a>
147+ <div class="github-label7">GitHub</div>
162148 </div>
163- < div class="data7">
164- <div class="contributions7">
165- <div class="contributions-count7"> ${ contri } </div>
166- <div class="contributions-label7">Contributions</div>
167-
168- </div>
169- <div class="social-links7">
170- <a href= ${ loginLink } >
171- <i class="fab fa-github"></i>
172- </a>
173- <div class="github-label7">GitHub</div>
174- </div>
175- </div>` ;
176- // loginLink.appendChild(avatarImg) ;
177- // contributorCard.appendChild(loginLink );
178- if ( cheak > 0 && name != "azfar-2" ) cont . appendChild ( contributorCard ) ;
179- cheak ++ ;
180- } ) ;
149+ </ div>` ;
150+
151+ if ( cheak > 0 && name != "azfar-2" ) cont . appendChild ( contributorCard ) ;
152+ cheak ++ ;
153+ } ) ;
154+ }
155+ // Fetch all contributors with pagination
156+
157+ // Initial fetch
158+
159+ async function fetchAllContributors ( ) {
160+ try {
161+ const contributorsData = await fetchContributors ( ) ;
162+ allContributors = contributorsData ;
163+ renderContributors ( allContributors . slice ( 0 , itemsPerPage ) ) ;
164+ if ( allContributors . length > itemsPerPage ) {
165+ loadMoreButton . style . display = "block" ; // Show the Load More button if more data exists
166+ }
181167 } catch ( error ) {
182168 console . error ( error ) ;
183169 }
184170}
185171
186- fetchAllContributors ( ) ;
187-
188- // let calcScrollValue = () => {
189- // let scrollProg = document.getElementById("progress");
190- // let pos = document.documentElement.scrollTop;
191- // let calcHeight =
192- // document.documentElement.scrollHeight -
193- // document.documentElement.clientHeight;
194- // let scrollValue = Math.round((pos * 100) / calcHeight);
195- // if (pos > 100) {
196- // scrollProg.style.display = "grid";
197- // } else {
198- // scrollProg.style.display = "none";
199- // }
200- // scrollProg.addEventListener("click", () => {
201- // document.documentElement.scrollTop = 0;
202- // });
203- // scrollProg.style.background = `conic-gradient(#0063ba ${scrollValue}%, #d499de ${scrollValue}%)`;
204- // };
205-
206- // window.addEventListener("scroll", function () {
207- // var scrollToTopButton = document.getElementById("progress");
208- // if (window.pageYOffset > 200) {
209- // scrollToTopButton.style.display = "block";
210- // } else {
211- // scrollToTopButton.style.display = "none";
212- // }
213- // });
172+ loadMoreButton . addEventListener ( "click" , ( ) => {
173+ const start = currentPage * itemsPerPage ;
174+ const end = start + itemsPerPage ;
175+ renderContributors ( allContributors . slice ( start , end ) ) ;
176+ currentPage ++ ;
177+ if ( end >= allContributors . length ) {
178+ loadMoreButton . style . display = "none" ; // Hide the Load More button if no more data
179+ }
180+ } ) ;
214181
215- // window.onscroll = calcScrollValue;
216- // window.onload = calcScrollValue ;
182+ // Initial fetch
183+ fetchAllContributors ( ) ;
0 commit comments