diff --git a/assets/js/theme.js b/assets/js/theme.js index 1fb7457..8f7f73b 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,35 +1,63 @@ -const images = document.getElementsByClassName("image"); +const images = document.getElementsByClassName('image') -let globalIndex = 0, - last = {x: 0, y: 0}; +const featuredPicNum = document.body.getAttribute('featuredPicNum') + +let globalIndex = 0 +let last = { x: 0, y: 0 } + +function duper (num) { + return ('0000' + num).slice(-4) +} + +const footerIndex = document.getElementsByClassName('ftid') +const numSpan = (numOne, numTwo) => { + const numOneString = duper(numOne) + const numTwoString = duper(numTwo) + footerIndex.item(0).innerText = numOneString[0] + footerIndex.item(1).innerText = numOneString[1] + footerIndex.item(2).innerText = numOneString[2] + footerIndex.item(3).innerText = numOneString[3] + footerIndex.item(4).innerText = numTwoString[0] + footerIndex.item(5).innerText = numTwoString[1] + footerIndex.item(6).innerText = numTwoString[2] + footerIndex.item(7).innerText = numTwoString[3] +} + +numSpan(0, featuredPicNum) const activate = (image, x, y) => { - image.style.left = `${x}px`; - image.style.top = `${y}px`; - image.style.zIndex = globalIndex; + image.style.left = `${x}px` + image.style.top = `${y}px` + image.style.zIndex = '' + globalIndex - image.dataset.status = "active"; + image.dataset.status = 'active' - last = {x, y}; + last = { x, y } } const distanceFromLast = (x, y) => { - return Math.hypot(x - last.x, y - last.y); + return Math.hypot(x - last.x, y - last.y) } const handleOnMove = e => { - if (distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / 20)) { - const lead = images[globalIndex % images.length], - tail = images[(globalIndex - 5) % images.length]; + if (distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / 20)) { + const imageIndex = globalIndex % images.length - activate(lead, e.clientX, e.clientY); + const lead = images[imageIndex] + const tail = images[(globalIndex - 5) % images.length] - if (tail) tail.dataset.status = "inactive"; + activate(lead, e.clientX, e.clientY) - globalIndex++; - } + numSpan((imageIndex + 1), featuredPicNum) + + console.log(imageIndex + ' /' + featuredPicNum) + + if (tail) tail.dataset.status = 'inactive' + + globalIndex++ + } } -window.onmousemove = e => handleOnMove(e); +window.onmousemove = e => handleOnMove(e) -window.ontouchmove = e => handleOnMove(e.touches[0]); \ No newline at end of file +window.ontouchmove = e => handleOnMove(e.touches[0]) diff --git a/layouts/index.html b/layouts/index.html index 01f8693..2fe1918 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,23 +1,31 @@ - + - - {{- partial "head.html" . -}} - {{ .Title }} + + + {{- partial "head.html" . -}} + {{ .Title }}
- {{- partial "header.html" . -}} + {{- partial "header.html" . -}}
- {{ $sourcePath := "images" }} - {{ $gallery := site.GetPage $sourcePath }} - {{ with $gallery.Resources.ByType "image" }} - {{ range . }} - x - {{ end }} - {{ end }} + {{ $sourcePath := "images" }} + {{ $gallery := site.GetPage $sourcePath }} + {{ $images := $gallery.Resources.ByType "image" }} + {{ $index := len $images }} + + {{ range $images }} + {{ $index = sub $index 1}} + + {{ end }} +
-{{- partial "footer.html" . -}} +