new features on interface

site2/css/mystyle.css

@@ -40,6 +40,7 @@
 }
 #result {
   margin:3%;
+  font-size: 12px;
 }
 
 #result .row {
@@ -63,6 +64,19 @@
   font-weight: bold;
 }
 
+#single-context-box {
+  margin-top: 3%;
+}
+
+.box {
+  border: 1px solid black;
+  padding: 1% 3%;
+}
+
+#context-title {
+  font-weight: bold;
+}
+
  /*Loader*/
  .loader {
   border: 16px solid #f3f3f3;

site2/index.html

@@ -148,7 +148,43 @@
       </div>
 
       <span id="params"></span><br />
-      <div id="result"></div>
+      <div class="row">
+         <div id="result" class="col"></div>
+
+         <div id="single-context-box" class="col-4" style="display: none;">
+            <div class="row box" id="context-title">
+            </div>
+            <div class="row box addin_box" id="additional_info" style="display: none;"></div>
+            <div class="row box" id="context-box">
+               <div class="box-label">
+                  <h3>Contesto</h3>
+               </div>
+               <div class="box-text">
+                  <div id="context-text"></div>
+               </div>
+            </div>
+
+            <div class="row box" id="notes_box" style="display: none;">
+               <div class="box-label">
+                  <h3>Note</h3>
+               </div>
+               <div class="box-text">
+                  <p id="notes-text"></p>
+               </div>
+            </div>
+
+            <div class="row box" id="associated-text-box" style="display: none;">
+               <div class="box-label">
+                  <h3>Testi associati</h3>
+               </div>
+               <div class="box-text">
+                  <p id="associated-text"></p>
+               </div>
+            </div>
+
+         </div>
+      </div>
+      
       <button id="lauchSearchContext" class="btn btn-primary" style="display:none;" onclick="checkContext()">Vai ai contesti</button>
 
    </div>

site2/js/ricerca.js

@@ -271,6 +271,12 @@ $( document ).ready(function() {
     }
   });
 
