Modernisation of the html

content/multipledataset.html

@@ -19,7 +19,7 @@ draft: false
 <script>
   window.onload = async () => {
     window.Cite = require('citation-js');
-    $('#form_dat input[type=radio]').on('change', async function(event) {
+    $('#form_dat > fieldset > input[type=radio]').on('change', async function (event) {
       processingIndicator.isActive = true
       $("#Geom_th,#GSGeom_th,#ESGeom_th").each(function () {
         $(this).attr("hidden", true)
@@ -54,7 +54,7 @@ draft: false
 
   async function reloadSelect() {
     processingIndicator.isActive = true
-    radioval=$('#form_dat > input[name=datatype]:checked').val();
+    radioval = $('#form_dat > fieldset > input[name=datatype]:checked').val();
     const files = $("#customFiles_input")[0].files
     for (file of [...files]) {
       switch (radioval) {
@@ -73,7 +73,7 @@ draft: false
           break;
       }
     }
-    $('#form_dat > select').each(function(){
+    $('#form_dat > fieldset > div > select').each(function () {
       $(this).find('option[value!=""]').remove()
       const vals = uniq(window.dats.map((d) => { return d[$(this).attr("name")] }))
       for (const val of vals) {
@@ -95,8 +95,7 @@ draft: false
     var sdatdic = new Map()
     for (const d of window.filt) {
       const key = JSON.stringify([d.code, d.method, d.DOI])
-      if(!(sdatdic.has(key)))
+      if (!(sdatdic.has(key))) {
-      {
         sdatdic.set(key, new Map())
       }
       for (const exc of d.excitations) {
@@ -192,7 +191,7 @@ draft: false
     processingIndicator.isActive = true
     const LatexInline = ['\\(', '\\)']
     window.filt = window.dats
-    $('#form_dat > select').each(function(){
+    $('#form_dat > fieldset > div > select').each(function () {
       const prop = $(this).attr("name")
       const values = $(this).val()
       window.filt = window.filt.filter((d) => {
@@ -269,6 +268,7 @@ draft: false
   </ol>
 </p>
 <form id="form_dat" action="javascript:reloadContent()" method="post">
+  <fieldset>
     <legend>Data type</legend>
     <input type="radio" id="abs" value="abs" name="datatype">
     <label for="abs">Absorption</label>
@@ -276,26 +276,34 @@ draft: false
     <label for="fluo">Fluorescence</label>
     <input type="radio" id="zpe" value="zpe" name="datatype">
     <label for="zpe">\(\Delta \text{ZPE}\)</label>
-    <br/>
+  </fieldset>
+  <fieldset>
+    <div>
       <label for="customFiles_input">Add custom data file</label>
       <input type="file" multiple onchange="reloadSelect()" id="customFiles_input" disabled=true></input>
-    <br/>
+    </div>
+  </fieldset>
+  <fieldset>
+    <div>
       <label for="mol_select">Molecule</label>
       <select multiple id="mol_select" name="molecule"></select>
+    </div>
+    <div>
       <label for="method_select">Method</label>
       <select multiple id="method_select" name="method"></select>
+    </div>
+    <div>
       <label for="DOI_select">Paper</label>
       <select multiple id="DOI_select" name="DOI"></select>
-    <br/>
+    </div>
+  </fieldset>
   <input type="submit" disabled=true value="Load"></input>
 </form>
 <form id="form_ref">
   <label for="sel_ref">Reference</label>
-    <select id="sel_ref" onchange="reloadStat()">
+  <select id="sel_ref" onchange="reloadStat()"></select>
-    </select>
 </form>
-  <br/>
+<section>
-<div id="data_div">
   <table id="dat_table">
     <thead>
       <th>Molecule</th>
@@ -311,8 +319,8 @@ draft: false
     <tbody>
     </tbody>
   </table>
-</div>
+</section>
-<div id="stat_div">
+<section>
   <table id="stat_table">
     <thead>
       <th>Method</th>
@@ -331,5 +339,5 @@ draft: false
     </tbody>
     <div id="graph_div"></div>
   </table>
-</div>
+</section>
 {{< waitModal >}}

content/onedataset.html

@@ -14,8 +14,7 @@ draft: false
 <script src="/js/websiteFile.js"></script>
 {{< getDataFilesName >}}
 <script>
-      window.onload=async function()
+  window.onload = async function () {
-      {
     window.Cite = require('citation-js');
     window.dats = await loadAllData()
     window.data = new CombinedData()
@@ -87,12 +86,12 @@ draft: false
         md.push(window.data[key].sourceFile)
       }
     }
-        div=$("#meta_div")
+    sec = $("#meta_sec")
-        $(div).empty()
+    $(sec).empty()
     for (const element of md) {
       switch (trueTypeOf(element)) {
         case "string":
-              $("<h2/>").text(element).appendTo(div)
+          $("<h2/>").text(element).appendTo(sec)
           break;
         case "doi":
           var publi = await Cite.async(element.string)
@@ -103,19 +102,21 @@ draft: false
           })
           $("<a/>", {
             href: element.url,
-                target:"_blank"}).html(output).appendTo(div)
+            target: "_blank"
+          }).html(output).appendTo(sec)
           break
         case "websiteFile":
-              $("<a/>",{href:element.url,
+          $("<a/>", {
+            href: element.url,
             target: "_blank",
             href: element.getViewerURL()
-              }).text("Go to file").appendTo(div)
+          }).text("Go to file").appendTo(sec)
           break
         case "Array":
           k = element[0]
           v = element[1]
           k = k.charAt(0).toUpperCase() + k.slice(1)
-              $("<div/>").text(k+': '+v).appendTo(div)
+          $("<div/>").text(k + ': ' + v).appendTo(sec)
           break;
       }
     }
@@ -133,44 +134,46 @@ draft: false
       tb.append(row)
     }
     await MathJax.typesetPromise();
-        $("#ex_div").attr("hidden",false)
+    $("#ex_sec").attr("hidden", false)
     await MathJax.typesetPromise();
     processingIndicator.isActive = false
   }
 </script>
 <p>
-      In this page you can calculate \(E_\text{adia}\) \(E_\text{0-0}\) from \(E_\text{abs}\) \(E_\text{fluo}\) and \(\Delta E_\text{ZPE}\)
+  In this page you can calculate \(E_\text{adia}\) \(E_\text{0-0}\) from \(E_\text{abs}\) \(E_\text{fluo}\) and \(\Delta
+  E_\text{ZPE}\)
   For this select a method for absorption, fluorescence or ZPE
 </p>
+<form>
   <div>
-    <label>Select a molecule<br/>
+    <label for="select_mol">Select a molecule</label>
     <select id="select_mol" onchange="select_mol_onchange(event)">
       <option value="" disabled=true selected=true>Select a molecule</option>
     </select>
-    </label>
   </div>
   <div>
-    <label>Select an absorption method<br/>
+    <label for="select_abs">Select an absorption method</label>
     <select id="select_abs" onchange="select_abs_onchange(event)">
       <option value="" disabled=true selected=true>Select an absorption method</option>
     </select>
-    </label>
+  </div>
-  
+  <div>
-    <label>Select a fluorescence method<br/>
+    <label for="select_fluo">Select a fluorescence method</label>
     <select id="select_fluo" onchange="select_fluo_onchange(event)">
       <option value="" disabled=true selected=true>Select a fluorescence method</option>
     </select>
-    </label>
+  </div>
-    <label>Select a ZPE method<br/>
+  <div>
+    <label for="select_ZPE">Select a ZPE method</label>
     <select id="select_ZPE" onchange="select_ZPE_onchange(event)">
       <option value="" disabled=true selected=true>Select a ZPE method</option>
     </select>
-    </label>
   </div>
+</form>
 <h1>Data</h1>
-    <p id=data_par>
+<section id=data>
-      <div id="meta_div"></div>
+  <section id="meta_sec"></section>
-      <div id="ex_div" hidden=true>
+  <section id="ex_sec" hidden=true>
     <h2>Excitation</h2>
     <table id="ex_table">
       <thead>
@@ -183,6 +186,6 @@ draft: false
       </thead>
       <tbody></tbody>
     </table>
-    </div>
+  </section>
-    </p>
+</section>
 {{< waitModal >}}