concordia
/
LiDa_Search
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

managing scrolling, in progress

This commit is contained in:
cesare 2022-11-17 16:37:08 +01:00
parent b0aa99ffc6
commit 8e08929352
2 changed files with 93 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/browsingldc.css
View File

@ -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;
}

103
js/cesareBrowse.js
View File

@ -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)