From 6b121d459e418258b11bee58f3899e2ae6cbbce4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20V=C3=A9ril?= <mveril@irsamc.ups-tlse.fr>
Date: Wed, 9 Oct 2019 17:53:10 +0200
Subject: [PATCH] Using jquery to build the dynamic UI

---
 content/multipledataset.html | 125 +++++++++++++++++------------------
 content/onedataset.html      |  63 +++++++-----------
 content/papers.html          |  77 +++++++++------------
 static/css/paper.css         |   8 +++
 4 files changed, 123 insertions(+), 150 deletions(-)

diff --git a/content/multipledataset.html b/content/multipledataset.html
index 3c064d71..c60ffd45 100644
--- a/content/multipledataset.html
+++ b/content/multipledataset.html
@@ -21,24 +21,25 @@ draft: false
     window.Cite = require('citation-js');
     $('#form_dat input[type=radio]').on('change', async function(event) {
       processingIndicator.isActive=true
-      document.getElementById("Geom_th").hidden=true
-      document.getElementById("GSGeom_th").hidden=true
-      document.getElementById("ESGeom_th").hidden=true
+      $("#Geom_th,#GSGeom_th,#ESGeom_th").each(function(){
+        $(this).attr("hidden",true)
+      })
       var result = $(this).val();
       var proms=[];
       switch (result) {
         case "abs":
           proms=getAbsFilesName().map((f) => AbsDataFile.loadAsync(f));
-          document.getElementById("Geom_th").hidden=false
+          $("#Geom_th").attr("hidden",false)
           break;
         case "fluo":
           proms=getFluoFilesName().map((f) => FluoDataFile.loadAsync(f));
-          document.getElementById("Geom_th").hidden=false
+          $("#Geom_th").attr("hidden",false)
           break;
         case "zpe":
           proms=getZPEFilesName().map((f) => ZPEDataFile.loadAsync(f));
-          document.getElementById("GSGeom_th").hidden=false
-          document.getElementById("ESGeom_th").hidden=false
+          $("#GSGeom_th,#ESGeom_th").each(function(){
+            $(this).attr("hidden",false)
+          })
           break;
       }
       window.dats=await Promise.all(proms)
@@ -48,16 +49,14 @@ draft: false
     })
   }
   function reloadFileSelector(){
-    const fsel=document.getElementById("customFiles_input")
-    fsel.value=""
-    fsel.disabled=false    
+    $("#customFiles_input").attr("value","").attr("disabled",false)
   }
 
   async function reloadSelect(){
     processingIndicator.isActive=true
     radioval=$('#form_dat > input[name=datatype]:checked').val();
-    for(file of Array.from(document.getElementById("customFiles_input").files))
-    {
+    const files=$("#customFiles_input")[0].files
+    for(file of [...files]) {
       switch (radioval) {
         case "abs":
           var dat=await AbsDataFile.loadAsync(file)
@@ -78,11 +77,10 @@ draft: false
       $(this).find('option[value!=""]').remove()
       const vals=uniq(window.dats.map((d)=>{return d[$(this).attr("name")]}))
       for (const val of vals){
-        op=document.createElement("option")
-        op.value=JSON.stringify(val)
-        op.innerText=val.toString()
-        $(this).append(op)
-    }
+        $("<option/>",{
+        value: JSON.stringify(val)
+        }).text(val.toString()).appendTo($(this))
+      }
     })
     $('#form_dat > input[type="submit"').prop('disabled', false);
     processingIndicator.isActive=false
@@ -90,11 +88,10 @@ draft: false
   }
   async function reloadStat(){
     processingIndicator.isActive=true
-    var stb=document.getElementById("stat_table_b");
-    document.getElementById("graph_div").inerrHTML=""
-    stb.innerHTML=''
-    const sel_ref=document.getElementById("sel_ref")
-    const refstr=((sel_ref.selectedIndex>=0) ? sel_ref.options[sel_ref.selectedIndex].value : null)
+    var stb=$("#stat_table > tbody")
+    $("#graph_div").empty()
+    $(stb).empty()
+    var refstr=$("#sel_ref option:selected").val()
     var sdatdic=new Map()
     for (const d of window.filt) {
       const key=JSON.stringify([d.code,d.method,d.DOI])
@@ -123,38 +120,36 @@ draft: false
     sdic.delete(refstr)
     var graphdat=[]
     for(const[keystr,vals] of sdic){
-      row=document.createElement("tr")
+      row=$("<tr/>")
       key=JSON.parse(keystr)
       key.shift()
       Reflect.setPrototypeOf(key[0], method.prototype)
       Reflect.setPrototypeOf(key[1], doi.prototype)
       for(const el of key){
-        var td=document.createElement("td")
+        var td=$("<td/>",{
+          style:"white-space: nowrap;"
+        })
         if(trueTypeOf(el)=="doi"){
-          var publipromise=window.Cite.async(el.string)
-          var lnkdoi=document.createElement("a")
-          lnkdoi.href=el.url
-          lnkdoi.target="_blank"
-          publi=await publipromise
-          lnkdoi.innerHTML=publi.format('citation', {
+          var publi=await window.Cite.async(el.string)
+          $("<a/>",{
+          href: el.url,
+          target:"_blank"
+          }).html(publi.format('citation', {
                 format: 'html',
                 lang: 'en-US'
-          })
-          td.appendChild(lnkdoi)
+          })).appendTo(td)
         }
         else{
-          td.innerText=el
+          $(td).text(el)
         }
-        row.appendChild(td)
+        $(row).append(td)
       }
       const noNanVals=vals.filter((v)=>!Number.isNaN(v))
       const avals=noNanVals.map(v=>Math.abs(v))
       for(const val of [ss.min(noNanVals),ss.max(noNanVals),ss.mean(noNanVals),ss.mean(avals),ss.median(noNanVals),ss.median(avals),ss.rootMeanSquare(noNanVals),ss.variance(noNanVals),ss.standardDeviation(noNanVals)]){
-        var td=document.createElement("td")
-        td.innerText=noNanPrecision(val,3)
-        row.appendChild(td)
+        $("<td/>").text(noNanPrecision(val,3)).appendTo(row)
       }
-      stb.appendChild(row)
+      $(stb).append(row)
       var box = {
                     x: noNanVals,
                     amean: ss.mean(avals).toFixed(3),
@@ -207,18 +202,18 @@ draft: false
         return values.includes(JSON.stringify(d[prop]))
       })
     })
