diff --git a/slideshowpure.js b/slideshowpure.js index d802f34..7be5490 100644 --- a/slideshowpure.js +++ b/slideshowpure.js @@ -75,8 +75,8 @@ const slidesInit = async () => { backdropOverlay.className = "backdrop-overlay"; const backdropContainer = document.createElement("div"); backdropContainer.className = "backdrop-container"; - backdropContainer.appendChild(backdrop); - backdropContainer.appendChild(backdropOverlay); + backdropContainer.Child(backdrop); + backdropContainer.Child(backdropOverlay); const logo = document.createElement("img"); logo.className = "logo"; logo.src = `${window.location.origin}/Items/${itemId}/Images/Logo`; @@ -87,8 +87,8 @@ const slidesInit = async () => { logoImgBlur.className = "featured-logo-blur"; const logoContainer = document.createElement("div"); logoContainer.className = "logo-container"; - logoContainer.appendChild(logo); - logoContainer.appendChild(logoImgBlur); + logoContainer.Child(logo); + logoContainer.Child(logoImgBlur); const featuredContent = document.createElement("div"); featuredContent.className = "featured-content"; featuredContent.textContent = title; @@ -98,7 +98,7 @@ const slidesInit = async () => { truncateText(plotElement, 360); const plotContainer = document.createElement("div"); plotContainer.className = "plot-container"; - plotContainer.appendChild(plotElement); + plotContainer.Child(plotElement); const gradientOverlay = document.createElement("div"); gradientOverlay.className = "gradient-overlay"; const runTimeElement = document.createElement("div"); @@ -122,14 +122,14 @@ const slidesInit = async () => { imdbLogo.alt = "IMDb Logo"; imdbLogo.style.width = "30px"; imdbLogo.style.height = "30px"; - ratingTest.appendChild(imdbLogo); + ratingTest.Child(imdbLogo); if (typeof rating === "number") { const formattedRating = rating.toFixed(1); ratingTest.innerHTML += `${formattedRating} ⭐`; } else { ratingTest.innerHTML += `N/A ⭐`; } - ratingTest.appendChild(createSeparator()); + ratingTest.Child(createSeparator()); const tomatoRatingDiv = document.createElement("div"); tomatoRatingDiv.className = "tomato-rating"; const tomatoLogo = document.createElement("img"); @@ -156,10 +156,10 @@ const slidesInit = async () => { tomatoLogo.style.height = "17px"; criticLogo.style.width = "15px"; criticLogo.style.height = "15px"; - tomatoRatingDiv.appendChild(tomatoLogo); - tomatoRatingDiv.appendChild(valueElement); - tomatoRatingDiv.appendChild(criticLogo); - tomatoRatingDiv.appendChild(createSeparator()); + tomatoRatingDiv.Child(tomatoLogo); + tomatoRatingDiv.Child(valueElement); + tomatoRatingDiv.Child(criticLogo); + tomatoRatingDiv.Child(createSeparator()); const ageRatingDiv = document.createElement("div"); ageRatingDiv.className = "age-rating"; if (item.OfficialRating) { @@ -172,13 +172,13 @@ const slidesInit = async () => { premiereDate.className = "date"; const year = date ? new Date(date).getFullYear() : "N/A"; premiereDate.textContent = isNaN(year) ? "N/A" : year; - ratingTest.appendChild(tomatoRatingDiv); - ratingTest.appendChild(document.createTextNode(calender)); - ratingTest.appendChild(premiereDate); - ratingTest.appendChild(createSeparator()); - ratingTest.appendChild(ageRatingDiv); - ratingTest.appendChild(createSeparator()); - ratingTest.appendChild(runTimeElement); + ratingTest.Child(tomatoRatingDiv); + ratingTest.Child(document.createTextNode(calender)); + ratingTest.Child(premiereDate); + ratingTest.Child(createSeparator()); + ratingTest.Child(ageRatingDiv); + ratingTest.Child(createSeparator()); + ratingTest.Child(runTimeElement); function parseGenres(genresArray) { if (genresArray && genresArray.length > 0) { return genresArray.slice(0, 3).join(" 🔹 "); @@ -191,7 +191,7 @@ const slidesInit = async () => { genreElement.innerHTML = parseGenres(genresArray); const infoContainer = document.createElement("div"); infoContainer.className = "info-container"; - infoContainer.appendChild(ratingTest); + infoContainer.Child(ratingTest); const buttonContainer = document.createElement("div"); buttonContainer.className = "button-container"; const playButton = document.createElement("button"); @@ -246,9 +246,9 @@ const slidesInit = async () => { detailButton.onclick = () => { window.top.location.href = `/#!/details?id=${itemId}`; }; - buttonContainer.appendChild(detailButton); - buttonContainer.appendChild(playButton); - slide.append( + buttonContainer.Child(detailButton); + buttonContainer.Child(playButton); + slide.( logoContainer, backdropContainer, gradientOverlay, @@ -271,7 +271,7 @@ const slidesInit = async () => { ]); if (backdropExists && logoExists) { const slideElement = createSlideElement(item, title); - container.appendChild(slideElement); + container.Child(slideElement); if (container.children.length === 1) { showSlide(0); } @@ -449,6 +449,40 @@ const slidesInit = async () => { rightArrow.innerHTML = ''; container.appendChild(leftArrow); container.appendChild(rightArrow); + + let touchStartX = 0; + let touchEndX = 0; + const minSwipeDistance = 50; + container.addEventListener( + "touchstart", + (event) => { + touchStartX = event.touches[0].clientX; + }, + { passive: false } + ); + container.addEventListener( + "touchmove", + (event) => { + touchEndX = event.touches[0].clientX; + }, + { passive: false } + ); + container.addEventListener( + "touchend", + (event) => { + const swipeDistance = touchEndX - touchStartX; + if (Math.abs(swipeDistance) > minSwipeDistance) { + event.preventDefault(); + event.stopPropagation(); + if (swipeDistance < 0) { + updateCurrentSlide(currentSlideIndex + 1); + } else { + updateCurrentSlide(currentSlideIndex - 1); + } + } + }, + { passive: false } + ); leftArrow.addEventListener("click", () => updateCurrentSlide(currentSlideIndex - 1) );