move slides to own js file and add static click

2 files changed, 70 insertions, 55 deletions

diff --git a/src/index.js b/src/index.js
index 4a0298d..21d0134 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
-const Flickity = require("flickity")
-import "flickity/dist/flickity.min.css"
+import initSlides from "./slides.js"
+
+initSlides()
 
 const apiKey = "m5nqOoBc4uhAba21gZdCP3z8D3JT4GPxDXL2psd52EA"
 console.log(apiKey)
@@ -36,56 +37,3 @@ function anchorRedirect(e) {
 
 for (const a of document.querySelectorAll("footer a"))
 	a.addEventListener("click", anchorRedirect)
-
-function scroll(progress) {
-	const normalizedProgress = progress / (1 / (flkty.cells.length-1))
-	const liveSelectedIndex = Math.round(normalizedProgress)
-	const localizedProgress = normalizedProgress - liveSelectedIndex
-
-	const prevSelectedCell = flkty.cells.at(liveSelectedIndex-1).element
-	const liveSelectedCell = flkty.cells.at(liveSelectedIndex     % flkty.cells.length).element
-	const nextSelectedCell = flkty.cells.at((liveSelectedIndex+1) % flkty.cells.length).element
-
-	const prevSelectedImage = prevSelectedCell.firstElementChild
-	const liveSelectedImage = liveSelectedCell.firstElementChild
-	const nextSelectedImage = nextSelectedCell.firstElementChild
-
-	const prevMargin = prevSelectedCell.clientWidth - prevSelectedImage.clientWidth
-	const liveMargin = liveSelectedCell.clientWidth - liveSelectedImage.clientWidth
-	const nextMargin = nextSelectedCell.clientWidth - nextSelectedImage.clientWidth
-
-	liveSelectedImage.style.marginLeft = liveMargin / 2 + "px"
-	nextSelectedImage.style.marginLeft = Math.max(0, Math.min(nextMargin, nextMargin * (localizedProgress))) + "px"
-	prevSelectedImage.style.marginLeft = prevMargin - Math.max(0, Math.min(prevMargin, prevMargin * localizedProgress * -1)) + "px" // TODO clean this
-}
-
-var flkty = new Flickity('#slideshow-carousel', {
-	wrapAround: true,
-	prevNextButtons: false,
-	pageDots: false,
-	resize: true,
-})
-
-flkty.on("scroll", scroll)
-
-
-function positionImageStatic(img) {
-	const i = parseInt(img.dataset.index)
-	if (i == flkty.selectedIndex)
-		img.style.marginLeft = (img.parentElement.clientWidth - img.clientWidth) / 2 + "px"
-	else if ((i + 1) % flkty.cells.length == flkty.selectedIndex)
-		img.style.marginLeft = img.parentElement.clientWidth - img.clientWidth + "px"
-}
-
-function imageLoaded(e) { positionImageStatic(e.target) }
-function initImages() {
-	const imgs = document.querySelectorAll("#slideshow-carousel img")
-	for (let i = 0; i < imgs.length; i++) {
-		const img = imgs[i]
-		img.dataset.index = i
-		img.addEventListener("load", imageLoaded)
-		if (img.complete)
-			positionImageStatic(img)
-	}
-}
-initImages()
diff --git a/src/slides.js b/src/slides.js
new file mode 100644
index 0000000..bac2d5a
--- /dev/null
+++ b/src/slides.js
@@ -0,0 +1,67 @@
+const Flickity = require("flickity")
+import "flickity/dist/flickity.min.css"
+
+export default function initSlides() {
+	/* Flickity function for scrolling to ensure next and prev pics are always
+	 * visible and to transition between states */
+	function scroll(progress) {
+		const normalizedProgress = progress / (1 / (flkty.cells.length-1))
+		const liveSelectedIndex = Math.round(normalizedProgress)
+		const localizedProgress = normalizedProgress - liveSelectedIndex
+
+		const prevSelectedCell = flkty.cells.at(liveSelectedIndex-1).element
+		const liveSelectedCell = flkty.cells.at(liveSelectedIndex     % flkty.cells.length).element
+		const nextSelectedCell = flkty.cells.at((liveSelectedIndex+1) % flkty.cells.length).element
+
+		const prevSelectedImage = prevSelectedCell.firstElementChild
+		const liveSelectedImage = liveSelectedCell.firstElementChild
+		const nextSelectedImage = nextSelectedCell.firstElementChild
+
+		const prevMargin = prevSelectedCell.clientWidth - prevSelectedImage.clientWidth
+		const liveMargin = liveSelectedCell.clientWidth - liveSelectedImage.clientWidth
+		const nextMargin = nextSelectedCell.clientWidth - nextSelectedImage.clientWidth
+
+		liveSelectedImage.style.marginLeft = liveMargin / 2 + "px"
+		nextSelectedImage.style.marginLeft = Math.max(0, Math.min(nextMargin, nextMargin * (localizedProgress))) + "px"
+		prevSelectedImage.style.marginLeft = prevMargin - Math.max(0, Math.min(prevMargin, prevMargin * localizedProgress * -1)) + "px" // TODO clean this
+	}
+
+	/* jump to clicked on slide */
+	function staticClick(e, pointer, cellElement, cellIndex) {
+		flkty.select(cellIndex)
+	}
+
+	/* make sure images have correct margin when loaded since scroll function
+	 * depends on them being loaded */
+	function positionImageStatic(img) {
+		const i = parseInt(img.dataset.index)
+		if (i == flkty.selectedIndex)
+			img.style.marginLeft = (img.parentElement.clientWidth - img.clientWidth) / 2 + "px"
+		else if ((i + 1) % flkty.cells.length == flkty.selectedIndex)
+			img.style.marginLeft = img.parentElement.clientWidth - img.clientWidth + "px"
+	}
+
+	function imageLoaded(e) { positionImageStatic(e.target) }
+	function initImages() {
+		const imgs = document.querySelectorAll("#slideshow-carousel img")
+		for (let i = 0; i < imgs.length; i++) {
+			const img = imgs[i]
+			img.dataset.index = i
+			img.addEventListener("load", imageLoaded)
+			if (img.complete)
+				positionImageStatic(img)
+		}
+	}
+
+	/* initialize slides */
+	const flkty = new Flickity('#slideshow-carousel', {
+		wrapAround: true,
+		prevNextButtons: false,
+		pageDots: false,
+		resize: true,
+	})
+
+	flkty.on("scroll", scroll)
+	flkty.on("staticClick", staticClick)
+	initImages()
+}