From 4c7af575d8c397cbb5661dbfc673beb6ea602f84 Mon Sep 17 00:00:00 2001
From: Luca Trupiano <luca.trupiano@isti.cnr.it>
Date: Wed, 8 Feb 2023 18:58:03 +0100
Subject: [PATCH] Nuova minimap, funzionante ma work in progress

---
 css/browsingldc.css |   4 +-
 css/custom_4.css    |   7 ++-
 index_4.1.html      |  10 ++--
 js/minimap.js       | 114 ++++++++++++++++++++------------------------
 js/script_4.1.js    |   4 ++
 5 files changed, 68 insertions(+), 71 deletions(-)

diff --git a/css/browsingldc.css b/css/browsingldc.css
index 2349d8a..1ae1b48 100644
--- a/css/browsingldc.css
+++ b/css/browsingldc.css
@@ -71,11 +71,11 @@ Minimap
 
 .minimap__viewer {
 	
-	width: 70%;
+	width: 70px;
 	
 	position:absolute;
 	
-	top: 0;
+	top: 2px;
 	
 	left: 0;
 	
diff --git a/css/custom_4.css b/css/custom_4.css
index 8057ffe..0fc22dc 100644
--- a/css/custom_4.css
+++ b/css/custom_4.css
@@ -6,7 +6,7 @@ body {
 }
 
 body {
-  padding-top: 61px;
+  padding-top: 63px;
 }
 
 .menuNavigazione {
@@ -15,6 +15,7 @@ body {
 
 .minimap {
   width: 110px;
+  height: 700px;
 }
 
 .menuRicerca {
@@ -24,6 +25,10 @@ body {
 .visCanto {
   height: 500px;
 }
+
+.visInfo {
+  height: 200px;
+}
  
  .custom-control-input:focus~.custom-control-label::before {
   border-color: #00968e !important;
diff --git a/index_4.1.html b/index_4.1.html
index a814ab4..2b4c088 100644
--- a/index_4.1.html
+++ b/index_4.1.html
@@ -363,7 +363,7 @@
 
 				</div>
 
-				<div id="colVisualizza" class="d-table-cell bg-lida-vis border-left border-bottom align-top pt-1">
+				<div id="colVisualizza" class="d-table-cell bg-lida-vis border-left border-bottom align-top">
 				
 					<div class="d-table h-75 w-100">
 						<div class="d-table-row">
@@ -372,9 +372,9 @@
 								<div class="ui-resizable-handle ui-resizable-s border-bottom" style="z-index: 90;border-bottom-width: 8px !important; border-bottom-style: double !important; border-bottom-color: #cbcbc0 !important;"></div>
 							</div>
 						</div>
-						<div class="d-table-row">
-							<div class="w-100 h-100 py-3 pl-3">
-								<div id='displayinfo' class="w-100">Visualizza info<br><br><br><br><br>Quando questa div e' vuota ci sono problemi col resize...<br>ma non e' l'unico caso</div>
+						<div class="d-table-row h-100 w-100">
+							<div class="visInfo w-100 h-100 py-3 pl-3">
+								<div id='displayinfo' class="w-100" style="display: d-flex; overflow-y: scroll;">Visualizza info<br><br><br><br><br><br><br><br><br><br><br><br><br></div>
 							</div>
 						</div>
 					</div>
@@ -382,7 +382,7 @@
 				</div>
 
 				<div id="colMinimap" class="d-table-cell bg-lida-vis minimap border-right border-bottom align-top">
-					<div id="displayminimap" class="col">&nbsp;</div>
+					<div id="displayminimap" class="col p-0 m-0 w-100 h-100"></div>
 				</div>
 
 				<div id="colRicerca" class="d-table-cell menuRicerca align-top">
diff --git a/js/minimap.js b/js/minimap.js
index c25f677..cc912a6 100644
--- a/js/minimap.js
+++ b/js/minimap.js
@@ -2,52 +2,47 @@
  * 
  */
  
-const displayId = 'displaycanto'
+const displayCantoId = '#displaycanto'
+const minimapviewerId = '#minimapviewer'
+const displayminimapId = '#displayminimap'
+const initOffset = 63;
 
 let minimap = document.createElement('div');
-let minimapSize = document.createElement('div');
 let viewer = document.createElement('div');
 let minimapContent = document.createElement('iframe');
 let realScale;
 let mappedElement = '';
-let currentMinimap=''
+
 
 function drawMinimap(name){
-		
 		showMinimap(name)
 		currentMinimap = name;
-
-		//mmviewer diventa draggable
-		var minimapTopPos = $('#minimapviewer').offset().top
-		console.log("top viewer init " + minimapTopPos)
-
-		$('#minimapviewer').draggable({
+		$(displayCantoId).scrollTop(0);
+		$(minimapviewerId).offset({ top: 63});
+		var minimapTopPos = $(minimapviewerId).offset().top
+		
+		$(minimapviewerId).draggable({
 			axis: "y",
-			containment: $('#displayminimap'),
+			containment: $(displayminimapId),
 			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);
+				$(displayCantoId).scrollTop((ui.offset.top - minimapTopPos) * (1 / (realScale*1.014)));
 			}
 		});
 	}
 
 
 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);
+		minimap.append(viewer, minimapContent);
+		$(displayminimapId).append(minimap)
 
-		mmplace.appendChild(minimap)
-
-		let html = document.getElementById(element).outerHTML//innerHTML
+		let html = document.getElementById(element).outerHTML
 		if (html == null | html == '')
 			return;
 
@@ -64,75 +59,68 @@ function showMinimap(element) {
 		cssLinkscroll.type = "text/css";
 
 		iFrameDoc.open();
+		iFrameDoc.write('<div class="w-100 py-3 pl-3" style="display: d-flex; overflow-y: scroll;">'); // da pulire...
 		iFrameDoc.write(html);
+		iFrameDoc.write('</div>');
 		iFrameDoc.close();
 
 		iFrameDoc.head.appendChild(cssLinkb);
 		iFrameDoc.head.appendChild(cssLinkscroll);
+
 		$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
-		mappedElement = element
 
-		getDimensionsDiv()
+		mappedElement = element;
+
+		getDimensionsDiv();
 
-		//window.addEventListener('scroll', trackScroll)
 		window.addEventListener('resize', getDimensionsDiv)
-		
 	}
 
-
-
-	
-	
 	
 	function getDimensionsDiv() {
-		var cantoplace = document.getElementById(displayId)
-		var elementplace = document.getElementById(mappedElement)
+		var elementplace = document.getElementById(mappedElement);
 
-		var bodyWidth = elementplace.clientWidth;
-		var bodyRatio = elementplace.clientHeight / bodyWidth;
-	 
-		let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
+		var maxHeight = ($(displayminimapId)[0].clientHeight)-4; //h attuale dello spazio minimap
+		var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
+		var cantoHeight = Math.ceil(((elementplace.clientHeight-44)/25*26)+44+32); //h prevista del canto nella minimap
+
+		var resizableWidth = $(".visCanto")[0].clientWidth;
+		var resizableHeight = $(".visCanto")[0].clientHeight;
+
+		var resizableRatio = resizableHeight / resizableWidth;
+		var resizableHeightRatio = resizableHeight/elementplace.clientHeight;
+
+		let viewerHeight = (maxHeight*resizableHeightRatio)-2; // -2 = bordi
+		let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth);
+
+		realScale = (maxHeight/cantoHeight);
 
-		//minimap.style.width='15%';
 		minimap.style.width = '100%';
 
-		realScale = minimap.clientWidth / bodyWidth;
-
-		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';
-	}
+		minimapContent.style.height = Math.trunc(cantoHeight+25) + "px"
+		minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
+	
+		viewer.style.height = viewerHeight + `px`;
+		viewer.style.width = viewerWidth + `px`;
+		
+		trackScrollCanto();
+	};
+
 
 	getDimDiv = function(){
 		getDimensionsDiv();
 	}
 	
-	function getInnerHeight(elm) {
-		var computed = getComputedStyle(elm),
-			padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
 
-		return elm.clientHeight - padding
-	}
-	/*
-	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))
+		var cantoHeight = document.getElementById(mappedElement).clientHeight;
+		var minimapHeight = $(displayminimapId)[0].clientHeight;
+		var posDbefore = $(displayCantoId).scrollTop();
+		var posAfter = minimapHeight/((cantoHeight/posDbefore)*1.014);
+		$(minimapviewerId).offset({ top: initOffset + posAfter});
 	}
+	
 
 	function hideMinimap() {
 		$('.canto').each(function() {
diff --git a/js/script_4.1.js b/js/script_4.1.js
index 7cf1d78..8280a23 100644
--- a/js/script_4.1.js
+++ b/js/script_4.1.js
@@ -91,6 +91,9 @@ $(document).ready(function() {
 		handles: "e",
 		minWidth: 100,
 		maxWidth: 350,
+		resize: function(event, ui) {
+			getDimDiv();
+		},
 		stop: function(event, ui) {
 			setWidthInPercent(ui.element);
 		}
@@ -102,6 +105,7 @@ $(document).ready(function() {
 		resize: function(event, ui) {
 			ui.position.left = 0;
 			$("#displaycanto").width("100%");
+			getDimDiv();
 		},
 		stop: function(event, ui) {
 			setWidthInPercent(ui.element);