/** * */ $(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"; //const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/hdntest/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); showCantica('Inferno') 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); showCantica('Purgatorio') 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)) { showCantica('Paradiso') 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) { console.log('clean') 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') $(idverso).attr('class', 'f6text-secondary text-nowrap 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; let mappedElement='' function showMinimap(element) { mmplace=document.getElementById('displayminimap') //mmplace=document.getElementById('displaycanto') 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) mmplace.appendChild(minimap) let html = document.getElementById(element).outerHTML//innerHTML //console.log(html) if (html==null | html=='') return; let iFrameDoc = minimapContent.contentWindow.document; 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"; var cssLinkscroll = document.createElement("link"); cssLinkscroll.href = "./css/browsingldc.css"; cssLinkscroll.rel = "stylesheet"; cssLinkscroll.type = "text/css"; iFrameDoc.open(); iFrameDoc.write(html); iFrameDoc.close(); iFrameDoc.head.appendChild(cssLinkb); iFrameDoc.head.appendChild(cssLinkscroll); mappedElement=element getDimensionsDiv() window.addEventListener('scroll', trackScroll) //document.getElementById(displayId).addEventListener('resize', getDimensionsDiv) window.addEventListener('resize', getDimensionsDiv) } function getDimensions(){ cantoplace=document.getElementById(displayId) let bodyWidth= cantoplace.clientWidth; let bodyRatio= bodyWidth/cantoplace.clientHeight //let winRatio=cantoplace.clientWidth / getInnerHeight(cantoplace) let winRatio= window.innerHeight / window.innerWidth; minimap.style.width='55%'; viewer.style.width='55%' 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 getInnerHeight( elm ){ var computed = getComputedStyle(elm), padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom); return elm.clientHeight - padding } function getDimensionsDiv(){ cantoplace=document.getElementById(displayId) elementplace=document.getElementById(mappedElement) bodyWidth= elementplace.clientWidth; bodyRatio= elementplace.clientHeight / bodyWidth; //let bodyWidth= cantoplace.clientWidth; //let bodyRatio= cantoplace.clientHeight / bodyWidth; //let winRatio= window.innerHeight / (window.innerWidth); let winRatio= getInnerHeight(cantoplace) / (cantoplace.clientWidth); //minimap.style.width='15%'; minimap.style.width='100%'; 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)}%`; //minimapContent.style.height=`100%`; minimapContent.style.float='right'; } 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 //Cantica management functions function showCantica(cantica){ var listaCanti = new Set() var setVersi = new Set() var listaVersi = [] var listaForme =[] containerForme=formeterza if(cantica=='Inferno') containerForme=formeprima if(cantica=='Purgatorio') containerForme=formeseconda for (cmpItem of containerForme){ formaItem=cmpItem[0].split("_") listaCanti=createDivCanti(listaCanti, cantica, 'Canto '+formaItem[1]) var obj = new Object(); var forma=new Object() setVersi=createDivVersi(setVersi, cantica, formaItem[3], 'Canto '+formaItem[1]) /* obj.numverso = formaItem[3]; obj.canto = 'Canto '+formaItem[1]; obj.cantica = cantica; listaVersi.push(obj) */ forma.numverso = formaItem[3]; forma.canto = 'Canto '+formaItem[1]; forma.pos = formaItem[2]; forma.form = formaItem[0]; forma.cantica = cantica; createSpanForme(forma) //listaForme.push(forma) } //renderData(cantica, listaCanti, listaVersi, listaForme); return } function createSpanForme(element){ var spanoccorrenza=$('') var pos=parseInt(element.pos) spanoccorrenza.attr('id', element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso+"_"+pos) if (listarisultati.length>0 && listarisultati.includes(spanoccorrenza.attr('id'))) spanoccorrenza.attr('class', "f6 mark ") spanoccorrenza.append(element.form.replaceAll("%20", " ")) elementoverso=$('#'+element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso) spanoccorrenza.appendTo(elementoverso) elementoverso.append(' ') } function createDivVersi(setVersi, cantica, num, canto){ if(setVersi.has(cantica+"_"+num+"_"+canto)) return setVersi else{ var elementoverso = $('
') elementoverso.append(num + ". ") elementoverso.attr("style", "line-height: 0.5em") elementoverso.attr('class', 'f6 text-secondary text-nowrap font-weight-lighter') elementoverso.attr('id', cantica+"_"+ canto.replace(" ", "_")+"_"+num) elementoverso.appendTo('#' + cantica +canto.replace(" ", "_")) setVersi.add(cantica+"_"+num+"_"+canto) return setVersi } } function createDivCanti(orderedListaCanti, cantica, canto){ if (orderedListaCanti.has(canto)){ return orderedListaCanti } var divcanto = $('') var titolocanto = $('') 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') orderedListaCanti.add(canto) return orderedListaCanti } function renderData(cantica, listaCanti, listaVersi, listaForme){ //var orderedListaCanti = Array.from(listaCanti) //orderedListaCanti = orderedListaCanti.sort((a, b) => { // return parseInt(a.split(" ")[1], 10)-parseInt(b.split(" ")[1], 10) //}); //var orderedListaVersi = Array.from(listaVersi) //orderedListaVersi = orderedListaVersi.sort((a, b) => { // return parseInt(a.numverso, 10)-parseInt(b.numverso, 10) //}); /* listaVersi = listaVersi.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) => { // return parseInt(a.pos, 10)-parseInt(b.pos, 10) //}); //var divListaCanti = $('') /* for (canto of orderedListaCanti) { var divcanto = $('') var titolocanto = $('') 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 listaVersi) { var elementoverso = $('') //vartestoverso=verso.numverso; elementoverso.append(verso.numverso + ". ") elementoverso.attr("style", "line-height: 0.5em") elementoverso.attr('class', 'f6 text-secondary text-nowrap font-weight-lighter') //elementoverso.attr('class', 'f6 font-weight-lighter nowrap') elementoverso.attr('id', verso.cantica+"_"+ verso.canto.replace(" ", "_")+"_"+verso.numverso) elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_")) } */ listaForme.forEach((element) => { var spanoccorrenza=$('') var pos=parseInt(element.pos) spanoccorrenza.attr('id', element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso+"_"+pos) if (listarisultati.length>0 && listarisultati.includes(spanoccorrenza.attr('id'))) spanoccorrenza.attr('class', "f6 mark ") spanoccorrenza.append(element.form) elementoverso=$('#'+element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso) spanoccorrenza.appendTo(elementoverso) elementoverso.append(' ') }) } // 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) => { return parseInt(a.split(" ")[1], 10)-parseInt(b.split(" ")[1], 10) //if (parseInt(a.split(" ")[1], 10) < parseInt(b.split(" ")[1]), 10) { // return -1; //} }); var orderedListaVersi = Array.from(listaVersi) orderedListaVersi = orderedListaVersi.sort((a, b) => { return parseInt(a.numverso, 10)-parseInt(b.numverso, 10) //if (parseInt(a.numverso, 10) < parseInt(b.numverso, 10)) { // console.log(parseInt(a.numverso, 10)+' '+parseInt(b.numverso, 10)) // 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) => { return parseInt(a.pos, 10)-parseInt(b.pos, 10) //if (parseInt(a.pos) < parseInt(b.pos)) { // return -1; //} }); var divListaCanti = $('') for (canto of orderedListaCanti) { var licanto = $('') 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 = $('') var titolocanto = $('') 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 = $('') 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 nowrap') elementoverso.attr('id', verso.cantica+"_"+ verso.canto.replace(" ", "_")+"_"+verso.numverso) elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_")) } orderedListaForme.forEach((element) => { var spanoccorrenza=$('') var pos=parseInt(element.pos) spanoccorrenza.attr('id', element.cantica+"_"+ element.canto.replace(" ", "_")+"_"+element.numverso+"_"+pos) if (listarisultati.length>0 && 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(' ') }) }); } 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 mark ") } //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); var spanbadgecantica=$(''); spanbadgecantica.attr('class', 'badge badge-primary badge-pill ml-1'); spanbadgecantica.append(count) 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); var spanbadge=$(''); 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(); }; }; });