-    var dtb=document.getElementById("dat_table_b");
-    dtb.innerHTML=''
-    sel_ref=document.getElementById("sel_ref")
+    var dtb=$("#dat_table > tbody");
+    dtb.empty()
+    sel_ref=$("#sel_ref")
     for (const d of window.filt) {
-      var row=document.createElement("tr")
+      var row=$("<tr/>")
       var rowd=[]
       const els=[d.molecule,d.comment,d.code,d.method,d.DOI]
       var op=document.createElement("option")
       var opObjVal=els.slice(2)
-      op.value=JSON.stringify(opObjVal)
-      op.innerText=d.method
-      sel_ref.appendChild(op)
+      $("<option/>",{
+        value:JSON.stringify(opObjVal)
+      }).text(d.method).appendTo(sel_ref)
       var tableels=els.slice()
       if(d instanceof oneStateDataFileBase){
         tableels.splice(3,0,d.geometry)
@@ -227,30 +222,30 @@ draft: false
         tableels.splice(3,0,[d.GS,d.ES])
       }
       for(const el of tableels){
-        td=document.createElement("td")
+        td=$("<td/>",{
+          style:"white-space: nowrap;"
+        })
         if(trueTypeOf(el)=="doi"){
-          var publipromise=window.Cite.async(el.string)
-          var lnkdoi=document.createElement("a")
-          lnkdoi.href=el.url
-          lnkdoi.target="_blank"
-          publi=await publipromise
-          lnkdoi.innerHTML=publi.format('citation', {
+          var publi= await window.Cite.async(el.string)
+          $("<a/>",{
+            href: el.url,
+            target: "_blank",
+          }).html(publi.format('citation', {
                 format: 'html',
                 lang: 'en-US'
-              })
-          td.appendChild(lnkdoi)
+              })).appendTo(td)
         }
         else{
-          td.innerText=el
+          $(td).text(el)
         }
-        row.appendChild(td)
+        $(row).append(td)
       }
-      var lnkfile=document.createElement("a")
-      lnkfile.target="_blank"
-      lnkfile.innerText="Go to file"
-      lnkfile.href=await d.sourceFile.getViewerURL()
-      row.appendChild(lnkfile)
-      dtb.appendChild(row)
+      $("<a/>",{
+        target:"_blank",
+        innerText:"Go to file",
+        href: await d.sourceFile.getViewerURL()
+      }).appendTo($("<td/>")).appendTo(row)
+      $(dtb).append(row)
     }
     processingIndicator.isActive=true
     await reloadStat()
