Skip to content

Commit dbf6561

Browse files
auxfuseauxfuse
committed
observer to detect community-section element and show pagination on scroll added
1 parent f3b0fd2 commit dbf6561

File tree

3 files changed

+195
-141
lines changed

3 files changed

+195
-141
lines changed

‎assets/css/style.css

+9
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,10 @@ h6 {
228228
cursor: pointer;
229229
}
230230

231+
#community-section {
232+
display: relative;
233+
}
234+
231235
#showcases-section h1::after,
232236
#community-section h1::after {
233237
content: '';
@@ -707,6 +711,11 @@ select,
707711
#pagination {
708712
list-style: none;
709713
font-weight: bolder;
714+
opacity: 0;
715+
position: fixed;
716+
top: 50%;
717+
transition: all 0.2s ease-in-out;
718+
padding-inline-start: 20px;
710719
}
711720

712721
#pagination a {

‎assets/js/main.js

+161-116
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,171 @@
1-
import { genIndexes, shuffle, clamp } from './modules/utilities.js';
2-
import { createParticipantesCards, createSkeletonLoaders } from './modules/cards.js';
3-
4-
5-
document.getElementById('showcases-slideshow')
6-
.addEventListener('slide-changed', e => {
7-
const titleEl = document.getElementById('showcases-slide-title');
8-
titleEl.innerHTML = '';
9-
titleEl.append(e.detail.querySelector('.slide-title > .card-title').cloneNode(true));
10-
});
11-
1+
import { genIndexes, shuffle, clamp } from "./modules/utilities.js";
2+
import {
3+
createParticipantesCards,
4+
createSkeletonLoaders,
5+
} from "./modules/cards.js";
6+
7+
document
8+
.getElementById("showcases-slideshow")
9+
.addEventListener("slide-changed", (e) => {
10+
const titleEl = document.getElementById("showcases-slide-title");
11+
titleEl.innerHTML = "";
12+
titleEl.append(
13+
e.detail.querySelector(".slide-title > .card-title").cloneNode(true)
14+
);
15+
});
1216

1317
(() => {
18+
const communityElements = {
19+
// Maximum number of cards to append for this section
20+
count: 10,
21+
// The element to append cards to
22+
container: document.querySelector("#community"),
23+
// The HTML template to use as a base for each card
24+
template: document.querySelector("#community-section > .item-template"),
25+
};
26+
const showcaseElements = {
27+
count: 5,
28+
container: document.querySelector("#showcases-slideshow"),
29+
template: document.querySelector("#showcases > .item-template"),
30+
};
1431

15-
const communityElements = {
16-
// Maximum number of cards to append for this section
17-
count: 10,
18-
// The element to append cards to
19-
container: document.querySelector("#community"),
20-
// The HTML template to use as a base for each card
21-
template: document.querySelector("#community-section > .item-template")
22-
};
23-
const showcaseElements = {
24-
count: 5,
25-
container: document.querySelector("#showcases-slideshow"),
26-
template: document.querySelector("#showcases > .item-template")
27-
};
28-
29-
// Create Loaders for community section cards
30-
if (communityElements.container && communityElements.template) {
31-
createSkeletonLoaders(communityElements);
32-
}
33-
34-
// Preload data
35-
Promise.all([
36-
37-
// Participant records
38-
fetch("assets/data/community.json")
39-
.then(response => response.json()),
40-
// Emoji list
41-
fetch("assets/data/emojis.json")
42-
.then((response) => response.json()),
43-
44-
]).then((values) => {
45-
// When all data has loaded:
46-
const [participants, emojis] = values;
47-
const perPage = 6;
48-
let currentPage = Number(new URLSearchParams(window.location.search).get("page"));
49-
50-
let pageParticipants = pagePagination(participants, currentPage, perPage);
51-
52-
if (showcaseElements.container && showcaseElements.template) {
53-
const indexes = shuffle(genIndexes(participants.length));
54-
createParticipantesCards(participants, emojis, showcaseElements, indexes, true);
55-
}
56-
32+
// Create Loaders for community section cards
5733
if (communityElements.container && communityElements.template) {
58-
// Alter count to show all cards
59-
communityElements.count = participants.length;
60-
communityElements.container.innerHTML = "";
61-
createParticipantesCards(participants, emojis, communityElements, pageParticipants);
34+
createSkeletonLoaders(communityElements);
6235
}
63-
});
36+
37+
// Preload data
38+
Promise.all([
39+
// Participant records
40+
fetch("assets/data/community.json").then((response) => response.json()),
41+
// Emoji list
42+
fetch("assets/data/emojis.json").then((response) => response.json()),
43+
]).then((values) => {
44+
// When all data has loaded:
45+
const [participants, emojis] = values;
46+
const perPage = 6;
47+
let currentPage = Number(
48+
new URLSearchParams(window.location.search).get("page")
49+
);
50+
51+
let pageParticipants = pagePagination(
52+
participants,
53+
currentPage,
54+
perPage
55+
);
56+
57+
if (showcaseElements.container && showcaseElements.template) {
58+
const indexes = shuffle(genIndexes(participants.length));
59+
createParticipantesCards(
60+
participants,
61+
emojis,
62+
showcaseElements,
63+
indexes,
64+
true
65+
);
66+
}
67+
68+
if (communityElements.container && communityElements.template) {
69+
// Alter count to show all cards
70+
communityElements.count = participants.length;
71+
communityElements.container.innerHTML = "";
72+
createParticipantesCards(
73+
participants,
74+
emojis,
75+
communityElements,
76+
pageParticipants
77+
);
78+
}
79+
});
6480
})();
6581

