LiDa_Search/js/cesareBrowse.js

/**
 * 
 */
$(document).ready(function() {


	const sparqlGenerator = sparqljs.Generator;
	const myEngine = new Comunica.QueryEngine();
	const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query";
	var primaCanticaLoaded = false;
	var secondaCanticaLoaded = false;
	var terzaCanticaLoaded = false;
	var listaVersi = new Set()
	const ddmenus={"Inferno":"#dmc1",
					"Purgatorio": "#dmc2",
					"Paradiso": "#dmc3"}
	var listarisultativersi=[]; 
	var currentMinimap=''
	

	//caricamento prima cantica
	$('#cantica1').on('click', function() {
		hideMinimap();
		activateMenuItem('#cantica1')
		if (!(primaCanticaLoaded)) {
			
			jsonQuery = versiCantica("Inferno");
			execQuery = new sparqlGenerator().stringify(jsonQuery);
			executeQueryVersi(execQuery);
			primaCanticaLoaded = true;
		}
		else {
			//$("#InfernoCanto_1").attr('style', 'display:block')
			$("#CantiInferno").attr('style', 'display:block')

		}
		
		

	});

	//caricamento seconda cantica
	$('#cantica2').on('click', function() {
		hideMinimap();
		activateMenuItem('#cantica2')
		if (!(secondaCanticaLoaded)) {
			
			jsonQuery = versiCantica("Purgatorio");
			execQuery = new sparqlGenerator().stringify(jsonQuery);
			executeQueryVersi(execQuery);
			secondaCanticaLoaded = true;
		}
		else {
			//$("#PurgatorioCanto_1").attr('style', 'display:block')
			$("#CantiPurgatorio").attr('style', 'display:block')

		}
		

	});

	//caricamento terza cantica
	$('#cantica3').on('click', function() {
		hideMinimap();
		activateMenuItem('#cantica3')
		if (!(terzaCanticaLoaded)) {
			
			jsonQuery = versiCantica("Paradiso");
			execQuery = new sparqlGenerator().stringify(jsonQuery);
			executeQueryVersi(execQuery);
			terzaCanticaLoaded = true;
		}
		else {
			//$("#ParadisoCanto_1").attr('style', 'display:block')
			$("#CantiParadiso").attr('style', 'display:block')

		}
		

	});
	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');
		});
		$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
		
		mmiw=$("#"+displayId).innerWidth();
		mmih=$("#"+displayId).innerHeight();
		
		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);
								//trackScrollViewer(ui.offset.top);
								console.log(ui);
								//document.getElementById(displayId).style.transform=`translateY(${viewer.scrollTop * realScale}px)`;
  							}
			});
		
		//$('#minimapviewer').on('drag', trackScrollViewer)

	});

	//Query
	
 
  //$('#searchcomm').on('click', function() {
  jQuery(document).delegate('#searchcomm', 'click', function(e) {
  	
    cleanSearchResult()
    esprlogica=[]
    
	esprlogica.push('Clausola1')
	condizioni={"EsprLogica": esprlogica}
	clausola={}
	clausola['typeGramm0']=$('#queryText').val()
    
    
			
    clausola['queryText']=""
	condizioni['Clausola1']=clausola
	jsonQuery=buildSQ(condizioni)
	myquery =new sparqlGenerator().stringify(jsonQuery)
    
    executeQuerySearch(myquery)
    
    
			
});

//Reset

jQuery(document).delegate('#cleanresult', 'click', function(e) {
  	
    cleanSearchResult()
    esprlogica=[]
    $('#queryText').val("")
    	
});

	//Utility functions

	//activate navigation menu items

	function activateMenuItem(menuItem) {
		//$('.blog-nav-item').each(function() {
		//	$(this).attr("class", $(this).attr("class").replace(' active', ''));
		//});
		//$(menuItem).attr("class", $(menuItem).attr("class") + ' active');
	}

	

	
	function managePunctuation(stringa) {
		var tempstringa=stringa.replaceAll(" ,", ",")
		tempstringa=tempstringa.replaceAll(" .", ".")
		tempstringa=tempstringa.replaceAll(" :", ":")
		tempstringa=tempstringa.replaceAll(" !", "!")
		tempstringa=tempstringa.replaceAll(" ?", "?")
		tempstringa=tempstringa.replaceAll(" ;", ";")
		tempstringa=tempstringa.replaceAll("%20", " ")
		return tempstringa
	}

	function cleanSearchResult(){
		
		for (verso of listarisultativersi){
				idverso='#'+verso
				console.log(idverso)
				//$(idverso).attr('class', $(idverso).attr('class').replace(" dark-blue", ""))
				$(idverso).attr('class', 'f6 font-weight-lighter')
			}
		if (currentMinimap!='')
    		showMinimap(currentMinimap)
	}

	
	//minimap management
	let minimap = document.createElement('div');
	let minimapSize = document.createElement('div');
	let viewer = document.createElement('div');
	let minimapContent = document.createElement('iframe');
	let scale=0.1;
	let realScale;
	
	function showMinimap(element) {

		mmplace=document.getElementById('displayminimap')
		minimap.className = 'minimap_container'
		minimapSize.className = 'minimap_size'
		viewer.className = 'minimap_viewer'
		viewer.id='minimapviewer'
		minimapContent.className = 'minimap_content'
		//class="col-3 px-0"
		minimap.append(minimapSize, viewer, minimapContent);
		
		
		//document.body.appendChild(minimap)
		if (mmplace!=null)
			mmplace.appendChild(minimap)
			//document.body.appendChild(minimap)
		else{
			minimap.style.position = 'fixed';
			document.body.appendChild(minimap)
			
		}
		
		
		//console.log(element)
		
		let html = document.getElementById(element).innerHTML
		//console.log(html)

		let iFrameDoc = minimapContent.contentWindow.document;
		iFrameDoc.open();
		iFrameDoc.write(html);
		iFrameDoc.close();

		getDimensions()
		
		if (document.getElementById(displayId).getAttribute('target')==null)	
			window.addEventListener('scroll', trackScroll)
		/*else{
			//document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
			
			}*/
		
		document.getElementById(displayId).addEventListener('resize', getDimensions)
		
		window.addEventListener('resize', getDimensions)
		
	}
	
	
	
	function getDimensions(){
		
		
		cantoplace=document.getElementById(displayId)
		mmplace=document.getElementById('displayminimap')
		
		let bodyWidth = document.body.clientWidth;
		
	    let bodyRatio = document.body.clientHeight / bodyWidth;
	    let winRatio = window.innerHeight / window.innerWidth;
	    //test
	    
	    //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
	    
	    
	    
	    realScale = minimap.clientWidth / bodyWidth;
	    
		minimapSize.style.paddingTop = `${bodyRatio * 100}%`
		
		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)
		viewer.style.transform=`translateY(${window.scrollY * realScale}px)`
	}
	function trackScrollCanto(){
		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(){
		$('.canto').each(function() {
			$(this).attr("style", 'display:none');
		});
		$( ".minimap_container" ).remove();
		currentMinimap=''
	}

	// fa diventare draggable il minimapviewer
	
		
	//end minimap management

	async function executeQueryVersi(query) {
		bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
		alert(query)
		try {

			var listaCanti = new Set()
			
			listaVersi = new Set()
			listaForme = new Set()
			let cantica = 0;
			bindingsStream.on('data', (binding) => {
					//cantica
					cantica = binding.get('Cantica').value;
					//la lista dei canti
					listaCanti.add(binding.get('Canto').value)
					//la lista dei versi
					var obj = new Object();
					var forma=new Object()
					obj.numverso = binding.get('NumeroVerso').value;
					obj.verso = binding.get('Verso').value;
					obj.canto = binding.get('Canto').value;
					//obj.pos = binding.get('pos').value;
					//obj.form = binding.get('textform').value;
					obj.cantica = cantica;
					listaVersi.add(obj)
					forma.numverso = binding.get('NumeroVerso').value;
					forma.canto = binding.get('Canto').value;
					forma.pos = binding.get('pos').value;
					forma.form = binding.get('textform').value;
					forma.cantica = cantica;
				   
					listaForme.add(forma)
				

			});
			bindingsStream.on('end', () => {
				
				

					var orderedListaCanti = Array.from(listaCanti)
					orderedListaCanti = orderedListaCanti.sort((a, b) => {
						if (parseInt(a.split(" ")[1]) < parseInt(b.split(" ")[1])) {
							return -1;
						}
					});
	
					var orderedListaVersi = Array.from(listaVersi)
					orderedListaVersi = orderedListaVersi.sort((a, b) => {
						if (parseInt(a.numverso) < parseInt(b.numverso)) {
							return -1;
						}
						
					});
					
					
					orderedListaVersi = orderedListaVersi.filter((value, index, self) =>
  						index === self.findIndex((t) => (
    					t.numverso === value.numverso && t.canto === value.canto && t.cantica===value.cantica
  						))
					)
					
					

					
					var orderedListaForme = Array.from(listaForme)
					orderedListaForme = orderedListaForme.sort((a, b) => {
						if (parseInt(a.pos) < parseInt(b.pos)) {
							return -1;
						}
						
					});
	
					var divListaCanti = $('<DIV id="Canti' + cantica + '" />')
					for (canto of orderedListaCanti) {
						var licanto = $('<li class="navig-canto"/>')
						licanto.attr('name', cantica + canto)
						licanto.attr('href', "#")
						licanto.attr("style", "line-height: 1.2em")
						numcanto=canto.split(" ")[1]
						licanto.append(numcanto)
	
						//licanto.appendTo('#listacanti')
						licanto.appendTo(divListaCanti)
						var divcanto = $('<div />')
						var titolocanto = $('<h1 class="f3 font-weight-lighter titolo-canto" />')
						titolocanto.append(canto)
						divcanto.attr('class', 'canto')
						divcanto.attr('style', 'display:none')
						divcanto.attr('id', (cantica + canto).replace(" ", "_"))
						titolocanto.appendTo(divcanto)
						divcanto.appendTo(' .blog-main')
					}
					//divListaCanti.appendTo('#listacanti')
					divListaCanti.appendTo(ddmenus[cantica])
					for (verso of orderedListaVersi) {
						
						
						var elementoverso = $('<p />')
						vartestoverso=verso.numverso;
						elementoverso.append(verso.numverso + ". ")
						//elementoverso.append(verso.numverso + ". " + managePunctuation(verso.verso))
						elementoverso.attr("style", "line-height: 0.5em")
						elementoverso.attr('class', 'f6 font-weight-lighter')
						elementoverso.attr('id', verso.cantica+"_"+ verso.canto.replace(" ", "_")+"_"+verso.numverso)
						elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
						
					}
					
					orderedListaForme.forEach((element) => {
						var spanoccorrenza=$('<span />')
						var pos=parseInt(element.pos)
						spanoccorrenza.attr('id', element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso+"_"+pos)
						spanoccorrenza.append(managePunctuation(element.form))
						elementoverso=$('#'+element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso)	
						spanoccorrenza.appendTo(elementoverso)
						elementoverso.append('&nbsp;')
					})
				


			});
		}
		catch (err) {
			console.log(err.message);
			$("#loader").hide();
		};
	};
	
	//execute query
	async function executeQuerySearch(query) {
		seachbBindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
		//console.log(query)
		alert(query)
		try {
			var resultVersi = new Set()
			
			seachbBindingsStream.on('data', (binding) => {
				//cantica
				cantica = binding.get('Cantica').value;
				//canto
				canto=binding.get('Canto').value;
				//numero del verso
				numverso=binding.get('NumeroVerso').value;
				//posizione delframmento
				pos=binding.get('pos').value;
				resultVersi.add(cantica+"_"+canto.replace(" ", "_")+"_"+numverso+"_"+pos)

			});
			seachbBindingsStream.on('end', () => {
				listarisultativersi = Array.from(resultVersi)
				for (verso of listarisultativersi){
					idverso='#'+verso
					//console.log(idverso)
					$(idverso).attr('class', "f6 b dark-blue ")
					
				}
				if (currentMinimap!=''){
		
					showMinimap(currentMinimap)
	
				}


			});
		}
		catch (err) {
			console.log(err.message);
			$("#loader").hide();
		};
	};


});