resize minimap, listener aggiunto a bolg-main

This commit is contained in:
cesare 2022-11-15 16:01:23 +01:00
parent 2f1492a6bc
commit 34858d37c2
3 changed files with 33 additions and 16 deletions

View File

@ -61,7 +61,7 @@
<div class="row"> <div class="row">
<div class="col-sm-9 blog-main" id='displaycanto'> <div class="col-sm-9 blog-main " id='displaycanto'>
</div><!-- /.displaycanto --> </div><!-- /.displaycanto -->

View File

@ -225,7 +225,7 @@ p{
/*position: fixed;*/ /*position: fixed;*/
top: 160px; top: 160px;
left: 600px; left: 600px;
min-width: 20px; min-width: 220px;
z-index: 100; z-index: 100;
} }

View File

@ -81,14 +81,16 @@ $(document).ready(function() {
}); });
var mmih=0 var mmih=0
var mmiw=0 var mmiw=0
var displayId='displaycanto'
jQuery(document).delegate('.navig-canto', 'click', function(e) { jQuery(document).delegate('.navig-canto', 'click', function(e) {
$('.canto').each(function() { $('.canto').each(function() {
$(this).attr("style", 'display:none'); $(this).attr("style", 'display:none');
}); });
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block') $("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
mmiw=$("#displaycanto").innerWidth();
mmih=$("#displaycanto").innerHeight(); mmiw=$("#"+displayId).innerWidth();
//alert (mmih+ ' '+ mmiw) mmih=$("#"+displayId).innerHeight();
showMinimap($(this).attr('name').replace(" ", "_")) showMinimap($(this).attr('name').replace(" ", "_"))
currentMinimap=$(this).attr('name').replace(" ", "_"); currentMinimap=$(this).attr('name').replace(" ", "_");
@ -181,7 +183,8 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
function showMinimap(element) { function showMinimap(element) {
mmplace=document.getElementById('displayminimap') mmplace=document.getElementById('displayminimap')
minimap.className = 'minimap_container position-fixed' //minimap.className = 'minimap_container position-fixed'
minimap.className = 'minimap_container'
minimapSize.className = 'minimap_size' minimapSize.className = 'minimap_size'
viewer.className = 'minimap_viewer' viewer.className = 'minimap_viewer'
viewer.id='minimapviewer' viewer.id='minimapviewer'
@ -192,8 +195,8 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
//document.body.appendChild(minimap) //document.body.appendChild(minimap)
if (mmplace!=null) if (mmplace!=null)
//mmplace.appendChild(minimap) mmplace.appendChild(minimap)
document.body.appendChild(minimap) //document.body.appendChild(minimap)
else{ else{
minimap.style.position = 'fixed'; minimap.style.position = 'fixed';
document.body.appendChild(minimap) document.body.appendChild(minimap)
@ -204,7 +207,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
//console.log(element) //console.log(element)
let html = document.getElementById(element).innerHTML let html = document.getElementById(element).innerHTML
console.log(html) //console.log(html)
let iFrameDoc = minimapContent.contentWindow.document; let iFrameDoc = minimapContent.contentWindow.document;
iFrameDoc.open(); iFrameDoc.open();
@ -213,10 +216,12 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
getDimensions() getDimensions()
if (document.getElementById(displayId).getAttribute('target')==null)
window.addEventListener('scroll', trackScroll) window.addEventListener('scroll', trackScroll)
else
document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
//document.getElementById('displayminimap').addEventListener('scroll', trackScrollCanto)
window.addEventListener('resize', getDimensions) window.addEventListener('resize', getDimensions)
} }
@ -225,11 +230,21 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
function getDimensions(){ function getDimensions(){
cantoplace=document.getElementById('displaycanto')
cantoplace=document.getElementById(displayId)
mmplace=document.getElementById('displayminimap')
let bodyWidth = document.body.clientWidth; let bodyWidth = document.body.clientWidth;
let bodyRatio = document.body.clientHeight / bodyWidth; let bodyRatio = (document.body.clientHeight) / bodyWidth;
let winRatio = window.innerHeight / window.innerWidth; let winRatio = window.innerHeight / window.innerWidth;
//test
//test=document.getElementById(displayId).getBoundingClientRect()
//console.log(test)
bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth;
if (mmplace!=null)
bodyRatio = 200/cantoplace.clientWidth;
//end test
minimap.style.width = '10%'; minimap.style.width = '10%';
@ -237,7 +252,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
//realScale = 130 / bodyWidth; //realScale = 130 / bodyWidth;
console.log('window: '+minimap.clientWidth+' '+bodyWidth+' '+bodyRatio+ ' '+winRatio) console.log('window: '+minimap.clientWidth+' '+bodyWidth+' '+bodyRatio+ ' '+winRatio)
console.log('displaycanto: '+minimap.clientWidth+' '+cantoplace.clientWidth+' '+(cantoplace.clientHeight/cantoplace.clientWidth) console.log('id: '+minimap.clientWidth+' '+cantoplace.clientWidth+' '+(cantoplace.clientHeight/cantoplace.clientWidth)
+ ' '+(mmih/mmiw)) + ' '+(mmih/mmiw))
@ -251,10 +266,12 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
} }
function trackScroll(){ function trackScroll(){
//console.log(window.scrollY)
viewer.style.transform=`translateY(${window.scrollY * realScale}px)` viewer.style.transform=`translateY(${window.scrollY * realScale}px)`
} }
function trackScrollCanto(){ function trackScrollCanto(){
viewer.style.transform=`translateY(${document.getElementById('displaycanto').scrollY * realScale}px)` //console.log(document.getElementById(displayId).scrollTop)
viewer.style.transform=`translateY(${document.getElementById(displayId).scrollTop * realScale}px)`
} }
function hideMinimap(){ function hideMinimap(){