6682
// pagination
83+
const paginationParent = document.getElementById("community-section");
84+
const paginationEl = document.getElementById("pagination");
6785

6886
function pagePagination(participants, currentPage, perPage) {
69-
const paginationEl = document.getElementById("pagination");
70-
const totalPages = Math.ceil(participants.length / perPage);
71-
72-
currentPage = clamp(currentPage, 1, totalPages)
73-
74-
const paginationNextLi = document.createElement('li')
75-
const paginationNextButton = document.createElement('a');
76-
77-
paginationNextButton.textContent = "Next";
78-
paginationNextButton.href = `?page=${currentPage + 1}`;
79-
paginationEl.appendChild(paginationNextLi);
80-
paginationNextLi.append(paginationNextButton);
81-
82-
paginationNextLi.classList.add('next-button');
83-
84-
if (currentPage === totalPages) {
85-
paginationNextLi.style.display = "none";
86-
};
87-
88-
for (let i = 0; i < totalPages; i++) {
89-
const paginationLi = document.createElement('li');
90-
const paginationLink = document.createElement('a');
91-
92-
paginationLink.textContent = i + 1;
93-
paginationLink.href = `?page=${i+1}`;
94-
paginationEl.appendChild(paginationLi);
95-
paginationLi.append(paginationLink);
96-
97-
if (currentPage == i + 1) {
98-
paginationLink.classList.add("pagination-active");
99-
};
100-
paginationLi.classList.add('pagination-numbers');
101-
}
102-
103-
104-
const paginationPrevLi = document.createElement('li')
105-
const paginationPrevButton = document.createElement('a');
106-
107-
paginationPrevButton.textContent = "Previous";
108-
paginationPrevButton.href = `?page=${currentPage - 1}`;
109-
paginationEl.appendChild(paginationPrevLi);
110-
paginationPrevLi.append(paginationPrevButton);
111-
112-
paginationPrevLi.classList.add('prev-button');
113-
114-
if (currentPage === 1) {
115-
paginationPrevLi.style.display = "none";
116-
};
117-
118-
let firstParticipantIndex = currentPage * perPage - perPage;
119-
let lastParticipantIndex = currentPage * perPage -1;
120-
121-
if (lastParticipantIndex >= participants.length) {
122-
lastParticipantIndex = participants.length -1;
123-
};
124-
125-
return genIndexes(lastParticipantIndex+1, firstParticipantIndex);
126-
};
87+
const totalPages = Math.ceil(participants.length / perPage);
88+
89+
currentPage = clamp(currentPage, 1, totalPages);
90+
91+
const paginationNextLi = document.createElement("li");
92+
const paginationNextButton = document.createElement("a");
93+
94+
paginationNextButton.textContent = "Next";
95+
paginationNextButton.href = `?page=${currentPage + 1}`;
96+
paginationEl.appendChild(paginationNextLi);
97+
paginationNextLi.append(paginationNextButton);
98+
99+
paginationNextLi.classList.add("next-button");
100+
101+
if (currentPage === totalPages) {
102+
paginationNextLi.style.display = "none";
103+
}
104+
105+
for (let i = 0; i < totalPages; i++) {
106+
const paginationLi = document.createElement("li");
107+
const paginationLink = document.createElement("a");
108+
109+
paginationLink.textContent = i + 1;
110+
paginationLink.href = `?page=${i + 1}`;
111+
paginationEl.appendChild(paginationLi);
112+
paginationLi.append(paginationLink);
113+
114+
if (currentPage == i + 1) {
115+
paginationLink.classList.add("pagination-active");
116+
}
117+
paginationLi.classList.add("pagination-numbers");
118+
}
119+
120+
const paginationPrevLi = document.createElement("li");
121+
const paginationPrevButton = document.createElement("a");
122+
123+
paginationPrevButton.textContent = "Previous";
124+
paginationPrevButton.href = `?page=${currentPage - 1}`;
125+
paginationEl.appendChild(paginationPrevLi);
126+
paginationPrevLi.append(paginationPrevButton);
127+
128+
paginationPrevLi.classList.add("prev-button");
129+
130+
if (currentPage === 1) {
131+
paginationPrevLi.style.display = "none";
132+
}
133+
134+
let firstParticipantIndex = currentPage * perPage - perPage;
135+
let lastParticipantIndex = currentPage * perPage - 1;
136+
137+
if (lastParticipantIndex >= participants.length) {
138+
lastParticipantIndex = participants.length - 1;
139+
}
140+
141+
return genIndexes(lastParticipantIndex + 1, firstParticipantIndex);
142+
}
143+
144+
// pagination observer
145+
146+
let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;
147+
148+
let tHold;
149+
if(isMobile) {
150+
tHold = 0.2;
151+
} else {
152+
tHold = 0.4;
153+
}
154+
155+
const options = {
156+
root: null,
157+
threshold: tHold
158+
}
159+
160+
const observer = new IntersectionObserver((entries) => {
161+
entries.forEach(entry => {
162+
// console.log(entry);
163+
if(entry['isIntersecting'] === true) {
164+
paginationEl.style.opacity = 1;
165+
} else {
166+
paginationEl.style.opacity = 0;
167+
}
168+
});
169+
}, options);
170+
171+
observer.observe(paginationParent);

