Prima versione con gruppi note, work in progress

index_4.4.html

@@ -485,7 +485,7 @@
 											</div>
 										</div>
 										<div class="d-flex flex-row justify-content-start">
-											<div id="Test" class="blog-main-16 mx-3" style="display: none;">abcdefghijklmnopqrstuvwxyzABCD.,</div>
+											<div id="Test" class="blog-main-16 mx-3" style="display: none;">abcde fghij klmno pqrst uvwxy zABCD.,</div>
 										</div>
 									</div>
   									<div class="tab-pane fade p-0 bg-lida-vis" id="vis1" role="tabpanel" aria-labelledby="vis1-tab">

js/cesareBrowse.js

@@ -775,18 +775,22 @@ function resetFrasi(){
 		}
 	}
 	
+	function removeHtmlTags(value){
+		var text = value;
+			if (text != null){
+				text = text.replace(/<(.|\n)*?>/g, '');
+				text = text.replace("&laquo;","");
+				text = text.replace("&raquo;","");
+				text = text.replace(/[\r\n]+/gm, ' ');
+				return text;
+			}
+	}
+	
 	jQuery(document).delegate(' .showcomments', 'click', function() {
 		var cid = $(this).attr('id');
-		
-		if(!hasComments(cid)){
-			return
-		}
 		if(!hasCommentsJson(cid)){
 			return
 		}
-		
-		
-		
 		var parcid=cid.split('_')
 		var cantica;
 		switch (parcid[1]){
@@ -803,80 +807,91 @@ function resetFrasi(){
 		}
 		var id = cid.substr(9);		
 		var collapseNote;
-		var saveVersoCitazione = "";
+		var gruppoVersi;
-		
+		var versText = "";
-		//start commentsJson
+		//var saveVersoCitazione = "";
-		
 		var allGrouplKeys = Object.keys(commentsJson);
+		var currentGroup;
 		
 		allGrouplKeys.sort().some(function(k){ 
-							if (k==id || ~k.indexOf(id+'-')){
+			if (k==id || ~k.indexOf(id+'-')){
-								console.log('gruppo commenti '+k)
+				//console.log('gruppo commenti '+k)
-								console.log (commentsJson[k])
+				//console.log (commentsJson[k])
-								//codice per la visualizzazione
+				gruppoVersi = k.split("_").slice(-1)[0]
-							}					
+				if (gruppoVersi.includes("-")) {
+					versText = ", Versi " + gruppoVersi;
+				} else {
+					versText = ", Verso " + gruppoVersi;
+				}
+				currentGroup = createNoteGroup(cantica, getRoman(parcid[2]), versText, k)
+				commentsJson[k].forEach(function (value, i) {
+					currentGroup.append(createNoteEntry(value,k,i))
+				});
+				commentArea.append(currentGroup);
+			}
+			$('#tab-list #vis0-tab').tab('show')
    		})
 
-		
-		//end commentsJson
-		
-		for (var pos in commentsArray){
-			console.log("Id: "+id);
-			var noteCard = $('<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard' + id + '">');			
-			//var collapseCardBody = $('<div class="card-body px-0 py-2 mx-1 mb-1 mt-0 border-top rounded" >');
-			var collapseCardBody = $('<div class="card-body px-0 py-1 mx-3 my-0 border-top rounded" >');
-			var divCampiSingoli = $('<div class="d-flex align-content-start flex-wrap text-muted">');
-
-			var comments = commentsArray[pos]
-			if (comments.verso == id){
-				createNoteHeader(noteCard, comments, id, pos, cantica, parcid, saveVersoCitazione);			
-				
-				collapseNote = $('<div class="collapse show">');
-				collapseNote.attr('id',"collapseNote"+id+ '_' + pos)
-
-				if (comments.TestoFonteCitazione != null && comments.TestoFonteCitazione != "nan"){
-					createModule(collapseCardBody,"Testo della fonte: ", comments.TestoFonteCitazione, "1", id, pos)
-				}
-				if (comments.NaturaRiferimento != null){				
-					createDivSingola(divCampiSingoli, "Tipo di riferimento: ", comments.NaturaRiferimento, false)
-					divCampiSingoli.appendTo(collapseCardBody);
-					if (comments.NaturaRiferimento == "CITAZIONE" || comments.NaturaRiferimento == "LOCI PARALLELI" ){
-						if (comments.TipoCitazione != null && comments.TipoCitazione != ""){
-							createDivSingola(divCampiSingoli, "Tipo citazione: ", comments.TipoCitazione, false)
-							divCampiSingoli.appendTo(collapseCardBody);
-						}
-						appendSpecifica(comments,divCampiSingoli,collapseCardBody)
-					}
-				}		
-				if (comments.RapportoSoggettoOggetto != null){
-					createDivSingola(divCampiSingoli, "Rapporto testo/fonte: ", comments.RapportoSoggettoOggetto, false)
-					divCampiSingoli.appendTo(collapseCardBody);
-				}
-				if (comments.RapportoCommentoCommentatoreText != null && comments.RapportoCommentoCommentatoreText != "nan"){
-					createModuleCommentatore (collapseCardBody, comments.RapportoCommentoCommentatoreText, "5", id, pos)
-				}
-				if (comments.frammentoNota != null && comments.frammentoNota != "nan" && comments.annotazione != null && comments.annotazione != "nan") {
-					createModuleFrammAnnot(collapseCardBody, comments.frammentoNota, comments.annotazione, "6", id, pos)
-				} else {
-					if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
-						createModule(collapseCardBody,"Nota: ", comments.frammentoNota, "7", id, pos)
-					}				
-					if (comments.annotazione != null && comments.annotazione != "nan"){
-						createModule(collapseCardBody,"Nota completa: ", comments.annotazione, "6", id, pos)
-					}				
-				}
-				if (comments.NotaFonteCitazione != null && comments.NotaFonteCitazione != "nan" && comments.NotaFonteCitazione != ""){
-					createModule(collapseCardBody,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id, pos)
-				}
-				collapseCardBody.appendTo(collapseNote);
-				collapseNote.appendTo(noteCard);
-				commentArea.append(noteCard)
-				saveVersoCitazione = comments.VersoCitazione;
-			}
-		}		
-		$('#tab-list #vis0-tab').tab('show')
 	})
 
