Modifiche alla visualizzazione info e corretti ridimensionamenti

This commit is contained in:
Luca Trupiano 2023-02-23 20:04:59 +01:00
parent b88da1354f
commit 8f4b5cbe29
5 changed files with 43 additions and 28 deletions

View File

@ -33,6 +33,7 @@ body {
} }
#colVisualizza { #colVisualizza {
max-height: 950px;
min-height: 600px; min-height: 600px;
} }
@ -69,8 +70,7 @@ body {
overflow-y: scroll; overflow-y: scroll;
} }
.visInfo2 { .visInfo {
height: 300px !important;
padding-top: 4px; padding-top: 4px;
} }
@ -78,6 +78,8 @@ body {
overflow: auto !important; overflow: auto !important;
} }
.row-content { height: 100%; display: d-flex;}
.doubleborder { .doubleborder {
z-index: 90; z-index: 90;
border-bottom-width: 8px !important; border-bottom-width: 8px !important;

View File

@ -33,6 +33,7 @@ body {
} }
#colVisualizza { #colVisualizza {
max-height: 950px;
min-height: 600px; min-height: 600px;
} }
@ -70,15 +71,15 @@ body {
} }
.visInfo { .visInfo {
height: 300px !important;
padding-top: 4px; padding-top: 4px;
} }
#displayinfo { #displayinfo {
min-height: 296px !important;
overflow: auto !important; overflow: auto !important;
} }
.row-content { height: 100%; display: d-flex;}
.doubleborder { .doubleborder {
z-index: 90; z-index: 90;
border-bottom-width: 8px !important; border-bottom-width: 8px !important;

View File

@ -416,15 +416,15 @@
</div> </div>
</div> </div>
<div class="d-table-row w-100"> <div class="d-table-row w-100">
<div class="visInfo w-100"> <div class="visInfo w-100 d-flex" style="flex-direction: column;">
<div id='displayinfo' class="w-100 h-100 border-bottom border-danger pt-3 pl-3" style="display: d-flex;">Visualizza info <br><br><br><br><br></div> <div id='displayinfo' class="pt-3 px-3">Visualizza info <br><br><br><br><br></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="colMinimap" class="d-table-cell bg-lida-vis minimap border-right border-bottom align-top"> <div id="colMinimap" class="d-table-cell bg-lida-vis minimap border-right border-bottom align-top">
<div id="displayminimap" class="col px-0 pb-0 m-0 w-100 border-bottom border-danger scrollMon"></div> <div id="displayminimap" class="col px-0 pb-0 m-0 w-100 scrollMon"></div>
</div> </div>
<div id="colRicerca" class="d-table-cell menuRicerca align-top"> <div id="colRicerca" class="d-table-cell menuRicerca align-top">

View File

@ -70,11 +70,15 @@ function showMinimap() {
iFrameDoc.head.appendChild(cssLinkb); iFrameDoc.head.appendChild(cssLinkb);
iFrameDoc.head.appendChild(cssLinkscroll); iFrameDoc.head.appendChild(cssLinkscroll);
let bgCanto = $(".visCanto").css('background-color'); let bgCanto = $(visCantoClass).css('background-color');
$('iframe').contents().find('body').css('background-color', bgCanto + ' !important;'); $('iframe').contents().find('body').css('background-color', bgCanto + ' !important;');
getDimensionsDiv(); getDimensionsDiv();
$("#displayinfo").css("maxHeight", (950-$(visCantoClass)[0].clientHeight-2-63-2)+"px");
$("#displayinfo").css("height", (950-$(visCantoClass)[0].clientHeight-2-63-2)+"px");
$(".visInfo").css("height", (950-$(visCantoClass)[0].clientHeight-2-63+4-2)+"px !important");
window.addEventListener('resize', getDimensionsDiv); window.addEventListener('resize', getDimensionsDiv);
} }
@ -84,12 +88,11 @@ function showMinimap() {
var srcCantoHeight = $(currentMinimap)[0].clientHeight; var srcCantoHeight = $(currentMinimap)[0].clientHeight;
//var maxHeight = ($(displayminimapId)[0].clientHeight)-4-63; //h attuale dello spazio minimap -4 padding -63 top padding //var maxHeight = ($(displayminimapId)[0].clientHeight)-4-63; //h attuale dello spazio minimap -4 padding -63 top padding
var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe
var maxHeight2 = ($(displayminimapId)[0].clientHeight)-66; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe
console.log("maxHeight2: "+maxHeight2+" maxHeight: "+maxHeight);
var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css) var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
//var miniCantoHeight = Math.ceil(((srcCantoHeight-44)/25*26)+44+32); //h prevista del canto nella minimap //var miniCantoHeight = Math.ceil(((srcCantoHeight-44)/25*26)+44+32); //h prevista del canto nella minimap
var miniCantoWidth = srcCantoWidth+64; //h prevista del canto nella minimap 64: padding pr + blank space var miniCantoWidth = srcCantoWidth+64; //h prevista del canto nella minimap 64: padding pr + blank space
var miniCantoHeight = srcCantoHeight+16; //h prevista del canto nella minimap 16x2: padding py //var miniCantoHeight = srcCantoHeight+16; //h prevista del canto nella minimap 16x2: padding py
var miniCantoHeight = srcCantoHeight; //h prevista del canto nella minimap 16x2: padding py
var resizableWidth = $(visCantoClass)[0].clientWidth; var resizableWidth = $(visCantoClass)[0].clientWidth;
var resizableHeight = $(visCantoClass)[0].clientHeight; var resizableHeight = $(visCantoClass)[0].clientHeight;
@ -99,10 +102,10 @@ function showMinimap() {
//var realScaleW = Math.min((maxWidth/miniCantoWidth), 1); //var realScaleW = Math.min((maxWidth/miniCantoWidth), 1);
//var realScaleH = Math.min((maxHeight/miniCantoHeight), 1); //var realScaleH = Math.min((maxHeight/miniCantoHeight), 1);
realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
//minimap.style.width = '100%'; //minimap.style.width = '100%';
if (onlyViewer == false) { if (onlyViewer == false) {
realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
minimapContent.style.transform = `scale(${realScale})`; minimapContent.style.transform = `scale(${realScale})`;
//minimapContent.style.height = Math.trunc(miniCantoHeight) + "px"; //minimapContent.style.height = Math.trunc(miniCantoHeight) + "px";
//minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px"; //minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
@ -110,8 +113,6 @@ function showMinimap() {
minimapContent.style.width = maxWidth/realScale + "px"; minimapContent.style.width = maxWidth/realScale + "px";
} }
console.log("minimapContent height: "+(miniCantoHeight*realScale));
//let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi //let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
let viewerHeight = (miniCantoHeight*realScale*heightRatio)-2; // -2 = bordi let viewerHeight = (miniCantoHeight*realScale*heightRatio)-2; // -2 = bordi
let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi
@ -119,7 +120,8 @@ function showMinimap() {
viewer.style.height = viewerHeight + "px"; viewer.style.height = viewerHeight + "px";
viewer.style.width = viewerWidth + "px"; viewer.style.width = viewerWidth + "px";
$(displayminimapId).height((miniCantoHeight*realScale)+2); $(displayminimapId).height((miniCantoHeight*realScale)+6);
trackScrollCanto(); trackScrollCanto();
}; };
@ -130,7 +132,7 @@ function showMinimap() {
var posDbefore = $(displayCantoId).scrollTop(); var posDbefore = $(displayCantoId).scrollTop();
//console.log(posDbefore); //console.log(posDbefore);
var srcCantoHeight = $(currentMinimap)[0].clientHeight; var srcCantoHeight = $(currentMinimap)[0].clientHeight;
var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.011); var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.005);
//var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.088); //var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.088);
$(minimapviewerId).offset({ top: initOffset + posAfter}); $(minimapviewerId).offset({ top: initOffset + posAfter});
} }
@ -140,7 +142,7 @@ function showMinimap() {
$('.canto').each(function() { $('.canto').each(function() {
$(this).attr("style", 'display:none'); $(this).attr("style", 'display:none');
}); });
$(".minimap__container").remove(); //$(".minimap__container").remove();
currentMinimap = '' currentMinimap = ''
} }

