451 lines
12 KiB
JavaScript
451 lines
12 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";
|
|
//const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/hdntest/query";
|
|
var primaCanticaLoaded = false;
|
|
var secondaCanticaLoaded = false;
|
|
var terzaCanticaLoaded = false;
|
|
|
|
var currentMinimap = ''
|
|
|
|
//caricamento prima cantica
|
|
$('#cantica1').on('click', function() {
|
|
hideMinimap();
|
|
|
|
if (!(primaCanticaLoaded)) {
|
|
|
|
showCantica('Inferno')
|
|
primaCanticaLoaded = true;
|
|
$(".labelCantica").attr('style', "display: block;");
|
|
}
|
|
else {
|
|
$("#CantiInferno").attr('style', 'display:block')
|
|
}
|
|
|
|
});
|
|
|
|
//caricamento seconda cantica
|
|
$('#cantica2').on('click', function() {
|
|
hideMinimap();
|
|
|
|
if (!(secondaCanticaLoaded)) {
|
|
|
|
showCantica('Purgatorio')
|
|
secondaCanticaLoaded = true;
|
|
$(".labelCantica").attr('style', "display: block;");
|
|
}
|
|
else {
|
|
$("#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 {
|
|
$("#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)`;
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
|
|
//Query
|
|
|
|
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 cleanSearchResult() {
|
|
|
|
for (verso of listarisultati) {
|
|
idverso = '#' + verso
|
|
//console.log(idverso)
|
|
$(idverso).attr('class', 'f6text-secondary text-nowrap font-weight-lighter')
|
|
}
|
|
$(".badge").remove();
|
|
listarisultati = []
|
|
if (currentMinimap != '')
|
|
showMinimap(currentMinimap)
|
|
}
|
|
|
|
//START 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')
|
|
|
|
minimap.className = 'minimap__container'
|
|
minimap.id = 'minimapcontainer'
|
|
minimapSize.className = 'minimap__size'
|
|
minimapSize.id = 'minimapsize'
|
|
viewer.className = 'minimap__viewer'
|
|
viewer.id = 'minimapviewer'
|
|
minimapContent.className = 'minimap__content'
|
|
//class="col-3 px-0"
|
|
minimap.append(minimapSize, viewer, minimapContent);
|
|
|
|
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 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;
|
|
let bodyRatio = elementplace.clientHeight / bodyWidth;
|
|
let winRatio = getInnerHeight(cantoplace) / (cantoplace.clientWidth);
|
|
|
|
|
|
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)}%`;
|
|
|
|
}
|
|
|
|
function trackScroll() {
|
|
|
|
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 = ''
|
|
}
|
|
|
|
//END minimap management
|
|
|
|
//Cantica management functions
|
|
|
|
function showCantica(cantica) {
|
|
var listaCanti = new Set()
|
|
var setVersi = new Set()
|
|
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])
|
|
|
|
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)
|
|
}
|
|
return
|
|
}
|
|
|
|
function createSpanForme(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 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 = $('<p />')
|
|
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 = $('<div />')
|
|
var titolocanto = $('<h4 class="titolo-canto pb-2" />')
|
|
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
|
|
}
|
|
|
|
// SEARCH
|
|
|
|
//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 = $('<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();
|
|
};
|
|
};
|
|
|
|
|
|
});
|