Updates

OA.html

@@ -101,112 +101,135 @@
 			</div>
 
 			<div class="w-content section-small">
-				<div class="container-fluid">
-					<div class="col box-info">
+					<div class="box-info">
 						<div class="container-fluid">
 							<div class="row box-info-title">
 								<div class="col">
 									<!--<span id="time"></span>-->
 									<h1 id="nome_oggetto" class="box-info-main-title"></h1>
-									<!--<span class="box-info-subtitle" id="artist_name"></span>-->
+									<div id="link_buttons"></div>
 								</div>
 							</div>
 
 							<div class="row box-info-container">
-								<div class="col" id="info_OA">
-									<div class="row mb-2" id="AUT" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Autore:</span>
-										</div>
-										<div class="col" id="artist"></div>
-									</div>
-
-									<div class="row mb-2" id="DT" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Data:</span>
-										</div>
-										<div class="col" id="time"></div>
-									</div>
-
-									<div class="row mb-2" id="SGTI" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Soggetto:</span>
-										</div>
-										<div class="col" id="subject"></div>
+								<div class="col" id="container_lettera">
+									<div class="headInfo">
+										<h2 id="infoBox">Informazioni</h2>
 									</div>
-
-									<div class="row mb-2" id="OGTD" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Tipo:</span>
+	
+									<ul class="nav nav-tabs" id="choice_buttons">
+										<li class="nav-item infoChoice">
+											<button type="button" class="nav-link active" data-toggle="tab" onClick="show_OA()">Opera</button>
+										</li>
+										<li class="nav-item infoChoice">
+											<button type="button" class="nav-link" data-toggle="tab" onClick="show_CAT()">Catalogo</button>
+										</li>
+									</ul>
+					
+
+									<div class="info_oa_container">
+										<div class="col" id="info_OA">
+											<div id="OA_info">
+												<div class="row mb-2" id="AUT" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Autore:</span>
+													</div>
+													<div class="col" id="artist"></div>
+												</div>
+
+												<div class="row mb-2" id="DT" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Data:</span>
+													</div>
+													<div class="col" id="time"></div>
+												</div>
+
+												<div class="row mb-2" id="SGTI" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Soggetto:</span>
+													</div>
+													<div class="col" id="subject"></div>
+												</div>
+
+												<div class="row mb-2" id="OGTD" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Tipo:</span>
+													</div>
+													<div class="col" id="type"></div>
+												</div>
+
+												<div class="row mb-2" id="MTC" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Materia e Tecnica:</span>
+													</div>
+													<div class="col">
+														<span id="materials"></span>
+														<span id="technique"></span>
+													</div>
+												</div>
+
+												<div class="row mb-2" id="MIS" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Misure:</span>
+													</div>
+													<div class="col" id="dimensions"></div>
+												</div>
+
+												<!--<div class="row mb-2" id="SGTT" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Titolo:</span>
+													</div>
+													<div class="col" id="title"></div>
+												</div>-->
+
+												<div class="row mb-2" id="LDCN" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Collocazione:</span>
+													</div>
+													<div class="col" id="owner"></div>
+												</div>
+
+												<!--<div class="row mb-2" id="LDCS" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Localizzazione:</span>
+													</div>
+													<div class="col" id="location"></div>
+												</div>-->
+
+												<div class="row mb-2" id="CMM" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Committente:</span>
+													</div>
+													<div class="col" id="client"></div>
+												</div>
+
+												<div class="row mb-2" id="STCC" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Stato di Conservazione:</span>
+													</div>
+													<div class="col" id="condition"></div>
+												</div>
+
+												<div class="row mb-2" id="NCT" style="display:none;">
+													<div class="col-sm-4">
+														<span class="label">Codice Univoco del Bene (NCT):</span>
+													</div>
+													<div class="col" id="identifier"></div>
+												</div>
+											</div>
 										</div>
