150 lines
5.2 KiB
JavaScript
150 lines
5.2 KiB
JavaScript
/**
|
|
*
|
|
*/
|
|
|
|
const displayCantoId = '#displaycanto';
|
|
const displayCantoWrapperId = '#displaycantoWrapper';
|
|
const minimapviewerId = '#minimapviewer';
|
|
const displayminimapId = '#displayminimap';
|
|
const visCantoClass = '.visCanto';
|
|
const tableMainHeight = 0.95; //.tableMain {height: 95%;}
|
|
const cantoHeight = 0.65;
|
|
|
|
let minimap = document.createElement('div');
|
|
let viewer = document.createElement('div');
|
|
let minimapContent = document.createElement('iframe');
|
|
let realScale;
|
|
let currentMinimap = '';
|
|
let initOffset = '';
|
|
|
|
|
|
function drawMinimap(name){
|
|
var cantoHeightToSet = $("body")[0].clientHeight*cantoHeight;
|
|
var maxCantoHeightToSet = $("body")[0].clientHeight*tableMainHeight-110;
|
|
$(visCantoClass).css("max-height", maxCantoHeightToSet);
|
|
$(visCantoClass).css("height", cantoHeightToSet);
|
|
$(displayCantoId).css("max-height", maxCantoHeightToSet);
|
|
$(displayCantoId).css("height", cantoHeightToSet);
|
|
|
|
currentMinimap = name;
|
|
initOffset = parseInt($("body").css("padding-top").replace("px", ""))+63;
|
|
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;
|
|
$(displayCantoWrapperId).scrollTop((ui.offset.top - minimapTopPos) / realScale);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
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.close();
|
|
|
|
iFrameDoc.head.appendChild(cssLinkb);
|
|
iFrameDoc.head.appendChild(cssLinkscroll);
|
|
|
|
let bgCanto = $(visCantoClass).css('background-color');
|
|
$('iframe').contents().find('body').css('background-color', bgCanto + ' !important;');
|
|
|
|
var infoHeightToSet = $("body")[0].clientHeight*tableMainHeight - $(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; //h prevista del canto nella minimap 64: padding pr + blank space
|
|
var miniCantoHeight = srcCantoHeight; //h prevista del canto nella minimap 16x2: padding py
|
|
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)-2; // -2 = bordi
|
|
let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi
|
|
|
|
viewer.style.height = viewerHeight + "px";
|
|
viewer.style.width = viewerWidth + "px";
|
|
|
|
$(displayminimapId).height((miniCantoHeight*realScale)+6);
|
|
|
|
trackScrollCanto();
|
|
};
|
|
|
|
|
|
function trackScrollCanto() {
|
|
//var minimapHeight = $(displayminimapId)[0].clientHeight;
|
|
var minimapHeight = ($(currentMinimap)[0].clientHeight+32)*realScale;
|
|
//var posDbefore = $(displayCantoId).scrollTop();
|
|
var posDbefore = $(displayCantoWrapperId).scrollTop();
|
|
//console.log(posDbefore);
|
|
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
|
|
var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.005);
|
|
//var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.088);
|
|
$(minimapviewerId).offset({ top: initOffset + posAfter});
|
|
}
|
|
|
|
|
|
function hideMinimap() {
|
|
$('.canto').each(function() {
|
|
$(this).attr("style", 'display:none');
|
|
});
|
|
//$(".minimap__container").remove();
|
|
currentMinimap = ''
|
|
}
|
|
|
|
|