LiDa_Search/js/minimap.js

/**
 * 
 */
 
const displayCantoId = '#displaycanto'
const minimapviewerId = '#minimapviewer'
const displayminimapId = '#displayminimap'
const initOffset = 63;

let minimap = document.createElement('div');
let viewer = document.createElement('div');
let minimapContent = document.createElement('iframe');
let realScale;
let mappedElement = '';


function drawMinimap(name){
		showMinimap(name)
		currentMinimap = name;
		$(displayCantoId).scrollTop(0);
		$(minimapviewerId).offset({ top: 63});
		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) * (1 / (realScale*1.014)));
			}
		});
	}


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

		let html = document.getElementById(element).outerHTML
		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('<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();

		window.addEventListener('resize', getDimensionsDiv)
	}

	
	function getDimensionsDiv() {
		var elementplace = document.getElementById(mappedElement);

		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 = '100%';

		minimapContent.style.transform = `scale(${realScale})`;
		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 trackScrollCanto() {
		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() {
			$(this).attr("style", 'display:none');
		});
		$(".minimap__container").remove();
		currentMinimap = ''
	}