https://gv-lastfm-playground.vercel.app/js/swiper.js

1let devSpeed = () => {
2  if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
3    return 667;
4  } else {
5    return 667;
6  }
7};
8
9// Chapter 2
10const chapterTwoIds = [
11  "slide_02_01_01",
12  "slide_02_02_01",
13  "slide_02_03_01",
14  "slide_02_04_01",
15];
16let chapterTwoData = dummyData.catalogue_items;
17
18if (!chapterTwoData || chapterTwoData === null) {
19  chapterTwoIds.forEach((chapter) => {
20    document.getElementById(chapter).remove();
21  });
22} else {
23  if (!chapterTwoData.artists.total) {
24    document.getElementById("slide_02_01_01").remove();
25  }
26  if (!chapterTwoData.albums.total) {
27    document.getElementById("slide_02_02_01").remove();
28  }
29  if (!chapterTwoData.tracks.total) {
30    document.getElementById("slide_02_03_01").remove();
31  }
32  if (!dummyData.scrobble_stats && !dummyData.scrobble_stats.total_scrobbles) {
33    document.getElementById("slide_02_04_01").remove();
34  }
35}
36
37// Chapter 3
38const chapterThreeIds = [
39  "slide_03_01_01",
40  "slide_03_02_01",
41  "slide_03_03_01",
42  "slide_03_04_01",
43];
44let chapterThreeData = dummyData.scrobble_stats.listening_time;
45
46if (!chapterThreeData) {
47  chapterThreeIds.forEach((chapter) => {
48    document.getElementById(chapter).remove();
49  });
50}
51
52// Chapter 4
53const chapterFourIds = [
54  "slide_04_01_01",
55  "slide_04_02_01",
56  "slide_04_02_02",
57  "slide_04_03_01",
58  "slide_04_03_02",
59  "slide_04_04_01",
60  "slide_04_04_02",
61];
62let chapterFourData = dummyData.top_100_listener;
63
64if (!chapterFourData) {
65  chapterFourIds.forEach((chapter) => {
66    document.getElementById(chapter).remove();
67  });
68} else {
69  if (!chapterFourData.artist) {
70    document.getElementById("slide_04_02_01").remove();
71    document.getElementById("slide_04_02_02").remove();
72  }
73  if (!chapterFourData.album) {
74    document.getElementById("slide_04_03_01").remove();
75    document.getElementById("slide_04_03_02").remove();
76  }
77  if (!chapterFourData.track) {
78    document.getElementById("slide_04_04_01").remove();
79    document.getElementById("slide_04_04_02").remove();
80  }
81}
82
83// Chapter 5
84const chapterFiveIds = [
85  "slide_05_01_01",
86  "slide_05_02_01",
87  "slide_05_03_01",
88  "slide_05_04_01",
89];
90let chapterFiveTwoData = dummyData["monthly_top_tags"];
91let chapterFiveThreeDataTwo = dummyData["weekly_listening_clock"];
92let chapterFiveFourData =
93  dummyData.biggest_day &&
94  (dummyData.biggest_day.scrobble_clock ||
95    dummyData.biggest_day.unique_artist_clock ||
96    dummyData.biggest_day.unique_album_clock ||
97    dummyData.biggest_day.unique_track_clock);
98
99if (!chapterFiveTwoData && !chapterFiveThreeDataTwo && !chapterFiveFourData) {
100  chapterFiveIds.forEach((chapter) => {
101    document.getElementById(chapter).remove();
102  });
103} else {
104  if (!chapterFiveTwoData) {
105    document.getElementById("slide_05_02_01").remove();
106  }
107  if (!chapterFiveThreeDataTwo || !chapterFiveThreeDataTwo.hours_each_week) {
108    document.getElementById("slide_05_03_01").remove();
109  }
110  if (!chapterFiveFourData) {
111    document.getElementById("slide_05_04_01").remove();
112  }
113}
114
115// Chapter 6
116const chapterSixIds = [
117  "slide_06_01_01", //top artist intro
118  "slide_06_02_02", //top artist
119  "slide_06_03_01", //bubble chart
120  "slide_06_04_01", //top album intro
121  "slide_06_04_02", //top album
122  "slide_06_05_01", //quilt
123  "slide_06_06_02", //top track
124  "slide_06_07_01", //top 5 tracks
125];
126
127const chapterSixTwoData =
128  dummyData.top_item_charts && dummyData.top_item_charts.top_artists;
129const chapterSixThreeData =
130  dummyData.top_item_charts && dummyData.top_item_charts.top_artists;
131const chapterSixFourData =
132  dummyData.top_item_charts && dummyData.top_item_charts.top_albums;
133const chapterSixFiveData =
134  dummyData.top_item_charts && dummyData.top_item_charts.top_albums;
135const chapterSixSixData =
136  dummyData.top_item_charts && dummyData.top_item_charts.top_tracks;
137const chapterSixSevenData =
138  dummyData.top_item_charts && dummyData.top_item_charts.top_tracks;
139
140if (
141  !chapterSixTwoData &&
142  !chapterSixThreeData &&
143  !chapterSixFourData &&
144  !chapterSixFiveData &&
145  !chapterSixSixData &&
146  !chapterSixSevenData
147) {
148  chapterSixIds.forEach((chapter) => {
149    document.getElementById(chapter).remove();
150  });
151} else {
152  if (!chapterSixTwoData) {
153    document.getElementById("slide_06_01_01").remove();
154    document.getElementById("slide_06_01_02").remove();
155  }
156  if (!chapterSixThreeData) {
157    document.getElementById("slide_06_03_01").remove();
158    document.getElementById("slide_06_03_02").remove();
159  }
160  if (!chapterSixFourData) {
161    document.getElementById("slide_06_04_01").remove();
162    document.getElementById("slide_06_04_02").remove();
163  }
164  if (!chapterSixFiveData) {
165    document.getElementById("slide_06_05_01").remove();
166  }
167  if (!chapterSixSixData) {
168    document.getElementById("slide_06_06_02").remove();
169  }
170  if (!chapterSixSevenData) {
171    document.getElementById("slide_06_07_01").remove();
172  }
173}
174
175// Chapter 7
176const chapterSevenIds = ["slide_07_01_02"];
177
178const chapterSevenData =
179  dummyData.scrobble_stats &&
180  dummyData.catalogue_items &&
181  dummyData.catalogue_items.tracks &&
182  dummyData.catalogue_items.albums &&
183  dummyData.catalogue_items.artists &&
184  dummyData.top_item_charts;
185
186if (!chapterSevenData) {
187  document.getElementById("slide_07_01_02").remove();
188}
189
190let swiper = new Swiper(".main-slider", {
191  direction: "vertical",
192  speed: devSpeed(),
193  slidesPerView: 1,
194  initialSlide: 0,
195  spaceBetween: 0,
196  loop: false,
197  delay: 333,
198  threshold: 5,
199  init: false,
200  virtual: true,
201  mousewheel: {
202    releaseOnEdges: false,
203    thresholdTime: 2000,
204  },
205  keyboard: {
206    enabled: true,
207  },
208  navigation: {
209    nextEl: ".swiper-next-button",
210    prevEl: ".swiper-prev-button",
211  },
212});
213
214let updatePagination = (swiper) => {
215  let swiperSlides = Array.from(swiper.virtual.slides).filter((item) =>
216    item.querySelector(".pagination") !== null ? item : null
217  );
218  let paginations = Array.from(document.getElementsByClassName("pagination"));
219
220  let paginationFragment = (index) =>
221    `<div class="pagination-fragment">${index} of ${swiperSlides.length}</div>`;
222
223  // find a way to get the correct position from the swiperSlides array
224  let paginationDots = (index) => {
225    let dots = swiperSlides
226      .map((element, slideIndex) => {
227        let isActive = index === slideIndex ? "active" : "not-active";
228        return `<span class=${isActive} onclick='swiper.slideTo(${element.dataset.swiperSlideIndex}, 1000, false)'></span>`;

229      })
230      .join(" ");
231
232    return `<div class="pagination-dots">${dots}</div>`;
233  };
234
235  paginations.forEach((item) => {
236    let index = swiperSlides.indexOf(item.closest(".swiper-slide"));
237    let fragment = paginationFragment(index + 1);
238    let dots = paginationDots(index);
239    let pagination = dots + fragment;
240    item.innerHTML = pagination;
241  });
242};
243
244swiper.on("slideChangeTransitionEnd", (swiper) => {
245  updatePagination(swiper);
246});