Jelajahi Sumber

Update visualization

Alessia 1 tahun lalu
induk
melakukan
5b0298143f
7 mengubah file dengan 180 tambahan dan 30 penghapusan
  1. 11 0
      css/evenTime.css
  2. 30 2
      css/search.css
  3. 0 9
      js/advanced_search.js
  4. 112 7
      js/geospace.js
  5. 18 8
      js/query/managerQuery.js
  6. 5 0
      results.html
  7. 4 4
      ricerca.html

+ 11 - 0
css/evenTime.css

@@ -131,4 +131,15 @@
   top:50%;
   margin-top: -12px; /* Half of line height to keep left middle postion of container */
   left: 10px;
+}
+
+.geo-text {
+  font-size: 12px;
+  font-style: revert;
+  margin-bottom: 2px;
+}
+
+.highlight {
+  background-color: yellow;
+  font-weight: bold;
 }

+ 30 - 2
css/search.css

@@ -2,9 +2,37 @@
     border: 10px solid #f3f3f3;
     border-radius: 50%;
     border-top: 10px solid #C41C22;
-    width: 60px;
-    height: 60px;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
     margin: auto;
 }
+
+.small {
+    width: 60px;
+    height: 60px;
+}
+
+.big {
+    position: fixed; /* Sit on top of the page content */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+    width: 160px;
+    height: 160px;
+}
+
+#overlay {
+    position: fixed; /* Sit on top of the page content */
+    display: none; /* Hidden by default */
+    width: 100%; /* Full width (cover the whole page) */
+    height: 100%; /* Full height (cover the whole page) */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+    cursor: pointer; /* Add a pointer on hover */
+  }

+ 0 - 9
js/advanced_search.js