-										<div class="col" id="type"></div>
-									</div>
-
-									<div class="row mb-2" id="MTC" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Materia e Tecnica:</span>
-										</div>
-										<div class="col">
-											<span id="materials"></span>
-											<span id="technique"></span>
-										</div>
-									</div>
-
-									<div class="row mb-2" id="MIS" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Misure:</span>
-										</div>
-										<div class="col" id="dimensions"></div>
-									</div>
-
-									<!--<div class="row mb-2" id="SGTT" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Titolo:</span>
-										</div>
-										<div class="col" id="title"></div>
-									</div>-->
-
-									<div class="row mb-2" id="LDCN" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Collocazione:</span>
-										</div>
-										<div class="col" id="owner"></div>
-									</div>
-
-									<!--<div class="row mb-2" id="LDCS" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Localizzazione:</span>
-										</div>
-										<div class="col" id="location"></div>
-									</div>-->
-
-									<div class="row mb-2" id="CMM" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Committente:</span>
-										</div>
-										<div class="col" id="client"></div>
-									</div>
-
-									<div class="row mb-2" id="STCC" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Stato di Conservazione:</span>
-										</div>
-										<div class="col" id="condition"></div>
 									</div>
+								</div>
+							</div>
 
-									<div class="row mb-2" id="NCT" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Codice Univoco del Bene (NCT):</span>
+							<div class="row box-info-container">
+								<div class="col" id="container_images">
+									<div id="OA_images">
+										<div class="headInfo" id="head_image">
+											<h2 id="OA_images_titolo">Immagine</h2>
 										</div>
-										<div class="col" id="identifier"></div>
+										<!--<div id="description"></div>-->
 									</div>
-
-									<!--<div class="row mb-2" id="NSC" style="display:none;">
-										<div class="col-sm-4">
-											<span class="label">Notizie Storico Critiche:</span>
-										</div>
-										<div class="col" id="description"></div>
-									</div>-->
 								</div>
 							</div>
 
@@ -256,6 +279,9 @@
 		</section>
 	</main>
 
+	<!-- Modal -->
+	<div id="myModal" class="modal"></div>
+
 	<footer id="footer" class="footer">
 		<div class="container">
 			<div class="row">
@@ -317,8 +343,8 @@
 		</div>
 	</footer>
 
-	<script src="js/query/managerQuery.js"></script>
 	<script src="js/utilities.js"></script>
+	<script src="js/query/managerQuery.js"></script>
 	<script src="js/OA.js"></script>
 
 	<!-- Bootstrap core JavaScript -->

Persona.html

@@ -240,7 +240,7 @@
 
 									<div class="row mb-2" id="honorific" style="display:none;">
 										<div class="col-sm-4">
-											<span class="label">Stato civile:</span>
+											<span class="label">Qualifica:</span>
 										</div>
 										<div class="col" id="qualifica"></div>
 									</div>

css/tree.css

@@ -0,0 +1,89 @@
+/* Remove default bullets */
+ul, #tree {
+  list-style-type: none;
+}
+
+/* Remove margins and padding from the parent ul */
+#tree {
+  margin: 0;
+  padding: 0;
+}
+
+#tree li {
+  line-height: 1.2;
+  position: relative;
+  padding: 0 0 1em 1em;
+  }
+
+#tree ul li { padding: 1em 0 0 1em; }
+
+#tree > li:last-child { padding-bottom: 0; }
+
+/* ————————————————————–
+  Tree labels
+*/
+#tree_label {
+  position: relative;
+  display: inline-block;
+  background: #fff;
+  }
+
+label#tree_label { cursor: pointer; }
+
+label#tree_label:hover { color: #666; }
+
+/* ————————————————————–
+  Tree expanded icon
+*/
+label#tree_label:before {
+  background: #000;
+  color: #fff;
+  position: relative;
+  z-index: 1;
+  float: left;
+  margin: 0 1em 0 -2em;
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  content: '+';
+  text-align: center;
+  line-height: .9em;
+  }
+
+:checked ~ label#tree_label:before { content: '–'; }
+
+/* ————————————————————–
+  Tree branches
+*/
+
+.fa {
+  margin-right: 5px;
+}
+
+span.tree_label:after {
+  position: absolute;
+  top: 0;
+  left: -2em;
+  display: block;
+  height: 1.8em;
+  width: 2.5em;
+  border-bottom: 1px solid #777;
+  border-left: 1px solid #777;
+  border-radius: 0 0 0 0.3em;
+  content: '';
+    }
+
+#tree li:last-child:before {
+  height: 1em;
+  bottom: auto;
+  border:0px;
+  }
+
+#tree > li:last-child:before { display: none; }
+
+#tree_custom {
+  display: block;
+  background: #eee;
+  padding: 1em;
+  border-radius: 0.3em;
+}