‎index.html

+25-25
Original file line numberDiff line numberDiff line change
@@ -77,33 +77,33 @@ <h1 class="primary-heading center-txt">Meet the Community</h1>
7777
</div>
7878
<!-- Community card template -->
7979
<template class="item-template">
80-
<div class="card">
81-
<h2 class="card-title">
82-
<span data-field="random_emoji"></span>
83-
<span data-field="name">_</span>
84-
</h2>
85-
<h3 class="card-sub margin-yt-sm">
86-
📅 Started: <span data-field="course_start"></span>
87-
</h3>
88-
<h3 class="card-sub margin-yb-sm custom-underline">
89-
🎓 Stage: <span data-field="course_stage"></span>
90-
</h3>
91-
<h3 class="card-detail">
92-
Loves: <span data-field="favorite_language"></span> 😍
93-
</h3>
94-
<h3 class="card-detail custom-underline">
95-
Learning: <span data-field="currently_learning"></span> 📚
96-
</h3>
97-
<a class="participant-link" href="" data-content="View Work ➡" data-field="link">
98-
View Work ➡
99-
</a>
100-
</div>
101-
</template>
102-
</section>
80+
<div class="card">
81+
<h2 class="card-title">
82+
<span data-field="random_emoji"></span>
83+
<span data-field="name">_</span>
84+
</h2>
85+
<h3 class="card-sub margin-yt-sm">
86+
📅 Started: <span data-field="course_start"></span>
87+
</h3>
88+
<h3 class="card-sub margin-yb-sm custom-underline">
89+
🎓 Stage: <span data-field="course_stage"></span>
90+
</h3>
91+
<h3 class="card-detail">
92+
Loves: <span data-field="favorite_language"></span> 😍
93+
</h3>
94+
<h3 class="card-detail custom-underline">
95+
Learning: <span data-field="currently_learning"></span> 📚
96+
</h3>
97+
<a class="participant-link" href="" data-content="View Work ➡" data-field="link">
98+
View Work ➡
99+
</a>
100+
</div>
101+
</template>
103102

104-
<ul id="pagination"></ul>
103+
<ul id="pagination"></ul>
104+
</section>
105105

106-
<footer>
106+
<footer id="footer">
107107
<div id="repo-go">
108108
<p>
109109
Want to contribute to this project?

0 commit comments

Comments
 (0)