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="col-sm-9 blog-main" id='displaycanto'>
<div class="col-sm-9 blog-main " id='displaycanto'>
</div><!-- /.displaycanto -->

View File

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

View File

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