epicpedia

2 months ago · f976044d73
parent d481ff2272
commit f976044d73
1 changed files with 38 additions and 7 deletions
--- a/epicpedia_2024/showdiff.html
+++ b/epicpedia_2024/showdiff.html
@ -3,15 +3,32 @@
    <head>
        <style>
            body {
-                font-face: monospace;
+                font-family: monospace;
                margin: 5%;
            }
-            ins { color: green }
-            del { color: red }
+            #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;
@ -21,14 +38,15 @@
            }
            .revision .body .mw-diff-inline-changed {
                 color: white;
+                visibility: hidden;
            }

        </style>
    </head>
    <body>
-        <div>
-            title: <input type="text" name="title" value="Han Kang" /> 
-            revid:<input type="text" value="376586279" name="revision" /> 
+        <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>
@ -39,7 +57,9 @@
            <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",
@ -57,6 +77,7 @@
            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();
@ -74,7 +95,17 @@
                    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;
+                    
+                    // 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;                    
                }
            })