@@ -184,15 +184,6 @@ function populateOptions(selector, myArray) {
 			<option>Libro</option> \
 			<option>Documenti diversi</option> \
 			</select>';
-		} else if (inputText == "Data") {
-			var inp = '<div id="box_' + numberId + 'a" class="container_choice"><div class="choice_box"><select id ="choice_selector-' + numberId + '_a" value=' + numberId + '_a" name="sel-parent" class="advanced-form-select form-control" aria-label="Default select example"> \
-			  <option selected value="0">Da</option> \
-			  <input type="date" id="inputchoiceSelector_'+ numberId +'_a" name="start" value="1300-01-01"> \
-			</select></div></div> \
-			<div id="box_' + numberId + '_b" class="container_choice"><div class="choice_box"><select id ="choice_selector-' + numberId + '_b" value=' + numberId + '_b" name="sel-parent" class="advanced-form-select form-control" aria-label="Default select example"> \
-			  <option selected value="0">A</option> \
-			  <input type="date" id="inputchoiceSelector_'+ numberId +'_b" name="end" value="1300-12-31"> \
-			</select></div></div>';
 		} 
 		else {
 			inp = '<input type="text" id="inputchoiceSelector_'+ numberId +'" class="selected_option form-control" placeholder="Enter search terms" aria-label="Enter search terms" aria-describedby="button-addon2">';

+ 112 - 7
js/geospace.js

@@ -17,16 +17,22 @@ var params = thisUrlParams.params;
 const pp = params.split(";");
 var tipo = pp[0];
 
+var sigleFinished = false;
+var lemmaFinished = false;
+var mappaFinished = false;
+
 
 prefixes = queryManager['prefixes']['all'];
 
 if (tipo=="lemma") {
     var uri_lemma = pp[1];
-    var lemma = pp[2].replace(/%20/g, " ");;
+    var lemma = pp[2].replace(/%20/g, " ");
+    querySigle = prefixes + (queryManager['queryRES']['queryTrovaSigla']).replaceAll('{URI}', uri_lemma);
     queryEsplora = prefixes + (queryManager['queryRES']['queryEsploraDocumenti']).replaceAll('{URI}', uri_lemma);
     queryMappa = prefixes + (queryManager['queryRES']['queryEsploraMappa']).replaceAll('{URI}', uri_lemma);
+    doJsonQuery(querySigle).done(function(r) { manageArraySigle(r, lemma); });
     doJsonQuery(queryEsplora).done(function(r) { handleLemma(r, lemma); });
-    doJsonQuery(queryMappa).done(function(r) { manageJson(r); });
+    doJsonQuery(queryMappa).done(function(r) { manageJson(r, lemma); });
 }
 
 if (tipo=="lettera") {
@@ -74,6 +80,7 @@ var markerList = [];
 var markers = new L.MarkerClusterGroup();
 let anni = [];
 let eventi = {};
+let testi_ovi = [];
 
 function handleLemma(json, lemma) {
 
@@ -156,8 +163,85 @@ function handleLemma(json, lemma) {
 }
 
 
-function manageJson(json) {
+function manageArraySigle(json, lemma) {
+  sigleFinished = true;
+  $.each(
+		json['results']['bindings'],
+		function (index, value) {
+        var uri = value['uri']['value'];
+        var sigla = value['sigla']['value'];
+        var testo = value['text']['value'];
+
+        queryIdLemma = prefixes + (queryManager['queryRES']['queryTrovaIDlemma']).replace('<{SIGLA}>', sigla).replace('<{LEMMA}>', lemma);
+        console.log(queryIdLemma);
+        doJsonQuery(queryIdLemma).done(function(r) { manageTestoLettere(r, uri, testo); });
+			
+	});
+
+  if (sigleFinished && lemmaFinished && mappaFinished) {
+    $('#Loader').css("display", "none");
+    $('#overlay').css("display", "none");
+  }
+}
+
+function manageTestoLettere(json, uri, testo) {
+
+  var id = "";
+
+
+  $.each(
+		json['results']['bindings'],
+		function (index, value) {
+        id = value['id']['value'];
+		
+      });
+
+    //let regex = "<w>(.*?)</w>(.{0,5})<lem n='ID' (.*?)>";
+    let regex = "<lem n='ID' (.*?)>(.*?)(\\s|,|;|<)";
+    regex = regex.replace('ID', id);
+    regex = new RegExp(regex);
+    var testo3 = "";
+
+    if (regex.test(testo)) {
+
+      const match = regex.exec(testo);
+      var index = regex.exec(testo).index;
+      var last = index + match[0].length-1;
 
+      var toaddfirst = '<span class="highlight">';
+      var toaddlast = '</span>';
+      var testo2 = [testo.slice(0, last), toaddlast, testo.slice(last)].join('');
+      testo3 = [testo2.slice(0, index), toaddfirst, testo2.slice(index)].join('')
+
+    } else {
+
+      testo3 = testo;
+    }
+
+    testi_ovi.push([uri, testo3]);
+
+    /*let regex = "<lem n='ID' (.*?)>(.*?)(\\s|,|;|<)";
+    regex = regex.replace('ID', id);
+    regex = new RegExp(regex);
+
+    const match = regex.exec(testo);
+    var index = regex.exec(testo).index;
+    var last = index + match[0].length-1;
+
+    var toaddfirst = '<span class="highlight">';
+    var toaddlast = '</span>';
+    var testo2 = [testo.slice(0, last), toaddlast, testo.slice(last)].join('');
+    var testo3 = [testo2.slice(0, index), toaddfirst, testo2.slice(index)].join('');
+
+    testi_ovi.push([uri, testo3]); */
+
+}
+
+console.log(testi_ovi);
+
+function manageJson(json, lemma) {
+  lemmaFinished = true;
+  console.log("lemmaFinished");
   var i=0;
   $.each(
     json['results']['bindings'],
@@ -165,6 +249,7 @@ function manageJson(json) {
       var uri = value['uri_place']['value'];
       var label = value['place']['value'];
       var coord = value['coords']['value'];
+      var uri_inf = value['uri_infObj']['value'];
       var year = "";
       var month = "";
       var day = "";
@@ -190,8 +275,13 @@ function manageJson(json) {
       if (value.hasOwnProperty('text')) {
         testo = value['text']['value'];
       }
+      for (kk in testi_ovi) { 
+        if (testi_ovi[kk][0] == uri_inf) {
+          testo = testi_ovi[kk][1];
+        }
+      }
       
-      eventi[i] = {"uri_soggetto": uri_soggetto, "soggetto": soggetto, "uri_luogo": uri, "luogo": label, "coordinate": coord, "evento": evento, "data": data, "anno": year, "mese": month, "giorno": day, "testo": testo};
+      eventi[i] = {"uri_soggetto": uri_soggetto, "uri_info": uri_inf,"soggetto": soggetto, "uri_luogo": uri, "luogo": label, "coordinate": coord, "evento": evento, "data": data, "anno": year, "mese": month, "giorno": day, "testo": testo};
 
       i++;
 
@@ -200,11 +290,19 @@ function manageJson(json) {
     handle_map(eventi);
     manageYears(anni);
     manageEvents(eventi);
+    console.log("lemmaFinished2");
+    if (sigleFinished && lemmaFinished && mappaFinished) {
+      $('#Loader').css("display", "none");
+      $('#overlay').css("display", "none");
+    }
 
 }
 
+
 function handle_map(myArray) {
   //console.log(json);
+  mappaFinished = true;
+  console.log("mappaFinished");
 
   const locations = [];
   const place_names = [];
@@ -281,6 +379,12 @@ function handle_map(myArray) {
   map.addLayer(markers);
   //manageEvents(eventi)
 
+  console.log("mappaFinished2");
+  if (sigleFinished && lemmaFinished && mappaFinished) {
+    $('#Loader').css("display", "none");
+    $('#overlay').css("display", "none");
+  }
+
 }
 
 function markerOnClick(e)
@@ -541,6 +645,7 @@ function manageEvents(events) {
     var mese = events[i]['mese'];
     var giorno = events[i]['giorno'];
     var testo = events[i]['testo'];
+    var informationObject = eventi[i]['uri_info'];
 
     if (anno.length == 4) {
       if (!anni.includes(anno)) {
@@ -556,13 +661,13 @@ function manageEvents(events) {
     } else {
         simpleDate = "";
     }
-
+    
     var object_button = '<button type="button" id="' + uri_soggetto + 
 				'" class="object btn btn-default" alt="oggetto" title="' + soggetto + 
-				'"><i class="fa fa-book"></i></button>';
+				'"><p class="geo-text">Vedi scheda oggetto <i class="fa fa-book"></i></p></button>';
 
     Eventi = '<div data-point="' + coordinates + '"  class="row event"> \
-    <div class="col eventSeed"><div class="row">' + soggetto + object_button +'</div> \
+    <div class="col eventSeed"><div class="row style="cursor:zoom-in;">' + soggetto + '</div><div class="row justify-content-end">' + object_button +'</div> \
     <div class="row">' + testo + '</div></div></div>';
     //<div class="col-2"><div class="row">' + object_button + '</div></div></div>';
   

+ 18 - 8
js/query/managerQuery.js

@@ -183,14 +183,24 @@ var queryManager = {
         } \
         ORDER BY ?year ?month ?day",
 
-        queryTrovaSigla : " SELECT DISTINCT ?id \
-        WHERE {?subject rdf:type crm:E73_Information_Object; \
-        rdfs:label '<{SIGLA}>' . \
-        ?uri_lemma crm:P67_refers_to ?subject; \
-        rdfs:label '<{LEMMA}>' ; \
-        crm:P1_is_identified_by ?uri_id . \
-        ?uri_id rdfs:label ?id} \
-        LIMIT 1",
+        queryTrovaIDlemma : "SELECT DISTINCT ?id \
+        WHERE {?subject rdfs:label '<{LEMMA}>' ; \
+        crm:P67_refers_to ?uri_sigla . \
+        ?uri_sigla rdfs:label '<{SIGLA}>' . \
+        ?subject crm:P1_is_identified_by ?uri_id . \
+        ?uri_id rdfs:label ?id . }",
+
+        queryTrovaSigla : " SELECT DISTINCT ?uri ?sigla ?text \
+        WHERE { \
+        ?uri crm:P1_is_identified_by ?uri_sigla ; \
+        crm:P190_has_symbolic_content ?text . \
+        ?uri_sigla rdfs:label ?sigla ; \
+        crm:P2_has_type ?uri_sigla_type . \
+        ?uri_sigla_type rdfs:label 'Sigla OVI' . \
+        {?uri crm:P67_refers_to ?lem . \
+        ?lem crm:P128_carries <{URI}>} \
+        UNION \
+        {?uri crm:P67_refers_to <{URI}> }} ",
 
         queryEsploraMappa : " SELECT DISTINCT ?uri_subject ?subject ?uri_place ?uri_infObj ?place ?coords ?time_span ?year ?month ?day ?text \
         WHERE { \

+ 5 - 0
results.html

@@ -17,6 +17,7 @@
 
 	<link href="css/pages.css" rel="stylesheet">
 	<link href="css/evenTime.css" rel="stylesheet">
+	<link href="css/search.css" rel="stylesheet">
 
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
@@ -105,12 +106,16 @@
                                 <button type="button" class="btn btn-default nav-link active" data-toggle="tab" onclick="show_list()"><i class="fa fa-list" aria-hidden="true"></i>Lista</button>
                             </div>
 
+							<div id="overlay" class="overlay dark" style="display: block"></div>
+							<div id="Loader" class="search-loader big" style="display:block;"></div>
+
                             <div class="row box-info-container container-fluid" id="res_container" style="display:none;">
                                 <div class="col inner_results" id="results_table"></div>
                             </div>
                             
                           
 							<div class="row box-info-container" id="evenTime">
+
 								
 								<div class="col-12" id="geo_info">
 									<div class="row no-gutters">

+ 4 - 4
ricerca.html

@@ -159,7 +159,7 @@
                         <div class="container-fluid" id="Man-Made_Object">
 						</div>
 					</div>
-                    <div id="mmoLoader" class="search-loader" style="display:block;"></div>
+                    <div id="mmoLoader" class="search-loader small" style="display:block;"></div>
 				</div>
 
 				<!-- Oggetti informativi -->
@@ -177,7 +177,7 @@
 						<div class="col" id="Information_Object">
 						</div>
 					</div>
-                    <div id="infLoader" class="search-loader" style="display:block;"></div>
+                    <div id="infLoader" class="search-loader small" style="display:block;"></div>
 				</div>
 
 				<!-- Persone -->
@@ -195,7 +195,7 @@
 						<div class="col" id="Person">
 						</div>
 					</div>
-                    <div id="perLoader" class="search-loader" style="display:block;"></div>
+                    <div id="perLoader" class="search-loader small" style="display:block;"></div>
 				</div>
 
 				<!-- Luoghi -->
@@ -213,7 +213,7 @@
 						<div class="col" id="Place">
 						</div>
 					</div>
-                    <div id="lgLoader" class="search-loader" style="display:block;"></div>
+                    <div id="lgLoader" class="search-loader small" style="display:block;"></div>
 				</div>
 
 				<div id="wb_Text1" style="position:fixed;">