From 092531172f8bdcb0b77528f3b2da3fcc00e68def Mon Sep 17 00:00:00 2001
From: Luca Trupiano <luca.trupiano@isti.cnr.it>
Date: Mon, 13 Mar 2023 19:35:47 +0100
Subject: [PATCH] Cambiati comandi e cit. in lista, corretto bug minimap in
 expand lista

---
 css/custom1_4.2.css | 54 +++++++++++++++----------
 css/custom2_4.2.css | 51 ++++++++++++++----------
 js/cesareBrowse.js  | 97 ++++++++++++++++++++++++++++++---------------
 js/minimap.js       | 61 +++++++++++++++-------------
 4 files changed, 162 insertions(+), 101 deletions(-)

diff --git a/css/custom1_4.2.css b/css/custom1_4.2.css
index 6898c1e..3629c1a 100644
--- a/css/custom1_4.2.css
+++ b/css/custom1_4.2.css
@@ -12,8 +12,7 @@
   src: url(../fonts/LDR_Bracciolini.otf);
 }
  
-html,
-body {
+html, body {
   height: 100%;
   font-family: 'Humanist-777', 'Roboto';
 }
@@ -94,8 +93,7 @@ body {
 	border-bottom-left-radius: 0 !important;
 }
 
-.lista-risultati:hover {
-	font-weight: 900;
+.lista-risultati:hover, .citazioneFrase:hover {
 	cursor: pointer;
 }
 
@@ -211,6 +209,33 @@ Ex browsingldc.css
  	font-family: 'Humanist-777', 'Roboto';
 }
 
+.espandiFrase:not(.disabled), .riduciFrase:not(.disabled) {
+	font-size: 10px;
+ 	font-family: 'Humanist-777', 'Roboto';
+	border: 2px  solid;
+	cursor: pointer;
+}
+
+.espandiFrase.disabled, .riduciFrase.disabled {
+	font-size: 10px;
+ 	font-family: 'Humanist-777', 'Roboto';
+	cursor: default;
+}
+
+.citazioneFrase {
+ 	font-style: italic;
+ 	font-family: "Bracciolini", "Spectral", -apple-system, BlinkMacSystemFont, “Helvetica Neue”,
+    “Segoe UI”, “Roboto”, “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, sans-serif;
+    line-height: 0.5em;
+    font-size:  16px;
+}
+
+.btn-outline-secondary.focus, .btn-outline-secondary:focus {
+    outline: none !important;
+	box-shadow: none;
+}
+
+
 /* on mouseOver classes */
 
 .Nik_dropdown {
@@ -248,6 +273,7 @@ cite.elencoris {
 .ttContent {
 	padding: 5px 5px 0px 5px;
 }
+
 li::marker {
    font-size: 12px;
    font-family: 'Humanist-777', 'Roboto';
@@ -295,7 +321,7 @@ li::marker {
     color: #5f8ec2;
     border-color: #5f8ec2;
 }
-.navig-canto:hover {
+.navig-canto:hover, .citazioneFrase:hover {
 	color: #5f8ec2 !important;
 }
 
@@ -344,7 +370,7 @@ li::marker {
 
 /* ------- #5b352c -------- */
 
-cite.elencoris {
+.citazioneFrase {
 	color: #5b352c;
 }
 
@@ -390,17 +416,5 @@ cite.elencoris {
     padding-top: 0px;
 }
 
-.citazioneFrase {
-	color: #734450;
- 	font-style: italic;
- 	font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
-	position: relative;
-    left: 260px;
-    top: -5px;
-    line-height: 0.5em;
-    font-size: small
-}
-.comandi {
-	position: relative;
-    top: -20px;
-}
+
+
diff --git a/css/custom2_4.2.css b/css/custom2_4.2.css
index df2fdbb..cfa500b 100644
--- a/css/custom2_4.2.css
+++ b/css/custom2_4.2.css
@@ -12,8 +12,7 @@
   src: url(../fonts/LDR_Bracciolini.otf);
 }
  
-html,
-body {
+html, body {
   height: 100%;
   font-family: 'Humanist-777', 'Roboto';
 }
@@ -94,8 +93,7 @@ body {
 	border-bottom-left-radius: 0 !important;
 }
 
-.lista-risultati:hover {
-	font-weight: 900;
+.lista-risultati:hover, .citazioneFrase:hover {
 	cursor: pointer;
 }
 
@@ -210,6 +208,32 @@ Ex browsingldc.css
  	font-family: 'Humanist-777', 'Roboto';
 }
 
+.espandiFrase:not(.disabled), .riduciFrase:not(.disabled) {
+	font-size: 10px;
+ 	font-family: 'Humanist-777', 'Roboto';
+	border: 2px  solid;
+	cursor: pointer;
+}
+
+.espandiFrase.disabled, .riduciFrase.disabled {
+	font-size: 10px;
+ 	font-family: 'Humanist-777', 'Roboto';
+	cursor: default;
+}
+
+.citazioneFrase {
+ 	font-style: italic;
+ 	font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
+    line-height: 0.5em;
+    font-size:  16px;
+}
+
+.btn-outline-secondary.focus, .btn-outline-secondary:focus {
+    outline: none !important;
+	box-shadow: none;
+}
+
+
 /* on mouseOver classes */
 
 .Nik_dropdown {
@@ -247,6 +271,7 @@ cite.elencoris {
 .ttContent {
 	padding: 5px 5px 0px 5px;
 }
+
 li::marker {
    font-size: 12px;
    font-family: 'Humanist-777', 'Roboto';
@@ -304,7 +329,7 @@ li::marker {
     color: #734450;
     border-color: #734450;
 }
-.navig-canto:hover {
+.navig-canto:hover, .citazioneFrase:hover {
 	color: #734450 !important;
 }
 
@@ -353,7 +378,7 @@ li::marker {
 
 /* ------- #c6b59f -------- */
 
-cite.elencoris {
+.citazioneFrase {
 	color: #c6b59f;
 }
 
@@ -399,17 +424,3 @@ cite.elencoris {
     padding-top: 0px;
 }
 
-.citazioneFrase {
-	color: #734450;
- 	font-style: italic;
- 	font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
-	position: relative;
-	left: 260px;
-    top: -5px;
-    line-height: 0.5em;
-    font-size: small
-}
-.comandi {
-	position: relative;
-    top: -20px;
-}
diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js
index 7492ed7..35772d7 100644
--- a/js/cesareBrowse.js
+++ b/js/cesareBrowse.js
@@ -149,6 +149,9 @@ $(" ."+formaClass).hover(function(idx, element) {
 */
 
 	jQuery(document).delegate(' .espandiFrase, .riduciFrase', 'click', function() {
+		if ($(this).hasClass("disabled")) {
+			return;
+		};
 		var posizioniEspansione=[]
 		var cid = $(this).attr('id');
 		var parcid = cid.split('_');
@@ -181,11 +184,17 @@ $(" ."+formaClass).hover(function(idx, element) {
 		}
 				
 		if(cid.includes('_er_')){
-			$("#"+cid).css("display", "none");
+			///$("#"+cid).css("display", "none");
+			$("#"+cid).removeClass( "btn-outline-primary" );
+			$("#"+cid).addClass( "btn-outline-secondary" );
+			$("#"+cid).addClass( "disabled" );
 		}
 		else{
 			cid = cid.replace("ex","er");
-			$("#"+cid).attr('style', 'display: d-flex;');
+			///$("#"+cid).attr('style', 'display: d-flex;');
+			$("#"+cid).removeClass( "btn-outline-secondary" );
+			$("#"+cid).removeClass( "disabled" );
+			$("#"+cid).addClass( "btn-outline-primary" );			
 		}
 		
 		
@@ -213,8 +222,8 @@ $(" ."+formaClass).hover(function(idx, element) {
 		//addFormaListenersInRisultato(posizioniEspansione)
 		addFormaListenersInCanto()
 		
-		//disegno minimap
-		drawMinimap('#vistaFrasi')
+		//disegno minimap, onlyContent = true
+		drawMinimap('#vistaFrasi', true)
 		
 
 	})
@@ -264,11 +273,12 @@ $(" ."+formaClass).hover(function(idx, element) {
 				numeroCantica=0
 				canto=0
 				//var titoloCanto = $('<h5 class="titolo-canto"/>')
-				var versiIniziali = $('<div class="versiFrase" />')
+				var versiIniziali = $('<div class="versiFrase mt-3" />')
 
-				var listaVersi = $("<ol />")
-				listaVersi.css("padding-bottom","0px")
-				listaVersi.css("margin-bottom","0px")
+				var listaVersi = $('<ol class="pt-3" />')
+				///var listaVersi = $("<ol />")
+				///listaVersi.css("padding-bottom","0px")
+				///listaVersi.css("margin-bottom","0px")
 
 				listaVersi.attr('id', "Frase"+numeroRisultato);
 				versiIniziali.attr('id', "versiFrase"+numeroRisultato);
@@ -296,43 +306,63 @@ $(" ."+formaClass).hover(function(idx, element) {
 						versiIniziali.attr('posVerso', 9999);
 				}
 					
-				var mhr=$('<hr width="100" align="center"/>')
+				///var mhr=$('<hr width="100" align="center"/>')
 				var comandi = $('<div />')
 				comandi.attr('id',"comandiFrase"+numeroRisultato)				
+				comandi.attr('class', 'comandi col flex-nowrap d-sm-inline justify-content-between pl-1 pb-2 ml-2 mb-2 border-bottom');
 
-				var citazione = $('<span />')	
-				citazione.append("[Canto "+getRoman(canto)+", "+getCantica(numeroCantica)+"]")
-				citazione.attr('class', ' citazioneFrase my-0 mx-2 navig-canto');
-				citazione.attr('name', getCantica(numeroCantica)+"Canto "+canto);
-				citazione.attr('id', idCitazione+numeroRisultato);
-				divVerso.append("<br>")
-				comandi.attr('class', 'comandi');
-				mhr.css("margin-top","0px")
-				mhr.css("padding-top","0px")
-				citazione.appendTo(elencoRisutati);
+				var comandiGrp = $('<div />')
+				comandiGrp.attr('class', 'btn-group flex-nowrap d-sm-inline pr-3 mt-1 mr-3 align-text-bottom');
+				comandiGrp.attr('role',"group")				
+
+
+				///divVerso.append("<br>")
+				///comandi.attr('class', 'comandi');
+				///mhr.css("margin-top","0px")
+				///mhr.css("padding-top","0px")
+				///citazione.appendTo(elencoRisutati);
 				
-				var spanBadgeExpand = $('<span />');
-				var expandIcon = '<ion-icon name="ellipsis-vertical-outline"></ion-icon>';
-				spanBadgeExpand.attr('class', 'badge badge-primary badge-pill my-0 mx-2 espandiFrase');
-				var spanBadgeReduce = $('<span />');				
-				var reduceIcon = '<ion-icon name="arrow-up-outline"></ion-icon>';
+				var spanBadgeExpand = $('<button />');
+				///var spanBadgeExpand = $('<span />');
+				///var expandIcon = '<ion-icon name="ellipsis-vertical-outline"></ion-icon>';
+				var expandIcon = '<ion-icon name="expand-outline"></ion-icon>';
+				spanBadgeExpand.attr('class', 'btn btn-sm btn-outline-primary espandiFrase px-1 pt-1 pb-0');
+				///spanBadgeExpand.attr('class', 'badge badge-primary badge-pill my-0 mx-2 espandiFrase');
+				var spanBadgeReduce = $('<button />');				
+				///var spanBadgeReduce = $('<span />');				
+				var reduceIcon = '<ion-icon name="contract-outline"></ion-icon>';
+				///var reduceIcon = '<ion-icon name="arrow-up-outline"></ion-icon>';
 
-				spanBadgeReduce.attr('class', 'badge badge-primary badge-pill my-0 mx-2 riduciFrase');
+				spanBadgeReduce.attr('class', 'btn btn-sm btn-outline-secondary riduciFrase px-1 pt-1 pb-0 ml-1 disabled');
+				///spanBadgeReduce.attr('class', 'badge badge-primary badge-pill my-0 mx-2 riduciFrase');
 				
 				spanBadgeExpand.attr('id', getCantica(numeroCantica)+"Canto_ex_"+canto+"_"+risultato+"_"+numeroRisultato);
-				
-				
-				spanBadgeExpand.append(expandIcon)
+				spanBadgeExpand.append(expandIcon);
 				
 				spanBadgeReduce.attr('id', getCantica(numeroCantica)+"Canto_er_"+canto+"_"+risultato+"_"+numeroRisultato);
 				spanBadgeReduce.append(reduceIcon)
-				spanBadgeReduce.css("display", "none");
+				///spanBadgeReduce.css("display", "none");
 
-				spanBadgeExpand.appendTo(comandi);
-				spanBadgeReduce.appendTo(comandi);
+				spanBadgeExpand.appendTo(comandiGrp);
+				spanBadgeReduce.appendTo(comandiGrp);
+
+				comandiGrp.appendTo(comandi);
+
+
+				var citazioneDiv = $('<div />')	
+				citazioneDiv.attr('class', ' text-right flex-nowrap d-sm-inline ml-3 px-3 py-0');
+				var citazione = $('<span />')	
+				citazione.append("[Canto "+getRoman(canto)+", "+getCantica(numeroCantica)+"]")
+				citazione.attr('class', ' pl-3 citazioneFrase align-text-top');
+				///citazione.attr('class', ' citazioneFrase my-0 mx-2 navig-canto');
+				citazione.attr('name', getCantica(numeroCantica)+"Canto "+canto);
+				citazione.attr('id', idCitazione+numeroRisultato);
+				citazione.appendTo(citazioneDiv);
+
+				citazioneDiv.appendTo(comandi);
 
 				comandi.appendTo(elencoRisutati);
-				elencoRisutati.append(mhr)
+				///elencoRisutati.append(mhr)
 				
 			}
 			const endCaricamento = performance.now();
@@ -391,7 +421,8 @@ $(" ."+formaClass).hover(function(idx, element) {
 	});
 	
 	
-	jQuery(document).delegate('.navig-canto', 'click', function(e) {
+	///jQuery(document).delegate('.navig-canto', 'click', function(e) {
+	jQuery(document).delegate('.navig-canto, .citazioneFrase', 'click', function(e) {
 		resetFrasi()
 		
 		//nasconde vista risultati
diff --git a/js/minimap.js b/js/minimap.js
index 153dd0f..95fb8af 100644
--- a/js/minimap.js
+++ b/js/minimap.js
@@ -22,7 +22,7 @@ let correctionFactor = 1;
 let scrollCorrectionFactor = 1.003;
 
 
-function drawMinimap(name){
+function drawMinimap(name, onlyContent = false){
 	var cantoHeightToSet = $("body")[0].clientHeight*cssCantoHeight;
 	var maxCantoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight-110; // 63 padding top + 47 margine bottom
 	$(visCantoClass).css("max-height", maxCantoHeightToSet);	
@@ -38,9 +38,10 @@ function drawMinimap(name){
 	currentMinimap = name;
 	
 	if (currentMinimap == '#vistaFrasi') {
-		correctionFactor = 0.967;
-		//scrollCorrectionFactor = 1.02;
-		scrollCorrectionFactor = 1;
+		correctionFactor = 1.003;
+		//correctionFactor = 0.967;
+		scrollCorrectionFactor = 0.997;
+		//scrollCorrectionFactor = 1;
 	} else {
 		correctionFactor = 1;
 		scrollCorrectionFactor = 1.003;
@@ -52,28 +53,30 @@ function drawMinimap(name){
 		$(displayminimapId)[0].remove();		
 	}
 
-	showMinimap();
+	showMinimap(onlyContent);
 
-	$(displayCantoWrapperId).scrollTop(0);
-	$(minimapviewerId).offset({ top: initOffset});
+	if (onlyContent == false) {
+		$(displayCantoWrapperId).scrollTop(0);
+		$(minimapviewerId).offset({ top: initOffset});
+	
+		var minimapTopPos = $(minimapviewerId).offset().top;
 
-	var minimapTopPos = $(minimapviewerId).offset().top;
-
-	$(minimapviewerId).draggable({
-		axis: "y",
-		containment: $(displayminimapId),
-		scroll: false,
-		start: function(event, ui) { minimapScrolling = true; },
-		stop: function(event, ui) { minimapScrolling = false; },
-		drag: function(event, ui) {
-			minimapScrolling = true;
-			$(displayCantoWrapperId).scrollTop((ui.offset.top - minimapTopPos) / (realScale*correctionFactor));
-		}
-	});
+		$(minimapviewerId).draggable({
+			axis: "y",
+			containment: $(displayminimapId),
+			scroll: false,
+			start: function(event, ui) { minimapScrolling = true; },
+			stop: function(event, ui) { minimapScrolling = false; },
+			drag: function(event, ui) {
+				minimapScrolling = true;
+				$(displayCantoWrapperId).scrollTop((ui.offset.top - minimapTopPos) / (realScale*correctionFactor));
+			}
+		});
+	};
 }
 
 
-function showMinimap() {
+function showMinimap(onlyContent) {
 		viewer.className = 'minimap__viewer';
 		viewer.id = 'minimapviewer';
 		minimapContent.className = 'minimap__content';
@@ -107,7 +110,6 @@ function showMinimap() {
 		iFrameDoc.head.appendChild(cssLinkscroll);
 
 		let bgCanto = $(visCantoClass).css('background-color');
-		console.log(bgCanto);
 		$('iframe').contents().find('body').css('background-color', bgCanto + ' !important;');
 
 		var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
@@ -115,13 +117,13 @@ function showMinimap() {
 		$("#displayinfo").css("height", infoHeightToSet+"px");
 		$(".visInfo").css("height", (infoHeightToSet+4)+"px");
 
-		getDimensionsDiv();
+		getDimensionsDiv(false, onlyContent);
 
 		//window.addEventListener('resize', getDimensionsDiv);
 	}
 
 	
-	function getDimensionsDiv(onlyViewer = false) {
+	function getDimensionsDiv(onlyViewer = false, onlyContent = false) {
 		var srcCantoWidth = $(currentMinimap)[0].clientWidth;
 		var srcCantoHeight = $(currentMinimap)[0].clientHeight;
 		var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -1 bordo col, -4 bordi iframe
@@ -136,6 +138,7 @@ function showMinimap() {
 
 		if (onlyViewer == false) {
 			realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
+			//realScale= Math.max(realScale, 0.1);
 			minimapContent.style.transform = `scale(${realScale})`;
 			minimapContent.style.height = miniCantoHeight + "px";
 			minimapContent.style.width = maxWidth/realScale + "px";
@@ -143,16 +146,18 @@ function showMinimap() {
 		
 		let viewerHeight = (miniCantoHeight*realScale*heightRatio/correctionFactor)-2; // -2 = bordi
 		let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi
-
-		viewer.style.height = viewerHeight + "px";
-		viewer.style.width = viewerWidth + "px";
 		
 		var displayminimapHeight = (miniCantoHeight*realScale)+6;
+		//var displayminimapHeight = Math.min((miniCantoHeight*realScale)+6,maxHeight);
 
 		$(displayminimapId).height(displayminimapHeight);
 		$(fillerClass).height(Math.max(maxHeight-displayminimapHeight)+2, 0);
 
-		trackScrollCanto();
+		if (onlyContent == false) {
+			viewer.style.height = viewerHeight + "px";
+			viewer.style.width = viewerWidth + "px";
+			trackScrollCanto();
+		};
 	};