const topItemsContainer = document.getElementById("topItems"); const gridItemsContainer = document.getElementById("gridItems"); /* First Two Elements Allways Renders as bigger top items */ const podcasts = [ { imgUrl: "https://s.content4travel.com/itkbaltic/YT_2024_07_30_8239dd5689.jpg", title: "Kelionė į Taso salą - Paplūdimio gultas už 50€ ir labiausiai fotografuojama salos vieta", href: "/video/kelione-i-taso-sala-papludimio-gultas-uz-50euro-ir-labiausiai-fotografuojama-salos-vieta/", number: "2024-07-30", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_2024_07_22_4b3b49863f.jpg", title: "Kelionė į Taso salą - Marmuro paplūdimys ir geriausios alyvuogės šalyje", href: "/video/kelione-i-taso-sala-marmuro-papludimys-ir-geriausios-alyvuoges-salyje/", number: "2024-07-22", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2024_02_22_ed65fc87e4.jpg?2024-02-26T11:35:49.637Z", title: "Evija - Graikijos sala, kurioje džiaugiasi siela ir kūnas", href: "/video/evija-graikijos-sala-kurioje-dziaugiasi-siela-ir-kunas/ ", number: "2024-02-22", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_12_28_3fbd12ecc0.jpg?2023-12-27T08:55:41.085Z", title: "300 dienų saulės Šiaurės Kipre", href: "/video/300-dienu-saules-siaures-kipre/ ", number: "
2023-12-27", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_12_27_ac25f8c165.jpg?2023-12-27T08:55:41.146Z", title: "Neapsakomo grožio kraštas, Safari gimtinė: Kenija", href: "/video/neapsakomo-grozio-krastas-safari-gimtine-kenija/ ", number: "2023-12-27", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_12_16_8320446951.jpg?2023-12-19T13:13:18.458Z", title: "Povandeninis Marsa Alamo pasaulis", href: "/video/povandeninis-marsa-alamo-pasaulis/ ", number: "
2023-12-16", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_07_17_a2784ae11e.jpg?2023-12-19T13:20:24.794Z", title: "Madeira - Atlanto sala jūsų nepamirštamoms atostogoms", href: "/video/madeira-atlanto-sala-jusu-nepamirstamoms-atostogoms/", number: "2023-07-17", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_03_15_30d5fc2f31.jpg?2023-12-19T13:13:18.160Z", title: "Unikalios patirtys ir atradimai Madeiroje", number: "
2023-03-15", href: "/video/unikalios-patirtys-ir-atradimai-madeiroje/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_02_07_9940adb9fb.jpg?2023-12-19T13:13:18.865Z", title: "Smaragdinė sala Egėjo jūroje", number: "
2023-02-07", href: "/video/smaragdine-sala-egejo-juroje/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_06_21_982165d235.jpg?2023-12-19T13:13:18.061Z", title: "Pasinerk į nuotykius Marsa Alame!", number: "
2023-01-31", href: "/video/pasinerk-i-nuotykius-marsa-alame/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2023_06_20_5f6e3d0d27.jpg?2023-12-19T13:13:18.669Z", title: "Keliauti ir atrasti - tai nuostabu!", number: "
2023-01-20", href: "/video/keliauti-ir-atrasti-tai-nuostabu/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_2022_09_16_208691dd79.jpg", title: "Su rogėmis per miestą! - Madeira", number: "
2022-09-16", href: "/video/su-rogemis-per-miesta-madeira/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_09_14_a44c2b84a2.jpg?2023-12-19T13:13:18.882Z", title: "Zanzibaras - nuostabūs paplūdimiai ir geras laikas", number: "2022-09-14", href: "/video/zanzibaras-nuostabus-papludimiai-ir-geras-laikas/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_07_23_f6c4edb70b.jpg?2023-12-19T13:13:18.596Z", title: "Mano 2 savaitės Madeiroje: viskas, ką turite žinoti!", number: "2022-07-23", href: "/video/mano-2-savaites-madeiroje-viskas-ka-turite-zinoti/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_06_12_66c739f7b2.jpg?2023-12-19T13:13:18.618Z", title: "Kanarai - nesibaigianti gyvenimo fiesta!", number: "
2022-07-14", href: "/video/kanarai-nesibaigianti-gyvenimo-fiesta/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_06_14_0370e074ee.jpg?2023-12-19T13:13:18.710Z", title: "Madeira - Leiskis į gyvenimo nuotykį!", number: "
2022-06-13", href: "/video/madeira-leiskis-i-gyvenimo-nuotyki/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_06_13_f23a498cee.jpg?2023-12-19T13:13:18.835Z", title: "Madeira - mėgaukis kiekviena akimirka!", number: "
2022-06-13", href: "/video/madeira-megaukis-kiekviena-akimirka/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_05_19_56ffc158ed.jpg?2023-12-19T13:13:15.795Z", title: "Atrask Afrikos magiją!", number: "
2022-05-19", href: "/video/atrask-afrikos-magija/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_03_14_6ac479f75c.jpg?2023-12-19T13:13:17.465Z", title: "TOP 5 vietos Madeiroje", number: "
2022-03-14", href: "/video/top-5-vietos-madeiroje/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_03_02_27f346190f.jpg?2023-12-19T13:13:15.424Z", title: "Karščiausia šios vasaros kryptis!", number: "
2022-03-02", href: "/video/karsciausia-sios-vasaros-kryptis/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2022_02_23_d9de498d94.jpg?2023-12-19T13:13:18.802Z", title: "Pamilsite šią Graikijos salą!", number: "
2022-02-23", href: "/video/pamilsite-sia-graikijos-sala/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2021_12_19_56e6ae527c.jpg?2023-12-19T13:13:18.250Z", title: "Madeira jus tikrai nustebins!", number: "
2021-12-20", href: "/video/madeira-jus-tikrai-nustebins/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2021_12_21_5640a22d8b.jpg?2023-12-19T13:13:18.258Z", title: "TOP 5 vietos Zakinte", number: "
2021-12-20", href: "/video/top-5-vietos-zakinte/", }, { imgUrl: "https://s.content4travel.com/itkbaltic/YT_LT_2021_12_20_bf3750f153.jpg?2023-12-19T13:13:15.728Z", title: "Albanija - neatrastas erelių kraštas", number: "
2021-12-20", href: "/video/albanija-neatrastas-ereliu-krastas/", }, ]; const renderTopItems = () => { return podcasts .slice(0, 2) .map((item) => { return `

${item.title} ${item.number}

`; }) .join(""); }; const renderGridItems = (array) => { return array .map((item) => { return `

${item.title} ${item.number}

`; }) .join(""); }; topItemsContainer.innerHTML = renderTopItems(); // Pagination const navigationContainer = document.getElementById("paginationNav"); let pageNumber = 1; let numberOfFirstPageElements = 6; let numberOfOtherPagesElements = 9; const totalElements = podcasts.slice(2).length; // first two are used separately as top items let numberOfPages = 1; const screenWidth = window.innerWidth || document.documentElement.clientWidth; if (screenWidth < 700) { numberOfFirstPageElements = 4; numberOfOtherPagesElements = 6; } if (totalElements > numberOfFirstPageElements) { numberOfPages += Math.ceil( (totalElements - numberOfFirstPageElements) / numberOfOtherPagesElements ); } const changePage = (option, elementsContainer, elementsArray) => { if (option === "up" && pageNumber + 1 <= numberOfPages) { pageNumber++; } if (option === "down" && pageNumber - 1 >= 1) { pageNumber--; } if (typeof option === "number" && option >= 1 && option <= numberOfPages) { pageNumber = option; } renderElements(elementsContainer, elementsArray); updateNavigation(); if (pageNumber > 1) { document.getElementById("topItems").style.display = "none"; } else { document.getElementById("topItems").style.display = "grid"; } }; const renderElements = (target, contentArr) => { let startIndex = 0; let endIndex = 0; if (pageNumber === 1) { startIndex = 2; endIndex = numberOfFirstPageElements + 2; } else { startIndex = numberOfFirstPageElements + (pageNumber - 2) * numberOfOtherPagesElements + 2; endIndex = startIndex + numberOfOtherPagesElements; } const paginatedArr = contentArr.slice(startIndex, endIndex); target.innerHTML = renderGridItems(paginatedArr); window.scrollTo(0, 0); }; const updateNavigation = () => { const firstItem = pageNumber === 1 ? "display:none" : "display: block"; const lastItem = pageNumber === numberOfPages ? "display:none" : "display: block"; const paginationElementNavigationHtml = ` `; navigationContainer.innerHTML = paginationElementNavigationHtml; document.querySelector("#prevPage").addEventListener("click", () => { changePage("down", gridItemsContainer, podcasts); }); document.querySelector("#nextPage").addEventListener("click", () => { changePage("up", gridItemsContainer, podcasts); }); document.querySelector("#setPageForm").addEventListener("submit", (event) => { event.preventDefault(); changePage( +event.target[0].value, gridItemsContainer, podcasts, pageNumber ); }); }; renderElements(gridItemsContainer, podcasts); updateNavigation();

Video

Video