@@ -282,7 +277,7 @@ draft: false
     <input type="radio" id="zpe" value="zpe" name="datatype">
     <label for="zpe">\(\Delta \text{ZPE}\)</label>
     <br/>
-    <label for="customFiles">Add custom data file</label>
+    <label for="customFiles_input">Add custom data file</label>
     <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
     <br/>
     <label for="mol_select">Molecule</label>
@@ -313,7 +308,7 @@ draft: false
       <th>Paper</th>
       <th>File</th>
     </thead>
-    <tbody id="dat_table_b">
+    <tbody>
     </tbody>
   </table>
 </div>
@@ -332,7 +327,7 @@ draft: false
       <th>Variance</th>
       <th>Standard deviation</th>
     </thead>
-    <tbody id="stat_table_b">
+    <tbody>
     </tbody>
     <div id="graph_div"></div>
   </table>
diff --git a/content/onedataset.html b/content/onedataset.html
index 43d8077a..b6c86575 100644
--- a/content/onedataset.html
+++ b/content/onedataset.html
@@ -21,10 +21,7 @@ draft: false
         window.data=new CombinedData()
         molecules=new Set(Object.values(window.dats).flat().map((d)=>d.molecule))
         for (const el of molecules) {
-          op=document.createElement("option")
-          op.value=el
-          op.innerText=el
-          document.getElementById("select_mol").appendChild(op)
+          $("<option/>",{value:el}).text(el).appendTo($("#select_mol"))
         }
       }
       function select_mol_onchange(event){
@@ -42,16 +39,13 @@ draft: false
       async function update_mol(molecule){
         processingIndicator.isActive=true
         for (const [key,dat] of Object.entries(window.dats)) {
-          var s=document.getElementById(String.raw`select_${key}`)
+          var s=$(String.raw`#select_${key}`)
           $(s).find('option[value!=""]').remove()
           $(s).find('option[value=""]').first().prop('selected', true)
           
           dat.forEach((val,index)=>{
             if(val.molecule==molecule){
-              var op=document.createElement("option")
-              op.value=index
-              op.innerText=val.method.toString()
-              s.appendChild(op)
+              $("<option/>",{value:index}).text(val.method.toString()).appendTo(s)
             }
           })
         }
@@ -70,16 +64,15 @@ draft: false
         reload()
       }
       async function clear(){
-        for(id of ["ex_table_b","data_par"]){
-          document.getElementById(id).innerHTML=""
-        }
+        $("#ex_table > tbody,data_par").each(()=>{
+          $(this).empty()
+        })
 
       }
       async function reload() {
         processingIndicator.isActive=true
         clear()
         const LatexInline=['\\(','\\)']
-        var par=document.getElementById("data_par")
         var md=[];
         var els=[];
         var customRenderingProp=["excitations","sourceFile"]
@@ -94,14 +87,12 @@ draft: false
             md.push(window.data[key].sourceFile)
           }
         }
-        div=document.getElementById("meta_div")
-        div.innerHTML=""
+        div=$("#meta_div")
+        $(div).empty()
         for (const element of md) {
-          var node =null;
           switch (trueTypeOf(element)) {
             case "string":
-              node= document.createElement("h2");
-              node.innerText=element;   
+              $("<h2/>").text(element).appendTo(div)
               break;
             case "doi":
               var publi=await Cite.async(element.string)
@@ -110,43 +101,39 @@ draft: false
                 template: 'apa',
                 lang: 'en-US'
               })