+	function createNoteGroup(cantica, canto, versi, id) {
+		var noteGroupCard = $('<div class="card card-body well well-sm mx-1 my-2 p-0" id="noteGroupCard' + id + '">');
+		noteGroupCard.append('<h6 class="card-title m-2 text-warning">' + cantica + ", Canto " + canto + versi + "</h6>");
+		return noteGroupCard;
+	}
+	
+	function createNoteEntry(comments,id,pos) {
+		var noteCard = $('<div class="card card-body well well-sm mx-1 mb-1 mt-0 p-0 border-lida08" id="noteCard' + id + '">');			
+		//var noteCard = $('<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard' + id + '">');			
+		//var collapseCardBody = $('<div class="card-body px-0 py-2 mx-1 mb-1 mt-0 border-top rounded" >');
+		var collapseCardBody = $('<div class="card-body px-0 py-1 mx-3 my-0 border-top rounded" >');
+		var divCampiSingoli = $('<div class="d-flex align-content-start flex-wrap text-muted">');
+		//createNoteHeader(noteCard, comments, id, pos, cantica, parcid, saveVersoCitazione);			
+		createNoteHeader(noteCard, comments, id, pos);			
+			
+		collapseNote = $('<div class="collapse show">');
+		collapseNote.attr('id',"collapseNote"+id+ '_' + pos)
+
+			if (comments.TestoFonteCitazione != null && comments.TestoFonteCitazione != "nan"){
+				createModule(collapseCardBody,"Testo della fonte: ", removeHtmlTags(comments.TestoFonteCitazione), "1", id, pos)
+			}
+			if (comments.NaturaRiferimento != null){				
+				createDivSingola(divCampiSingoli, "Tipo di riferimento: ", comments.NaturaRiferimento, false)
+				divCampiSingoli.appendTo(collapseCardBody);
+				if (comments.NaturaRiferimento == "CITAZIONE" || comments.NaturaRiferimento == "LOCI PARALLELI" ){
+					if (comments.TipoCitazione != null && comments.TipoCitazione != ""){
+						createDivSingola(divCampiSingoli, "Tipo citazione: ", comments.TipoCitazione, false)
+						divCampiSingoli.appendTo(collapseCardBody);
+					}
+					appendSpecifica(comments,divCampiSingoli,collapseCardBody)
+				}
+			}		
+			if (comments.RapportoSoggettoOggetto != null){
+				createDivSingola(divCampiSingoli, "Rapporto testo/fonte: ", comments.RapportoSoggettoOggetto, false)
+				divCampiSingoli.appendTo(collapseCardBody);
+			}
+			if (comments.RapportoCommentoCommentatoreText != null && comments.RapportoCommentoCommentatoreText != "nan"){
+				createModuleCommentatore (collapseCardBody, comments.RapportoCommentoCommentatoreText, "5", id, pos)
+			}
+			if (comments.frammentoNota != null && comments.frammentoNota != "nan" && comments.annotazione != null && comments.annotazione != "nan") {
+				createModuleFrammAnnot(collapseCardBody, removeHtmlTags(comments.frammentoNota), removeHtmlTags(comments.annotazione), "6", id, pos)
+			} else {
+				if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
+					createModule(collapseCardBody,"Nota: ", removeHtmlTags(comments.frammentoNota), "6", id, pos)
+				}				
+				if (comments.annotazione != null && comments.annotazione != "nan"){
+					createModule(collapseCardBody,"Nota completa: ", removeHtmlTags(comments.annotazione), "7", id, pos)
+				}				
+			}
+			if (comments.NotaFonteCitazione != null && comments.NotaFonteCitazione != "nan" && comments.NotaFonteCitazione != ""){
+				createModule(collapseCardBody,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id, pos)
+			}
+			collapseCardBody.appendTo(collapseNote);
+			collapseNote.appendTo(noteCard);
+			return noteCard;
+	}
+	
+	
 	function appendSpecifica(commenti,cardBody, collapseCard){
 		var specifica = "";
 
@@ -912,12 +927,12 @@ function resetFrasi(){
 		}
 	}
 
-	function createNoteHeader(noteCardX, comments, id, pos, cantica, parcid, versoCitazionePrecedente){
+	function createNoteHeader(noteCardX, comments, id, pos) { //, cantica, parcid, versoCitazionePrecedente){
 		var nomeAutore = "";
 		var titoloFonte = "";
 		var luogoFonte = "";
 		var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted" id="commentoVerso' + id + '_' + pos + '">')
-		var rigaNota = $('<div class="px-3 py-1 mt-1">');
+		var rigaNota = $('<div class="px-3 py-1 m-0">');
 		var buttons = $('<div class="d-flex flex-wrap-reverse ml-auto align-items-center justify-content-end p-1">')
 		var collapseButton = $('<button id="collapseBtnNote'+id+ '_' + pos +'"'+
 				'class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded text-primary align-self-end px-1 pb-0"'+
@@ -927,17 +942,6 @@ function resetFrasi(){
 		var closeButton = $('<button id="closeNote'+id+ '_' + pos +'"'+
 				'class="btn btn-sm btn-outline-primary bg-light closeNote border rounded text-primary align-self-end px-1 pb-0 ml-1 mb-1">'+
 				'<ion-icon name="close-circle"></ion-icon>');
-		
-		//rigaNota.append('<b>' + cantica + '</b>' + ", Canto " + getRoman(parcid[2]) + ", Verso " + parcid[3] + "<br>");
-		if (versoCitazionePrecedente == ""){
-			rigaNota.append('<h6 class="card-title mb-2 text-warning">' + cantica + ", Canto " + getRoman(parcid[2]) + " </h6>");
-
-		}
-		if (versoCitazionePrecedente != comments.VersoCitazione){
-			rigaNota.append('<h6 class="card-title mb-2 text-warning">' + " Verso " + comments.VersoCitazione + "</h6>");
-
-		}
-		//rigaNota.append('<h6 class="card-title mb-2 text-warning">' + cantica + ", Canto " + getRoman(parcid[2]) + ", Verso " + parcid[3] + "</h6>");
 		collapseButton.appendTo(buttons);
 		closeButton.appendTo(buttons);
 
@@ -995,7 +999,7 @@ function resetFrasi(){
 	}
 
 	function createModule(collapse,label, testo, num, id, pos){
-		var minLength = ($('#displaynote').width() / $('#Test').width() * 2 * 32);
+		var minLength = (($('#displaynote').width() / ($('#Test').width() / 32)) * 2 * 1.63);
 		var divContent = $('<div class="text-muted p-0">');
 		//var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
 		//var divTesto = $('<div class="px-3 py-1">')
@@ -1003,7 +1007,7 @@ function resetFrasi(){
       	//divTesto.append(nota);
       	//divContent.append(divTesto);
 		divContent.append(nota);
-		if ((testo.length + label.length +2) > minLength) {
+		if (($('<textarea />').html(testo).text().length + label.length + 2) > minLength) {
 			//console.log((testo.length + label.length +2) +" "+($('#displaynote').width() / $('#Test').width() * 2 * 32))
 			var divModule = $('<div class="module pb-0">');
 			var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
@@ -1022,7 +1026,7 @@ function resetFrasi(){
 
 		let tmpcomm='['+commento+']'
 		let jsonCommento=JSON.parse(tmpcomm.replaceAll("'", '"').replaceAll("+", '"'));
-		var minLength = ($('#displaynote').width() / $('#Test').width() * 2 * 32);
+		var minLength = (($('#displaynote').width() / ($('#Test').width() / 32)) * 2 * 1.63);
 		var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
 		var divTesto = $('<div class="pl-0 pr-3 py-1">')
 		var nota='';
@@ -1056,30 +1060,22 @@ function resetFrasi(){
 		nota='<b>Rapporto commento/commentatore:</b> '+nota
 		divTesto.append(nota);
       	divContent.append(divTesto);
-	    if (lenmod+32 > 1000){//minLength) {
+		var divModule = $('<div class="module py-1">');
-			var divModule = $('<div class="module pb-0">');
+		divModule.append(divContent);
-			var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
-			divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
-	      	divNote.append(divContent)
-	      	divModule.append(divNote);
-		} else {
-			var divModule = $('<div class="module py-1">');
-			divModule.append(divContent);
-		}
 		divModule.appendTo(collapse);
 	}
 
 	function createModuleFrammAnnot(collapse, testo1, testo2, num, id, pos){
-		var minLength = ($('#displaynote').width() / $('#Test').width() * 2 * 32);
+		var minLength = (($('#displaynote').width() / ($('#Test').width() / 32)) * 2 * 1.63);
 		var divFrammAnnot = $('<div class="py-1">');
 		var divContent1 = $('<div class="text-muted p-0">');
 		var divContent2 = $('<div class="text-muted p-0">');
-		var uniqueIdMulti1 = 'collapse'+num+'SimpleNote'+id+'_'+pos;
+		var uniqueIdMulti1 = 'coll'+num+'SN'+id+'_'+pos;
-		var uniqueIdMulti2 = 'collapse'+num+'CompleteNote'+id+'_'+pos;
+		var uniqueIdMulti2 = 'coll'+num+'CN'+id+'_'+pos;
-		var divMultiCollapse1 = $('<div class="collapse multi-collapse show text-muted p-0" id="' + uniqueIdMulti1 + '">');
+		var divMultiCollapse1 = $('<div class="collapse multi-collapse'+pos+' show text-muted p-0" id="' + uniqueIdMulti1 + '">');
-		var divMultiCollapse2 = $('<div class="collapse multi-collapse text-muted p-0" id="' + uniqueIdMulti2 + '">');
+		var divMultiCollapse2 = $('<div class="collapse multi-collapse'+pos+' text-muted p-0" id="' + uniqueIdMulti2 + '">');
-		var label1 = '<b>Nota / <a href="" data-toggle="collapse" data-target=".multi-collapse" aria-controls="' + uniqueIdMulti1 + ' ' + uniqueIdMulti2 +'">Nota completa</a>: </b>'
+		var label1 = '<b>Nota / <a href="" data-toggle="collapse" data-target=".multi-collapse'+pos+'" aria-controls="' + uniqueIdMulti1 + ' ' + uniqueIdMulti2 +'">Nota completa</a>: </b>'
-		var label2 = '<b><a href="" data-toggle="collapse" data-target=".multi-collapse" aria-controls="' + uniqueIdMulti1 + ' ' + uniqueIdMulti2 +'">Nota</a> / Nota completa: </b>'
+		var label2 = '<b><a href="" data-toggle="collapse" data-target=".multi-collapse'+pos+'" aria-controls="' + uniqueIdMulti1 + ' ' + uniqueIdMulti2 +'">Nota</a> / Nota completa: </b>'
 		var nota1 = '<span class="blog-main-16">'+testo1+'</span>';
 		var nota2 = '<span class="blog-main-16">'+testo2+'</span>';
 
@@ -1088,7 +1084,7 @@ function resetFrasi(){
 		divContent1.append(label1 + nota1);
 		divContent2.append(label2 + nota2);
 		
-		if ((testo1.length + 23) > minLength) {
+		if (($('<textarea />').html(testo1).text().length + 23) > minLength) {
 			var divModule1 = $('<div class="module pb-0">');
 			var divNote1 = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
 			divModule1.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
@@ -1099,7 +1095,7 @@ function resetFrasi(){
 			divMultiCollapse1.append(divContent1);
 		}
 
-		if ((testo2.length + 23) > minLength) {
+		if (($('<textarea />').html(testo2).text().length + 23) > minLength) {
 			var divModule2 = $('<div class="module pb-0">');
 			var divNote2 = $('<div class="collapse" id="collapse'+num+'Note'+(id + 1)+ '_' + pos +'" aria-expanded="false">')
 			divModule2.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+(id + 1)+ '_' + pos +'" role="button"></a>')