<!doctype html>
< html >
< head >
< style >
body {
font-family: monospace;
margin: 5%;
}
#controls {
margin-bottom: 1em;
}
ins {
color: black;
visibility: visible;
}
del {
color: black;
visibility: visible;
}
#comment { font-style: italic; }
#revision { display: none } /* hide the template */
.revision {
border-bottom: 1px dotted gray;
margin-bottom: 1em;
text-align: center;
}
.revision .user {
text-transform: uppercase;
}
.revision .comment {
font-style: italic;
}
.revision .body .mw-diff-inline-header {
display: none;
}
.revision .body .mw-diff-inline-context {
display: none;
}
.revision .body .mw-diff-inline-changed {
color: white;
visibility: hidden;
}
< / style >
< / head >
< body >
< div id = "controls" >
article title: < input type = "text" name = "title" value = "Han Kang" / >
starting revision (id):< input type = "text" value = "376586279" name = "revision" / >
number of revisions: < input type = "range" name = "numrevs" min = "1" max = "100" value = "10" / >
< button id = "generate" > generate script< / button >
< / div >
< div id = "revision" class = "revision" >
< div class = "timestamp" > < / div >
< div class = "user" > < / div >
< div class = "comment" > < / div >
< div class = "body" > < / div >
< / div >
< div id = "revisions" > < / div >
< script src = "difftime.js" > < / script >
< script >
const dateFormat = new Intl.RelativeTimeFormat('en', { style: 'long' });
let r = {
action: "compare",
format: "json",
fromtitle: "Han Kang",
totitle: "Han Kang",
torelative: "next",
formatversion: 2,
prop: "diff|ids|title|user|comment|parsedcomment|timestamp",
difftype: "inline", // table, inline, unified
origin: "*"
}
let title = document.querySelector("input[name=title]");
let revid = document.querySelector("input[name=revision]");
let numrevs = document.querySelector("input[name=numrevs]");
let api_url = "https://en.wikipedia.org/w/api.php"
// let url = "https://en.wikipedia.org/w/api.php?action=compare&format=json&fromtitle=Han%20Kang&fromrev=376586279&totitle=Han%20Kang&torelative=next&formatversion=2&origin=*";
let generate = document.querySelector("button#generate");
let last_time;
generate.addEventListener("click", async e => {
r.fromrev = parseInt(revid.value);
r.fromtitle = title.value.trim();
r.totitle = r.fromtitle;
for (let x = 0; x< parseInt ( numrevs . value ) ; x + + ) {
console.log(`generate step ${x+1}`);
let resp = await fetch(api_url + "?" + new URLSearchParams(r));
let data = await resp.json();
// https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
let revision = document.querySelector("#revision").cloneNode(true);
revision.removeAttribute("id"); // technically shouldn't have multiple elements with the same id
document.querySelector("#revisions").appendChild(revision);
console.log("generate: got data", data);
revision.querySelector(".body").innerHTML = data.compare.body;
r.fromrev = data.compare.torevid;
console.log("generate, next revid", r.revid);
revision.querySelector(".user").textContent = data.compare.touser;
// revision.querySelector(".timestamp").textContent = data.compare.totimestamp;
console.log("totimestamp", data.compare.totimestamp);
let ts = new Date(data.compare.totimestamp);
if (x == 0) {
revision.querySelector(".timestamp").textContent = ts.toString();
} else {
revision.querySelector(".timestamp").textContent = replaceInWithLater(timeDiff(ts, last_time, dateFormat));
}
last_time = ts.getUTCTime();
revision.querySelector(".comment").textContent = data.compare.tocomment;
}
})
< / script >
< / body >
< / html >
