Commit 70a4edb5 authored by Michael Murtaugh's avatar Michael Murtaugh

viz of full changeset with keys

parent e480510c
......@@ -8,6 +8,38 @@
background: yellow;
color: black;
}
#content_bank {
white-space: pre-wrap;
}
div.op {
height: 2em;
}
.op .label {
padding: 6px;
margin-right: 0.5em;
}
.op .insert {
background: green;
}
.op .hold {
background: yellow;
}
.op .delete {
background: red;
}
.toggle_compacted .toggle_body {
display: none;
}
.toggle .toggle_trigger {
cursor: pointer;
}
.toggle .toggle_trigger:before {
content: '\25BE';
}
.toggle_compacted .toggle_trigger:before {
content: '\25B8';
}
</style>
</head>
<body>
......@@ -22,12 +54,31 @@
<button id="next">&rarr;</button>
<input type="checkbox" id="animate"><label for="animate">animate</label>
</div>
<div id="content"></div>
<div id="content">
<div class="toggle toggle_compacted">
<h3 class="toggle_trigger">raw</h3>
<div id="content_raw" class="toggle_body"></div>
</div>
<div class="toggle">
<h3 class="toggle_trigger">diff</h3>
<div id="content_summary" class="toggle_body"></div>
</div>
<div class="toggle">
<h3 class="toggle_trigger">ops</h3>
<div id="content_ops" class="toggle_body"></div>
</div>
<div class="toggle">
<h3 class="toggle_trigger">bank</h3>
<div id="content_bank" class="toggle_body"></div>
</div>
</div>
<script src="dist/etherpad.js"></script>
<script>
let content = document.getElementById("content"),
div = document.createElement("div"),
let content_raw = document.getElementById("content_raw"),
content_summary = document.getElementById("content_summary"),
content_bank = document.getElementById("content_bank"),
content_ops = document.getElementById("content_ops"),
rev = document.getElementById("rev"),
total_revs = document.getElementById("total_revs"),
prev = document.getElementById("prev"),
......@@ -35,20 +86,48 @@ let content = document.getElementById("content"),
current_rev = 0,
pad;
content.appendChild(div);
function htmlify_changeset_op (op) {
var ret = document.createElement("div"),
opstr = document.createElement('span'),
extent = document.createElement('span'),
raw = document.createElement("span");
ret.classList.add("op");
opstr.textContent = op.op;
opstr.classList.add("label");
opstr.classList.add(op.op);
ret.appendChild(opstr);
var x = (op.lines ? `${op.lines} lines/` : '');
x += (op.chars ? `${op.chars} chars` : '');
extent.textContent = x;
ret.appendChild(extent);
raw.classList.add("raw");
raw.textContent = " (" + op.raw + ")";
ret.appendChild(raw);
return ret;
}
function show_changeset (n) {
rev.innerHTML = n;
content.textContent = pad.changesets[n].raw;
let cs = pad.changesets[n];
content_raw.textContent = cs.raw;
content_summary.textContent = "source length: " + cs.source_length + ", change: " + (cs.final_op == ">" ? "+" : "-") + cs.final_diff;
content_ops.innerHTML = "";
for (var i=0, l=cs.ops.length; i<l; i++) {
content_ops.appendChild(htmlify_changeset_op(cs.ops[i]));
}
content_bank.textContent = cs.bank;
}
next.addEventListener("click", e => {
function do_next () {
if (current_rev < pad.last_rev) { show_changeset(++current_rev); }
})
}
function do_prev () {
if (current_rev > 0) { show_changeset(--current_rev); }
}
prev.addEventListener("click", e => {
if (current_rev > 0) { show_changeset(--current_rev); }
})
next.addEventListener("click", do_next);
prev.addEventListener("click", do_prev);
async function load_link (link) {
pad = await etherpad.Etherpad.load(link.href, link.textContent);
......@@ -74,6 +153,24 @@ document.addEventListener("DOMContentLoaded", e => {
load_link(document.getElementById("use"));
});
var toggle_elts = document.querySelectorAll(".toggle");
for (let i=0, len=toggle_elts.length; i<len; i++) {
let t = toggle_elts[i],
trigger = t.querySelector(".toggle_trigger"),
body = t.querySelector(".toggle_body");
trigger.addEventListener("click", e => {
t.classList.toggle("toggle_compacted");
});
}
document.addEventListener("keydown", e => {
//console.log("keydown", e, e.keyCode);
if (e.keyCode == 39) {
// right
do_next();
} else if (e.keyCode == 37) {
do_prev();
}
})
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment