versione frasi espandibili

js/cesareBrowse.js

@@ -35,7 +35,8 @@ $(document).ready(function() {
 	
 	var cantoDisplayed = "#InfernoCanto_1";
 	var queryExecuted = false;
-
+	var contextLength = 4; 
+	var currentContextLength = 4; 
 
 	
 	resetResult=function(){
@@ -199,23 +200,121 @@ $(" ."+formaClass).hover(function(idx, element) {
 		}
 	});
 
-	jQuery(document).delegate(' .espandiContesto', 'click', function(e) {
+	jQuery(document).delegate(' .espandiFrase', 'click', function() {
 		var cid  = $(this).attr('id');
 		var parcid=cid.split('_');
-		cantoDisplayed = parcid[0]+"_"+parcid[2]
+		var cantoToShow = "#"+parcid[0]+"_"+parcid[2]
+		var fraseToExpand = "#"+"Frase"+parcid[4]
+		var cantoDiv = [];
+		var fraseDiv = [];
+		var primoVerso;
+		var ultimoVerso;
+		var idVerso;
+		var verso;
+		var fraseCorrente = $(fraseToExpand)
+		var fraseElements = [];
+		var divComandi = $("#comandiFrase"+parcid[4]).clone();
 		
-		if ( !(loadedCanti.has(cantoDisplayed))){
+		if ( !(loadedCanti.has(cantoToShow))){
+			caricaCanto(cantoToShow,parcid)
+		}
 		
+		$(cantoToShow +" > p").each((index, elem) => {
+  			cantoDiv.push(elem.id);
+		});
+		
+		$(fraseToExpand +" > p").each((index, elem) => {
+  			fraseDiv.push(elem.id);
+		});
+		
+		$(fraseToExpand +" > p").each((index, elem) => {
+  			fraseElements.push(elem);
+		});
+		
+		idVerso = fraseDiv[0].split('_');
+		primoVerso = idVerso[2];
+		idVerso = fraseDiv[fraseDiv.length-1].split('_');
+		ultimoVerso = parseInt(idVerso[2]);
+		
+		$("#comandiFrase"+parcid[4]).remove();
+
+		if (fraseDiv.length < currentContextLength){
+			if(primoVerso == 1){ //  caso inizio canto
+				var divAggiunti = $("<div />")
+				divAggiunti.attr('id',"FraseAggiunti"+parcid[4])
+				for (i=0;i<4;i++){
+					var verso  = $("#"+cantoDiv[3+i]).clone();
+					divAggiunti.append(verso);
+				}	
+				fraseCorrente.append(divAggiunti);			
+				fraseCorrente.append(divComandi);
+			}else{ //  caso fine canto
+				for (i=primoVerso-5;i<primoVerso-1;i--){
+					var verso  = $("#"+cantoDiv[i]).clone();
+					divAggiunti.append(verso);
+				}					
+			} 			
+		}else{ 
+			for (element of fraseDiv){
+				$("#"+element).remove();
+			}
+			var divAggiunti = $("<div />")
+				divAggiunti.attr('id',"FraseAggiunti"+parcid[4])
+			for (i=primoVerso-5;i<primoVerso-1;i++){
+					var verso  = $("#"+cantoDiv[i]).clone();
+					divAggiunti.append(verso);
+			}
+			fraseCorrente.append(divAggiunti);
+
+			for (element of fraseElements){
+				fraseCorrente.append(element);
+			}
+			var divAggiunti = $("<div />")
+				divAggiunti.attr('id',"FraseAggiunti"+parcid[4])	
+			for (i=ultimoVerso;i<ultimoVerso+4;i++){
+					var verso  = $("#"+cantoDiv[i]).clone();
+					divAggiunti.append(verso);
+			}	
+			fraseCorrente.append(divAggiunti);	
+			fraseCorrente.append(divComandi);
+		}
+		
+		//aggiungo listeners
+		addFormaListeners()
+		
+	});
+
+	jQuery(document).delegate(' .riduciFrase', 'click', function() {
+		var cid  = $(this).attr('id');
+		var parcid=cid.split('_');
+		var fraseToReduce = "#"+"FraseAggiunti"+parcid[4]
+		$(fraseToReduce).remove();
+		$(fraseToReduce).remove();
+	
+	});		
+	
+	function caricaCanto(canto, parcid){
 			if(parcid[0].includes('Inferno'))
 				showCanto(formeprima, '1',parcid[2])
 			if(parcid[0].includes('Purgatorio'))
 				showCanto(formeseconda, '2',parcid[2])
 			if(parcid[0].includes('Paradiso'))
 				showCanto(formeterza, '3',parcid[2])
-			loadedCanti.add(cantoDisplayed)
+			loadedCanti.add(canto)
+	}
+
+	jQuery(document).delegate(' .vaiALCanto', 'click', function() {
+		var cid  = $(this).attr('id');
+		var parcid=cid.split('_');
+		var fraseToReduce = "#"+"FraseAggiunti"+parcid[4]
+
+		cantoDisplayed = parcid[0]+"_"+parcid[2]
+		
+		if ( !(loadedCanti.has(cantoDisplayed))){
+			caricaCanto(cantoDisplayed,parcid)
 		}
 		cantoDisplayed = "#"+cantoDisplayed
-
+		$(fraseToReduce).remove();
 		$(cantoDisplayed).attr('style', 'display: d-flex;');
 		$("#vistaFrasi").css("display", "none");	
 	});
@@ -227,6 +326,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 			var canto, numeroCantica;
 			var divVerso;
 			
+			currentContextLength = contextLength;
 			
 			$(cantoDisplayed).css("display", "none");
 			
@@ -243,8 +343,11 @@ $(" ."+formaClass).hover(function(idx, element) {
 			var elencoRisutati = $("#vistaFrasi");
 			elencoRisutati.empty();
 					
+			var numeroRisultato = 0;
+				
 			for (risultato of listarisultati){
-				versiContesto= getFormaContext(parseInt(risultato), 4);
+				numeroRisultato++;
+				versiContesto= getFormaContext(parseInt(risultato), contextLength);
 				var setVersicontesto = new Set()
 				divVerso =''
 				numeroCantica=0
@@ -252,6 +355,8 @@ $(" ."+formaClass).hover(function(idx, element) {
 				var elencoVersi = $('<div class="itemelenco" />')
 				var titoloCanto = $('<h5 class="titolo-canto" />')
 				
+				elencoVersi.attr('id', "Frase"+numeroRisultato);
+
 				for (forma of versiContesto){
 					if (setVersicontesto.size == 0){
 						numeroCantica=forma.cantica
@@ -267,13 +372,33 @@ $(" ."+formaClass).hover(function(idx, element) {
 					createSpanFormeNew(forma.testo, forma.catg, 'e'+forma.posizione, forma.periodo, forma.funzperiodo, divVerso)
 				}
 				
+				
 				var mhr=$('<hr width="100" align="center"/>')
+				var comandi = $('<div />')
+				comandi.attr('id',"comandiFrase"+numeroRisultato)
 				var spanBadgeContext = $('<span />');				
-				var contextIcon = '<ion-icon name="expand"></ion-icon>';
+				var contextIcon = '<ion-icon name="return-up-back-outline"></ion-icon>';
-				spanBadgeContext.attr('class', 'badge badge-primary badge-pill mx-2 espandiContesto');
+				spanBadgeContext.attr('class', 'badge badge-primary badge-pill mx-2 vaiALCanto');
-				spanBadgeContext.attr('id', getCantica(numeroCantica)+"Canto_Nik_"+canto+"_"+risultato);
+				var spanBadgeExpand = $('<span />');				
+				var expandIcon = '<ion-icon name="arrow-down-outline"></ion-icon>';
+				spanBadgeExpand.attr('class', 'badge badge-primary badge-pill mx-2 espandiFrase');
+				var spanBadgeReduce = $('<span />');				
+				var reduceIcon = '<ion-icon name="arrow-up-outline"></ion-icon>';
+				spanBadgeReduce.attr('class', 'badge badge-primary badge-pill mx-2 riduciFrase');
+				
+				spanBadgeContext.attr('id', getCantica(numeroCantica)+"Canto_e_"+canto+"_"+risultato+"_"+numeroRisultato);
 				spanBadgeContext.append(contextIcon)
-				spanBadgeContext.appendTo(elencoVersi);
+				
+				spanBadgeExpand.attr('id', getCantica(numeroCantica)+"Canto_ex_"+canto+"_"+risultato+"_"+numeroRisultato);
+				spanBadgeExpand.append(expandIcon)
+				
+				spanBadgeReduce.attr('id', getCantica(numeroCantica)+"Canto_er_"+canto+"_"+risultato+"_"+numeroRisultato);
+				spanBadgeReduce.append(reduceIcon)
+
+				spanBadgeContext.appendTo(comandi);
+				spanBadgeExpand.appendTo(comandi);
+				spanBadgeReduce.appendTo(comandi);
+				comandi.appendTo(elencoVersi);
 				elencoVersi.appendTo(elencoRisutati);
 				elencoRisutati.append(mhr)