134 lines
3.9 KiB
JavaScript
134 lines
3.9 KiB
JavaScript
/**
|
|
*
|
|
*/
|
|
|
|
const displayCantoId = '#displaycanto';
|
|
const minimapviewerId = '#minimapviewer';
|
|
const displayminimapId = '#displayminimap';
|
|
const visCantoClass = '.visCanto';
|
|
|
|
let minimap = document.createElement('div');
|
|
let viewer = document.createElement('div');
|
|
let minimapContent = document.createElement('iframe');
|
|
let realScale;
|
|
let currentMinimap = '';
|
|
let initOffset = '';
|
|
|
|
|
|
function drawMinimap(name){
|
|
currentMinimap = name;
|
|
initOffset = parseInt($("body").css("padding-top").replace("px", ""));
|
|
showMinimap();
|
|
$(displayCantoId).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;
|
|
$(displayCantoId).scrollTop((ui.offset.top - minimapTopPos) * (1 / (realScale*1.014)));
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
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 = "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);
|
|
|
|
let bgCanto = $(".visCanto").css('background-color');
|
|
$('iframe').contents().find('body').css('backgroundColor', bgCanto + ';');
|
|
|
|
getDimensionsDiv();
|
|
|
|
window.addEventListener('resize', getDimensionsDiv);
|
|
}
|
|
|
|
|
|
function getDimensionsDiv() {
|
|
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
|
|
var maxHeight = ($(displayminimapId)[0].clientHeight)-4; //h attuale dello spazio minimap -4 padding
|
|
var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css) -2 bordi
|
|
var miniCantoHeight = Math.ceil(((srcCantoHeight-44)/25*26)+44+32); //h prevista del canto nella minimap
|
|
|
|
var resizableWidth = $(visCantoClass)[0].clientWidth;
|
|
var resizableHeight = $(visCantoClass)[0].clientHeight;
|
|
var resizableRatio = resizableHeight/resizableWidth;
|
|
var heightRatio = resizableHeight/srcCantoHeight;
|
|
|
|
let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
|
|
let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2);
|
|
|
|
realScale = (maxHeight/miniCantoHeight);
|
|
|
|
minimap.style.width = '100%';
|
|
|
|
minimapContent.style.transform = `scale(${realScale})`;
|
|
minimapContent.style.height = Math.trunc(miniCantoHeight+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 minimapHeight = $(displayminimapId)[0].clientHeight;
|
|
var posDbefore = $(displayCantoId).scrollTop();
|
|
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
|
|
var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.014);
|
|
$(minimapviewerId).offset({ top: initOffset + posAfter});
|
|
}
|
|
|
|
|
|
function hideMinimap() {
|
|
$('.canto').each(function() {
|
|
$(this).attr("style", 'display:none');
|
|
});
|
|
$(".minimap__container").remove();
|
|
currentMinimap = ''
|
|
}
|
|
|
|
|