Merge pull request #49 from googlefonts/ttj-in-json

Build TTJ table in Javascript

src/diffenator2/jfont.py

@@ -5,6 +5,7 @@
 from fontTools.ttLib.tables._f_v_a_r import table__f_v_a_r
 from fontTools.ttLib.tables.S_T_A_T_ import table_S_T_A_T_
 from fontTools.ttLib.tables._c_m_a_p import table__c_m_a_p
+import json
 
 
 class_defs = {
@@ -17,7 +18,7 @@
 
 def serialise_name_table(obj):
     return {
-        (r.nameID, r.platformID, r.platEncID, r.langID): r.toUnicode()
+        f"{r.nameID}/{r.platformID}/{r.platEncID}/{r.langID}": r.toUnicode()
         for r in obj.names
     }
 
@@ -172,7 +173,7 @@ def clean(self, obj):
         if obj is None:
             return None
         if isinstance(obj, tuple):
-            return obj
+            return list(obj)
         if obj == False:
             return False
         res = copy(obj)
@@ -185,28 +186,7 @@ def clean(self, obj):
         return res
 
     def render(self):
-        return self._render(self.diff)
-
-    def _render(self, obj, space=""):
-        s = ""
-        if not obj:
-            return ""
-        if isinstance(obj, tuple):
-            return f'\n{space}<span class="attrib-before">{obj[0]}</span> <span class="attrib-after">{obj[1]}</span>'
-
-        for k, v in obj.items():
-            if isinstance(k, int):
-                k = f"[{k}]"
-            if space:
-                hide = 'style="display:none"'
-            else:
-                hide = ""
-            s += (
-                f'\n{space}<div class="node" {hide}>\n{space}{k}'
-                + self._render(v, space + "  ")
-                + f"\n{space}</div>"
-            )
-        return s
+        return f'<script>var fontdiff = {json.dumps(self.diff)};</script><div id="difftable"></div>'
 
     def summary(self):
         raise NotImplementedError()

src/diffenator2/templates/_base.html

@@ -5,6 +5,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>GFR - {% block title %}{% endblock %}</title>
     {% endblock %}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <style type="text/css">
     {% block style %}
         html{
@@ -210,17 +211,37 @@ <h2>{% block content_name %}{% endblock %}</h2>
 		fontToggle.addEventListener("click", switchFonts);
 	}
 
-    const divs = document.querySelectorAll('.node');
-    divs.forEach(el => el.addEventListener('click', event => {
-    var children = event.target.querySelectorAll(".node");
-    children.forEach(function(e) {
-        if (e.style.display === "none") {
-            e.style.display = "block";
-        } else {
-            e.style.display = "none";
-        }
-    })
-    }));
+	function render(node, toplevel) {
+		var wrapper = $("<div> </div>");
+		if (!node) { return wrapper }
+		if (Array.isArray(node)) {
+			var before = $("<span/>");
+			before.addClass("attr-before");
+			before.html(" " + node[0] + " ");
+			var after = $("<span/>");
+			after.addClass("attr-after");
+			after.append(node[1]);
+			wrapper.append(before);
+			wrapper.append(after);
+			return wrapper
+		}
+		for (const [key, value] of Object.entries(node)) {
+			var display = $("<div/>");
+			display.addClass("node")
+			if (!toplevel && ! key.match(/^\d+$/)) {
+				display.hide()
+			}
+			display.append(key);
+			display.append(render(value, false).children());
+			wrapper.append(display)
+		}
+		return wrapper
+
+	}
+	$(function() {
+		$("#difftable").append(render(fontdiff, true).children())
+		$(".node").on("click", function(event){ $(this).children().toggle(); event.stopPropagation() })
+	});
     {% block js %}
 	{% endblock %}