You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
5.0 KiB
HTML
119 lines
5.0 KiB
HTML
<!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 {
|
|
margin-bottom: 2em;
|
|
text-align: center;
|
|
}
|
|
.revision .timestamp {
|
|
font-style: italic;
|
|
margin-bottom: 1em;
|
|
}
|
|
.revision .user {
|
|
text-transform: uppercase;
|
|
margin-bottom: 1em;
|
|
}
|
|
.revision .comment {
|
|
font-style: italic;
|
|
margin-bottom: 1em;
|
|
}
|
|
.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> |