Fissati problemi di dimensionamento, diventato automatico
This commit is contained in:
parent
8f4b5cbe29
commit
1fd2c05ced
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,26 +18,32 @@ let initOffset = '';
|
|||
|
||||
|
||||
function drawMinimap(name){
|
||||
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),
|
||||
//containment: $(".minimap__content"),
|
||||
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) / realScale);
|
||||
}
|
||||
});
|
||||
}
|
||||
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;
|
||||
$(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
|
||||
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
||||
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-$(".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", "");
|
||||
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");
|
||||
|
|
|
|||
Loading…
Reference in New Issue