From 36c48591225e0936e6035956d55cf54e8f47dad5 Mon Sep 17 00:00:00 2001 From: cesare Date: Thu, 17 Nov 2022 10:15:29 +0100 Subject: [PATCH] scrolling minimap in progress --- cesareBrowse.html | 1 + css/browsingldc.css | 4 +- js/cesareBrowse.js | 103 +++++++++++++++++++++++++++++++------------- 3 files changed, 77 insertions(+), 31 deletions(-) diff --git a/cesareBrowse.html b/cesareBrowse.html index 34518ab..9bbe949 100644 --- a/cesareBrowse.html +++ b/cesareBrowse.html @@ -66,6 +66,7 @@ +
diff --git a/css/browsingldc.css b/css/browsingldc.css index eba3ddb..9ff21a3 100644 --- a/css/browsingldc.css +++ b/css/browsingldc.css @@ -225,7 +225,7 @@ p{ /*position: fixed;*/ top: 160px; left: 600px; - min-width: 60px; + min-width: 20px; z-index: 100; } @@ -240,7 +240,7 @@ p{ .minimap_viewer { - width: 15%; + /*width: 20%;*/ position:absolute; diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js index cddcecc..92b53c3 100644 --- a/js/cesareBrowse.js +++ b/js/cesareBrowse.js @@ -36,7 +36,6 @@ $(document).ready(function() { } - }); @@ -81,7 +80,21 @@ $(document).ready(function() { }); var mmih=0 var mmiw=0 + var minimapScrolling=false; var displayId='displaycanto' + var minimapTopPos; + $( "#"+displayId).scroll(function() { + if (minimapScrolling){ + minimapScrolling=false + console.log ('no scroll') + } + else{ + console.log ('yes scrolling') + console.log("viewer top pos before: "+$('#minimapviewer').offset().top) + trackScrollCanto() + console.log("viewer top pos after: "+$('#minimapviewer').offset().top) + } + }); jQuery(document).delegate('.navig-canto', 'click', function(e) { $('.canto').each(function() { $(this).attr("style", 'display:none'); @@ -93,7 +106,26 @@ $(document).ready(function() { showMinimap($(this).attr('name').replace(" ", "_")) currentMinimap=$(this).attr('name').replace(" ", "_"); - + //mmviewer diventa draggable + minimapTopPos=$('#minimapviewer').offset().top + console.log("top viewer init "+minimapTopPos) + + $('#minimapviewer').draggable({ + axis: "y", + containment : $('#displayminimap'), + scroll : false, + stop: function( event, ui ) {minimapScrolling=true;}, + stop: function( event, ui ) {minimapScrolling=false;}, + drag: function( event, ui ) { + + minimapScrolling=true; + trackScrollViewer(ui.offset.top-minimapTopPos); + console.log(ui.position.top); + //document.getElementById(displayId).style.transform=`translateY(${viewer.scrollTop * realScale}px)`; + } + }); + + //$('#minimapviewer').on('drag', trackScrollViewer) }); @@ -183,7 +215,6 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { function showMinimap(element) { mmplace=document.getElementById('displayminimap') - //minimap.className = 'minimap_container position-fixed' minimap.className = 'minimap_container' minimapSize.className = 'minimap_size' viewer.className = 'minimap_viewer' @@ -191,7 +222,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { minimapContent.className = 'minimap_content' //class="col-3 px-0" minimap.append(minimapSize, viewer, minimapContent); - + //document.body.appendChild(minimap) if (mmplace!=null) @@ -218,8 +249,10 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { if (document.getElementById(displayId).getAttribute('target')==null) window.addEventListener('scroll', trackScroll) - else - document.getElementById(displayId).addEventListener('scroll', trackScrollCanto) + /*else{ + //document.getElementById(displayId).addEventListener('scroll', trackScrollCanto) + + }*/ document.getElementById(displayId).addEventListener('resize', getDimensions) @@ -234,43 +267,43 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { 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 - //bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth; - + //if(cantoplace!=null & mmplace!=null){ + if(mmplace!=null){ + winRatio = mmih / window.innerWidth; + bodyRatio = cantoplace.clientHeight/ document.body.clientWidth;//cantoplace.clientWidth; + } + if(mmplace!=null){ + minimap.style.width = '70%'; + viewer.style.width='18%' + } + else{ + minimap.style.width = '15%'; + viewer.style.width='25%' + } //end test - minimap.style.width = '60%'; + + + realScale = minimap.clientWidth / bodyWidth; - console.log("minimap.clientWidth "+ (minimap.clientWidth)) - wscale=0 - if (mmplace!=null){ - wscale=realScale - //realScale = minimap.clientWidth / cantoplace.clientWidth; - } - - /* - window: 71 1148 0.7082152974504249 0.44860627177700346 - id: 71 706 0.7082152974504249 0.7079726212827898 - */ - console.log('window, realscale:'+realScale+' w.bW: '+bodyWidth+' bodyRatio'+bodyRatio+ ' winRatio:'+winRatio) - console.log('id, realscale: '+realScale+' cp.bW:'+cantoplace.clientWidth+' cp.bodyRatio'+(cantoplace.clientHeight/cantoplace.clientWidth) - + ' cp.winratio'+(mmih/mmiw)) - - minimapSize.style.paddingTop = `${bodyRatio * 100}%` + viewer.style.paddingTop = `${(winRatio) * 100}%`; - + minimapContent.style.transform = `scale(${realScale})`; - minimapContent.style.width = `${(100 / realScale)}%` + minimapContent.style.width = `${(100 / realScale)}%` minimapContent.style.height = `${(100 / realScale)}%` + } function trackScroll(){ @@ -278,8 +311,17 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { viewer.style.transform=`translateY(${window.scrollY * realScale}px)` } function trackScrollCanto(){ - //console.log(document.getElementById(displayId).scrollTop) + console.log('cantoscrollT*realscale '+document.getElementById(displayId).scrollTop * realScale+' top: ' +document.getElementById(displayId).scrollTop ) viewer.style.transform=`translateY(${document.getElementById(displayId).scrollTop * realScale}px)` + + } + 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(){ @@ -290,6 +332,9 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { currentMinimap='' } + // fa diventare draggable il minimapviewer + + //end minimap management async function executeQueryVersi(query) {