From 1fd2c05ced33187fc403a6ed2df32bd4beb4519d Mon Sep 17 00:00:00 2001
From: Luca Trupiano <luca.trupiano@isti.cnr.it>
Date: Fri, 24 Feb 2023 15:06:20 +0100
Subject: [PATCH] Fissati problemi di dimensionamento, diventato automatico

---
 css/custom1_4.2.css | 13 ++-------
 css/custom2_4.2.css | 13 ++-------
 index_4.2.html      |  4 +--
 js/minimap.js       | 70 ++++++++++++++++++++++-----------------------
 js/script_4.2.js    | 31 +++++++++-----------
 5 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/css/custom1_4.2.css b/css/custom1_4.2.css
index 5bc2e56..cf62444 100644
--- a/css/custom1_4.2.css
+++ b/css/custom1_4.2.css
@@ -19,7 +19,7 @@ body {
 }
 
 .tableMain {
-	height: 950px;
+	height: 95%;
 	min-height: 600px;
 }
 
@@ -33,7 +33,7 @@ body {
 }
 
 #colVisualizza {
-	max-height: 950px;
+	max-height: 95%;
 	min-height: 600px;
 }
 
@@ -53,20 +53,15 @@ body {
 
 .minimap {
 	width: 108px;
-	min-height: 700px;
+	min-height: 600px;
 }
 
 .menuRicerca {
 	width: 30%;
 }
 
-.visCanto {
-	height: 500px;
-}
-
 #displaycanto {
 	display: d-flex;
-	height: 500px;
 	overflow-y: scroll;
 }
 
@@ -78,8 +73,6 @@ body {
 	overflow: auto !important;
 }
 
-.row-content { height: 100%; display: d-flex;}
-
 .doubleborder {
 	z-index: 90;
 	border-bottom-width: 8px !important;
diff --git a/css/custom2_4.2.css b/css/custom2_4.2.css
index 5f145bc..96a7f53 100644
--- a/css/custom2_4.2.css
+++ b/css/custom2_4.2.css
@@ -19,7 +19,7 @@ body {
 }
 
 .tableMain {
-	height: 950px;
+	height: 95%;
 	min-height: 600px;
 }
 
@@ -33,7 +33,7 @@ body {
 }
 
 #colVisualizza {
-	max-height: 950px;
+	max-height: 95%;
 	min-height: 600px;
 }
 
@@ -53,20 +53,15 @@ body {
 
 .minimap {
 	width: 108px;
-	min-height: 700px;
+	min-height: 600px;
 }
 
 .menuRicerca {
 	width: 30%;
 }
 
-.visCanto {
-	height: 500px;
-}
-
 #displaycanto {
 	display: d-flex;
-	height: 500px;
 	overflow-y: scroll;
 }
 
@@ -78,8 +73,6 @@ body {
 	overflow: auto !important;
 }
 
