LiDa_Search/js/cesareBrowse.js

646 lines
18 KiB
JavaScript

/**
*
*/
$(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";
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(cssLink);
iFrameDoc.head.appendChild(cssLinkb);
iFrameDoc.head.appendChild(cssLinkscroll);
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);
minimap.style.width = '70%';
viewer.style.width='40%'
if(isnick!=null){
//minimap.style.width = '90%';
//viewer.style.width='20%'
}
realScale = minimap.clientWidth / cpmaxh;//bodyWidth;
console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale)
//realScale=scale
minimapSize.style.paddingTop = `${bodyRatio * 100}%`
console.log (minimapSize.style.paddingTop)
viewer.style.paddingTop = `${(winRatio) * 50}%`;
//test
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) => {
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 = $('<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 nowrap')
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.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('&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);
var spanbadgecantica=$('<span />');
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=$('<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();
};
};
});