Modifiche alla visualizzazione info e corretti ridimensionamenti
This commit is contained in:
parent
b88da1354f
commit
8f4b5cbe29
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue