eslint update

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]);
+window.ontouchmove = e => handleOnMove(e.touches[0])