wiki.erg.be/map
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

wireframe poc

Browse Source
This commit is contained in:
Michael Murtaugh
2019-06-10 09:57:42 +02:00
parent c14e1c08c2
commit 5a94d619d5
2 changed files with 151 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
custom_scroller_iframe.js Normal file
View File

@@ -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);
})
}

54
index.wireframe.html Normal file
View File

@@ -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>