add threshold adjustment function

assets/css/_partial/_footer.scss

@@ -37,6 +37,12 @@ footer {
       padding: 0 4px;
       cursor: pointer;
     }
+    
+    .thid{
+      display: inline-block;
+      text-align: center;
+      width: 48px;
+    }
   }
   
   .footer_imageIndex {

assets/js/theme.js

@@ -2,13 +2,27 @@ const images = document.getElementsByClassName('image')
 
 const featuredPicNum = document.body.getAttribute('featuredPicNum')
 
+const thresholdNum = document.getElementsByClassName('thid')
+
+const threshold = [0, 40, 80, 120, 160, 200]
+
+const thresholdSensitivity = [100, 40, 18, 14, 9, 5]
+
+let thresholdIndex = 2
+
 let globalIndex = 0
 let last = { x: 0, y: 0 }
 
+// fulfill space with zero
 function duper (num) {
   return ('0000' + num).slice(-4)
 }
 
+function thresholdUpdate () {
+  thresholdNum.item(0).innerText = duper(threshold[thresholdIndex])
+}
+
+// footer index number display module
 const footerIndex = document.getElementsByClassName('ftid')
 const numSpan = (numOne, numTwo) => {
   const numOneString = duper(numOne)
@@ -23,8 +37,26 @@ const numSpan = (numOne, numTwo) => {
   footerIndex.item(7).innerText = numTwoString[3]
 }
 
-numSpan(0, featuredPicNum)
+// initialization
+function init () {
+  numSpan(0, featuredPicNum)
+  thresholdUpdate()
+  document.getElementById('thresholdDec').addEventListener('click', function () {
+    if (thresholdIndex > 0) {
+      thresholdIndex--
+      thresholdUpdate()
+    }
+  }, { passive: true })
 
+  document.getElementById('thresholdInc').addEventListener('click', function () {
+    if (thresholdIndex < 5) {
+      thresholdIndex++
+      thresholdUpdate()
+    }
+  }, { passive: true })
+}
+
+// let specified image show
 const activate = (image, x, y) => {
   image.style.left = `${x}px`
   image.style.top = `${y}px`
@@ -35,29 +67,30 @@ const activate = (image, x, y) => {
   last = { x, y }
 }
 
+// absolute distance calculation
 const distanceFromLast = (x, y) => {
   return Math.hypot(x - last.x, y - last.y)
 }
 
+// move handler
 const handleOnMove = e => {
-  if (distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / 20)) {
+  if (distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / thresholdSensitivity[thresholdIndex])) {
+    // images showing array
     const imageIndex = globalIndex % images.length
-
     const lead = images[imageIndex]
     const tail = images[(globalIndex - 5) % images.length]
-
+    // show top image and change index
     activate(lead, e.clientX, e.clientY)
-
     numSpan((imageIndex + 1), featuredPicNum)
-
-    console.log(imageIndex + ' /' + featuredPicNum)
-
+    // hide the image unused
     if (tail) tail.dataset.status = 'inactive'
-
+    // self increment
     globalIndex++
   }
 }
 
+init()
+
 window.onmousemove = e => handleOnMove(e)
 
 window.ontouchmove = e => handleOnMove(e.touches[0])

layouts/partials/footer.html

@@ -7,9 +7,9 @@
 </div>
 <div class="footer_threshold">
   Threshold:
-  <button>-</button>
-  <span>0080</span>
-  <button>+</button>
+  <button id="thresholdDec">-</button>
+  <span class="thid"></span>
+  <button id="thresholdInc">+</button>
 </div>
 <div class="footer_imageIndex">
   <span class="ftid"></span>