js/OA.js

@@ -18,6 +18,7 @@ function handle_OAdata(json) {
       function (index, value) {
         var graph = value['graph']['value'];
         var label = value['label']['value'];
+        var uri = value['uri']['value'];
         var title = "";
         var type = "";
         var current_owner = "";
@@ -43,15 +44,13 @@ function handle_OAdata(json) {
         }
         if (value.hasOwnProperty('type')) {
           $("#OGTD").css("display", "flex");
-          type = "<div class='d-flex'><div class='mr-3'>" +
-                  value['type']['value'] + "</div><div class='d-flex ml-auto'><div class='mr-3'><a class='btn-icon' target='_blank' href='" +
-                  value['uriType']['value'] + "'><i class='fa fa-bullseye' aria-hidden='true'></i><p class='btn-text'>AAT</p></a></div></div></div></div>";
+          type = "<div class='d-flex'><div class='mr-3'><a href='" + value['uriType']['value'] + "'>" +
+                  value['type']['value'] + "</a></div></div>";
         }
         if (value.hasOwnProperty('current_owner')) {
           $("#LDCN").css("display", "flex");
-          current_owner = "<div class='d-flex'><div class='mr-3'>" +
-                            value['current_owner']['value'] + "</div><div class='d-flex ml-auto'><div class='mr-3'><a class='btn-icon' target='_blank' href='" +
-                            value['uriOwner']['value'] + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i><p class='btn-text'>LINK</p></a></div></div></div></div>";
+          current_owner = "<div class='d-flex'><div class='mr-3'><a href='" + value['uriOwner']['value'] + "'>" +
+                            value['current_owner']['value'] + "</a></div></div>";
         }
         if (value.hasOwnProperty('current_location')) {
           $("#LDCS").css("display", "flex");
@@ -87,25 +86,30 @@ function handle_OAdata(json) {
                 slice = mat[i].split("; ");
                 /*materials += "<a href='" + slice[0] + "'>" + slice[1] + "</a><br />";*/
 
-                materials += "<div class='d-flex'><div class='mr-3'>" +
-                          slice[1] + "</div><div class='d-flex ml-auto'><div class='mr-3'><a class='btn-icon' target='_blank' href='" +
-                          slice[0] + "'><i class='fa fa-bullseye' aria-hidden='true'></i><p class='btn-text'>AAT</p></a></div></div></div></div>";
+                materials += "<div class='d-flex'><div class='mr-3'><a href='" + slice[0] + "'>" +
+                slice[1] + "</a></div>";
             }
           }
         }
 
+        var Buttons = '<button title="Apri risorsa originale" class="btn btn-default" type="button" onclick="schedaASPO(\'' + uri + '\')"> \
+        <i class="fas fa-external-link-alt" aria-hidden="true"></i></button> \
+        <button title="Citazione" type="button" value="artwork" id="' + uri + '" class="cit btn btn-default" alt="scheda" title="Citazione"><i class="fa fa-quote-right"></i></button> \
+        <button title="Permalink" type="button" value="artwork" id="' + uri + '" class="hyp btn btn-default" alt="scheda" title="Hyperlink"><i class="fa fa-link"></i></button> \
+        <a href="http://dev.restore.ovi.cnr.it/lodlive/?' + uri + '" target="_blank"><button type="button" title="Naviga il grafo" class="btn btn-default info" alt="LOD" title="LodLive"><i class="fa fa-share-alt"></i></button></a></div></div>';
+
+
         document.getElementById("grafo").innerHTML = dataset;
         document.getElementById("nome_oggetto").innerHTML = label;
-        /*document.getElementById("title").innerHTML = title;*/
         document.getElementById("identifier").innerHTML = identifier;
         document.getElementById("type").innerHTML = type;
         document.getElementById("owner").innerHTML = current_owner;
-        /*document.getElementById("location").innerHTML = current_location;*/
         document.getElementById("subject").innerHTML = subject;
         document.getElementById("dimensions").innerHTML = dimensions + unit;
         document.getElementById("materials").innerHTML = materials;
         document.getElementById("condition").innerHTML = condition;
         document.getElementById("description").innerHTML = note;
+        document.getElementById("link_buttons").innerHTML = Buttons;
 
         
       });
