Nuova minimap, funzionante ma work in progress
This commit is contained in:
parent
195aee9f6d
commit
4c7af575d8
|
|
@ -71,11 +71,11 @@ Minimap
|
|||
|
||||
.minimap__viewer {
|
||||
|
||||
width: 70%;
|
||||
width: 70px;
|
||||
|
||||
position:absolute;
|
||||
|
||||
top: 0;
|
||||
top: 2px;
|
||||
|
||||
left: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
padding-top: 61px;
|
||||
padding-top: 63px;
|
||||
}
|
||||
|
||||
.menuNavigazione {
|
||||
|
|
@ -15,6 +15,7 @@ body {
|
|||
|
||||
.minimap {
|
||||
width: 110px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
.menuRicerca {
|
||||
|
|
@ -25,6 +26,10 @@ body {
|
|||
height: 500px;
|
||||
}
|
||||
|
||||
.visInfo {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.custom-control-input:focus~.custom-control-label::before {
|
||||
border-color: #00968e !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(0, 150, 142, 0.25) !important;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
108
js/minimap.js
108
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;
|
||||
$(displayCantoId).scrollTop(0);
|
||||
$(minimapviewerId).offset({ top: 63});
|
||||
var minimapTopPos = $(minimapviewerId).offset().top
|
||||
|
||||
//mmviewer diventa draggable
|
||||
var minimapTopPos = $('#minimapviewer').offset().top
|
||||
console.log("top viewer init " + minimapTopPos)
|
||||
|
||||
$('#minimapviewer').draggable({
|
||||
$(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;
|
||||
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
|
||||
|
||||
let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
|
||||
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)`
|
||||
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 trackScrollViewer(toppos) {
|
||||
console.log('scrollMMView top*1/realScale: ' + toppos * (1 / realScale) + ' top pos: ' + toppos)
|
||||
did = document.getElementById(displayId)
|
||||
|
||||
did.scrollTop = (toppos * (1 / realScale))
|
||||
}
|
||||
|
||||
function hideMinimap() {
|
||||
$('.canto').each(function() {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue