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

scrolling minimap in progress

This commit is contained in:
cesare 2022-11-17 10:15:29 +01:00
parent 419843270e
commit 36c4859122
3 changed files with 77 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cesareBrowse.html
View File

@ -67,6 +67,7 @@
</div><!-- /.displaycanto -->
<div class="col-sm-3 blog-sidebar" style="display:block">
<div class="sidebar-module sidebar-module-inset" >

4
css/browsingldc.css
View File

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

97
js/cesareBrowse.js
View File

@ -37,7 +37,6 @@ $(document).ready(function() {
});
//caricamento seconda cantica
@ -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'
@ -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) {