scrolling minimap in progress

cesareBrowse.html

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

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;
 	

js/cesareBrowse.js

@@ -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
+		/*else{
-			document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
+			//document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
+			
+			}*/
 		
 		document.getElementById(displayId).addEventListener('resize', getDimensions)
 		
@@ -234,36 +267,35 @@ 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;
-	    //end test
+	    	bodyRatio = cantoplace.clientHeight/ document.body.clientWidth;//cantoplace.clientWidth;	
-	    minimap.style.width = '60%';
+	    }
-	    realScale = minimap.clientWidth / bodyWidth;
+	    if(mmplace!=null){
-	    console.log("minimap.clientWidth "+ (minimap.clientWidth))
+	    	minimap.style.width = '70%';
-	    
+	    	viewer.style.width='18%'
-		wscale=0
+	    	}
-	    if (mmplace!=null){
+	    else{
-			wscale=realScale
+			minimap.style.width = '15%';
-	    	//realScale = minimap.clientWidth / cantoplace.clientWidth;
+			viewer.style.width='25%'
 		}
 	    
-	    /*
+	    //end test
-	    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))
 	    
 	    
+	    
+	    realScale = minimap.clientWidth / bodyWidth;
+	    
 		minimapSize.style.paddingTop = `${bodyRatio * 100}%`
+		
 		viewer.style.paddingTop = `${(winRatio) * 100}%`;
 	   
 		
@@ -271,6 +303,7 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) {
 	    minimapContent.style.transform = `scale(${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) {