diff --git a/css/browsingldc.css b/css/browsingldc.css index 9ff21a3..6517a18 100644 --- a/css/browsingldc.css +++ b/css/browsingldc.css @@ -223,8 +223,8 @@ p{ .minimap_container { /*position: fixed;*/ - top: 160px; - left: 600px; + /*top: 160px;*/ + /*left: 600px;*/ min-width: 20px; z-index: 100; @@ -275,3 +275,4 @@ p{ border: 1px solid white; } + diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js index 6e778c8..e88b866 100644 --- a/js/cesareBrowse.js +++ b/js/cesareBrowse.js @@ -224,7 +224,6 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { //class="col-3 px-0" minimap.append(minimapSize, viewer, minimapContent); - //document.body.appendChild(minimap) if (mmplace!=null) mmplace.appendChild(minimap) @@ -236,17 +235,29 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { } - //console.log(element) - let html = document.getElementById(element).innerHTML + + let html = document.getElementById(element).outerHTML//innerHTML //console.log(html) let iFrameDoc = minimapContent.contentWindow.document; + var cssLink = document.createElement("link"); + cssLink.href = "https://unpkg.com/tachyons/css/tachyons.min.css"; + cssLink.rel = "stylesheet"; + cssLink.type = "text/css"; + + var cssLinkb = document.createElement("link"); + cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"; + cssLinkb.rel = "stylesheet"; + cssLinkb.type = "text/css"; + iFrameDoc.open(); iFrameDoc.write(html); iFrameDoc.close(); + iFrameDoc.head.appendChild(cssLink); + iFrameDoc.head.appendChild(cssLinkb); - getDimensions() + getDimensionsDiv() if (document.getElementById(displayId).getAttribute('target')==null) window.addEventListener('scroll', trackScroll) @@ -255,9 +266,9 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { }*/ - document.getElementById(displayId).addEventListener('resize', getDimensions) + document.getElementById(displayId).addEventListener('resize', getDimensionsDiv) - window.addEventListener('resize', getDimensions) + window.addEventListener('resize', getDimensionsDiv) } @@ -268,7 +279,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { cantoplace=document.getElementById(displayId) mmplace=document.getElementById('displayminimap') - + isnick=mmplace=document.getElementById('apricerca') let bodyWidth = document.body.clientWidth; let bodyRatio = document.body.clientHeight / bodyWidth; @@ -277,23 +288,32 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { //if(cantoplace!=null & mmplace!=null){ if(mmplace!=null){ - winRatio = mmih / window.innerWidth; - bodyRatio = cantoplace.clientHeight/ document.body.clientWidth;//cantoplace.clientWidth; + //winRatio = mmih / mmiw;//window.innerWidth; + //bodyRatio = mmih / mmiw;//mmplace.clientHeight/cantoplace.clientWidth; } - if(mmplace!=null){ - minimap.style.width = '70%'; - viewer.style.width='18%' + viewer.style.width='50%' + /*if(mmplace!=null){ + //minimap.style.width = '75%'; + //viewer.style.width='45%' } else{ minimap.style.width = '15%'; viewer.style.width='25%' + }*/ + if(isnick!=null){ + minimap.style.width = '40%'; + viewer.style.width='15%' } //end test + - realScale = minimap.clientWidth / bodyWidth; + realScale = minimap.clientWidth / mmih;//bodyWidth; + + console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale) + //realScale=scale minimapSize.style.paddingTop = `${bodyRatio * 100}%` @@ -306,6 +326,63 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { minimapContent.style.height = `${(100 / realScale)}%` } + function getInnerHeight( elm ){ + var computed = getComputedStyle(elm), + padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom); + + return elm.clientHeight - padding + } + function getDimensionsDiv(){ + + + cantoplace=document.getElementById(displayId) + mmplace=document.getElementById('displayminimap') + isnick=mmplace=document.getElementById('apricerca') + cpmaxh=cantoplace.style.maxHeight + cpmaxh=cpmaxh.replace('px','') + cpbw=cantoplace.style.width + let tebodyWidth = document.body.clientWidth; + + let tebodyRatio = (document.body.clientHeight) / tebodyWidth; + let tewinRatio = window.innerHeight / window.innerWidth; + + let bodyWidth = mmiw; + + let bodyRatio = parseInt(cpmaxh) / bodyWidth; + + elmih=getInnerHeight(cantoplace) + + let winRatio = elmih / (mmiw-32); + + + viewer.style.width='50%' + + if(isnick!=null){ + minimap.style.width = '40%'; + viewer.style.width='15%' + } + + + + realScale = minimap.clientWidth / cpmaxh;//bodyWidth; + + console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale) + //realScale=scale + + minimapSize.style.paddingTop = `${bodyRatio * 500}%` + + console.log (minimapSize.style.paddingTop) + + viewer.style.paddingTop = `${(winRatio) * 100}%`; + + + + minimapContent.style.transform = `scale(${realScale})`; + minimapContent.style.width = `${(100 / realScale)}%` + minimapContent.style.height = `${(100 / realScale)}%` + + + } function trackScroll(){ //console.log(window.scrollY)