View File

@ -128,8 +128,8 @@ $(document).ready(function() {
minWidth: 100, minWidth: 100,
maxWidth: 350, maxWidth: 350,
resize: function(event, ui) { resize: function(event, ui) {
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px"); //$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px"); //$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv(true); getDimensionsDiv(true);
}, },
stop: function(event, ui) { stop: function(event, ui) {
@ -142,8 +142,8 @@ $(document).ready(function() {
minWidth: 350, minWidth: 350,
resize: function(event, ui) { resize: function(event, ui) {
ui.position.left = 0; ui.position.left = 0;
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px"); //$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px"); //$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv(true); getDimensionsDiv(true);
}, },
stop: function(event, ui) { stop: function(event, ui) {
@ -158,16 +158,23 @@ $(document).ready(function() {
alsoResize: "#displaycanto", alsoResize: "#displaycanto",
resize: function(event, ui) { resize: function(event, ui) {
$("#displaycanto").width(" min-content"); $("#displaycanto").width(" min-content");
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px"); $("#displayinfo").css("maxHeight", (950-$(".visCanto")[0].clientHeight-2-63-1)+"px");
$("#displayinfo").css("height", (950-$(".visCanto")[0].clientHeight-2-63-1)+"px");
$(".visInfo").css("height", (950-$(".visCanto")[0].clientHeight-2-63+4-1)+"px !important");
//$("#displayinfo").css("maxHeight", ($("#colVisualizza")[0].clientHeight-$(".visCanto")[0].clientHeight-2-63-2)+"px");
//$("#displayinfo").css("height", ($("#colVisualizza")[0].clientHeight-$(".visCanto")[0].clientHeight-2-63-2)+"px");
//$(".visInfo").css("height", ($("#colVisualizza")[0].clientHeight-$(".visCanto")[0].clientHeight-2-63+4-2)+"px !important");
//$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
//$("#displayinfo").css("maxHeight", ($(".visInfo").height()-17)+"px");
//$("#displayinfo").css("height", ($(".visInfo").height()-17)+"px");
//$("#displayinfo").css("maxHeight", ""); //$("#displayinfo").css("maxHeight", "");
getDimensionsDiv(true); getDimensionsDiv(true);
}, },
stop: function(event, ui) { stop: function(event, ui) {
$("#displaycanto").width(" min-content"); $("#displaycanto").width(" min-content");
//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
//$(".canto").fitText();
// ui.element.width("");
} }
}); });
@ -552,8 +559,11 @@ $(document).ready(function() {
// Fine variabili // Fine variabili
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
//$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
var elem = document.getElementsByClassName('scrollMon'); var elem = document.getElementsByClassName('scrollMon');
// $(".scrollMon").each(function(){ // $(".scrollMon").each(function(){
// $(this).bind("mousewheel", doScroll, false); // $(this).bind("mousewheel", doScroll, false);