LiDa_Search/js/cesareBrowse.js

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

	const cantobadgeclass='badge badge-outline-info badge-pill'

	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 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;
			$(".labelCantica").attr('style', "display: block;");
		}
		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;
			$(".labelCantica").attr('style', "display: block;");
		}
		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;
			$(".labelCantica").attr('style', "display: block;");
		}
		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 listarisultati){
				idverso='#'+verso
				//console.log(idverso)
				$(idverso).attr('class', 'f6 font-weight-lighter')
			}
		$( ".badge" ).remove();
		listarisultati=[]
		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)
			
		}
		
		
		
		
		let html = document.getElementById(element).outerHTML//innerHTML
		//console.log(html)

		let iFrameDoc = minimapContent.contentWindow.document;
		var cssLink = document.createElement("link");
		cssLink.href = "https://unpkg.com/tachyons/css/tachyons.min.css"; 
		cssLink.rel = "stylesheet"; 
		cssLink.type = "text/css";
		
		var cssLinkb = document.createElement("link");
		cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css";
		cssLinkb.rel = "stylesheet"; 
		cssLinkb.type = "text/css";
		
		iFrameDoc.open();
		iFrameDoc.write(html);
		iFrameDoc.close();
		iFrameDoc.head.appendChild(cssLink);
		iFrameDoc.head.appendChild(cssLinkb);

		getDimensionsDiv()
		
		if (document.getElementById(displayId).getAttribute('target')==null)	
			window.addEventListener('scroll', trackScroll)
		/*else{
			//document.getElementById(displayId).addEventListener('scroll', trackScrollCanto)
			
			}*/
		
		document.getElementById(displayId).addEventListener('resize', getDimensionsDiv)
		
		window.addEventListener('resize', getDimensionsDiv)
		
	}
	
	
	
	function getDimensions(){
		
		
		cantoplace=document.getElementById(displayId)
		mmplace=document.getElementById('displayminimap')
		isnick=mmplace=document.getElementById('apricerca')
		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 / mmiw;//window.innerWidth;
	    	//bodyRatio = mmih / mmiw;//mmplace.clientHeight/cantoplace.clientWidth;	
	    }
	     viewer.style.width='50%'
	    /*if(mmplace!=null){
	    	//minimap.style.width = '75%';
	    	//viewer.style.width='45%'
	    	}
	    else{
			minimap.style.width = '15%';
			viewer.style.width='25%'
		}*/
		if(isnick!=null){
			minimap.style.width = '40%';
			viewer.style.width='15%'
		}
	    
	    //end test
	    
	   
	    
	    
	    realScale = minimap.clientWidth / mmih;//bodyWidth;
	    
	    console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale)
	    //realScale=scale
	    
		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 getInnerHeight( elm ){
  		var computed = getComputedStyle(elm),
      		padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);

  		return elm.clientHeight - padding
	}
	 function getDimensionsDiv(){
		
		
		cantoplace=document.getElementById(displayId)
		mmplace=document.getElementById('displayminimap')
		isnick=mmplace=document.getElementById('apricerca')
		cpmaxh=cantoplace.style.maxHeight
		cpmaxh=cpmaxh.replace('px','')
		cpbw=cantoplace.style.width
		let tebodyWidth = document.body.clientWidth;
		
	    let tebodyRatio = (document.body.clientHeight) / tebodyWidth;
	    let tewinRatio = window.innerHeight / window.innerWidth;
		
		let bodyWidth = mmiw;
		
	    let bodyRatio = parseInt(cpmaxh) / bodyWidth;
	   
	   	elmih=getInnerHeight(cantoplace)
	   	
	    let winRatio = elmih / (mmiw-32);
	    
		
	     viewer.style.width='50%'
	   
		if(isnick!=null){
			minimap.style.width = '40%';
			viewer.style.width='15%'
		}
	    
	    
	    
	    realScale = minimap.clientWidth / cpmaxh;//bodyWidth;
	    
	    console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale)
	    //realScale=scale
	    
		minimapSize.style.paddingTop = `${bodyRatio * 500}%`
		
		console.log (minimapSize.style.paddingTop)
		
		viewer.style.paddingTop = `${(winRatio) * 53}%`;
	   
		
	    	
	    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

	// Search functions
	 
	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 titolo-canto" />')
						titolocanto.append(cantica+", "+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)
						if (listarisultati.includes(spanoccorrenza.attr('id')))
							spanoccorrenza.attr('class', "f6 b dark-blue ")
						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
	var listarisultati=[];
	async function executeQuerySearch(query) {
		seachbBindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
		//console.log(query)
		alert(query)
		try {
			var result = new Set()
			var resultsInCantica=[]
			var resultsInCanto=[]
			seachbBindingsStream.on('data', (binding) => {
				//cantica
				cantica = binding.get('Cantica').value;
				resultsInCantica.push(cantica);
				//canto
				canto=binding.get('Canto').value;
				resultsInCanto.push(cantica+canto)
				//numero del verso
				numverso=binding.get('NumeroVerso').value;
				//posizione delframmento
				pos=binding.get('pos').value;
				result.add(cantica+"_"+canto.replace(" ", "_")+"_"+numverso+"_"+pos)

			});
			seachbBindingsStream.on('end', () => {
				listarisultati = Array.from(result)
				cantiche=["Inferno", "Purgatorio", "Paradiso"]
				
				//evidenzia risultati
				for (ris of listarisultati){
					idris='#'+ris
					$(idris).attr('class', "f6 b dark-blue ")
					
				}
				//aggiunge badge con totale risultati accanto alle cantiche
				i=0
				for(cantica of cantiche){
					i+=1
					let count = resultsInCantica.reduce((n, x) => n + (x === cantica), 0);
					//<span class="badge badge-primary badge-pill"></span>
					var spanbadgecantica=$('<span />');
					spanbadgecantica.attr('class', 'badge badge-primary badge-pill ml-1');
					//spanbadgecantica.attr('class', 'position-absolute top-0 start-100 translate-middle badge rounded-pill badge-primary');
					spanbadgecantica.append(count)
					//spanbadgecantica.insertAfter($('#cantica'+i))
					spanbadgecantica.appendTo($('#cantica'+i))
				}
				//aggiunge badge con totale risultati accanto ai canti
				
				for(cantica of cantiche){
					for( k of Array(35).keys()){
						if (k==0)
							continue
						let count = resultsInCanto.reduce((n, x) => n + (x === cantica+'Canto '+k), 0);
						//<span class="badge badge-outline-info badge-pill">14</span>
						
						var spanbadge=$('<span />');
						spanbadge.attr('class', cantobadgeclass);
						spanbadge.append(count)
						//$("[name='nameofobject']")
						spanbadge.appendTo($('[name="'+cantica+'Canto '+k+'"]'))
						//spanbadge.insertAfter($('[name="'+cantica+'Canto '+k+'"]'))
					}
				}
				
				
				//aggiorna minimap
				if (currentMinimap!=''){
		
					showMinimap(currentMinimap)
	
				}


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


});