146 lines
4.0 KiB
JavaScript
146 lines
4.0 KiB
JavaScript
/**
|
|
*
|
|
*/
|
|
|
|
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 = ''
|
|
}
|
|
|
|
|