js per gestione minimap

js/cesareBrowse.js

@@ -6,7 +6,7 @@
 var resetResult;
 var lsid;
 var lsentid;
-var getDimDiv;
+//var getDimDiv;
 const formaClass='frm'
 
  
@@ -34,12 +34,12 @@ $(document).ready(function() {
 	
 	//used in minimap
 	//
-	let minimap = document.createElement('div');
+	/*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 mappedElement = '';*/
 	
 	resetResult=function(){
 		//console.log('clean result')
@@ -283,7 +283,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 		}
 		return categoriegrammaticali[categ[0]]
 	}
-	
+	/*
 	function drawMinimap(name){
 		
 		showMinimap(name)
@@ -307,7 +307,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 			}
 		});
 	}
-	
+	*/
 	function cleanSearchResult() {
 		
 		for (msid of listaPeriodiRisultato){
@@ -396,7 +396,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 
 	//minimap management
 	
-
+/*
 	function showMinimap(element) {
 		mmplace = document.getElementById('displayminimap')
 		minimap.className = 'minimap__container'
@@ -475,13 +475,13 @@ $(" ."+formaClass).hover(function(idx, element) {
 
 	getDimDiv = function(){
 		getDimensionsDiv();
-	}
+	}*/
 	/*
 	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)`
@@ -500,7 +500,7 @@ $(" ."+formaClass).hover(function(idx, element) {
 		$(".minimap__container").remove();
 		currentMinimap = ''
 	}
-
+*/
 	//Cantica management functions
 	
 	function showCanto(formecantica, idcantica, canto) {

js/minimap.js

@@ -0,0 +1,144 @@
+/**
+ * 
+ */
+ 
+const displayId = 'displaycanto'
+
+let minimap = document.createElement('div');
+let minimapSize = document.createElement('div');
+let viewer = document.createElement('div');
+let minimapContent = document.createElement('iframe');
+let realScale;
+let mappedElement = '';
+
+function drawMinimap(name){
+		
+		showMinimap(name)
+		currentMinimap = name;
+
+		//mmviewer diventa draggable
+		var minimapTopPos = $('#minimapviewer').offset().top
+		console.log("top viewer init " + minimapTopPos)
+
+		$('#minimapviewer').draggable({
+			axis: "y",
+			containment: $('#displayminimap'),
+			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);
+			}
+		});
+	}
+
+
+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);
+
+		mmplace.appendChild(minimap)
+
+		let html = document.getElementById(element).outerHTML//innerHTML
+		if (html == null | html == '')
+			return;
+
+		let iFrameDoc = minimapContent.contentWindow.document;
+	
+		var cssLinkb = document.createElement("link");
+		cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css";
+		cssLinkb.rel = "stylesheet";
+		cssLinkb.type = "text/css";
+
+		var cssLinkscroll = document.createElement("link");
+		cssLinkscroll.href = "./css/browsingldc.css";
+		cssLinkscroll.rel = "stylesheet";
+		cssLinkscroll.type = "text/css";
+
+		iFrameDoc.open();
+		iFrameDoc.write(html);
+		iFrameDoc.close();
+
+		iFrameDoc.head.appendChild(cssLinkb);
+		iFrameDoc.head.appendChild(cssLinkscroll);
+		$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
+		mappedElement = element
+
+		getDimensionsDiv()
+
+		//window.addEventListener('scroll', trackScroll)
+		window.addEventListener('resize', getDimensionsDiv)
+		
+	}
+
+
+
+	
+	
+	
+	function getDimensionsDiv() {
+		var cantoplace = document.getElementById(displayId)
+		var elementplace = document.getElementById(mappedElement)
+
+		var bodyWidth = elementplace.clientWidth;
+		var bodyRatio = elementplace.clientHeight / bodyWidth;
+	 
+		let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
+
+		//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';
+	}
+
+	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))
+	}
+
+	function hideMinimap() {
+		$('.canto').each(function() {
+			$(this).attr("style", 'display:none');
+		});
+		$(".minimap__container").remove();
+		currentMinimap = ''
+	}
+	
+