+  $( "#context-title" ).click(function() {
+    $( "#additional_info" ).toggle( "slow", function() {
+      // Animation complete.
+    });
+  });
+
 });
 
 function createNewCC(occ) {
@@ -470,7 +476,21 @@ function createFirstRowOcc(param) {
   row.className = "row height d-flex justify-content-center align-items-center";
   row.id = "first_row";
 
-  
+  var colRif = document.createElement('div');
+  colRif.className = "col-5 rifCol";
+  colRif.append("Riferimenti");
+  row.append(colRif);
+
+  var colInfoLemma = document.createElement('div');
+  colInfoLemma.className = "col-2 lemmaCol";
+  row.append(colInfoLemma);
+
+  var colContesto = document.createElement('div');
+  colContesto.className = "col-5 contestoCol";
+  colContesto.append("Contesto");
+  row.append(colContesto);
+
+  /*
     if (param.includes("Titolo Abbreviato")) {
       var colTitolo = document.createElement('div');
       colTitolo.className = "col-2 abbrCol";
@@ -525,7 +545,7 @@ function createFirstRowOcc(param) {
       colContesto.className = "col-4 contesto";
       colContesto.append("Contesto");
       row.append(colContesto);
-    }
+    }*/
 
 
   $("#result").append(row);
@@ -606,21 +626,43 @@ function createOccRow(num, elem) {
   var riga = elem["riga"];
   var stanza = elem["stanza"];
   var tipostanza = elem["tipostanza"];
+  var ts = writeStanza(tipostanza);
   var verso = elem["verso"];
+  var lemma = elem["lemma"];
+  var cat_gr = elem["cat_gr"];
+
+ 
+  var riferimenti = titolo_abbreviato + ", " + rif_organico + ", " + ts + "." + stanza +
+  " v. " + verso + ", " + pag + "." + riga;
+
+  var info_lemma = lemma + " " + cat_gr;
 
   for (var i=0; i<words.length; i++) {
     contesto = contesto.replace(words[i], '<span class="highlight">' + words[i] + '</span>');
   }
-  //contesto = contesto.replace(/\n/g, "<br />");
-  //let str = contesto.replace(word, '<span style="color:red">' + word + '</span>');
-
+  
   var row = document.createElement('div');
   row.className = "row height d-flex justify-content-center align-items-center";
   row.id = num;
   var onClickCommand = "goToSingleContext(" + num + ", 31, 0, 0)";
   row.setAttribute("onclick", onClickCommand);
 
-  if (elem.hasOwnProperty('Titolo Abbreviato')) {
+  var colRiferimenti = document.createElement('div');
+  colRiferimenti.className = "col-5 rifCol";
+  colRiferimenti.append(riferimenti);
+  row.append(colRiferimenti);
+
+  var colInfoLemma = document.createElement('div');
+  colInfoLemma.className = "col-2 lemCol";
+  colInfoLemma.append(info_lemma);
+  row.append(colInfoLemma);
+
+  var colContesto = document.createElement('div');
+  colContesto.className = "col-5 contestoCol";
+  colContesto.innerHTML = contesto;
+  row.append(colContesto);
+
+  /*if (elem.hasOwnProperty('Titolo Abbreviato')) {
     var colTitolo = document.createElement('div');
     colTitolo.className = "col-2 abbrCol";
     colTitolo.append(titolo_abbreviato);
@@ -674,7 +716,7 @@ function createOccRow(num, elem) {
     colContesto.className = "col-4 contestoCol";
     colContesto.innerHTML = contesto;
     row.append(colContesto);
-  }
+  }*/
 
   $("#result").append(row);
 
@@ -682,6 +724,37 @@ function createOccRow(num, elem) {
 
 //
 
+//WRITE TIPOSTANZA 
+
+function writeStanza(stanza) {
+  var tipo_stanza = "";
+
+  if (stanza = 0) {
+    tipo_stanza = "prosa";
+  } else if (stanza = 1) {
+    tipo_stanza = "verso";
+  } else if (stanza = 2) {
+    tipo_stanza = "distico";
+  } else if (stanza = 4) {
+    tipo_stanza = "terzina";
+  } else if (stanza = 8) {
+    tipo_stanza = "quartina";
+  } else if (stanza = 16) {
+    tipo_stanza = "sestina";
+  } else if (stanza = 32) {
+    tipo_stanza = "ottava";
+  } else if (stanza = 64) {
+    tipo_stanza = "sonetto";
+  } else if (stanza = 99) {
+    tipo_stanza = "stanza";
+  } else {
+    tipo_stanza = stanza;
+  }
+
+  return tipo_stanza;
+}
+//
+
 //START GET SINGLE CONTEXT
 
 function goToSingleContext(num, parole, periodi, brani) {
@@ -705,7 +778,29 @@ function goToSingleContext(num, parole, periodi, brani) {
 //CREATE NEW PAGE FOR SINGLE CONTEXT
 
 function createPage(elem) {
-  var contesto = elem['contesto'];
+
+  $("#single-context-box").css("display", "block");
+
+  var contesto = elem["contesto"];
+  var titolo_abbreviato = "";
+  var rif_organico = "";
+  var tipo_stanza = "";
+  var stanza = "";
+  var verso = "";
+  var pag = "";
+  var riga = "";
+
+  var autore = "";
+  var titolo = "";
+  var data_descr = "";
+  var area_gen = "";
+  var area_spec = "";
+  var genere = "";
+  var curatore = "";
+  var sigla = "";
+
+  var note = "";
+  var testo_associato = "";
 /*
   var contesto = elem['contesto'];
   var annoF = elem["Anno finale"];
@@ -754,15 +849,88 @@ function createPage(elem) {
 
   console.log(elem);
 
- // if (elem.hasOwnProperty('contesto')) {
- //   contesto = elem["contesto"];
-  // }
+  if (elem.hasOwnProperty('Titolo Abbreviato')) {
+    titolo_abbreviato = elem["Titolo Abbreviato"];
+  }
+  if (elem.hasOwnProperty('Rif_organico')) {
+    rif_organico = elem["Rif_organico"];
+  }
+  if (elem.hasOwnProperty('tipostanza')) {
+    var ts = elem["tipostanza"];
+    tipo_stanza = writeStanza(ts);
+  }
+  if (elem.hasOwnProperty('stanza')) {
+    stanza = elem["stanza"];
+  }
+  if (elem.hasOwnProperty('verso')) {
+    verso = elem["verso"];
+  }
+  if (elem.hasOwnProperty('pag')) {
+    pag = elem["pag"];
+  }
+  if (elem.hasOwnProperty('riga')) {
+    riga = elem["riga"];
+  }
 
-  //var opened = window.open("pages/singleContext.html");
-  //opened.write("<h2>" + contesto + "</h2>");
+  if (elem.hasOwnProperty('Autore')) {
+    autore = elem["Autore"];
+  }
+  if (elem.hasOwnProperty("Area generica")) {
+    area_gen = elem["Area generica"];
+  }
+  if (elem.hasOwnProperty("Area specifica")) {
+    area_spec = elem["Area specifica"];
+  }
+  if (elem.hasOwnProperty("Data descrittiva")) {
+    data_descr = elem["Data descrittiva"];
+  }
+  if (elem.hasOwnProperty("Genere")) {
+    genere = elem["Genere"];
+  }
+  if (elem.hasOwnProperty("sigla")) {
+    sigla = elem["sigla"];
+  }
+  if (elem.hasOwnProperty('Curatore')) {
+    curatore = "a cura di " + elem["Curatore"];
+  }
+  if (elem.hasOwnProperty('Titolo')) {
+    titolo = elem["Titolo"];
+  }
 
-  var win = window.open("");
-  win.document.body.innerHTML = "<p>" + contesto + "</p>";
+  if (elem.hasOwnProperty('nota')) {
+    note = elem["nota"];
+    $("#notes_box").css("display", "block");
+  } else {
+    $("#notes_box").css("display", "none");
+  }
+
+  if (elem.hasOwnProperty('testo associato')) {
+    testo_associato = elem["testo associato"];
+    $("#associated-text-box").css("display", "block");
+  } else {
+    $("#associated-text-box").css("display", "none");
+  }
+
+  var title_box = "<p>" + titolo_abbreviato + ", " + rif_organico + ", " + tipo_stanza + 
+  "." + stanza + ", v." + verso + ", " + pag + "." + riga + "</p>";
+
+  var add_info = "<p>" + "Autore: " + autore + "<br />" +
+  "Titolo: " + titolo + "<br />" +
+  "Titolo abbreviato: " + titolo_abbreviato + "<br />" +
+  "Riferimenti cronologici: " + data_descr + "<br />" +
+  "Area generica: " + area_gen + "<br />" +
+  "Area specifica: " + area_spec + "<br />" +
+  "Genere: " + genere + "<br />" +
+  "Curatore: " + curatore + "<br />" +
+  "Sigla: " + sigla + "<br />" +
+  "</p>"
+
+  document.getElementById("context-text").innerHTML = contesto;
+  document.getElementById("context-title").innerHTML = title_box;
+  document.getElementById("additional_info").innerHTML = add_info;
+
+  document.getElementById("notes-text").innerHTML = note;
+  document.getElementById("associated-text").innerHTML = testo_associato;
   
 }
 
@@ -794,4 +962,10 @@ $(document).on("change", ".flViewBy", function (ev) {
     cc[0].disabled = false;
   }
 
+});
+
+$( "#context-title" ).on( "click", function() {
+  $( "#additional_info" ).toggle( "slow", function() {
+    // Animation complete.
+  });
 });