468 lines
12 KiB
JavaScript
468 lines
12 KiB
JavaScript
/**
|
|
*
|
|
*/
|
|
$(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 displayId='displaycanto'
|
|
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(" ", "_");
|
|
|
|
|
|
});
|
|
|
|
//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 position-fixed'
|
|
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
|
|
|
|
//bodyRatio = cantoplace.clientHeight/cantoplace.clientWidth;
|
|
|
|
|
|
//end test
|
|
minimap.style.width = '60%';
|
|
realScale = minimap.clientWidth / bodyWidth;
|
|
console.log("minimap.clientWidth "+ (minimap.clientWidth))
|
|
|
|
wscale=0
|
|
if (mmplace!=null){
|
|
wscale=realScale
|
|
//realScale = minimap.clientWidth / cantoplace.clientWidth;
|
|
}
|
|
|
|
/*
|
|
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))
|
|
|
|
|
|
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(document.getElementById(displayId).scrollTop)
|
|
viewer.style.transform=`translateY(${document.getElementById(displayId).scrollTop * realScale}px)`
|
|
}
|
|
|
|
function hideMinimap(){
|
|
$('.canto').each(function() {
|
|
$(this).attr("style", 'display:none');
|
|
});
|
|
$( ".minimap_container" ).remove();
|
|
currentMinimap=''
|
|
}
|
|
|
|
//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(' ')
|
|
})
|
|
|
|
|
|
|
|
});
|
|
}
|
|
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();
|
|
};
|
|
};
|
|
|
|
|
|
});
|