From d6f4ecfdacb2c31049dc741a6c8c41b280733157 Mon Sep 17 00:00:00 2001
From: relikd <info@relikd.de>
Date: Tue, 22 Sep 2020 02:04:31 +0200
Subject: [PATCH] Template for dynamic domain lookup

---
 out/static/lookup-domain.js | 28 +++++++++++++++-------------
 src/html_index_domains.py   | 16 ++++++++++++----
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/out/static/lookup-domain.js b/out/static/lookup-domain.js
index eb4f28b..129c410 100644
--- a/out/static/lookup-domain.js
+++ b/out/static/lookup-domain.js
@@ -1,13 +1,16 @@
-function lookup_domain_fragment(fname_a, fname_b, id1, id2, id3) {
+function lookup_domain_js(fname_a, fname_b, id1, id2, id3) {
   let dom = window.location.hash.substr(1);
-  document.getElementById(id1).innerHTML = dom;
+  document.getElementById(id1).innerHTML = dom; // domain name
+  let dom_app_list = document.getElementById(id3); // apps list
+  let template = dom_app_list.firstElementChild;
+  dom_app_list.innerHTML = 'loading…';
 
   // load reverse domains json
   loadJSON(fname_a, function(response) {
     let elem = JSON.parse(response)[dom];
     if (!elem || elem.length == 0) {
       document.getElementById(id2).innerHTML = '0 applications';
-      document.getElementById(id3).innerHTML = '– None –';
+      dom_app_list.innerHTML = '– None –';
       return;
     }
     document.getElementById(id2).innerHTML = elem.length + ' applications';
@@ -22,18 +25,17 @@ function lookup_domain_fragment(fname_a, fname_b, id1, id2, id3) {
         apps.push([bndl[0], bndl[1], bndl[1].toLowerCase()]);
       }
       apps.sort(function(a, b){return a[2] < b[2] ? -1 : a[2] > b[2] ? 1 : 0});
-      var content = '';
+
+      dom_app_list.innerHTML = null;
       for (var i = 0; i < apps.length; i++) {
-        content += `
-    <a href="/app/` + apps[i][0] + `/">
-    <div>
-    <img src="/app/` + apps[i][0] + `/icon.png" width="100" height="100">
-    <span class="name">` + apps[i][1] + `</span><br />
-    <span class="detail">` + apps[i][0] + `</span>
-    </div>
-    </a>`;
+        let bid = apps[i][0];
+        let item = template.cloneNode(true);
+        item.href = '/app/'+bid+'/';
+        item.querySelector('img').src = '/app/'+bid+'/icon.png';
+        item.querySelector('.name').innerHTML = apps[i][1];
+        item.querySelector('.detail').innerHTML = bid;
+        dom_app_list.appendChild(item);
       }
-      document.getElementById(id3).innerHTML = '<div id="app-toc" class="no_ul_all">' + content + '</div>';
     });
   });
 }
\ No newline at end of file
diff --git a/src/html_index_domains.py b/src/html_index_domains.py
index c228739..539dfda 100755
--- a/src/html_index_domains.py
+++ b/src/html_index_domains.py
@@ -105,12 +105,20 @@ def gen_html_lookup(html_dir, json, key, title):
     with open(mylib.path_add(html_dir, 'index.html'), 'w') as fp:
         fp.write(mylib.template_with_base(f'''
 <h2 id="name"></h2>
-<p>Present in: <b id="num_apps">… applications</b></p>
+<p>Present in: <b id="num-apps">… applications</b></p>
 <h3>Apps containing this domain:</h3>
-<div id="app_list" class="no-ul-all">loading…</div>
-<script type="text/javascript" src="/static/lookup-domain.js?1"></script>
+<div id="app-toc" class="no-ul-all">
+  <a>
+    <div>
+      <img width="100" height="100">
+      <span class="name"></span><br />
+      <span class="detail"></span>
+    </div>
+  </a>
+</div>
+<script type="text/javascript" src="/static/lookup-domain.js"></script>
 <script type="text/javascript">
-  lookup_domain_fragment('doms.json', 'apps.json', 'name', 'num_apps', 'app_list');
+  lookup_domain_js('doms.json', 'apps.json', 'name', 'num-apps', 'app-toc');
 </script>
 ''', title=title))