-.row-content { height: 100%; display: d-flex;}
-
 .doubleborder {
 	z-index: 90;
 	border-bottom-width: 8px !important;
diff --git a/index_4.2.html b/index_4.2.html
index 02a5419..17b003a 100644
--- a/index_4.2.html
+++ b/index_4.2.html
@@ -387,8 +387,8 @@
 								</div>
 							</div>
 						</div>
-						<div class="card">
-							<div class="card-header px-1" id="headingZero" style="display: none;">
+						<div class="card" style="display: none;">
+							<div class="card-header px-1" id="headingZero">
 								<h6 class="mb-0">
 									<div class="row no-gutters justify-content-end">
 										<div class="col-auto flex-fill align-self-end text-muted text-right nav-link">
diff --git a/js/minimap.js b/js/minimap.js
index e34b76d..1ada5e6 100644
--- a/js/minimap.js
+++ b/js/minimap.js
@@ -6,6 +6,8 @@ const displayCantoId = '#displaycanto';
 const minimapviewerId = '#minimapviewer';
 const displayminimapId = '#displayminimap';
 const visCantoClass = '.visCanto';
+const tableMainHeight = 0.95;  //.tableMain {height: 95%;}
+const cantoHeight = 0.65;
 
 let minimap = document.createElement('div');
 let viewer = document.createElement('div');
@@ -16,26 +18,32 @@ let initOffset = '';
 
 
 function drawMinimap(name){
-		currentMinimap = name;
-		initOffset = parseInt($("body").css("padding-top").replace("px", ""))+63;
-		showMinimap();
-		$(displayCantoId).scrollTop(0);
-		$(minimapviewerId).offset({ top: initOffset});
-		var minimapTopPos = $(minimapviewerId).offset().top;
-		
-		$(minimapviewerId).draggable({
-			axis: "y",
-			containment: $(displayminimapId),
-			//containment: $(".minimap__content"),
-			scroll: false,
-			start: function(event, ui) { minimapScrolling = true; },
-			stop: function(event, ui) { minimapScrolling = false; },
-			drag: function(event, ui) {
-				minimapScrolling = true;
-				$(displayCantoId).scrollTop((ui.offset.top - minimapTopPos) / realScale);
-			}
-		});
-	}
+	var cantoHeightToSet = $("body")[0].clientHeight*cantoHeight;
+	var maxCantoHeightToSet = $("body")[0].clientHeight*tableMainHeight-110;
+	$(visCantoClass).css("max-height", maxCantoHeightToSet);	
+	$(visCantoClass).css("height", cantoHeightToSet);	
+	$(displayCantoId).css("max-height", maxCantoHeightToSet);	
+	$(displayCantoId).css("height", cantoHeightToSet);	
+
+	currentMinimap = name;
+	initOffset = parseInt($("body").css("padding-top").replace("px", ""))+63;
+	showMinimap();
+	$(displayCantoId).scrollTop(0);
+	$(minimapviewerId).offset({ top: initOffset});
+	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;
+			$(displayCantoId).scrollTop((ui.offset.top - minimapTopPos) / realScale);
+		}
+	});
+}
 
 
 function showMinimap() {
@@ -73,11 +81,12 @@ function showMinimap() {
 		let bgCanto = $(visCantoClass).css('background-color');
 		$('iframe').contents().find('body').css('background-color', bgCanto + ' !important;');
 
-		getDimensionsDiv();
+		var infoHeightToSet = $("body")[0].clientHeight*tableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
+		$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
+		$("#displayinfo").css("height", infoHeightToSet+"px");
+		$(".visInfo").css("height", (infoHeightToSet+4)+"px");
 
-		$("#displayinfo").css("maxHeight", (950-$(visCantoClass)[0].clientHeight-2-63-2)+"px");
-		$("#displayinfo").css("height", (950-$(visCantoClass)[0].clientHeight-2-63-2)+"px");
-		$(".visInfo").css("height", (950-$(visCantoClass)[0].clientHeight-2-63+4-2)+"px !important");
+		getDimensionsDiv();
 
 		window.addEventListener('resize', getDimensionsDiv);
 	}
@@ -86,34 +95,23 @@ function showMinimap() {
 	function getDimensionsDiv(onlyViewer = false) {
 		var srcCantoWidth = $(currentMinimap)[0].clientWidth;
 		var srcCantoHeight = $(currentMinimap)[0].clientHeight;
-		//var maxHeight = ($(displayminimapId)[0].clientHeight)-4-63; //h attuale dello spazio minimap -4 padding -63 top padding
-		var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe
+		var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -1 bordo col, -4 bordi iframe
 		var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
-		//var miniCantoHeight = Math.ceil(((srcCantoHeight-44)/25*26)+44+32); //h prevista del canto nella minimap
 		var miniCantoWidth = srcCantoWidth+64; //h prevista del canto nella minimap 64: padding pr + blank space
-		//var miniCantoHeight = srcCantoHeight+16; //h prevista del canto nella minimap 16x2: padding py
 		var miniCantoHeight = srcCantoHeight; //h prevista del canto nella minimap 16x2: padding py
-
 		var resizableWidth = $(visCantoClass)[0].clientWidth;
 		var resizableHeight = $(visCantoClass)[0].clientHeight;
 		var resizableRatio = resizableHeight/resizableWidth;
 		var widthRatio = resizableWidth/srcCantoWidth;
 		var heightRatio = resizableHeight/srcCantoHeight;
 
-		//var realScaleW = Math.min((maxWidth/miniCantoWidth), 1);
-		//var realScaleH = Math.min((maxHeight/miniCantoHeight), 1);
-		
-		//minimap.style.width = '100%';
 		if (onlyViewer == false) {
 			realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
 			minimapContent.style.transform = `scale(${realScale})`;
-			//minimapContent.style.height = Math.trunc(miniCantoHeight) + "px";
-			//minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
 			minimapContent.style.height = miniCantoHeight + "px";
 			minimapContent.style.width = maxWidth/realScale + "px";
 		}
 		
-		//let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
 		let viewerHeight = (miniCantoHeight*realScale*heightRatio)-2; // -2 = bordi
 		let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi
 
diff --git a/js/script_4.2.js b/js/script_4.2.js
index d5ae028..5485bda 100644
--- a/js/script_4.2.js
+++ b/js/script_4.2.js
@@ -128,8 +128,6 @@ $(document).ready(function() {
 		minWidth: 100,
 		maxWidth: 350,
 		resize: function(event, ui) {
-			//$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
-			//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
 			getDimensionsDiv(true);
 		},
 		stop: function(event, ui) {
@@ -142,8 +140,6 @@ $(document).ready(function() {
 		minWidth: 350,
 		resize: function(event, ui) {
 			ui.position.left = 0;
-			//$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
-			//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
 			getDimensionsDiv(true);
 		},
 		stop: function(event, ui) {
@@ -154,23 +150,16 @@ $(document).ready(function() {
 	$(".visCanto").resizable({
 		handles: "s",
 		minHeight: 80,
-		maxHeight: 880,
+		//maxHeight: 880,
 		alsoResize: "#displaycanto",
 		resize: function(event, ui) {
 			$("#displaycanto").width(" min-content");
+			
+			var infoHeightToSet = $("body")[0].clientHeight*tableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
+			$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
+			$("#displayinfo").css("height", infoHeightToSet+"px");
+			$(".visInfo").css("height", (infoHeightToSet+4)+"px");
 
-			$("#displayinfo").css("maxHeight", (950-$(".visCanto")[0].clientHeight-2-63-1)+"px");
-			$("#displayinfo").css("height", (950-$(".visCanto")[0].clientHeight-2-63-1)+"px");
-			$(".visInfo").css("height", (950-$(".visCanto")[0].clientHeight-2-63+4-1)+"px !important");
-
-			//$("#displayinfo").css("maxHeight", ($("#colVisualizza")[0].clientHeight-$(".visCanto")[0].clientHeight-2-63-2)+"px");
-			//$("#displayinfo").css("height", ($("#colVisualizza")[0].clientHeight-$(".visCanto")[0].clientHeight-2-63-2)+"px");
-			//$(".visInfo").css("height", ($("#colVisualizza")[0].clientHeight-$(".visCanto")[0].clientHeight-2-63+4-2)+"px !important");
-
-			//$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
-			//$("#displayinfo").css("maxHeight", ($(".visInfo").height()-17)+"px");
-			//$("#displayinfo").css("height", ($(".visInfo").height()-17)+"px");
-			//$("#displayinfo").css("maxHeight", "");
 			getDimensionsDiv(true);
 		},
 		stop: function(event, ui) {
@@ -557,9 +546,15 @@ $(document).ready(function() {
 	const jsonReplacer = (key, value) =>
 		typeof value === 'undefined' ? 0 : value;
 
+	//const cantoHeight = 0.65;
+
 	// Fine variabili
 
-
+	//var cantoHeightToSet = $("body")[0].clientHeight*cantoHeight;
+	//$(".visCanto").css("max-height", cantoHeightToSet);	
+	//$("#displaycanto").css("max-height", cantoHeightToSet);	
+	//$(".visCanto").css("height", cantoHeightToSet);	
+	//$("#displaycanto").css("height", cantoHeightToSet);	
 
 
 	//$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");