LiDa_Search/js/minimap.js

/**
 * 
 */
 
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 = '';
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({
			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 = ''
	}