@@ -154,9 +158,8 @@ function handle_Production(json) {
                 slice = tec[i].split("; ");
                 /*teche += "<a href='" + slice[0] + "'>" + slice[1] + "</a><br />";*/
 
-                teche += "<div class='d-flex'><div class='mr-3'>" +
-                          slice[1] + "</div><div class='d-flex ml-auto'><div class='mr-3'><a class='btn-icon' target='_blank' href='" +
-                          slice[0] + "'><i class='fa fa-bullseye' aria-hidden='true'></i><p class='btn-text'>AAT</p></a></div></div></div></div>";
+                teche += "<div class='d-flex'><div class='mr-3'><a href='" + slice[0] + "'>" +
+                          slice[1] + "</a></div>";
             }
           }
         }
@@ -171,9 +174,8 @@ function handle_Production(json) {
               } else {
                 $("#AUT").css("display", "flex");
                 artist_name += slice[1];
-                artist += "<div class='d-flex'><div class='mr-3'>" +
-                          slice[1] + "</div><div class='d-flex ml-auto'><div class='mr-3'><a class='btn-icon' target='_blank' href='" +
-                          slice[0] + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i><p class='btn-text'>LINK</p></a></div><div class='persona btn-icon' style='cursor:pointer' id='" +
+                artist += "<div class='d-flex'><div class='mr-3'><a href='" + slice[0] + "'>" +
+                          slice[1] + "</a></div><div class='d-flex ml-auto'><div class='persona btn-icon' style='cursor:pointer' id='" +
                           slice[0] + "'><i class='fa fa-user'></i><p class='btn-text'>SCHEDA<br />PERSONA</p></div></div></div></div>";
               }
           }
