-
Notifications
You must be signed in to change notification settings - Fork 0
/
reader.html
98 lines (78 loc) · 2.3 KB
/
reader.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<title>blog :skull:</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml"></link>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<iframe style="width: 100%; border: 1px solid white" src="index.html"></iframe>
<button onclick="spreed()">spreed</button>
<script>
function getTextNodes(element){
let ni = document.createNodeIterator(element, NodeFilter.SHOW_TEXT, (nd)=>nd.parentElement.checkVisibility() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT);
let nds = [];
let nd;
while(1){
nd = ni.nextNode();
if(nd == null)
break;
nds.push(nd);
};
return nds;
}
function getStrPos(nodes, pos, count){
for(let i = 0; i < nodes.length; i++){
if(pos < nodes[i].length){
let range = document.createRange();
range.setStart(nodes[i], pos);
range.setEnd(nodes[i], pos + count);
return range.getBoundingClientRect();
}
pos -= nodes[i].length;
}
}
function getNodeStr(nodes){
return nodes.reduce((a, b)=>a + b.textContent, "");
}
function spreed(element){
element = document.getElementsByTagName("iframe")[0].contentWindow.document.body;
let nodes = getTextNodes(element);
element.style.transform = "translate(0px,0px)";
let str = getNodeStr(nodes);
let si = str.matchAll(/[^\s]+/g);
let cursor = document.createElement("p");
cursor.style.height = "1em";
cursor.style.position = "absolute";
cursor.style.top = "2vw";
cursor.style.width = "100vw";
cursor.style["text-align"] = "center";
cursor.style.background = "transparent";
cursor.innerText = "|";
element.parentElement.appendChild(cursor);
let cpos = cursor.getBoundingClientRect();
let wpx = cpos.x + cpos.width / 2.0;
let wpy = cpos.y + cpos.height / 2.0;
let cx = 0, cy = 0;
let fn = () => {
let del = 80;
let cm = si.next().value;
if(!cm){
cursor.remove();
return;
}
//let pos = getStrPos(nodes, cm.index + Math.min(cm[0].length >> 1.0, 4), 1);
let pos = getStrPos(nodes, cm.index, 1);
let dx = wpx - (pos.x + pos.width / 2);
let dy = wpy - (pos.y + pos.height / 2);
if(dx > 0 || (dx * dx + dy * dy) > (10*cpos.height)**2)
del *= 2;
del += del*((cm[0].length / 5) | 0);
element.style.transform = `translate(${cx += dx}px,${cy += dy}px)`;
setTimeout(fn, del);
}
setTimeout(fn, 500);
}
</script>
</body>
</html>