const topItemsContainer = document.getElementById("topItems"); const gridItemsContainer = document.getElementById("gridItems"); /* First Two Elements Allways Renders as bigger top items */ const setYoutubeThumbail = (url) => { let params = new URL(url).searchParams; let videoId = params.get("v"); const thumbail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`; return thumbail; }; const podcasts = [ { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=wrKMRC9sIb8"), title: "Sri Lanka – co warto wiedzieć? Wywiad z kobietą zakochaną w Cejlonie.", number: "#ItakaPodcast 015", href: "/filmy/015-sri-lanka-co-warto-wiedziec/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=6gfVF2E9Gyg&"), title: "Malta - ponad 5 powodów, dla których warto tam lecieć!", number: "#ItakaPodcast 014", href: "/filmy/powody-dla-ktorych-warto-poleciec-na-malte/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=qmEQ2LFtPE8"), title: "Malediwy - Podróżniczy przewodnik po raju!
", number: "#ItakaPodcast 013", href: "/filmy/013-malediwy-przewodnik/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=PF6toqorXuc"), title: "Thassos - dlaczego ta wyspa jest wyjątkowa?", number: "#ItakaPodcast 012", href: "/filmy/012-thassos-przewodnik/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=3LZj6VUvnXk"), title: "Ponad 10 powodów, dla których warto spędzić urlop na Maderze", number: "#ItakaPodcast 011", href: "/filmy/011-powody-dla-ktorych-warto-spedzic-urlop-na-maderze/", }, { title: "Michał Sadowski - gość specjalny zdradza: Jak wyszukiwać najpiękniejsze foto spoty", imgUrl: setYoutubeThumbail( "https://www.youtube.com/watch?v=8pfMKZodcsU&t=1s" ), number: "#ItakaPodcast 010", href: "/filmy/010-gosc-specjalny-najpiekniejsze-fotospoty/ ", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=sGd0hsRBZ38"), title: "SMART Travel, czyli wszystko o aktualnych trendach w podróżowaniu", number: "#ItakaPodcast 009", href: "/filmy/009-smart-travel-trendy-w-podrozowaniu/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=1SiE2XiamVk"), title: "Bałkany - Praktyczny przewodnik po krajach bałkańskich", number: "#ItakaPodcast 008", href: "/filmy/008-balkany-przewodnik/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=BFYJ2UU0uYk"), title: "Turcja - wszystko co musisz wiedzieć przed podróżą!", number: " #ItakaPodcast 007", href: "/filmy/007-turcja-co-warto-wiedziec/", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=wLwAaKv9nOA"), title: "Kreta - Podróżniczy przewodnik po największej GRECKIEJ wyspie!", number: "#ItakaPodcast 006", href: "/filmy/006-kreta-przewodnik", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=O5sJvphAdMA"), title: "Kolumbia - Co warto wiedzieć przed podróżą? Cz. 2", number: "#ItakaPodcast 005", href: "/filmy/005-kolumbia-co-warto-zobaczyc", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=mH5SDVJLXIg"), title: "Kolumbia - Co warto wiedzieć przed podróżą? Cz. 1", number: "#ItakaPodcast 004", href: "/filmy/004-kolumbia-co-warto-wiedziec", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=Oxqe_sHUNRA"), title: "Tajlandia - Egzotyka dla każdego", number: "#ItakaPodcast 003", href: "/filmy/003-tajlandia-dlaczego-warto", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=4czgWnWHe9U"), title: "Madagaskar - Dlaczego WARTO tam pojechać?", number: "#ItakaPodcast 002", href: "/filmy/002-madagaskar-dlaczego-warto", }, { imgUrl: setYoutubeThumbail("https://www.youtube.com/watch?v=afMJRJGXi4c"), title: "Zanzibar - Co warto zobaczyć w RAJU na Ziemi?", number: "#ItakaPodcast 001", href: "/filmy/001-zanzibar-co-warto-zobaczyc", }, ]; 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();