-
Notifications
You must be signed in to change notification settings - Fork 66
/
script.js
128 lines (105 loc) · 4.68 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
const initSlider = () => {
const imageList = document.querySelector(".slider-wrapper .center_div");
const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
let maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;
const scrollAmount = imageList.clientWidth;
const handleSlideButtons = () => {
slideButtons[0].style.visibility = imageList.scrollLeft <= 0 ? "hidden" : "visible";
slideButtons[1].style.visibility = imageList.scrollLeft >= maxScrollLeft ? "hidden" : "visible";
};
document.querySelector(".slider-wrapper").addEventListener("click", (event) => {
const button = event.target.closest(".slide-button");
if (button) {
const direction = button.id === "prev-slide" ? -1 : 1;
imageList.scrollBy({ left: scrollAmount * direction, behavior: "smooth" });
}
});
imageList.addEventListener("scroll", handleSlideButtons);
const toggleBtn = document.querySelector(".sidebar-toggle");
const outerSidebar = document.querySelector(".outer-sidebar");
function showOverlay() {
document.body.classList.add('overlay-visible');
}
function hideOverlay() {
document.body.classList.remove('overlay-visible');
}
toggleBtn.addEventListener("click", function (event) {
event.stopPropagation();
outerSidebar.classList.toggle("show-sidebar");
if (outerSidebar.classList.contains("show-sidebar")) {
showOverlay();
document.addEventListener("click", closeSidebarOnClickOutside);
} else {
hideOverlay();
document.removeEventListener("click", closeSidebarOnClickOutside);
}
});
function closeSidebarOnClickOutside(event) {
if (!outerSidebar.contains(event.target) && !toggleBtn.contains(event.target)) {
outerSidebar.classList.remove("show-sidebar");
hideOverlay();
document.removeEventListener("click", closeSidebarOnClickOutside);
}
}
const sidebarAElements = document.querySelectorAll(".links a");
sidebarAElements.forEach(aElement => {
aElement.addEventListener("click", function () {
outerSidebar.classList.remove("show-sidebar");
hideOverlay();
document.removeEventListener("click", closeSidebarOnClickOutside);
});
});
};
window.addEventListener("load", initSlider);
document.addEventListener("DOMContentLoaded", function () {
// Fetch contributors data from the JSON file
fetch("contributors.json")
.then(response => response.json())
.then(data => displayContributors(data))
.catch(error => console.error("Error fetching contributors:", error));
});
// Function to display contributors in the HTML
// script.js
async function fetchContributors(owner, repo) {
try {
const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
if (!response.ok) {
throw new Error(`Failed to fetch contributors for ${owner}/${repo}. Status: ${response.status}`);
}
const contributors = await response.json();
return contributors;
} catch (error) {
console.error(`Error fetching contributors for ${owner}/${repo}:`, error);
// You might want to handle the error or display a message to the user
return [];
}
}
async function displayContributors(contributors) {
const contributorsList = document.getElementById("contributors-list");
for (const contributor of contributors) {
try {
const response = await fetch(`https://api.github.com/users/${contributor.login}`);
if (!response.ok) {
throw new Error(`Failed to fetch GitHub user (${contributor.login}) details. Status: ${response.status}`);
}
const user = await response.json();
const listItem = document.createElement("li");
listItem.innerHTML = `
<div class="contributor-item">
<img src="${user.avatar_url}" alt="${contributor.login}'s profile picture" class="contributor-image">
<a href="https://github.com/${contributor.login}" target="_blank">${contributor.login}</a>
</div>`;
contributorsList.appendChild(listItem);
} catch (error) {
console.error(`Error fetching GitHub user (${contributor.login}) details:`, error);
// You might want to display an error message to the user
}
}
}
const owner = 'ShwetKhatri2001';
const repo = 'Swetify-Music';
fetchContributors(owner, repo)
.then(contributors => {
// Do something with the contributors, e.g., display them
displayContributors(contributors);
});