Location: Pagination working!

src/routes/location/[country]/[location].svelte

@@ -17,8 +17,10 @@
 
 <script>
 	import { onMount } from 'svelte'
+	const { page } = stores()
 
 	// Dependencies
+	import AOS from 'aos'
 	import 'lazysizes'
 	import dayjs from 'dayjs'
 	import advancedFormat from 'dayjs/plugin/advancedFormat'
@@ -37,17 +39,12 @@
 
 	// Props and variables
 	export let photos
-	const { page } = stores()
 	let layoutSetting
-	let pagesTotal = 3
 
 	// Update current location
 	const location = $locations.find(loc => loc.slug === $page.params.location)
 	currentLocation.set({ location, photos })
 
-	// Define full location
-	const locationFull = `${location.name}, ${location.country.name}`
-
 	// Define dates
 	const dateUpdatedFull = photos.length ? dayjs(photos[0].modified_on).format('MMM Do, YYYY') : ''
 	const dateUpdatedDatetime = photos.length ? dayjs(photos[0].modified_on).format('YYYY-MM-DDThh:mm:ss') : ''
@@ -55,17 +52,56 @@
 	const lastUpdated = photos.length ? (dayjs(photos[0].modified_on).isBefore(dayjs().subtract(1, 'M'))) ? dateUpdatedFull : dateUpdatedRelative : ''
 
 
+	/*
+	** Pagination
+	*/
+	let photosPerPage = 2 // 12
+	let currentIndex = photosPerPage
+	const pagesTotal = Math.ceil(photos.length / photosPerPage)
+	const pages = Array.from({ length: pagesTotal }, (v, k) => k + 1).reverse()
+	let pageTranslate = 100 - (100 / pagesTotal)
+
+	// Hide photos by default
+	photos.forEach((photo, index) => photo.hidden = (index + 1 > photosPerPage) ? true : false)
+	let paginatedPhotos = photos.filter(photo => photo.hidden === false)
+
+	// Add more photos to the loop
+	const displayMorePhotos = () => {
+		if (currentIndex < photos.length) {
+			// Display the X next hidden photos
+			const photosToAppend = photos.filter(photo => photo.hidden === true).splice(0, photosPerPage)
+			photosToAppend.forEach(photo => photo.hidden = false)
+
+			// Merge new photos to show to the existing ones
+			paginatedPhotos = [...paginatedPhotos, ...photosToAppend]
+
+			// Increment current index
+			currentIndex = currentIndex + photosPerPage
+
+			// Animate the pagination
+			pageTranslate = pageTranslate - (100 / pagesTotal)
+		} else {
+			currentIndex = photos.length
+		}
+	}
+
+
 	/*
 	** Run code on browser only
 	*/
 	onMount(() => {
 		// Get layout setting from storage
 		layoutSetting = localStorage.getItem('photosLayout')
+
+		if (process.browser) {
+			// Scroll apparitions
+			AOS.init()
+		}
 	})
 </script>
 
 <svelte:head>
-	<title>Houses Of - Beautiful houses of {locationFull}</title>
+	<title>Houses Of - Beautiful houses of {location.name}, {location.country.name}</title>
 </svelte:head>
 
 <section class="place">
@@ -120,27 +156,37 @@
 	</div>
 
 	<div class="photos__view wrap">
-		{#each photos as photo, index}
+		{#each paginatedPhotos as photo, index}
 		<Photo {photo} index={index + 1} />
 		{/each}
 	</div>
 
-	{#if photos.length}
 	<section class="pagination">
-		<div class="pagination__page">
+		{#if photos.length && currentIndex <= photos.length}
+		<div class="pagination__page" class:disabled={currentIndex === photos.length}
+			on:click={displayMorePhotos}
+			on:mouseenter={() => pageTranslate = pageTranslate - ((100 / pagesTotal) * 0.666)}
+			on:mouseleave={() => pageTranslate = pageTranslate + ((100 / pagesTotal) * 0.666)}
+		>
 			<div class="pagination__page--info">page</div>
 			<div class="pagination__page--numbers">
-				<div class="scroll">
+				<div class="scroll" style="transform: translateY(-{pageTranslate}%);">
-					<span>3</span>
+					{#each pages as page}
-					<span>2</span>
+					<span>{page}</span>
-					<span>1</span>
+					{/each}
 				</div>
 			</div>
 			/{pagesTotal}
 		</div>
-		<p class="style-caps pagination__caption">See more photos</p>
+		<p class="pagination__caption style-caps">See more photos</p>
-	</section>
+
+		{:else}
+		<div class="pagination__message">
+			<h3>That's all folks!</h3>
+			<p class="pagination__caption style-caps">Come back later to check out <br>new photos of {location.name}</p>
+		</div>
 		{/if}
 	</section>
+</section>
 
 <Footer />