aggiunta vista 'frasi'

js/cesareBrowse.js

@@ -8,13 +8,12 @@ var lsid;
 var lsentid;
 //var getDimDiv;
 const formaClass='frm'
-
+var selectedVista;
  
 $(document).ready(function() {
 	lsid='';
 	removeGraph=false;
 						
-						
 	const cantobadgeclass = 'badge badge-outline-info badge-pill'
 
 	const sparqlGenerator = sparqljs.Generator;
@@ -31,6 +30,8 @@ $(document).ready(function() {
 	var displayId = 'displaycanto'
 	var cantiche=["Inferno", "Purgatorio","Paradiso"]
 	var loadedCanti=new Set();
+	const openSTag="{"
+	const closeSTag="}"
 	
 	var cantoDisplayed = "#InfernoCanto_1";
 	
@@ -63,46 +64,70 @@ $(document).ready(function() {
 	console.log(`Load cantiche time: ${end - start} ms`);
 
 $("#valoreVista").on('change', function() {
-	var selectedVista = $(this).val();
+	selectedVista = $(this).val();
 	switch (selectedVista){
 		case "forme":
 					$("#vistaFrasi").css("display", "none");
 					$("#vistaDialoghi").css("display", "none");
 					$("#vistaMetafore").css("display", "none");
+					resetFrasi()
 					$(cantoDisplayed).attr('style', 'display: d-flex;')
 					break;
 		case "frasi":
 					loadFrasi();
 					$("#vistaDialoghi").css("display", "none");
 					$("#vistaMetafore").css("display", "none");
-					$(cantoDisplayed).css("display", "none");
+					//$(cantoDisplayed).css("display", "none");
-					$("#vistaFrasi").attr('style', 'display: d-flex;');
+					//$("#vistaFrasi").attr('style', 'display: d-flex;');
 					break;					
 		case "metafore":
-					loadMetafore();
+					//loadMetafore();
-					$("#vistaDialoghi").css("display", "none");
+					//$("#vistaDialoghi").css("display", "none");
-					$("#vistaFrasi").css("display", "none");
+					//$("#vistaFrasi").css("display", "none");
-					$(cantoDisplayed).css("display", "none");
+					//resetFrasi()
-					$("#vistaMetafore").attr('style', 'display: d-flex;');
+					//$(cantoDisplayed).css("display", "none");
+					//$("#vistaMetafore").attr('style', 'display: d-flex;');
 					break;			
 		case "dialoghi":
-					loadDialoghi();
+					//loadDialoghi();
-					$("#vistaMetafore").css("display", "none");
+					//$("#vistaMetafore").css("display", "none");
-					$("#vistaFrasi").css("display", "none");
+					//$("#vistaFrasi").css("display", "none");
-					$(cantoDisplayed).css("display", "none");
+					//resetFrasi()
-					$("#vistaDialoghi").attr('style', 'display: d-flex;');
+					//$(cantoDisplayed).css("display", "none");
+					//$("#vistaDialoghi").attr('style', 'display: d-flex;');
 					break;
 	}
 });
 
 function loadFrasi() {
-	var spanFrase = $('<span />')
+	//var spanFrase = $('<span />')
 	
-	for (pos=0;pos<20;pos++){
+	/*for (pos=0;pos<20;pos++){
 		spanFrase.attr('id', pos)
 		spanFrase.append("La mia più bella frase numero "+" "+pos+"<br>");		
 		$("#vistaFrasi").append(spanFrase);
-	}
+	}*/
+	
+	$(cantoDisplayed).find(' .sentencetag').each(function() {
+		$(this).attr('style', 'display: d-flex;');
+	})
+	$(cantoDisplayed).find(' .'+formaClass).each(function() {
+		stp=$(this).attr('class').split(" ")[1]
+
+		$(this).css('color', colorssp(mapsynttypestopalette[stp]));
+	})
+	drawMinimap(cantoDisplayed.replace('#',''))
+}
+function resetFrasi(){
+	
+	$(cantoDisplayed).find(' .sentencetag').each(function() {
+		$(this).css('display', 'none');
+	})
+	$(cantoDisplayed).find(' .'+formaClass).each(function() {
+		//console.log(colorssp(mapsynttypestopalette[stp]))
+		$(this).css('color', '');
+	})
+	drawMinimap(cantoDisplayed.replace('#',''))
 }
 function loadDialoghi() {
 	var spanFrase = $('<span />')
@@ -128,7 +153,7 @@ $(" ."+formaClass).each(function(idx, element) {
         // We cycle through the elements using each() so that we can choose the element specifically that we wish to clean up afterward
 		var ele = $(element);
 			ele.tooltip({
-				content: (function() {return formatTTContent(ele.attr('title'));}),
+				content: (function() {return formatTTContent(ele.attr('title'), ele.attr('class').split(' ')[1]);}),
   				classes:{"ui-tooltip":'Nik_dropdown-content'},
   				close: function (event, ui) {$(".ui-helper-hidden-accessible").remove();},
        			create: function(ev, ui) {$(this).data("ui-tooltip").liveRegion.remove();},
@@ -206,6 +231,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 	
 
 	jQuery(document).delegate('.navig-canto', 'click', function(e) {
+		resetFrasi()
 		$('.canto').each(function() {
 			$(this).css("display", "none");
 		});
@@ -231,7 +257,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 		$(" ."+formaClass).each(function(idx, element) {
 		var ele = $(element);
 			ele.tooltip({
-				content: (function() {return formatTTContent(ele.attr('title'));}),
+				content: (function() {return formatTTContent(ele.attr('title'), ele.attr('class').split(' ')[1]);}),
   				classes:{"ui-tooltip":'Nik_dropdown-content'},
   				close: function (event, ui) {$(".ui-helper-hidden-accessible").remove();},
        			create: function(ev, ui) {$(this).data("ui-tooltip").liveRegion.remove();},
@@ -278,7 +304,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 	
 	//Utility functions
 	
-	function formatTTContent(categ){
+	function formatTTContent(categ, syntType){
 		var details=[];
 		
 		details = getHoverContent(categ);
@@ -287,11 +313,14 @@ $(" ."+formaClass).hover(function(idx, element) {
 		var catgramm;
 		var subcatgramm = '';
 		var popoverText = '';
+		if (selectedVista=='frasi'){
+			return '<div style="color: #00008B; padding: 5px 5px 0px 5px; "><b>'+maptypes[syntType]+'</b></div>';
+		}
 
 		for (detail of details){
 			myitems= detail.split(',');	
 			
-			catgramm='<div style="color: #00008B; padding: 5px 5px 0px 5px; "';
+			catgramm='<div style="color: #00008B; padding: 5px 5px 0px 5px; ">';
 			subcatgramm='<p> <b>'+myitems[0]+'</b><i>'+myitems.slice(1,-1)+'</i></p></div>';			
 			popoverText = popoverText + catgramm + subcatgramm;
 		}
@@ -300,6 +329,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 	}
 
 	function getHoverContent(categ){
+		
 		//console.log('Categoria '+categ)
 		var mycat=[];
 		if(categ.includes('^')){
@@ -347,31 +377,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 		}
 		return categoriegrammaticali[categ[0]]
 	}
-	/*
-	function drawMinimap(name){
 	
-		showMinimap(name)
-		//$('iframe').contents().find('body').css('backgroundColor', '#eaeae6;');
-		currentMinimap = name;
-
-		//mmviewer diventa draggable
-		var minimapTopPos = $('#minimapviewer').offset().top
-		console.log("top viewer init " + minimapTopPos)
-
-		$('#minimapviewer').draggable({
-			axis: "y",
-			containment: $('#displayminimap'),
-			scroll: false,
-			start: function(event, ui) { minimapScrolling = true; },
-			stop: function(event, ui) { minimapScrolling = false; },
-			drag: function(event, ui) {
-
-				minimapScrolling = true;
-				trackScrollViewer(ui.offset.top - minimapTopPos);
-			}
-		});
-	}
-	*/
 	function cleanSearchResult() {
 		
 		for (msid of listaPeriodiRisultato){
@@ -458,127 +464,33 @@ $(" ."+formaClass).hover(function(idx, element) {
 		$(" ." + sentence).removeClass('text-info font-italic')
 	}
 
-	//minimap management
 
-/*
-	function showMinimap(element) {
-		mmplace = document.getElementById('displayminimap')
-		minimap.className = 'minimap__container'
-		minimapSize.className = 'minimap__size'
-		viewer.className = 'minimap__viewer'
-		viewer.id = 'minimapviewer'
-		minimapContent.className = 'minimap__content'
-		minimap.append(minimapSize, viewer, minimapContent);
-
-		mmplace.appendChild(minimap)
-
-		let html = document.getElementById(element).outerHTML//innerHTML
-		if (html == null | html == '')
-			return;
-
-		let iFrameDoc = minimapContent.contentWindow.document;
-	
-		var cssLinkb = document.createElement("link");
-		cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css";
-		cssLinkb.rel = "stylesheet";
-		cssLinkb.type = "text/css";
-
-		var cssLinkscroll = document.createElement("link");
-		cssLinkscroll.href = "./css/browsingldc.css";
-		cssLinkscroll.rel = "stylesheet";
-		cssLinkscroll.type = "text/css";
-
-		iFrameDoc.open();
-		iFrameDoc.write(html);
-		iFrameDoc.close();
-
-		iFrameDoc.head.appendChild(cssLinkb);
-		iFrameDoc.head.appendChild(cssLinkscroll);
-		$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
-		mappedElement = element
-
-		getDimensionsDiv()
-
-		//window.addEventListener('scroll', trackScroll)
-		window.addEventListener('resize', getDimensionsDiv)
-		
-	}
-
-
-
-	
-	function getInnerHeight(elm) {
-		var computed = getComputedStyle(elm),
-			padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
-
-		return elm.clientHeight - padding
-	}
-	
-	function getDimensionsDiv() {
-		var cantoplace = document.getElementById(displayId)
-		var elementplace = document.getElementById(mappedElement)
-
-		var bodyWidth = elementplace.clientWidth;
-		var bodyRatio = elementplace.clientHeight / bodyWidth;
-	 
-		let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
-
-		//minimap.style.width='15%';
-		minimap.style.width = '100%';
-
-		realScale = minimap.clientWidth / (bodyWidth / 2);
-
-		minimapSize.style.paddingTop = `${bodyRatio * 100}%`
-		viewer.style.paddingTop = `${winRatio * 100}%`;
-		minimapContent.style.transform = `scale(${realScale})`;
-		minimapContent.style.width = `${(100 / realScale)}%`;
-		minimapContent.style.height = `${(100 / realScale)}%`; 
-		//minimapContent.style.height=`100%`;
-		minimapContent.style.float = 'right';
-	}
-
-	getDimDiv = function(){
-		getDimensionsDiv();
-	}*/
-	/*
-	function trackScroll() {
-		console.log('sc '+window.scrollY)
-		viewer.style.transform = `translateY(${window.scrollY * realScale}px)`
-	}*/
-	/*
-	function trackScrollCanto() {
-		console.log('cantoscrollT*realscale ' + document.getElementById(displayId).scrollTop * realScale + ' top: ' + document.getElementById(displayId).scrollTop)
-		viewer.style.transform = `translateY(${document.getElementById(displayId).scrollTop * realScale}px)`
-	}
-	function trackScrollViewer(toppos) {
-		console.log('scrollMMView top*1/realScale: ' + toppos * (1 / realScale) + ' top  pos: ' + toppos)
-		did = document.getElementById(displayId)
-
-		did.scrollTop = (toppos * (1 / realScale))
-	}
-
-	function hideMinimap() {
-		$('.canto').each(function() {
-			$(this).attr("style", 'display:none');
-		});
-		$(".minimap__container").remove();
-		currentMinimap = ''
-	}
-*/
 	//Cantica management functions
 	
 	function showCanto(formecantica, idcantica, canto) {
 		var setVersiCanto = new Set()
+		
 		var cantica=cantiche[parseInt(idcantica)-1];
-		var elverso, formaItem
+		var elverso, formaItem, currSentenceId;
 		formecantica.map(function(item) {
 			formaItem = item.split("_");
 			var sentenceid=idcantica+"_"+formaItem[1]+"_s_"+formaItem[5]
 			if (formaItem[1]==canto){
 				if (! setVersiCanto.has(cantica + "_" + formaItem[3] + "_" + 'Canto_' + formaItem[1])){
+					if(currSentenceId!=null && currSentenceId != sentenceid){
+						createSpanPeriodiTag(closeSTag, 'c', formaItem[2]-1, currSentenceId, elverso)
+						currSentenceId=null
+					}
 					elverso=createDivVersoNew(cantica, formaItem[3], 'Canto_' + formaItem[1])
 					setVersiCanto.add(cantica+ "_" + formaItem[3] + "_" + 'Canto_' + formaItem[1])
 				}
+				if(currSentenceId==null || currSentenceId != sentenceid){
+					if (currSentenceId!=null){
+						createSpanPeriodiTag(closeSTag, 'c', formaItem[2]-1, currSentenceId, elverso)
+					}
+					currSentenceId=sentenceid;
+					createSpanPeriodiTag(openSTag, 'o', formaItem[2], sentenceid, elverso)
+				}
 				createSpanFormeNew(formaItem[0], formaItem[4], formaItem[2], sentenceid,formaItem[6],elverso)
 			
 			}
@@ -604,6 +516,21 @@ $(" ."+formaClass).hover(function(idx, element) {
 		
 	}
 
+	function createSpanPeriodiTag(separator, catgramm, pos, sentenceid, elementoverso) {
+		var spanoccorrenza = $('<span />')
+		spanoccorrenza.attr('id', 'sep_'+pos)
+		spanoccorrenza.attr('title', catgramm)
+		spanoccorrenza.attr('class', sentenceid+' sentencetag')
+		spanoccorrenza.append(separator+" ")
+		if (separator==closeSTag){
+			varsupel=$('<sup />')
+			varsupel.append(sentenceid.split('_')[3]+' ')
+			varsupel.appendTo(spanoccorrenza)
+		}
+		spanoccorrenza.css("display", "none")
+		spanoccorrenza.appendTo(elementoverso)
+
+	}
 	
 	function createSpanFormeNew(forma, catgramm, pos, sentenceid, clausefunct, elementoverso) {
 		var spanoccorrenza = $('<span />')
@@ -782,7 +709,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 						//$(mysid).addClass("font-weight-bold mark ")
 						listaPeriodiRisultato.push(mysid)
 						$(mysid).each(function(){
-							console.log('add id '+$(this).attr('id'));
+							//console.log('add id '+$(this).attr('id'));
 							listarisultati.push($(this).attr('id'))
 						});
 						if (!resSent.has(fraseItems[0])){

js/syntgraph.js

@@ -12,10 +12,11 @@ const synttypes=["princ", "subord I","subord II","subord III","coord", "coord I"
 
 //var clausecolors=d3.scaleOrdinal(d3.schemeSet1).domain(synttypes)
 
-const maptypes={"Ma": "princ", "SubI": "subord I", "SubII": "subord II", "SubIII": "subord III", "Co": "coord", 
+/*const maptypes={"Ma": "princ", "SubI": "subord I", "SubII": "subord II", "SubIII": "subord III", "Co": "coord", 
 				"CoI": "coord I", "CoII": "coord II", "SubIV": "subord IV", "SubV": "subord V", "ParentethicalClause": "parent",
 				"CoIII": "coord III", "ParentheticalCo":"pcoord", "PseudoCo": "oord 0", "SubVI": "subord VI" , "CoIV": "coord IV",
 				 "CoV": "coord V", "ParentheticalCoI": "pcoord I", "SubVII": "subord VII"}
+				 */
 //const structpalette=d3.quantize(d3.interpolateHcl("#4d4193", "#60c96e"), 18)
 const maptypestopalette={"Ma": 0, "SubI": 1, "SubII": 3, "SubIII": 4, "Co": 5, 
 				"CoI": 9, "CoII": 10, "SubIV": 5, "SubV": 6, "ParentethicalClause": 17,
@@ -54,7 +55,8 @@ document.addEventListener("dblclick", function(e){
 		var sentence = document.getElementsByClassName(tmpsent);
 		for (let i = 0; i < sentence.length; i++) {
   			sentence[i].classList.remove('font-italic');
-  			sentence[i].style.removeProperty('color');
+  			if (selectedVista!='frasi')
+  				sentence[i].style.removeProperty('color');
   			
   			sentence[i].classList.remove('font-weight-normal');
 		}
@@ -83,9 +85,10 @@ document.addEventListener("dblclick", function(e){
   			//console.log(collection[i].className)
   			var synttp=collection[i].className.split(" ")[1]
   			
-  			console.log(maptypes[synttp]+' '+maptypestopalette[synttp]+', '+colorssp(maptypestopalette[synttp]))
+  			//console.log(maptypes[synttp]+' '+maptypestopalette[synttp]+', '+colorssp(maptypestopalette[synttp]))
-  			//collection[i].style.color = getColor(maptypes[synttp]);
+  			//collection[i].style.background = colorssp(maptypestopalette[synttp]);
   			collection[i].style.color = colorssp(maptypestopalette[synttp]);
+  			
   			//collection[i].style.removeProperty('color');
 		}
 	}

js/utils.js

@@ -234,7 +234,24 @@ WHERE {
 
 `
 
+//colori
 
+var colorssp = d3.scaleQuantize()
+    .domain([0,17])
+    .range(["#3288bd", "#66c2a5", "#e41a1c", "#4daf4a", "#984ea3", "#d53e4f", "#f46d43", "#ABDDA4", 
+    		"#E6F598", "#FFFFBF", "#FEE08B", "#FDAE61", "#F46D43", 
+    		"#D53E4F", "#9E0142",  "#e377c2", "#7f7f7f", "#bcbd22"]);
+
+const mapsynttypestopalette={"Ma": 0, "SubI": 1, "SubII": 3, "SubIII": 4, "Co": 5, 
+				"CoI": 9, "CoII": 10, "SubIV": 5, "SubV": 6, "ParentethicalClause": 17,
+				"CoIII": 11, "ParentheticalCo":14, "PseudoCo": 16, "SubVI": 7 , "CoIV": 12,
+				 "CoV": 13, "ParentheticalCoI": 15, "SubVII": 8}
+ 
+const maptypes={"Ma": "Principale", "SubI": "Subordinata I grado", "SubII": "Subordinata II grado", "SubIII": "Subordinata III grado", "Co": "Coordinata", 
+				"CoI": "Coordinata I grado", "CoII": "Coordinata II grado", "SubIV": "Subordinata IV grado", "SubV": "Subordinata V grado", 
+				"ParentethicalClause": "Parentetica", "CoIII": "Coordinata III grado", "ParentheticalCo":"Coordinata alla parentetica", 
+				"PseudoCo": "Pseudo-coordinata", "SubVI": "Subordinata VI grado" , "CoIV": "Coordinata IV grado", "CoV": "Coordinata V grado", 
+				"ParentheticalCoI": "Coordinata alla parentetica I grado", "SubVII": "Subordinata VII grado"}
 
 orlprefix = 'https://dantenetwork.it/ontology/orl/current/'