diff --git a/css/browsingldc.css b/css/browsingldc.css
index 2349d8a..1ae1b48 100644
--- a/css/browsingldc.css
+++ b/css/browsingldc.css
@@ -71,11 +71,11 @@ Minimap
.minimap__viewer {
- width: 70%;
+ width: 70px;
position:absolute;
- top: 0;
+ top: 2px;
left: 0;
diff --git a/css/custom_4.css b/css/custom_4.css
index 8057ffe..0fc22dc 100644
--- a/css/custom_4.css
+++ b/css/custom_4.css
@@ -6,7 +6,7 @@ body {
}
body {
- padding-top: 61px;
+ padding-top: 63px;
}
.menuNavigazione {
@@ -15,6 +15,7 @@ body {
.minimap {
width: 110px;
+ height: 700px;
}
.menuRicerca {
@@ -24,6 +25,10 @@ body {
.visCanto {
height: 500px;
}
+
+.visInfo {
+ height: 200px;
+}
.custom-control-input:focus~.custom-control-label::before {
border-color: #00968e !important;
diff --git a/index_4.1.html b/index_4.1.html
index a814ab4..2b4c088 100644
--- a/index_4.1.html
+++ b/index_4.1.html
@@ -363,7 +363,7 @@
</div>
- <div id="colVisualizza" class="d-table-cell bg-lida-vis border-left border-bottom align-top pt-1">
+ <div id="colVisualizza" class="d-table-cell bg-lida-vis border-left border-bottom align-top">
<div class="d-table h-75 w-100">
<div class="d-table-row">
@@ -372,9 +372,9 @@
<div class="ui-resizable-handle ui-resizable-s border-bottom" style="z-index: 90;border-bottom-width: 8px !important; border-bottom-style: double !important; border-bottom-color: #cbcbc0 !important;"></div>
</div>
</div>
- <div class="d-table-row">
- <div class="w-100 h-100 py-3 pl-3">
- <div id='displayinfo' class="w-100">Visualizza info<br><br><br><br><br>Quando questa div e' vuota ci sono problemi col resize...<br>ma non e' l'unico caso</div>
+ <div class="d-table-row h-100 w-100">
+ <div class="visInfo w-100 h-100 py-3 pl-3">
+ <div id='displayinfo' class="w-100" style="display: d-flex; overflow-y: scroll;">Visualizza info<br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</div>
</div>
@@ -382,7 +382,7 @@
</div>
<div id="colMinimap" class="d-table-cell bg-lida-vis minimap border-right border-bottom align-top">
- <div id="displayminimap" class="col"> </div>
+ <div id="displayminimap" class="col p-0 m-0 w-100 h-100"></div>
</div>
<div id="colRicerca" class="d-table-cell menuRicerca align-top">
diff --git a/js/minimap.js b/js/minimap.js
index c25f677..cc912a6 100644
--- a/js/minimap.js
+++ b/js/minimap.js
@@ -2,52 +2,47 @@
*
*/
-const displayId = 'displaycanto'
+const displayCantoId = '#displaycanto'
+const minimapviewerId = '#minimapviewer'
+const displayminimapId = '#displayminimap'
+const initOffset = 63;
let minimap = document.createElement('div');
-let minimapSize = document.createElement('div');
let viewer = document.createElement('div');
let minimapContent = document.createElement('iframe');
let realScale;
let mappedElement = '';
-let currentMinimap=''
+
function drawMinimap(name){
-
showMinimap(name)
currentMinimap = name;
-
- //mmviewer diventa draggable
- var minimapTopPos = $('#minimapviewer').offset().top
- console.log("top viewer init " + minimapTopPos)
-
- $('#minimapviewer').draggable({
+ $(displayCantoId).scrollTop(0);
+ $(minimapviewerId).offset({ top: 63});
+ var minimapTopPos = $(minimapviewerId).offset().top
+
+ $(minimapviewerId).draggable({
axis: "y",
- containment: $('#displayminimap'),
+ containment: $(displayminimapId),
scroll: false,
start: function(event, ui) { minimapScrolling = true; },
stop: function(event, ui) { minimapScrolling = false; },
drag: function(event, ui) {
-
minimapScrolling = true;
- trackScrollViewer(ui.offset.top - minimapTopPos);
+ $(displayCantoId).scrollTop((ui.offset.top - minimapTopPos) * (1 / (realScale*1.014)));
}
});
}
function showMinimap(element) {
- mmplace = document.getElementById('displayminimap')
- minimap.className = 'minimap__container'
- minimapSize.className = 'minimap__size'
viewer.className = 'minimap__viewer'
viewer.id = 'minimapviewer'
minimapContent.className = 'minimap__content'
- minimap.append(minimapSize, viewer, minimapContent);
+ minimap.append(viewer, minimapContent);
+ $(displayminimapId).append(minimap)
- mmplace.appendChild(minimap)
-
- let html = document.getElementById(element).outerHTML//innerHTML
+ let html = document.getElementById(element).outerHTML
if (html == null | html == '')
return;
@@ -64,75 +59,68 @@ function showMinimap(element) {
cssLinkscroll.type = "text/css";
iFrameDoc.open();
+ iFrameDoc.write('<div class="w-100 py-3 pl-3" style="display: d-flex; overflow-y: scroll;">'); // da pulire...
iFrameDoc.write(html);
+ iFrameDoc.write('</div>');
iFrameDoc.close();
iFrameDoc.head.appendChild(cssLinkb);
iFrameDoc.head.appendChild(cssLinkscroll);
+
$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
- mappedElement = element
- getDimensionsDiv()
+ mappedElement = element;
+
+ getDimensionsDiv();
- //window.addEventListener('scroll', trackScroll)
window.addEventListener('resize', getDimensionsDiv)
-
}
-
-
-
-
function getDimensionsDiv() {
- var cantoplace = document.getElementById(displayId)
- var elementplace = document.getElementById(mappedElement)
+ var elementplace = document.getElementById(mappedElement);
- var bodyWidth = elementplace.clientWidth;
- var bodyRatio = elementplace.clientHeight / bodyWidth;
-
- let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
+ var maxHeight = ($(displayminimapId)[0].clientHeight)-4; //h attuale dello spazio minimap
+ var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
+ var cantoHeight = Math.ceil(((elementplace.clientHeight-44)/25*26)+44+32); //h prevista del canto nella minimap
+
+ var resizableWidth = $(".visCanto")[0].clientWidth;
+ var resizableHeight = $(".visCanto")[0].clientHeight;
+
+ var resizableRatio = resizableHeight / resizableWidth;
+ var resizableHeightRatio = resizableHeight/elementplace.clientHeight;
+
+ let viewerHeight = (maxHeight*resizableHeightRatio)-2; // -2 = bordi
+ let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth);
+
+ realScale = (maxHeight/cantoHeight);
- //minimap.style.width='15%';
minimap.style.width = '100%';
- realScale = minimap.clientWidth / bodyWidth;
-
- minimapSize.style.paddingTop = `${bodyRatio * 100}%`
- viewer.style.paddingTop = `${winRatio * 100}%`;
minimapContent.style.transform = `scale(${realScale})`;
- minimapContent.style.width = `${(100 / realScale)}%`;
- minimapContent.style.height = `${(100 / realScale)}%`;
- //minimapContent.style.height=`100%`;
- minimapContent.style.float = 'right';
- }
+ minimapContent.style.height = Math.trunc(cantoHeight+25) + "px"
+ minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
+
+ viewer.style.height = viewerHeight + `px`;
+ viewer.style.width = viewerWidth + `px`;
+
+ trackScrollCanto();
+ };
+
getDimDiv = function(){
getDimensionsDiv();
}
- function getInnerHeight(elm) {
- var computed = getComputedStyle(elm),
- padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
- return elm.clientHeight - padding
- }
- /*
- function trackScroll() {
- console.log('sc '+window.scrollY)
- viewer.style.transform = `translateY(${window.scrollY * realScale}px)`
- }*/
-
function trackScrollCanto() {
- console.log('cantoscrollT*realscale ' + document.getElementById(displayId).scrollTop * realScale + ' top: ' + document.getElementById(displayId).scrollTop)
- viewer.style.transform = `translateY(${document.getElementById(displayId).scrollTop * realScale}px)`
- }
- function trackScrollViewer(toppos) {
- console.log('scrollMMView top*1/realScale: ' + toppos * (1 / realScale) + ' top pos: ' + toppos)
- did = document.getElementById(displayId)
-
- did.scrollTop = (toppos * (1 / realScale))
+ var cantoHeight = document.getElementById(mappedElement).clientHeight;
+ var minimapHeight = $(displayminimapId)[0].clientHeight;
+ var posDbefore = $(displayCantoId).scrollTop();
+ var posAfter = minimapHeight/((cantoHeight/posDbefore)*1.014);
+ $(minimapviewerId).offset({ top: initOffset + posAfter});
}
+
function hideMinimap() {
$('.canto').each(function() {
diff --git a/js/script_4.1.js b/js/script_4.1.js
index 7cf1d78..8280a23 100644
--- a/js/script_4.1.js
+++ b/js/script_4.1.js
@@ -91,6 +91,9 @@ $(document).ready(function() {
handles: "e",
minWidth: 100,
maxWidth: 350,
+ resize: function(event, ui) {
+ getDimDiv();
+ },
stop: function(event, ui) {
setWidthInPercent(ui.element);
}
@@ -102,6 +105,7 @@ $(document).ready(function() {
resize: function(event, ui) {
ui.position.left = 0;
$("#displaycanto").width("100%");
+ getDimDiv();
},
stop: function(event, ui) {
setWidthInPercent(ui.element);