scrolling minimap in progress
This commit is contained in:
cesare
parent
419843270e
commit
36c4859122
|
|
@ -66,6 +66,7 @@
|
|||
|
||||
</div><!-- /.displaycanto -->
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-3 blog-sidebar" style="display:block">
|
||||
<div class="sidebar-module sidebar-module-inset" >
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue