424 lines
12 KiB
HTML
424 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Markdown Preview</title>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
a{text-decoration:none;}
|
||
|
|
|
||
|
|
p{margin:1em 0;}
|
||
|
|
|
||
|
|
img{max-width:100%;}
|
||
|
|
|
||
|
|
h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;line-height:1em;}
|
||
|
|
h4,h5,h6{ font-weight: bold; }
|
||
|
|
h1{ font-size:2.5em; }
|
||
|
|
h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
|
||
|
|
h3{ font-size:1.5em; }
|
||
|
|
h4{ font-size:1.2em; }
|
||
|
|
h5{ font-size:1em; }
|
||
|
|
h6{ font-size:0.9em; }
|
||
|
|
|
||
|
|
blockquote{color:#666666;margin:0;padding-left: 3em;border-left: 0.5em #EEE solid;}
|
||
|
|
hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
|
||
|
|
|
||
|
|
pre, code{
|
||
|
|
color: #000;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 0.88em;
|
||
|
|
border-radius:3px;
|
||
|
|
background-color: #F8F8F8;
|
||
|
|
border: 1px solid #CCC;
|
||
|
|
}
|
||
|
|
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
|
||
|
|
pre code { border: 0px !important; background: transparent !important; line-height: 1.3em; }
|
||
|
|
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||
|
|
sup { top: -0.5em; }
|
||
|
|
sub { bottom: -0.25em; }
|
||
|
|
ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
|
||
|
|
li p:last-child { margin:0 }
|
||
|
|
dd { margin: 0 0 0 2em; }
|
||
|
|
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
||
|
|
table { border-collapse: collapse; border-spacing: 0; }
|
||
|
|
td, th { vertical-align: top; padding: 4px 10px; border: 1px solid #bbb; }
|
||
|
|
tr:nth-child(even) td, tr:nth-child(even) th { background: #eee; }
|
||
|
|
|
||
|
|
ins { text-decoration: none; color: green }
|
||
|
|
del { text-decoration: none; color: red }
|
||
|
|
ins a{ color: green; text-decoration:none; }
|
||
|
|
del a{ color: red; text-decoration: none; }
|
||
|
|
|
||
|
|
#page { position: relative; }
|
||
|
|
#mes { position: fixed; margin-right: -40px; visibility: hidden; }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var flag_manual = false;
|
||
|
|
|
||
|
|
var smooth_scroll_to = function(target, duration) {
|
||
|
|
target = Math.round(target);
|
||
|
|
duration = Math.round(duration);
|
||
|
|
if (duration === 0) {
|
||
|
|
window.scrollTo(0, target);
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
var start_time = Date.now();
|
||
|
|
var end_time = start_time + duration;
|
||
|
|
|
||
|
|
var start_top = document.documentElement.scrollTop || document.body.scrollTop
|
||
|
|
var distance = target - start_top;
|
||
|
|
|
||
|
|
// based on http://en.wikipedia.org/wiki/Smoothstep
|
||
|
|
var smooth_step = function(start, end, point) {
|
||
|
|
if(point <= start) { return 0; }
|
||
|
|
if(point >= end) { return 1; }
|
||
|
|
var x = (point - start) / (end - start); // interpolation
|
||
|
|
return x*x*(3 - 2*x);
|
||
|
|
}
|
||
|
|
|
||
|
|
// This is to keep track of where the window's scrollTop is
|
||
|
|
// supposed to be, based on what we're doing
|
||
|
|
var previous_top = document.documentElement.scrollTop || document.body.scrollTop
|
||
|
|
|
||
|
|
// This is like a think function from a game loop
|
||
|
|
var scroll_frame = function() {
|
||
|
|
var tmp = document.documentElement.scrollTop || document.body.scrollTop
|
||
|
|
if(tmp != previous_top) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// set the scrollTop for this frame
|
||
|
|
var now = Date.now();
|
||
|
|
var point = smooth_step(start_time, end_time, now);
|
||
|
|
var frameTop = Math.round(start_top + (distance * point));
|
||
|
|
window.scrollTo(0, frameTop);
|
||
|
|
|
||
|
|
// check if we're done!
|
||
|
|
if(now >= end_time) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// If we were supposed to scroll but didn't, then we
|
||
|
|
// probably hit the limit, so consider it done; not
|
||
|
|
// interrupted.
|
||
|
|
var tmp = document.documentElement.scrollTop || document.body.scrollTop
|
||
|
|
if(tmp === previous_top
|
||
|
|
&& tmp !== frameTop) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
previous_top = tmp;
|
||
|
|
|
||
|
|
// schedule next frame for execution
|
||
|
|
setTimeout(scroll_frame, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
// boostrap the animation process
|
||
|
|
setTimeout(scroll_frame, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
var last_html = undefined;
|
||
|
|
|
||
|
|
/** Function count the occurrences of substring in a string;
|
||
|
|
* @param {String} string Required. The string;
|
||
|
|
* @param {String} subString Required. The string to search for;
|
||
|
|
* @param {Boolean} allowOverlapping Optional. Default: false;
|
||
|
|
*/
|
||
|
|
function occurrences(string, subString, allowOverlapping){
|
||
|
|
|
||
|
|
string+=""; subString+="";
|
||
|
|
if(subString.length<=0) return string.length+1;
|
||
|
|
|
||
|
|
var n=0, pos=0;
|
||
|
|
var step=(allowOverlapping)?(1):(subString.length);
|
||
|
|
|
||
|
|
while(true){
|
||
|
|
pos=string.indexOf(subString,pos);
|
||
|
|
if(pos>=0){
|
||
|
|
n++; pos+=step;
|
||
|
|
} else
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
return(n);
|
||
|
|
}
|
||
|
|
|
||
|
|
function unescape1(data) {
|
||
|
|
return decodeURIComponent(escape(window.atob(data)))
|
||
|
|
}
|
||
|
|
|
||
|
|
var g_W;
|
||
|
|
var g_C;
|
||
|
|
|
||
|
|
/* TODO: highligh the W */
|
||
|
|
/* TODO: scroll to W exactly */
|
||
|
|
function setCursor(W, C) {
|
||
|
|
if (flag_manual) {
|
||
|
|
g_W = W;
|
||
|
|
g_C = C;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
W = unescape1(W);
|
||
|
|
var d = document.getElementById('out');
|
||
|
|
for (var i = 0; i < d.childNodes.length; i++) {
|
||
|
|
f = occurrences(d.childNodes[i].textContent, W, false);
|
||
|
|
C = C - f;
|
||
|
|
if (C <= 0) {
|
||
|
|
smooth_scroll_to(d.childNodes[i].offsetTop - window.outerHeight / 3, 500)
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO: make this user configurable
|
||
|
|
// var g_foldType = "struct" | "stacked"
|
||
|
|
//var g_foldType = "struct";
|
||
|
|
var g_foldType = "stacked";
|
||
|
|
|
||
|
|
function setOutput(val) {
|
||
|
|
val = unescape1(val)
|
||
|
|
var out = document.getElementById('out');
|
||
|
|
out.innerHTML = val;
|
||
|
|
document.getElementById("mes").style.visibility="hidden";
|
||
|
|
restoreFoldStatuses();
|
||
|
|
setOnClickHandlerToHeaders();
|
||
|
|
window.onresize();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.onwheel = function(x) {
|
||
|
|
if (!flag_manual) {
|
||
|
|
document.getElementById("mes").style.visibility="visible";
|
||
|
|
flag_manual = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.onkeypress = function(x) {
|
||
|
|
if (x.keyCode == 40 /*Down*/ || x.keyCode == 38 /*Up*/)
|
||
|
|
if (!flag_manual) {
|
||
|
|
document.getElementById("mes").style.visibility="visible";
|
||
|
|
flag_manual = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
window.onresize = function(x) {
|
||
|
|
var mes = document.getElementById("mes");
|
||
|
|
mes.style.marginLeft = (document.body.clientWidth - mes.offsetWidth - 30) + "px";
|
||
|
|
}
|
||
|
|
|
||
|
|
function scroll_automaticaly() {
|
||
|
|
flag_manual = false;
|
||
|
|
document.getElementById("mes").style.visibility="hidden";
|
||
|
|
setCursor(g_W,g_C);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setOnClickHandlerToHeaders() {
|
||
|
|
var hs = ["H1", "H2", "H3", "H4", "H5", "H6", "H7"];
|
||
|
|
for (var i = 0; i < hs.length; i++) {
|
||
|
|
var es = document.getElementsByTagName(hs[i]);
|
||
|
|
if (es == null)
|
||
|
|
continue;
|
||
|
|
for (var ii = 0; ii < es.length; ii++) {
|
||
|
|
es[ii].addEventListener("click", onClickHandler, false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var g_foldStatus = {};
|
||
|
|
|
||
|
|
// merge two objects. usable for "associate arrays"
|
||
|
|
// destination is modified in place and returned
|
||
|
|
// same keys in destination are overwritten by source
|
||
|
|
function merge(d, s) {
|
||
|
|
for (var p in s) {
|
||
|
|
if (s.hasOwnProperty(p)) {
|
||
|
|
d[p] = s[p];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return d;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getHeaderPath(t) {
|
||
|
|
var p = [];
|
||
|
|
var headerLevel = t.nodeName[1];
|
||
|
|
p.push(t.id);
|
||
|
|
while ((t = t.previousElementSibling)) {
|
||
|
|
if (t.nodeName[0] == "H"
|
||
|
|
&& t.nodeName[1] < headerLevel) {
|
||
|
|
headerLevel = t.nodeName[1];
|
||
|
|
p.push(t.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return p;
|
||
|
|
}
|
||
|
|
|
||
|
|
function saveFoldStatus(t, i) {
|
||
|
|
var p = getHeaderPath(t);
|
||
|
|
|
||
|
|
var obj = Object();
|
||
|
|
obj[p.join("#")] = i;
|
||
|
|
|
||
|
|
merge(g_foldStatus, obj);
|
||
|
|
}
|
||
|
|
|
||
|
|
// manualFold: undefined, true, false
|
||
|
|
// headerLevel: 0 - visible, > 0 - how many times folded
|
||
|
|
// contentLevel: 0 - visible, > 0 - how many times folded
|
||
|
|
|
||
|
|
// t["fold"] = [manualFold, headerLevel, contentLevel];
|
||
|
|
|
||
|
|
function getFoldInfo(t) {
|
||
|
|
var i = t["fold"];
|
||
|
|
if (i == undefined) {
|
||
|
|
return {mf: undefined, hl: 0, cl: 0};
|
||
|
|
} else {
|
||
|
|
return i;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function setFoldInfo(t, i) {
|
||
|
|
t["fold"] = i;
|
||
|
|
saveFoldStatus(t, i);
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleStackedFoldInfo(i) {
|
||
|
|
if (i.mf == undefined) {
|
||
|
|
if (i.cl > 0) {
|
||
|
|
i.mf = false;
|
||
|
|
} else {
|
||
|
|
i.mf = true;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
i.mf = !i.mf;
|
||
|
|
}
|
||
|
|
if (i.mf) { // Folded
|
||
|
|
i.hl = 0;
|
||
|
|
i.cl = 1;
|
||
|
|
} else { // Unfolded
|
||
|
|
i.hl = 0;
|
||
|
|
i.cl = 0;
|
||
|
|
}
|
||
|
|
return i;
|
||
|
|
}
|
||
|
|
function updateStackedFoldInfo(infoClickedHeader, infoHeader) {
|
||
|
|
infoHeader.hl = 0;
|
||
|
|
if (infoClickedHeader.mf) {
|
||
|
|
infoHeader.cl = 1;
|
||
|
|
} else {
|
||
|
|
if (infoHeader.mf) {
|
||
|
|
infoHeader.cl = 1;
|
||
|
|
} else {
|
||
|
|
infoHeader.cl = 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return infoHeader;
|
||
|
|
}
|
||
|
|
function toggleStructFoldInfo(i) {
|
||
|
|
if (i.mf == undefined) {
|
||
|
|
i.mf = true;
|
||
|
|
} else {
|
||
|
|
i.mf = !i.mf;
|
||
|
|
}
|
||
|
|
if (i.mf) { // Folded
|
||
|
|
i.hl = 0;
|
||
|
|
i.cl = 1;
|
||
|
|
} else { // Unfolded
|
||
|
|
i.hl = 0;
|
||
|
|
i.cl = 0;
|
||
|
|
}
|
||
|
|
return i;
|
||
|
|
}
|
||
|
|
function updateStructFoldInfo(infoClickedHeader, infoHeader) {
|
||
|
|
if (infoClickedHeader.mf) {
|
||
|
|
infoHeader.hl += 1;
|
||
|
|
infoHeader.cl += 1;
|
||
|
|
} else {
|
||
|
|
infoHeader.hl -= 1;
|
||
|
|
infoHeader.cl -= 1;
|
||
|
|
}
|
||
|
|
return infoHeader;
|
||
|
|
}
|
||
|
|
function applyFold(t, infoClickedHeader, updateFoldInfo) {
|
||
|
|
var headerLevel = t.nodeName[1];
|
||
|
|
var cl = infoClickedHeader.cl;
|
||
|
|
|
||
|
|
while ((t = t.nextElementSibling)
|
||
|
|
&& (t.nodeName[0] != "H" || t.nodeName[1] > headerLevel)) {
|
||
|
|
if (t.nodeName[0] == "H") {
|
||
|
|
infoHeader = updateFoldInfo(infoClickedHeader, getFoldInfo(t));
|
||
|
|
setFoldInfo(t, infoHeader);
|
||
|
|
cl = infoHeader.cl;
|
||
|
|
t.style.display = infoHeader.hl > 0 ? "none" : "";
|
||
|
|
} else {
|
||
|
|
t.style.display = cl > 0 ? "none" : "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return t;
|
||
|
|
}
|
||
|
|
|
||
|
|
function runHeaderPath(p, t, f) {
|
||
|
|
if (t == null) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (p.length == 0) {
|
||
|
|
f(t);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var id = p.pop();
|
||
|
|
while (t != null) {
|
||
|
|
if (t.id == id) {
|
||
|
|
runHeaderPath(p, t, f);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
t = t.nextElementSibling;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function finalElementFunc(i) {
|
||
|
|
return function X(t) {
|
||
|
|
setFoldInfo(t, i);
|
||
|
|
t.style.display = i.hl > 0 ? "none" : "";
|
||
|
|
while ((t = t.nextElementSibling)
|
||
|
|
&& t.nodeName[0] != "H") {
|
||
|
|
t.style.display = i.cl > 0 ? "none" : "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function restoreFoldStatuses() {
|
||
|
|
var foldStatus = g_foldStatus;
|
||
|
|
g_foldStatus = {};
|
||
|
|
|
||
|
|
for (var p in foldStatus) {
|
||
|
|
if (foldStatus.hasOwnProperty(p)) {
|
||
|
|
var i = foldStatus[p];
|
||
|
|
var p = p.split("#");
|
||
|
|
var id = p.pop();
|
||
|
|
runHeaderPath(p, document.getElementById(id), finalElementFunc(i));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onClickHandler() {
|
||
|
|
var t = this;
|
||
|
|
|
||
|
|
if (g_foldType == "struct") {
|
||
|
|
var infoClickedHeader = toggleStructFoldInfo(getFoldInfo(t));
|
||
|
|
|
||
|
|
setFoldInfo(t, infoClickedHeader);
|
||
|
|
applyFold(t, infoClickedHeader, updateStructFoldInfo);
|
||
|
|
} else if (g_foldType == "stacked") {
|
||
|
|
var infoClickedHeader = toggleStackedFoldInfo(getFoldInfo(t));
|
||
|
|
|
||
|
|
setFoldInfo(t, infoClickedHeader);
|
||
|
|
applyFold(t, infoClickedHeader, updateStackedFoldInfo);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id=page>
|
||
|
|
<div id=mes><input type="button" value="Scroll automatically" onclick=scroll_automaticaly() /></div>
|
||
|
|
<div id=out></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|