LiDa_Search/js/minimap.js

/**
 * 
 */
 
const displayCantoId = '#displaycanto';
const displayCantoWrapperId = '#displaycantoWrapper';
const minimapviewerId = '#minimapviewer';
const displayminimapId = '#displayminimap';
const visCantoClass = '.visCanto';
const fillerClass = '.filler';
const cssTableMainHeight = 0.95;  //.tableMain {height: 95%;}
const cssCantoHeight = 0.65;
const bodyScript = '<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>'

let minimap = document.createElement('div');
let viewer = document.createElement('div');
let minimapContent = document.createElement('iframe');
let realScale;
let currentMinimap = '';
let initOffset = '';
let correctionFactor = 1;
let scrollCorrectionFactor = 1.003;


function drawMinimap(name){
	var cantoHeightToSet = $("body")[0].clientHeight*cssCantoHeight;
	var maxCantoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight-110; // 63 padding top + 47 margine bottom
	$(visCantoClass).css("max-height", maxCantoHeightToSet);	
	$(visCantoClass).css("height", cantoHeightToSet);	
	$(displayCantoId).css("max-height", maxCantoHeightToSet);	
	$(displayCantoId).css("height", cantoHeightToSet);	

		//var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
		//$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
		//$("#displayinfo").css("height", infoHeightToSet+"px");
		//$(".visInfo").css("height", (infoHeightToSet+4)+"px");

	currentMinimap = name;
	
	if (currentMinimap == '#vistaFrasi') {
		correctionFactor = 0.967;
		//scrollCorrectionFactor = 1.02;
		scrollCorrectionFactor = 1;
	} else {
		correctionFactor = 1;
		scrollCorrectionFactor = 1.003;
	};
	
	initOffset = parseInt($("body").css("padding-top").replace("px", ""))+63;

	if ($(displayminimapId).lenght > 0) {
		$(displayminimapId)[0].remove();		
	}

	showMinimap();

	$(displayCantoWrapperId).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;
			$(displayCantoWrapperId).scrollTop((ui.offset.top - minimapTopPos) / (realScale*correctionFactor));
		}
	});
}


function showMinimap() {
		viewer.className = 'minimap__viewer';
		viewer.id = 'minimapviewer';
		minimapContent.className = 'minimap__content';
		minimap.append(viewer, minimapContent);
		$(displayminimapId).append(minimap);

		let html = $(currentMinimap)[0].outerHTML;
		if (html == null | html == '')
			return;

		let iFrameDoc = minimapContent.contentWindow.document;

		var cssLinkb = document.createElement("link");
		cssLinkb.href = $("#" + currStyle + "-Boot")[0].href;
		cssLinkb.rel = "stylesheet";
		cssLinkb.type = "text/css";

		var cssLinkscroll = document.createElement("link");
		cssLinkscroll.href = $("#" + currStyle + "-Custom")[0].href;
		cssLinkscroll.rel = "stylesheet";
		cssLinkscroll.type = "text/css";

		iFrameDoc.open();
		iFrameDoc.write('<div class="blog-main w-100 " style="display: d-flex;">'); // da pulire...
		iFrameDoc.write(html);
		iFrameDoc.write('</div>');
		iFrameDoc.write(bodyScript);
		iFrameDoc.close();

		iFrameDoc.head.appendChild(cssLinkb);
		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
		$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
		$("#displayinfo").css("height", infoHeightToSet+"px");
		$(".visInfo").css("height", (infoHeightToSet+4)+"px");

		getDimensionsDiv();

		//window.addEventListener('resize', getDimensionsDiv);
	}

	
	function getDimensionsDiv(onlyViewer = 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
		var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
		var miniCantoWidth = srcCantoWidth+64; //w prevista del canto nella minimap 64: padding pr + blank space
		var miniCantoHeight = srcCantoHeight*correctionFactor; //h prevista del canto nella minimap
		var resizableWidth = $(visCantoClass)[0].clientWidth;
		var resizableHeight = $(visCantoClass)[0].clientHeight;
		var resizableRatio = resizableHeight/resizableWidth;
		//var widthRatio = resizableWidth/srcCantoWidth;
		var heightRatio = resizableHeight/srcCantoHeight;

		if (onlyViewer == false) {
			realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
			minimapContent.style.transform = `scale(${realScale})`;
			minimapContent.style.height = miniCantoHeight + "px";
			minimapContent.style.width = maxWidth/realScale + "px";
		}
		
		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;

		$(displayminimapId).height(displayminimapHeight);
		$(fillerClass).height(Math.max(maxHeight-displayminimapHeight)+2, 0);

		trackScrollCanto();
	};


	function trackScrollCanto() {
		var minimapHeight = ($(currentMinimap)[0].clientHeight+32)*realScale;
		var posDbefore = $(displayCantoWrapperId).scrollTop();
		var srcCantoHeight = $(currentMinimap)[0].clientHeight;
		//var posAfter = (minimapHeight*posDbefore*correctionFactor)/(srcCantoHeight*1.003);
		var posAfter = (minimapHeight*posDbefore*correctionFactor)/(srcCantoHeight*scrollCorrectionFactor);
		//var posAfter = (minimapHeight*posDbefore*correctionFactor)/(srcCantoHeight*1.02);
		$(minimapviewerId).offset({ top: initOffset + posAfter});
	}
	

	function hideMinimap() {
		$('.canto').each(function() {
			$(this).attr("style", 'display:none');
		});
		//$(".minimap__container").remove();
		currentMinimap = ''
	}