Fissati problemi di dimensionamento, diventato automatico

This commit is contained in:
Luca Trupiano 2023-02-24 15:06:20 +01:00
parent 8f4b5cbe29
commit 1fd2c05ced
5 changed files with 55 additions and 76 deletions

View File

@ -19,7 +19,7 @@ body {
}
.tableMain {
height: 950px;
height: 95%;
min-height: 600px;
}
@ -33,7 +33,7 @@ body {
}
#colVisualizza {
max-height: 950px;
max-height: 95%;
min-height: 600px;
}
@ -53,20 +53,15 @@ body {
.minimap {
width: 108px;
min-height: 700px;
min-height: 600px;
}
.menuRicerca {
width: 30%;
}
.visCanto {
height: 500px;
}
#displaycanto {
display: d-flex;
height: 500px;
overflow-y: scroll;
}
@ -78,8 +73,6 @@ body {
overflow: auto !important;
}
.row-content { height: 100%; display: d-flex;}
.doubleborder {
z-index: 90;
border-bottom-width: 8px !important;

View File

@ -19,7 +19,7 @@ body {
}
.tableMain {
height: 950px;
height: 95%;
min-height: 600px;
}
@ -33,7 +33,7 @@ body {
}
#colVisualizza {
max-height: 950px;
max-height: 95%;
min-height: 600px;
}
@ -53,20 +53,15 @@ body {
.minimap {
width: 108px;
min-height: 700px;
min-height: 600px;
}
.menuRicerca {
width: 30%;
}
.visCanto {
height: 500px;
}
#displaycanto {
display: d-flex;
height: 500px;
overflow-y: scroll;
}
@ -78,8 +73,6 @@ body {
overflow: auto !important;
}
.row-content { height: 100%; display: d-flex;}
.doubleborder {
z-index: 90;
border-bottom-width: 8px !important;

View File

@ -387,8 +387,8 @@
</div>
</div>
</div>
<div class="card">
<div class="card-header px-1" id="headingZero" style="display: none;">
<div class="card" style="display: none;">
<div class="card-header px-1" id="headingZero">
<h6 class="mb-0">
<div class="row no-gutters justify-content-end">
<div class="col-auto flex-fill align-self-end text-muted text-right nav-link">

View File

@ -6,6 +6,8 @@ const displayCantoId = '#displaycanto';
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');
@ -16,6 +18,13 @@ 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();
@ -26,7 +35,6 @@ function drawMinimap(name){
$(minimapviewerId).draggable({
axis: "y",
containment: $(displayminimapId),
//containment: $(".minimap__content"),
scroll: false,
start: function(event, ui) { minimapScrolling = true; },
stop: function(event, ui) { minimapScrolling = false; },
@ -35,7 +43,7 @@ function drawMinimap(name){
$(displayCantoId).scrollTop((ui.offset.top - minimapTopPos) / realScale);
}
});
}
}
function showMinimap() {
@ -73,11 +81,12 @@ function showMinimap() {
let bgCanto = $(visCantoClass).css('background-color');
$('iframe').contents().find('body').css('background-color', bgCanto + ' !important;');
getDimensionsDiv();
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");
$("#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");
getDimensionsDiv();
window.addEventListener('resize', getDimensionsDiv);
}
@ -86,34 +95,23 @@ function showMinimap() {
function getDimensionsDiv(onlyViewer = false) {
var srcCantoWidth = $(currentMinimap)[0].clientWidth;
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
//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, -1 bordo col, -4 bordi iframe
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 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; //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;
//var realScaleW = Math.min((maxWidth/miniCantoWidth), 1);
//var realScaleH = Math.min((maxHeight/miniCantoHeight), 1);
//minimap.style.width = '100%';
if (onlyViewer == false) {
realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
minimapContent.style.transform = `scale(${realScale})`;
//minimapContent.style.height = Math.trunc(miniCantoHeight) + "px";
//minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
minimapContent.style.height = miniCantoHeight + "px";
minimapContent.style.width = maxWidth/realScale + "px";
}
//let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
let viewerHeight = (miniCantoHeight*realScale*heightRatio)-2; // -2 = bordi
let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi

View File

@ -128,8 +128,6 @@ $(document).ready(function() {
minWidth: 100,
maxWidth: 350,
resize: function(event, ui) {
//$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv(true);
},
stop: function(event, ui) {
@ -142,8 +140,6 @@ $(document).ready(function() {
minWidth: 350,
resize: function(event, ui) {
ui.position.left = 0;
//$("#displayinfo").css("maxWidth", ($(".visInfo").width()-4)+"px");
//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv(true);
},
stop: function(event, ui) {
@ -154,23 +150,16 @@ $(document).ready(function() {
$(".visCanto").resizable({
handles: "s",
minHeight: 80,
maxHeight: 880,
//maxHeight: 880,
alsoResize: "#displaycanto",
resize: function(event, ui) {
$("#displaycanto").width(" min-content");
$("#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");
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");
//$("#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", "");
getDimensionsDiv(true);
},
stop: function(event, ui) {
@ -557,9 +546,15 @@ $(document).ready(function() {
const jsonReplacer = (key, value) =>
typeof value === 'undefined' ? 0 : value;
//const cantoHeight = 0.65;
// Fine variabili
//var cantoHeightToSet = $("body")[0].clientHeight*cantoHeight;
//$(".visCanto").css("max-height", cantoHeightToSet);
//$("#displaycanto").css("max-height", cantoHeightToSet);
//$(".visCanto").css("height", cantoHeightToSet);
//$("#displaycanto").css("height", cantoHeightToSet);
//$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");