From 0a7c88a25c011d6281d9655cc3b9064af4d9b4b5 Mon Sep 17 00:00:00 2001
From: KawaiiZapic <zapic233@qq.com>
Date: Sun, 14 Feb 2021 23:49:56 +0800
Subject: [PATCH] Support touch on content box

---
 index.html        | 29 ++++++++++++++++++-
 static/js/main.js | 71 +++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 94 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index aa9c41b..86ec43f 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,7 @@
             </div>
             </div>
             <div class="self-switcher">
-                <div class="switcher-btn text-center selected" id="switcher-btn-1">
+                <div class="switcher-btn text-center" id="switcher-btn-1">
                     <div class="btn-icon"><i class="fa fa-link"></i></div>
                     <div class="btn-text">链接</div>
                 </div>
@@ -128,4 +128,31 @@
         Init(feedType, feedPath, bgArr, senArr);
     })();
 </script>
+<style>
+    .content-container[data-selection="1"] .self-wrapper {
+        transform: translateX(0%);
+    }
+    .content-container[data-selection="1"] .btn-select-indicator {
+        transform: translateX(0%);
+    }
+    .content-container[data-selection="2"] .self-wrapper {
+        transform: translateX(-33.33%);
+    }
+    .content-container[data-selection="2"] .btn-select-indicator {
+        transform: translateX(100%);
+    }
+    .content-container[data-selection="3"] .self-wrapper {
+        transform: translateX(-66.66%);
+    }
+    .content-container[data-selection="3"] .btn-select-indicator {
+        transform: translateX(200%);
+    }
+    .content-container[data-selection="1"] #switcher-btn-1 .btn-icon .fa,.content-container[data-selection="2"] #switcher-btn-2 .btn-icon .fa,.content-container[data-selection="3"] #switcher-btn-3 .btn-icon .fa{
+        font-size: 2.5rem;
+        transform: translateY(.1em);
+    }
+    .content-container[data-selection="1"] #switcher-btn-1 .btn-text, .content-container[data-selection="2"] #switcher-btn-2 .btn-text, .content-container[data-selection="3"] #switcher-btn-3 .btn-text {
+        opacity: 0;
+    }
+</style>
 </html>
diff --git a/static/js/main.js b/static/js/main.js
index 1342e04..87962a3 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -149,13 +149,74 @@ function Init(feedType, feedPath, bgArr, senArr) {
             qSltAll(".switcher-btn").forEach(function (v) {
                 var id = v.id.substr(-1);
                 v.addEventListener("click", function () {
-                    qSlt(".self-wrapper").style.transform = "translateX(-" + 33.3 * (parseInt(id) - 1) + "%)";
-                    qSlt(".btn-select-indicator").style.left = "" + 33.3 * (parseInt(id) - 1) + "%";
-                    qSlt(".selected").classList.remove("selected");
-                    v.classList.add("selected");
+                    qSlt(".content-container").setAttribute("data-selection",id);
                 });
             });
         }, {once: true});
+        qSlt(".content-container").setAttribute("data-selection",1);
+    });
+    var selfWrapper = qSlt(".self-wrapper");
+    var contentCon = qSlt(".content-container");
+    var selInd = qSlt(".btn-select-indicator");
+    function handleTouchMove(eMove) {
+        var rMove = eMove - ((parseInt(contentCon.getAttribute("data-selection")) - 1) / 3 * selfWrapper.offsetWidth);
+        if(rMove > 0) {
+            rMove = Math.atan(rMove / 200) * 50;
+        } else if(rMove < selfWrapper.offsetWidth * -0.6666) {
+            rMove = selfWrapper.offsetWidth * -0.6666 + Math.atan((rMove - selfWrapper.offsetWidth * -0.6666) / 200) * 50;
+        }
+        selfWrapper.style.transform = "translateX(" + (rMove).toString() + "px)";
+        selInd.style.transform = "translateX(" + (-rMove/3).toString() + "px)"
+    }
+    var tid = -1;
+    var tMovement = {
+        x: [0,0,0,0,0],
+        time: [0,0,0,0,0],
+        acc: 0
+    };
+    var eMove = 0;
+    qSlt(".self-wrapper").addEventListener("touchstart",function (e){
+        tid = e.changedTouches[0].identifier;
+        eMove = e.changedTouches[0].pageX;
+        selfWrapper.style.transition = "none";
+        selInd.style.transition = "none";
+    });
+    qSlt(".self-wrapper").addEventListener("touchmove",function (e){
+        if(e.changedTouches[0].identifier !== tid) {
+            return;
+        }
+        var evt = e.changedTouches[0];
+        tMovement.x.unshift(evt.pageX);
+        tMovement.time.unshift(e.timeStamp);
+        tMovement.x.pop();
+        tMovement.time.pop();
+        var x = (tMovement.x[0] + tMovement.x[1] + tMovement.x[2] + tMovement.x[3] + tMovement.x[4]) / 5 - evt.pageX;
+        var time = e.timeStamp - (tMovement.time[0] + tMovement.time[1] + tMovement.time[2] + tMovement.time[3] + tMovement.time[4]) / 5 ;
+        tMovement.acc = x / time;
+        handleTouchMove(evt.pageX - eMove);
+    });
+    qSlt(".self-wrapper").addEventListener("touchcancel",function (e){
+        tid = -1;
+        selfWrapper.style.transition = "";
+        selfWrapper.style.transform = "";
+        selInd.style.transform = "";
+        selInd.style.transition = "";
+    });
+    qSlt(".self-wrapper").addEventListener("touchend",function (e){
+        tid = -1;
+        var evt = e.changedTouches[0];
+        if(Math.abs(tMovement.acc) > 0.5 || Math.abs(eMove - evt.pageX)  > selfWrapper.offsetWidth * 0.2) {
+            var sel = parseInt(contentCon.getAttribute("data-selection"))
+            if(tMovement.acc > 0 && sel < 3) {
+                contentCon.setAttribute("data-selection", sel + 1);
+            } else if(tMovement.acc < 0 &&sel > 1) {
+                contentCon.setAttribute("data-selection", sel - 1);
+            }
+        }
+        selfWrapper.style.transition = "";
+        selfWrapper.style.transform = "";
+        selInd.style.transform = "";
+        selInd.style.transition = "";
     });
 }
-console.log("\n %c Present %c By Zapic \n\n", "color: #fff; background: #fb7299; padding:5px 0;", "background: #efefef; padding:5px 0;");
+console.log("\n %c Present %c By Zapic\n\n", "color: #fff; background: #fb7299; padding:5px 0;", "background: #efefef; padding:5px 0;");