language_reference.html now uses declarative rendering

calaldees · Oct 18, 2024 · a7a2a9b · a7a2a9b
1 parent ebbe210
commit a7a2a9b
Showing 1 changed file with 19 additions and 53 deletions.
diff --git a/teachprogramming/lib/static/langauge_reference.html b/teachprogramming/lib/static/langauge_reference.html
@@ -66,71 +66,37 @@
 }
 
 
-
-//const QUERY_STRING_project = 'project';
-//const urlParams = new URLSearchParams(window.location.search);
-
-const navigationElement = document.getElementById('navigation');
-const mainElement = document.getElementById('main') || document.getElementsByTagName('body').item(0);
+const navigationElement = document.getElementById('navigation')
+const mainElement = document.getElementById('main') || document.getElementsByTagName('body').item(0)
 
 let _data;
-window.onhashchange = function() {
-    renderLanguageReference(_data);
-}
+window.onhashchange = function() {renderLanguageReference(_data)}
 
 function renderLanguageReference(data) {
-    const languages = window.location.hash.replace('#','').split(',').filter((i)=>typeof(i)==="string" && i.length);
+    const languages = window.location.hash.replace('#','').split(',').filter((i)=>typeof(i)==="string" && i.length)
 
     // Clear existing html
-    navigationElement.innerHTML = '';
-    mainElement.innerHTML = '';
+    navigationElement.innerHTML = ''
+    mainElement.innerHTML = ''
 
     // Build navigation
-    function nav_a(language, languages) {
-        const a = document.createElement('a');
-        a.href = `#${languages.join(",")}`;
-        a.textContent = language;
-        return a;
-    }
-    for (let language of Object.keys(data.languages)) {
-        navigationElement.appendChild(nav_a(
-            language,
-            languages.indexOf(language) < 0 ? languages.concat([language]) : languages.filter((i)=>i!=language),
-        ));
+    function language_link(language) {
+        const _languages = languages.indexOf(language) < 0 ? languages.concat([language]) : languages.filter((i)=>i!=language)
+        return `#${_languages.join(",")}`
     }
+    navigationElement.appendChild(h('div', {}, Object.keys(data.languages).map(
+        language => h('a', {href: language_link(language)}, language))
+    ))
 
     // Build Table
-    const table = document.createElement('table');
-
-    const table_headings = document.createElement('thead');
-    //const table_headings_ = document.createElement('thead');
-    //document.createElement('tr');
-
-    table_headings.appendChild(document.createElement('th'));
-    for (let language of languages) {
-        const table_heading = document.createElement('th');
-        table_heading.textContent = language;
-        table_headings.appendChild(table_heading);
-    }
-    table.appendChild(table_headings);
-
-    for (let version_row of data.versions) {
-        const table_row = document.createElement('tr');
-        const table_row_name = document.createElement('td');
-        table_row_name.textContent = version_row.replaceAll('_',' ');
-        table_row.appendChild(table_row_name);
-        for (let language of languages) {
-            const code = data.languages[language];
-            const table_cell = document.createElement('td');
-            const pre = document.createElement('pre');
-            pre.append(document.createTextNode(code[version_row]));
-            table_cell.append(pre);
-            table_row.appendChild(table_cell);
-        }
-        table.appendChild(table_row);
-    }
+    mainElement.appendChild(h('table',{},[
+        h('thead',{},[h('th',{},''), ...languages.map(language=>h('th',{},language))]),
+        ...data.versions.map(version_row=>h('tr',{},[
+            h('td',{},version_row.replaceAll('_',' ')),
+            ...languages.map(language=>h('td',{},h('pre',{},data.languages[language][version_row])))
+        ]))
+    ]))
 
-    mainElement.appendChild(table);
 }