Skip to content

Commit

Permalink
Align CLI and WASM templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@simoncozens
simoncozens committed Aug 19, 2024
1 parent 2afa5a8 commit fb6766e
Show file tree
Hide file tree
Showing 8 changed files with 515 additions and 617 deletions.
4 changes: 4 additions & 0 deletions src/templates/diffenator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@
font-family: "Font After", "Adobe Notdef";
}

:root {
--node-pt-size: {{ pt_size | int }}px;
}

{% include "style.css" %}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
Expand Down
160 changes: 52 additions & 108 deletions src/templates/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,78 @@
function diffTables_statichtml() {
$("#difftable").empty();
$("#difftable").append(`<h4 class="mt-2 box-title">Table-level details</h4>`);
$("#difftable").append(
renderTableDiff({ tables: report["tables"] }, true).children()
);
$("#difftable .node").on("click", function (e) {
$(this).toggleClass("closed open");
$(this).children(".node").toggle();
e.stopPropagation();
});
}
function buildLocation_statichtml(loc) {
// Set font styles to appropriate axis locations
let rule = document.styleSheets[0].cssRules[2].style;
let cssSetting = "";
let textLocation = "Default";
if (loc.coords) {
cssSetting = Object.entries(loc.coords)
.map(function ([axis, value]) {
return `"${axis}" ${value}`;
})
.join(", ");
textLocation = Object.entries(loc.coords)
.map(function ([axis, value]) {
return `${axis}=${value}`;
})
.join(" ");
rule.setProperty("font-variation-settings", cssSetting);
}

function cmapDiff_static_html() {
if (report.cmap_diff && (report.cmap_diff.new || report.cmap_diff.missing)) {
$("#cmapdiff").append(`<h4 class="mt-2">Added and Removed Encoded Glyphs</h4>`);
if (report["cmap_diff"]["new"]) {
$("#cmapdiff").append(`<h4 class="box-title">Added Glyphs</h4>`);
let added = $("<div>");
for (let glyph of report["cmap_diff"]["new"]) {
addAGlyph(glyph, added);
}
$("#cmapdiff").append(added);
$("#main").empty();

$("#title").html(`<h4 class="mt-2">${textLocation}</h2>`);

if (loc.glyphs) {
$("#main").append("<h4>Modified Glyphs</h4>");
let glyphs = $("<div>");
for (let glyph of loc.glyphs) {
addAGlyph(glyph, glyphs);
}
$("#main").append(glyphs);
}

if (report["cmap_diff"]["missing"]) {
$("#cmapdiff").append(`<h4 class="box-title">Removed Glyphs</h4>`);
let missing = $("<div>");
for (let glyph of report["cmap_diff"]["missing"]) {
addAGlyph(glyph, missing);
if (loc.words) {
$("#main").append("<h4>Modified Words</h4>");
for (let [script, words] of Object.entries(loc.words)) {
let scriptTitle = $(`<h6>${script}</h6>`);
$("#main").append(scriptTitle);
let worddiv = $("<div>");
for (let word of words) {
addAWord(word, worddiv);
}
$("#cmapdiff").append(missing);
$("#main").append(worddiv);
}
} else {
$("#cmapdiff").append(`<p>No changes to encoded glyphs</p>`);
}
}

function buildLocation_statichtml(loc) {
// Set font styles to appropriate axis locations
let rule = document.styleSheets[0].cssRules[2].style
let cssSetting = "";
let textLocation = "Default";
if (loc.coords) {
cssSetting = Object.entries(loc.coords).map(function ([axis, value]) {
return `"${axis}" ${value}`
}).join(", ");
textLocation = Object.entries(loc.coords).map(function ([axis, value]) {
return `${axis}=${value}`
}).join(" ");
rule.setProperty("font-variation-settings", cssSetting)
}

$("#main").empty();

$("#title").html(`<h4 class="mt-2">${textLocation}</h2>`);

if (loc.glyphs) {
$("#main").append("<h4>Modified Glyphs</h4>");
let glyphs = $("<div>");
for (let glyph of loc.glyphs) {
addAGlyph(glyph, glyphs);
}
$("#main").append(glyphs);
}

if (loc.words) {
$("#main").append("<h4>Modified Words</h4>");
for (let [script, words] of Object.entries(loc.words)) {
let scriptTitle = $(`<h6>${script}</h6>`);
$("#main").append(scriptTitle);
let worddiv = $("<div>");
for (let word of words) {
addAWord(word, worddiv);
}
$("#main").append(worddiv);
}
}
$('[data-toggle="tooltip"]').tooltip()

$('[data-toggle="tooltip"]').tooltip();
}

$(function () {
if (report["tables"]) {
diffTables_statichtml();
diffTables(report);
}
cmapDiff_static_html();
$('[data-toggle="tooltip"]').tooltip()
cmapDiff(report);
$('[data-toggle="tooltip"]').tooltip();
if (!report["locations"]) {
$("#title").html("<h4 class='mt-2'>No differences found</h4>");
$("#ui-nav").hide();
return;
$("#title").html("<h4 class='mt-2'>No differences found</h4>");
$("#ui-nav").hide();
return;
}

for (var [index, loc] of report["locations"].entries()) {
var loc_nav = $(`<li class="nav-item">
<a class="nav-link text-secondary" href="#" data-index="${index}">${loc.location.replaceAll(',', ',\u200b')}</a>
<a class="nav-link text-secondary" href="#" data-index="${index}">${loc.location.replaceAll(
",",
",\u200b"
)}</a>
</li>`);
$("#locationnav").append(loc_nav);
}
$("#locationnav li a").on("click", function (e) {
$("#locationnav li a").removeClass("active");
$(this).addClass("active");
$("#locationnav li a").removeClass("active");
$(this).addClass("active");
buildLocation_statichtml(report.locations[$(this).data("index")]);
});
$("#locationnav li a").eq(0).click();

$("#fonttoggle").click(function () {
if ($(this).text() == "Old") {
$(this).text("New");
$(".font-before").removeClass("font-before").addClass("font-after");
} else {
$(this).text("Old");
$(".font-after").removeClass("font-after").addClass("font-before");
}
});

document.styleSheets[0].cssRules[0].style.setProperty(
"src",
"url({{ old_filename }})"
Expand All @@ -123,19 +81,5 @@ $(function () {
"src",
"url({{ new_filename }})"
);

let animationHandle;
function animate () {
$("#fonttoggle").click()
animationHandle = setTimeout(animate, 1000);
}
$("#fontanimate").click(function () {
if ($(this).text() == "Animate") {
$(this).text("Stop");
animate();
} else {
$(this).text("Animate");
clearTimeout(animationHandle);
}
});
setupAnimation();
});
175 changes: 126 additions & 49 deletions src/templates/shared.js
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
function renderTableDiff(node, toplevel) {
var wrapper = $("<div> </div>");
if (!node) {
return wrapper
}
if (Array.isArray(node) && node.length == 2) {
var before = $("<span/>");
before.addClass("attr-before");
before.html(" " + node[0] + " ");
var after = $("<span/>");
after.addClass("attr-after");
after.append(renderTableDiff(node[1], true).children());
wrapper.append(before);
wrapper.append(after);
return wrapper
}
if (node.constructor != Object) {
var thing = $("<span/>");
thing.html(node);
wrapper.append(thing);
return wrapper
}
for (const [key, value] of Object.entries(node)) {
var display = $("<div/>");
display.addClass("node")
if (!toplevel) {
display.hide()
}
display.append(key);
display.append(renderTableDiff(value, false).children());
if (display.children(".node").length > 0) {
display.addClass("closed")
}
wrapper.append(display)
}
return wrapper

var wrapper = $("<div> </div>");
if (!node) {
return wrapper;
}
if (Array.isArray(node) && node.length == 2) {
var before = $("<span/>");
before.addClass("attr-before");
before.html(" " + node[0] + " ");
var after = $("<span/>");
after.addClass("attr-after");
after.append(renderTableDiff(node[1], true).children());
wrapper.append(before);
wrapper.append(after);
return wrapper;
}
if (node.constructor != Object) {
var thing = $("<span/>");
thing.html(node);
wrapper.append(thing);
return wrapper;
}
for (const [key, value] of Object.entries(node)) {
var display = $("<div/>");
display.addClass("node");
if (!toplevel) {
display.hide();
}
display.append(key);
display.append(renderTableDiff(value, false).children());
if (display.children(".node").length > 0) {
display.addClass("closed");
}
wrapper.append(display);
}
return wrapper;
}


function addAGlyph(glyph, where) {
let title = "";
if (glyph.name) {
title = "name: "+glyph.name;
}
let cp = "<br>U+"+glyph.string.charCodeAt(0).toString(16).padStart(4, '0').toUpperCase();
where.append(`
let title = "";
if (glyph.name) {
title = "name: " + glyph.name;
}
let cp =
"<br>U+" +
glyph.string.charCodeAt(0).toString(16).padStart(4, "0").toUpperCase();
where.append(`
<div class="cell-glyph font-before">
${glyph.string}
<div class="codepoint" data-toggle="tooltip" data-html="true" data-title="${title}">
Expand All @@ -55,17 +55,94 @@ function addAGlyph(glyph, where) {
}

function addAWord(diff, where) {
if (!diff.buffer_b) {
diff.buffer_b = diff.buffer_a;
}
where.append(`
if (!diff.buffer_b) {
diff.buffer_b = diff.buffer_a;
}
where.append(`
<div class="cell-word font-before">
<span data-toggle="tooltip" data-html="true" data-title="Before: <pre>${diff.buffer_a}</pre>After: <pre>${diff.buffer_b}</pre><br>difference: ${Math.round(diff.percent*100)/100}%">
<span data-toggle="tooltip" data-html="true" data-title="Before: <pre>${
diff.buffer_a
}</pre>After: <pre>${diff.buffer_b}</pre><br>difference: ${
Math.round(diff.percent * 100) / 100
}%">
${diff.word}
</span>
</div>
`);
}

function diffTables(report) {
$("#difftable").empty();
$("#difftable").append(`<h4 class="mt-2 box-title">Table-level details</h4>`);
$("#difftable").append(
renderTableDiff({ tables: report["tables"] }, true).children()
);
$("#difftable .node").on("click", function (e) {
$(this).toggleClass("closed open");
$(this).children(".node").toggle();
e.stopPropagation();
});
}

function cmapDiff(report) {
if (report.cmap_diff && (report.cmap_diff.new || report.cmap_diff.missing)) {
$("#cmapdiff").append(
`<h4 class="mt-2">Added and Removed Encoded Glyphs</h4>`
);
if (report["cmap_diff"]["new"]) {
$("#cmapdiff").append(`<h4 class="box-title">Added Glyphs</h4>`);
let added = $("<div>");
for (let glyph of report["cmap_diff"]["new"]) {
addAGlyph(glyph, added);
}
$("#cmapdiff").append(added);
}

if (report["cmap_diff"]["missing"]) {
$("#cmapdiff").append(`<h4 class="box-title">Removed Glyphs</h4>`);
let missing = $("<div>");
for (let glyph of report["cmap_diff"]["missing"]) {
addAGlyph(glyph, missing);
}
$("#cmapdiff").append(missing);
}
} else {
$("#cmapdiff").append(`<p>No changes to encoded glyphs</p>`);
}
}

function setupAnimation() {
$("#fonttoggle").click(function () {
if ($(this).text() == "Old") {
$(this).text("New");
$(".font-before").removeClass("font-before").addClass("font-after");
} else {
$(this).text("Old");
$(".font-after").removeClass("font-after").addClass("font-before");
}
});

let animationHandle;
function animate() {
$("#fonttoggle").click();
animationHandle = setTimeout(animate, 1000);
}
$("#fontanimate").click(function () {
if ($(this).text() == "Animate") {
$(this).text("Stop");
animate();
} else {
$(this).text("Animate");
clearTimeout(animationHandle);
}
});
}

export { renderTableDiff, addAGlyph, addAWord }
export {
renderTableDiff,
addAGlyph,
addAWord,
cmapDiff,
diffTables,
setupAnimation,
};
Loading

0 comments on commit fb6766e

Please sign in to comment.