@@ -186,7 +188,6 @@ function handle_Production(json) {
         
         document.getElementById("technique").innerHTML = teche;
         document.getElementById("time").innerHTML = time;
-        /*document.getElementById("artist_name").innerHTML = artist_name;*/
         document.getElementById("artist").innerHTML = artist;
         document.getElementById("client").innerHTML = client;
         

js/object.js

@@ -42,6 +42,7 @@ function handle_objectData(json) {
         var uri_composed = "";
         var composed = "";
         var button_doc = "";
+        var treeList = "";
 
         var dataset = get_graph_name(graph);
 
@@ -88,7 +89,7 @@ function handle_objectData(json) {
           uri_composed = value['uri_document']['value'];
         }
         if (value.hasOwnProperty('document')) {
-          $("#composed").css("display", "flex");
+          //$("#composed").css("display", "flex");
           composed = value['document']['value'];
         }
 
@@ -97,8 +98,12 @@ function handle_objectData(json) {
         }
 
         if (uri_composed != "") {
-          button_doc = '<button title="Apri risorsa di livello superiore" id="' + uri_composed + '" class="object btn btn-default" type="button" > \
+          /*button_doc = '<button title="Apri risorsa di livello superiore" id="' + uri_composed + '" class="object btn btn-default" type="button" > \
           <i class="fa fa-book" aria-hidden="true">	<p class="btn-text">Livello superiore</p></i></button>';
+          */
+          treeList = '<li class="upLevel"><span id="' + uri_composed + '" class="object"><i class="fa fa-folder-open"></i>' + 
+          '<w class="link">' + composed + '</w></span><ul><li><span class="tree_label"><i class="fa fa-file-alt"></i>' + label + '<li></span><ul></li>'
+
         }
 
         if (owner != "") {
@@ -123,8 +128,9 @@ function handle_objectData(json) {
         document.getElementById("owner").innerHTML = button_owner;
         document.getElementById("timeSpan").innerHTML = dates;
         document.getElementById("superDoc").innerHTML = composed;
-        document.getElementById("btn_superDoc").innerHTML = button_doc;
+        //document.getElementById("btn_superDoc").innerHTML = button_doc;
         document.getElementById("link_buttons").innerHTML = Buttons;
+        document.getElementById("tree").innerHTML = treeList;
        
         
       });

js/query/managerQuery.js

@@ -868,7 +868,7 @@ var queryManager = {
     },
 
     querySchedaOpera : {
-            queryInfo : " SELECT DISTINCT ?graph ?identifier ?label ?title ?uriType ?type ?uriOwner ?current_owner ?current_location ?subject (group_concat(distinct ?value ; separator='x') as ?dimensions) SAMPLE(?unit) AS ?unit (GROUP_CONCAT(DISTINCT CONCAT(?uriMaterial, '; ', ?material) ; SEPARATOR = '<br />') AS ?Materials) ?condition ?note \
+            queryInfo : " SELECT DISTINCT ?graph ?uri ?identifier ?label ?title ?uriType ?type ?uriOwner ?current_owner ?current_location ?subject (group_concat(distinct ?value ; separator='x') as ?dimensions) SAMPLE(?unit) AS ?unit (GROUP_CONCAT(DISTINCT CONCAT(?uriMaterial, '; ', ?material) ; SEPARATOR = '<br />') AS ?Materials) ?condition ?note \
             WHERE { \
             VALUES ?uri {<{URI}>} \
             GRAPH ?graph {?uri rdfs:label ?label} \

js/search.js

@@ -139,16 +139,16 @@ function rewrite_graph(graph) {
 	var graph_name = ""
 
 	if (graph == "http://dev.restore.ovi.cnr.it:8890/aspo/datini") {
-		graph_name = "Archivio di Stato di Prato"; 
+		graph_name = "Archivio di Stato di Prato - Fondo Datini"; 
 	}
 	else if (graph == "http://dev.restore.ovi.cnr.it:8890/aspo/ospedale") {
-		graph_name = "Archivio di Stato di Prato";
+		graph_name = "Archivio di Stato di Prato - Fondo Ospedale Misericordia e Dolce";
 	}
 	else if (graph ==  "http://dev.restore.ovi.cnr.it:8890/aspo/marcovaldi") {
-		graph_name = "Archivio di Stato di Prato";
+		graph_name = "Archivio di Stato di Prato - Fondo Marcolvaldi";
 	}
 	else if (graph ==  "http://dev.restore.ovi.cnr.it:8890/aspo/gettatelli") {
-		graph_name = "Archivio di Stato di Prato";
+		graph_name = "Archivio di Stato di Prato - Fondo Ospedale Misericordia e Dolce";
 	}
 	else if (graph ==  "http://dev.restore.ovi.cnr.it:8890/aspo/actors") {
 		graph_name = "Archivio di Stato di Prato";
@@ -181,13 +181,13 @@ function rewrite_graph(graph) {
 		graph_name = "Toponimi Archivio di Stato di Prato";
 	}
 	else if (graph ==  "http://dev.restore.ovi.cnr.it:8890/aspo/onomastica") {
-		graph_name = "Onomastica Datini";
+		graph_name = "Archivio di Stato di Prato - Onomatica Datini";
 	}
 	else if (graph ==  "http://dev.restore.ovi.cnr.it:8890/aspo/gettatelli/newdataset") {
-		graph_name = "Archivio di Stato di Prato";
+		graph_name = "Archivio di Stato di Prato - Fondo Ospedale Misericordia e Dolce";
 	}
 	else if (graph ==  "http://dev.restore.ovi.cnr.it:8890/aspo/onomastica/gruppi") {
-		graph_name = "Onomastica Datini";
+		graph_name = "Archivio di Stato di Prato - Onomastica Datini";
 	}
 	else {graph_name = graph;
 	}

js/tree.js

@@ -0,0 +1,9 @@
+var toggler = document.getElementsByClassName("caret");
+var i;
+
+for (i = 0; i < toggler.length; i++) {
+  toggler[i].addEventListener("click", function() {
+    this.parentElement.querySelector(".nested").classList.toggle("active");
+    this.classList.toggle("caret-down");
+  });
+}

object.html

@@ -16,6 +16,7 @@
 	<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
 
 	<link href="css/pages.css" rel="stylesheet">
+	<link href="css/tree.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>
@@ -259,6 +260,32 @@
 							<div class="placeholder_container">
 								<div id="placeholder_documenti" class="row" id="references_documents">
 									<p class="section_box col-12">Risorse collegate <span id="nome3" class="font-italic PN"></span></p>
+
+									<ul id="tree"></ul>
+
+									<!--
+									<ul>
+										<li><span class="caret">Beverages</span>
+										  <ul class="nested">
+											<li>Water</li>
+											<li>Coffee</li>
+											<li><span class="caret">Tea</span>
+											  <ul class="nested">
+												<li>Black Tea</li>
+												<li>White Tea</li>
+												<li><span class="caret">Green Tea</span>
+												  <ul class="nested">
+													<li>Sencha</li>
+													<li>Gyokuro</li>
+													<li>Matcha</li>
+													<li>Pi Lo Chun</li>
+												  </ul>
+												</li>
+											  </ul>
+											</li>  
+										  </ul>
+										</li>
+									  </ul>-->
 									
 									<div class="box_results col-12" id="sent">
 										<div class="inner_results container-fluid">
@@ -304,31 +331,10 @@
 							</div>
 						</div>
 
-							<!-- <div class="d-flex justify-content-end" id="map_buttons">
-								<a href="#placeholder_luoghi">
-									Informazioni <i class="fas fa-arrow-down" aria-hidden="true"></i>
-								</a>
-								<a href="#placeholder_persone">
-									Contenuti <i class="fas fa-arrow-down" aria-hidden="true"></i>
-								</a>
-								<a href="#placeholder_documenti">
-									Localizzazione <i class="fas fa-arrow-down" aria-hidden="true"></i>
-								</a>
-							</div> -->
-
-							<!-- <hr /> -->
-
-							<!-- <div class="placeholder_container">
-								<div id="placeholder_localizzazione" class="row">
-									<div class="col-12">
-										<p class="section_box">Localizzazione</p>
-									</div>
-								</div>
-							</div> -->
-						</div>
 					</div>
 				</div>
 			</div>
+			
 		</section>
 	</main>
 
@@ -399,6 +405,7 @@
 	<script src="js/query/managerQuery.js"></script>
 	<script src="js/utilities.js"></script>
 	<script src="js/object.js"></script>
+	<script src="js/tree.js"></script>
 
 	<!-- Bootstrap core JavaScript -->
 	<script src="vendor/jquery/jquery.min.js"></script>