1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
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()
|