-              node=document.createElement("a")
-              node.innerHTML=output
-              node.target='_blank'
-              node.href=element.url       
+              $("<a/>",{
+                href:element.url,
+                target:"_blank"}).html(output).appendTo(div)
               break
             case "websiteFile":
-              node=document.createElement("a")
-              node.innerText="Go to file"
-              node.target='_blank'
-              node.href= await element.getViewerURL()
+              $("<a/>",{href:element.url,
+              target:"_blank",
+              href: element.getViewerURL()
+              }).text("Go to file").appendTo(div)
               break
             case "Array":
               k=element[0]
               v=element[1]
               k=k.charAt(0).toUpperCase() + k.slice(1)
-              node = document.createElement("div");
-              node.innerText= k+': '+v; 
+              $("<div/>").text(k+': '+v).appendTo(div)
               break;
           }
-          div.appendChild(node);
         }
-        var tb=document.getElementById("ex_table_b");
+        var tb=$("#ex_table > tbody");
+        $(tb).empty()
         for (const el of window.data.excitations) {
-          var row=document.createElement("tr")
+          row=$("<tr/>")
           var rowd=[]
           rowd.push(String.raw`${LatexInline[0]} ${el.initial.toLaTeX()} \rightarrow ${el.final.toLaTeX()}${LatexInline[1]}`)
           var e=[el.Eabs,el.Efluo,el.EZPE,el.Eadia,el.Ezz]
           e.forEach((val)=>rowd.push(noNanPrecision(val,3)))
           for(d of rowd) {
-            td=document.createElement("td")
-            td.innerText=d
-            row.appendChild(td)
+            $("<td/>").text(d).appendTo(row)
           }
-          tb.appendChild(row)
+          tb.append(row)
         }
         await MathJax.typesetPromise();
-        document.getElementById("ex_div").hidden=false
+        $("#ex_div").attr("hidden",false)
         await MathJax.typesetPromise();
         processingIndicator.isActive=false
       }
@@ -194,9 +181,7 @@ draft: false
           <th>\(E_\text{adia}\)</th>
           <th>\(E_\text{0-0}\)</th>
         </thead>
-        <tbody id="ex_table_b">
-
-        </tbody>
+        <tbody></tbody>
       </table>
     </div>
     </p>
