initial commit

1 files changed, 91 insertions, 0 deletions

diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..4a0298d
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,91 @@
+const Flickity = require("flickity")
+import "flickity/dist/flickity.min.css"
+
+const apiKey = "m5nqOoBc4uhAba21gZdCP3z8D3JT4GPxDXL2psd52EA"
+console.log(apiKey)
+const testDiv = document.querySelector("main div")
+
+function showAlbums() {
+	testDiv.innerHTML
+}
+
+function pathnameCallback(e) {
+	console.log(e)
+	//testDiv.innerHTML = ""
+	//switch (window.location.pathname) {
+	//	case "/":
+	//		testDiv.innerHTML = "<p>Hello first page</p>"
+	//	break ;;
+	//	case "/albums":
+	//		testDiv.innerHTML = "<p>Hello albums page</p>"
+	//	break ;;
+	//	case "/settings":
+	//		testDiv.innerHTML = "<p>Hello settings page</p>"
+	//	break ;;
+	//}
+}
+window.addEventListener("popstate", pathnameCallback)
+pathnameCallback()
+
+/* add event listeners for anchor elements in footer */
+function anchorRedirect(e) {
+	e.preventDefault()
+	window.history.pushState({}, "", e.target.href);
+	pathnameCallback()
+}
+
+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()