stupid huge update lots of cool stuff

1 files changed, 35 insertions, 2 deletions

diff --git a/src/slides.js b/src/slides.js
index 94af74e..fad6472 100644
--- a/src/slides.js
+++ b/src/slides.js
@@ -6,11 +6,19 @@ class Slides {
 	constructor(slidesContainer) {
 		/* previous selected index */
 		this.selectedIndex = 0
+		this.assetIndex = 0
 
 		this.slidesContainer = slidesContainer
 
+		/* append 11 cells to carousel */
+		const carousel = this.slidesContainer.querySelector("#slideshow-carousel")
+		const cellTemplate = this.slidesContainer.querySelector("#carousel-cell-template")
+		this.cells = []
+		for (let i = 0; i < 11; i++)
+			carousel.appendChild(cellTemplate.content.cloneNode(true))
+
 		/* initialize slides */
-		this.flickity = new Flickity("#slideshow-carousel", {
+		this.flickity = new Flickity(carousel, {
 			wrapAround: true,
 			prevNextButtons: false,
 			pageDots: false,
@@ -29,6 +37,9 @@ class Slides {
 
 		seekPrevButton.addEventListener("click", () => { this.flickity.previous() ; this.seek() })
 		seekNextButton.addEventListener("click", () => { this.flickity.next()     ; this.seek() })
+
+		/* initialize seek callback */
+		apiConnector.seekCallbacks.push(c => { this.seekCallback() })
 	}
 
 	seek() {
@@ -40,9 +51,31 @@ class Slides {
 			this.flickity.cells.length  - this.selectedIndex,         // wrap forwards  (-1 ->  0)
 		].reduce((key, v) => Math.abs(v) < Math.abs(key) ? v : key)
 		this.selectedIndex = this.flickity.selectedIndex
+		this.assetIndex += increment
 		apiConnector.seek(increment)
 	}
 
+	seekCallback() {
+		let i
+		if (this.assetIndex !== apiConnector.assetIndex) {
+			this.assetIndex = apiConnector.assetIndex
+			i = apiConnector.movement
+
+			for (; i > 0; i--) this.flickity.next()
+			for (; i < 0; i++) this.flickity.previous()
+			this.selectedIndex = this.flickity.selectedIndex
+		}
+
+		// load new imgs
+		// TODO need to make the 11 cells a constant somehow
+		for (i = 0; i < this.flickity.cells.length; i++) {
+			const x = (i + this.selectedIndex + 6) % this.flickity.cells.length
+			const e = this.flickity.cells[x].element
+			const img = e.firstElementChild
+			img.src = apiConnector.assetSrc(apiConnector.assets[i])
+		}
+	}
+
 	/* Flickity function for scrolling to ensure next and prev pics are always
 	 * visible and to transition between states */
 	scroll(progress) {
@@ -89,7 +122,7 @@ class Slides {
 		for (let i = 0; i < imgs.length; i++) {
 			const img = imgs[i]
 			img.dataset.index = i
-			img.addEventListener("load", this.imageLoaded)
+			img.addEventListener("load", e => { this.imageLoaded(e) })
 			if (img.complete)
 				this.positionImageStatic(img)
 		}