diff --git a/content/papers.html b/content/papers.html
index 9ee14220..64ab2a46 100644
--- a/content/papers.html
+++ b/content/papers.html
@@ -20,65 +20,50 @@ draft: false
     const publiscite = await Cite.async(dois)
     const publis=publiscite.format('data', {format: 'object'})
     for (const publi of publis){
-      const art=document.createElement("article")
+      const art=$("<article/>").addClass("paper")
       art.className="paper"
-      const titlelink=document.createElement("a")
-      const titleh=document.createElement("h1")
-      titleh.innerText=publi.title
-      titlelink.appendChild(titleh)
-      titlelink.href=publi.URL     
-      art.appendChild(titlelink)
+      $("<a/>",{
+        href:publi.URL,
+        target:"_blank"
+      }).html($("<h1/>").text(publi.title)).appendTo(art)
       const authors=publi.author
-      const ulauths=document.createElement("ul")
-      ulauths.className="authors-list"
+      const ulauthors=$("<ul/>").addClass("authors-list").appendTo(art)
       for(const author of authors){
-        const liauth=document.createElement("li")
-        liauth.className="author-item"
-        const spanAuth=document.createElement("span")
-        spanAuth.innerText=String.raw`${author.given} ${author.family}`
-        liauth.appendChild(spanAuth)
+        const liauth=$("<li/>").addClass("author-item")
+        const spanAuth=$("<span/>").text(String.raw`${author.given} ${author.family}`).appendTo(liauth)
         if(author.sequence==="first"){
-          star=document.createElement("strong")
-          star.innerText="*"
-          liauth.appendChild(star)
+          $(spanAuth).after($("<strong/>").text("*"))
         }
-        var notifycontent=document.createElement("div")
-        notifycontent.className="author-info"
-        const notifyhead=document.createElement("h1")
-        notifyhead.innerText=String.raw`${author.given} ${author.family}`
-        notifycontent.appendChild(notifyhead)
-        const ulaff=document.createElement("ul")
-        ulaff.className="affiliation-list"
-        notifycontent.appendChild(ulaff)
+        var notifycontent=$("<div/>").addClass("author-info")
+        $("<h1/>").text(String.raw`${author.given} ${author.family}`).appendTo(notifycontent)
+        ulaff=$("<ul/>").addClass("affiliation-list").appendTo(notifycontent)
         for(const a of author.affiliation){
-          const liaff=document.createElement("li")
-          liaff.innerText=a.name
-          ulaff.appendChild(liaff)
+          $("<li/>").text(a.name).appendTo(ulaff)
         }
         if(author["authenticated-orcid"]){
-          const html=$.parseHTML(String.raw`<div class="orcid-id"><a href="https://orcid.org" target="_blank"><img alt="ORCID logo" src="https://orcid.org/sites/default/files/images/orcid_16x16.png" width="16" height="16"/></a> <a href="${author.ORCID}" target="_blank">${author.ORCID} </a></div>`)
-          notifycontent.appendChild(html[0])
+          const html=String.raw`<div class="orcid-id"><a href="https://orcid.org" target="_blank"><img alt="ORCID logo" src="https://orcid.org/sites/default/files/images/orcid_16x16.png" width="16" height="16"/></a> <a href="${author.ORCID}" target="_blank">${author.ORCID} </a></div>`
+          notifycontent.append(html)
         }
-        tippy(spanAuth, {
-         content: notifycontent,
+        tippy(spanAuth[0], {
+         content: notifycontent[0],
          theme: 'light',
          interactive: true,
         });
-        ulauths.appendChild(liauth)
+        ulauthors.append(liauth)
       }
-      art.appendChild(ulauths)
-      const journaldiv=document.createElement("div")
-      journaldiv.innerText=(("container-title-short" in publi) ? publi["container-title-short"] : publi["container-title"])
-      journaldiv.innerText+=publi.issued["date-parts"][0][0]
-      journaldiv.innerHTML+=String.raw` ${publi.volume}(${publi.issue}), ${publi.page}`
-      art.appendChild(journaldiv)
-      const doilink=document.createElement("a")
-      doilink.href=publi.URL
-      doilink.innerText=String.raw`DOI: ${publi.DOI}`
-      art.appendChild(doilink)
-      const lipub=document.createElement("li")
-      lipub.appendChild(art)
-      document.getElementById("papers_ul").appendChild(lipub)
+      journalpar=$("<div/>").appendTo(art)
+      $("<span/>").text((("container-title-short" in publi) ? publi["container-title-short"] : publi["container-title"])).appendTo(journalpar)
+      $("<span/>").text(publi.issued["date-parts"][0][0]).appendTo(journalpar)
+      journalpar.append(" ")
+      $("<span/>").text(publi.volume).appendTo(journalpar)
+      $("<span/>").addClass("issue").text(publi.issue).appendTo(journalpar)
+      journalpar.append(", ")
+      $("<span/>").text(publi.page).appendTo(journalpar)
+      $("<a/>",{
+        href:publi.URL,
+        target:"_blank"  
+      }).text(String.raw`DOI: ${publi.DOI}`).appendTo(art)
+      $(art).appendTo("<li/>").appendTo("#papers_ul")
     }    
   }
 </script>
diff --git a/static/css/paper.css b/static/css/paper.css
index b3092b63..6b661b0f 100644
--- a/static/css/paper.css
+++ b/static/css/paper.css
@@ -33,6 +33,14 @@ ul.papers-list{
   content: ""
 }
 
+.paper .issue::before{
+  content: "(" 
+}
+
+.paper .issue::after{
+  content: ")"
+}
+
 .orcid-id img {
   vertical-align: middle;
   float: left;