wireframe poc

2019-06-10 09:57:42 +02:00
parent c14e1c08c2
commit 5a94d619d5
2 changed files with 151 additions and 0 deletions
--- a/custom_scroller_iframe.js
+++ b/custom_scroller_iframe.js
@@ -0,0 +1,97 @@
+function custom_scroller_iframe (selt, iframe, debug) {
+    function log () {
+        if (!debug) return;
+        console.log.apply(null, arguments);
+        var msg = "";
+        for (var i=0, l=arguments.length; i<l; i++) {
+            msg += arguments[i] + " ";
+        }
+        debug.innerHTML += "\n"+ msg;
+    }
+    // console.log("selt", selt);
+    // document.addEventListener("scroll", function (e) {
+    //     var sm = selt.scrollHeight - selt.clientHeight;
+    //     console.log("scroll", selt.scrollTop, sm, selt.scrollHeight);
+    // })
+    var dragging = false,
+        drag_ref_y = 0,
+        scroll_ref_y = 0,
+        last_y = 0,
+        starttime = null;
+
+    iframe.addEventListener("load", function (e) {
+        var hc = iframe.contentDocument.querySelector(".header-container");
+        function touchstart (e) {
+            if (dragging) { return; }
+            var nn = e.target.nodeName.toLowerCase(),
+                touch = e;
+            if (e.touches) {
+                if (e.touches.length != 1) { return; }
+                touch = e.touches[0];
+            }
+            if (nn !== "a") {
+                e.preventDefault();
+                e.stopPropagation();
+                drag_ref_y = touch.screenY;
+                last_y = touch.screenY;
+                scroll_ref_y = selt.scrollTop;
+                dragging = true;
+                starttime = new Date().getTime();
+                log("start drag", drag_ref_y, starttime);
+            } else {
+                log("headtouch", nn);
+            }        
+        }
+        function touchmove (e) {
+            if (dragging) {
+                var touch = e;
+                if (e.touches) {
+                    touch = e.touches[0];
+                }
+                last_y = touch.screenY;
+                var dy = touch.screenY - drag_ref_y;
+                selt.scrollTop = scroll_ref_y - dy;
+            }
+        }
+        function touchend (e) {
+            log("touchend", dragging);
+            if (dragging) {
+                dragging = false;
+                var elapsed_time = new Date().getTime() - starttime;
+                // log("end of drag", elapsed_time);
+                if (elapsed_time <= 500) {
+                    var open = false,
+                        scrollMax = selt.scrollHeight - selt.clientHeight;
+                    // do a snap / throw ... direction ??
+                    if (last_y == drag_ref_y) {
+                        // console.log("no change, guessing state");
+                        // toggle current state
+                        var sp = selt.scrollTop;
+                        log("guess", sp/scrollMax);
+                        open = ((sp / scrollMax) < 0.5);
+                    } else {
+                        log("end/drag", last_y, drag_ref_y);
+                        open = (last_y < drag_ref_y);
+                    }
+                    log("THROW", open ? "open" : "closed");
+                    if (open) {
+                        selt.scrollTop = scrollMax;
+                    } else {
+                        selt.scrollTop = 0;
+                    }
+                } else {
+                    log("long", elapsed_time);
+                }            
+            }
+        }
+        hc.addEventListener("touchstart", touchstart);
+        hc.addEventListener("touchmove", touchmove);
+        hc.addEventListener("touchend", touchend);
+        hc.addEventListener("touchcancel", touchend);
+        hc.addEventListener("mousedown", touchstart);
+        hc.addEventListener("mousemove", touchmove);
+        hc.addEventListener("mouseup", touchend);
+        hc.addEventListener("mouseleave", touchend);
+
+    })
+}
--- a/index.wireframe.html
+++ b/index.wireframe.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <meta charset="utf-8">
+<style>
+    body {
+        margin: 0;
+        padding: 0;
+    }
+    #page {
+        position: absolute;
+        left: 0; right: 0; top: 0;
+        height: 160vh;
+        text-align: center;
+        background: gray;
+    }
+    #page.touched {
+        background: #444;
+    }
+    #bottompane {
+        position: absolute;
+        top: 60vh;
+        left: 0; right: 0;
+        height: 100vh;
+        z-index: 2;
+    }
+    #bottompane iframe {
+        border: none;
+        width: 100%;
+        max-width: 800px;
+        height: 100%;
+        background: white;
+    }
+    #debug {
+        font-size: 10px;
+        height: 8em;
+        overflow: auto;
+    }
+</style>
+</head>
+<body>
+    <div id="page">
+        <pre id="debug">debug:</pre>
+        <div id="bottompane">
+            <iframe id="wikiframe" src="/mw"></iframe>
+        </div>
+    </div>
+</body>
+<script src="custom_scroller_iframe.js"></script>
+<script>
+custom_scroller_iframe(document.scrollingElement, document.getElementById("wikiframe"));
+</script>
+</html>