concordia
/
LiDa_Search
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

browsing in progress

This commit is contained in:
cesare 2022-11-11 22:11:22 +01:00
parent d26b010704
commit a449a22c8f
4 changed files with 303 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
cesareBrowse.html
View File

@ -5,12 +5,17 @@
<title>browsing La Divina Commedia</title> <title>browsing La Divina Commedia</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<link href="css/browsingldc.css" rel="stylesheet"> <link href="css/browsingldc.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" defer></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://bundle.run/sparqljs@3.4.1"></script> <script type="text/javascript" src="https://bundle.run/sparqljs@3.4.1"></script>
<script src="https://rdf.js.org/comunica-browser/versions/latest/engines/query-sparql/comunica-browser.js"></script> <script src="https://rdf.js.org/comunica-browser/versions/latest/engines/query-sparql/comunica-browser.js"></script>
<script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/cesareBrowse.js"></script> <script type="text/javascript" src="js/cesareBrowse.js"></script>
@ -18,11 +23,31 @@
<body> <body>
<div class="blog-masthead"> <div class="blog-masthead">
<div class="container"> <div class="container">
<nav class="blog-nav"> <!-- <nav class="blog-nav"> -->
<nav id="navbar-example" class="navbar">
<div class="container"> <div class="container">
<a class="blog-nav-item" id="cantica1" href="#">Inferno</a> <ul class="nav nav-pills">
<a class="blog-nav-item" id="cantica2" href="#">Purgatorio</a> <li class="dropdown">
<a class="blog-nav-item" id="cantica3" href="#">Paradiso</a> <a class="blog-nav-item dropdown-toggle" id="cantica1" data-toggle="dropdown" aria-haspopup="true" >
Inferno
</a>
<ul class="dropdown-menu" aria-labelledby="cantica1" id="dmc1"></ul>
</li>
<li class="dropdown">
<a class="blog-nav-item dropdown-toggle" id="cantica2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Purgatorio
</a>
<ul class="dropdown-menu" aria-labelledby="cantica2" id="dmc2"></ul>
</li>
<li class="dropdown">
<a class="blog-nav-item dropdown-toggle" id="cantica3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Paradiso
</a>
<ul class="dropdown-menu" aria-labelledby="cantica3" id="dmc3" ></ul>
</li>
</ul>
</div> </div>
</nav> </nav>
</div> </div>
@ -35,35 +60,38 @@
<div class="row"> <div class="row">
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset" style="display:none">
<!-- <h4>Info</h4> -->
<p>Potrai cercare <em>e non troverai ombra</em> </p>
</div>
<div class="sidebar-module">
<h4>Canti</h4>
<ol class="list-unstyled" id="listacanti">
</ol>
</div>
<!-- <div class="sidebar-module">
<h4>Altro</h4>
<ol class="list-unstyled">
<li><a href="#">Metafore</a></li>
<li><a href="#">Dialoghi</a></li>
<li><a href="#">Personaggi</a></li>
</ol>
</div> -->
</div><!-- /.blog-sidebar -->
<div class="col-sm-8 blog-main" id='displaycanto'> <div class="col-sm-9 blog-main" id='displaycanto'>
</div><!-- /.displaycanto --> </div><!-- /.displaycanto -->
<div class="col-sm-3 blog-sidebar" style="display:block">
</div><!-- /.blog-main --> <div class="sidebar-module sidebar-module-inset" >
<div class="input-group">
<input type="text" class="form-control form-control-lg f5 font-weight-lighter" placeholder="Query"
id="queryText" aria-describedby="sizing-addon2">
</div>
<button type="submit" class="btn btn-default f6" id='searchcomm'>Search</button>
</div>
<div class="sidebar-module">
<!-- <h4>Canti</h4>
<ol class="list-unstyled" id="listacanti">
</ol> -->
</div>
<!-- <div class="sidebar-module"> </div> -->
</div><!-- /.blog-sidebar -->

29
css/browsingldc.css
View File

@ -89,7 +89,7 @@ p{
.blog-header { .blog-header {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 60px;
} }
.blog-title { .blog-title {
margin-top: 30px; margin-top: 30px;
@ -108,8 +108,10 @@ p{
*/ */
.blog-main { .blog-main {
padding: 15px;
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
z-index: -1;
} }
/* Sidebar modules for boxing content */ /* Sidebar modules for boxing content */
@ -117,6 +119,7 @@ p{
padding: 15px; padding: 15px;
margin: 0 -15px 15px; margin: 0 -15px 15px;
position: fixed; position: fixed;
} }
.sidebar-module-inset { .sidebar-module-inset {
padding: 15px; padding: 15px;
@ -130,6 +133,9 @@ p{
} }
/* Pagination */ /* Pagination */
.pager { .pager {
margin-bottom: 60px; margin-bottom: 60px;
@ -221,7 +227,7 @@ p{
.minimap_container { .minimap_container {
position: fixed; position: fixed;
top: 100px; top: 100px;
left: 900px; left: 600px;
min-width: 20px; min-width: 20px;
z-index: 100; z-index: 100;
@ -249,7 +255,8 @@ p{
z-index: 100; z-index: 100;
border: 1px solid #0000009a; /*border: 1px solid #0000009a; */
border: 1px solid blue;
} }
@ -271,4 +278,20 @@ p{
border: 1px solid white; border: 1px solid white;
} }
/* Autocomplete */
#aco {
border: 1px dotted #ccc;
padding: 3px;
}
#aco ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#aco ul li {
padding: 5px 0;
}
#aco ul li:hover {
background: #eee;
}

249
js/cesareBrowse.js
View File

@ -11,14 +11,16 @@ $(document).ready(function() {
var secondaCanticaLoaded = false; var secondaCanticaLoaded = false;
var terzaCanticaLoaded = false; var terzaCanticaLoaded = false;
var listaVersi = new Set() var listaVersi = new Set()
const ddmenus={"Inferno":"#dmc1",
"Purgatorio": "#dmc2",
"Paradiso": "#dmc3"}
var listarisultativersi=[];
var currentMinimap=''
//caricamento prima cantica //caricamento prima cantica
$('#cantica1').on('click', function() { $('#cantica1').on('click', function() {
$('.canto').each(function() { hideMinimap();
$(this).attr("style", 'display:none');
});
hideListaCanti()
$( ".minimap_container" ).remove();
activateMenuItem('#cantica1') activateMenuItem('#cantica1')
if (!(primaCanticaLoaded)) { if (!(primaCanticaLoaded)) {
@ -34,16 +36,13 @@ $(document).ready(function() {
} }
}); });
//caricamento seconda cantica //caricamento seconda cantica
$('#cantica2').on('click', function() { $('#cantica2').on('click', function() {
$('.canto').each(function() { hideMinimap();
$(this).attr("style", 'display:none');
});
hideListaCanti()
$( ".minimap_container" ).remove();
activateMenuItem('#cantica2') activateMenuItem('#cantica2')
if (!(secondaCanticaLoaded)) { if (!(secondaCanticaLoaded)) {
@ -57,16 +56,13 @@ $(document).ready(function() {
$("#CantiPurgatorio").attr('style', 'display:block') $("#CantiPurgatorio").attr('style', 'display:block')
} }
}); });
//caricamento terza cantica //caricamento terza cantica
$('#cantica3').on('click', function() { $('#cantica3').on('click', function() {
$('.canto').each(function() { hideMinimap();
$(this).attr("style", 'display:none');
});
hideListaCanti()
$( ".minimap_container" ).remove();
activateMenuItem('#cantica3') activateMenuItem('#cantica3')
if (!(terzaCanticaLoaded)) { if (!(terzaCanticaLoaded)) {
@ -80,6 +76,7 @@ $(document).ready(function() {
$("#CantiParadiso").attr('style', 'display:block') $("#CantiParadiso").attr('style', 'display:block')
} }
}); });
@ -89,30 +86,53 @@ $(document).ready(function() {
}); });
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block') $("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
showMinimap($(this).attr('name').replace(" ", "_")) 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)
if (currentMinimap!='')
showMinimap(currentMinimap)
});
//Utility functions //Utility functions
//activate navigation menu items //activate navigation menu items
function activateMenuItem(menuItem) { function activateMenuItem(menuItem) {
$('.blog-nav-item').each(function() { //$('.blog-nav-item').each(function() {
$(this).attr("class", $(this).attr("class").replace(' active', '')); // $(this).attr("class", $(this).attr("class").replace(' active', ''));
}); //});
$(menuItem).attr("class", $(menuItem).attr("class") + ' active'); //$(menuItem).attr("class", $(menuItem).attr("class") + ' active');
} }
//hides liste canti
function hideListaCanti() {
$("#CantiInferno").attr('style', 'display:none')
$("#CantiPurgatorio").attr('style', 'display:none')
$("#CantiParadiso").attr('style', 'display:none')
}
// utils
function managePunctuation(stringa) { function managePunctuation(stringa) {
var tempstringa=stringa.replaceAll(" ,", ",") var tempstringa=stringa.replaceAll(" ,", ",")
tempstringa=tempstringa.replaceAll(" .", ".") tempstringa=tempstringa.replaceAll(" .", ".")
@ -123,6 +143,16 @@ $(document).ready(function() {
return tempstringa return tempstringa
} }
function cleanSearchResult(){
for (verso of listarisultativersi){
idverso='#'+verso
console.log(idverso)
$(idverso).attr('class', $(idverso).attr('class').replace(" dark-blue ", ""))
}
if (currentMinimap!='')
showMinimap(currentMinimap)
}
//minimap management //minimap management
let minimap = document.createElement('div'); let minimap = document.createElement('div');
@ -185,6 +215,14 @@ $(document).ready(function() {
function trackScroll(){ function trackScroll(){
viewer.style.transform=`translateY(${window.scrollY * realScale}px)` viewer.style.transform=`translateY(${window.scrollY * realScale}px)`
} }
function hideMinimap(){
$('.canto').each(function() {
$(this).attr("style", 'display:none');
});
$( ".minimap_container" ).remove();
currentMinimap=''
}
//end minimap management //end minimap management
@ -192,70 +230,125 @@ $(document).ready(function() {
bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], }); bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
alert(query) alert(query)
try { try {
var listaCanti = new Set() var listaCanti = new Set()
listaVersi = new Set() listaVersi = new Set()
let cantica = 0; let cantica = 0;
bindingsStream.on('data', (binding) => { bindingsStream.on('data', (binding) => {
//cantica //cantica
cantica = binding.get('Cantica').value; cantica = binding.get('Cantica').value;
//la lista dei canti //la lista dei canti
listaCanti.add(binding.get('Canto').value) listaCanti.add(binding.get('Canto').value)
//la lista dei versi //la lista dei versi
var obj = new Object(); var obj = new Object();
obj.numverso = binding.get('NumeroVerso').value; obj.numverso = binding.get('NumeroVerso').value;
obj.verso = binding.get('Verso').value; obj.verso = binding.get('Verso').value;
obj.canto = binding.get('Canto').value; obj.canto = binding.get('Canto').value;
obj.from = binding.get('from').value; obj.from = binding.get('from').value;
obj.to = binding.get('to').value; obj.to = binding.get('to').value;
listaVersi.add(obj) obj.cantica = cantica;
listaVersi.add(obj)
}); });
bindingsStream.on('end', () => { bindingsStream.on('end', () => {
var orderedListaCanti = Array.from(listaCanti) var orderedListaCanti = Array.from(listaCanti)
orderedListaCanti = orderedListaCanti.sort((a, b) => { orderedListaCanti = orderedListaCanti.sort((a, b) => {
if (parseInt(a.split(" ")[1]) < parseInt(b.split(" ")[1])) { if (parseInt(a.split(" ")[1]) < parseInt(b.split(" ")[1])) {
return -1; return -1;
}
});
var orderedListaVersi = Array.from(listaVersi)
orderedListaVersi = orderedListaVersi.sort((a, b) => {
if (parseInt(a.numverso) < parseInt(b.numverso)) {
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")
licanto.append(canto)
//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])
var orderedListaVersi = Array.from(listaVersi) for (verso of orderedListaVersi) {
orderedListaVersi = orderedListaVersi.sort((a, b) => {
if (parseInt(a.numverso) < parseInt(b.numverso)) {
return -1; var elementoverso = $('<p />')
vartestoverso=verso.numverso;
elementoverso.append(verso.numverso + ". ")
arrayVerso=managePunctuation(verso.verso).split(" ");
for (wpos in arrayVerso){
var divoccorrenza=$('<span />')
var pos=parseInt(verso.from)+parseInt(wpos)
divoccorrenza.attr('id', verso.cantica+"_"+ verso.canto.replace(" ", "_")+"_"+verso.numverso+"_"+pos)
divoccorrenza.append(arrayVerso[wpos]+" ")
divoccorrenza.appendTo(elementoverso)
}
//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(" ", "_"))
} }
});
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")
licanto.append(canto)
//licanto.appendTo('#listacanti') });
licanto.appendTo(divListaCanti) }
var divcanto = $('<div />') catch (err) {
var titolocanto = $('<h1 class="titolo-canto" />') console.log(err.message);
titolocanto.append(canto) $("#loader").hide();
divcanto.attr('class', 'canto') };
divcanto.attr('style', 'display:none') };
divcanto.attr('id', (cantica + canto).replace(" ", "_"))
titolocanto.appendTo(divcanto) //execute query
divcanto.appendTo(' .blog-main') async function executeQuerySearch(query) {
} seachbBindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
divListaCanti.appendTo('#listacanti') 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;
resultVersi.add(cantica+"_"+canto.replace(" ", "_")+"_"+numverso)
for (verso of orderedListaVersi) { });
seachbBindingsStream.on('end', () => {
listarisultativersi = Array.from(resultVersi)
var elementoverso = $('<p />') for (verso of listarisultativersi){
elementoverso.append(verso.numverso + ". " + managePunctuation(verso.verso)) idverso='#'+verso
elementoverso.attr("style", "line-height: 0.5em") console.log(idverso)
$(idverso).attr('class', $(idverso).attr('class')+" dark-blue ")
elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
} }

71
js/utils.js
View File

@ -160,25 +160,25 @@ PREFIX olires:<https://dantenetwork.it/ontology/OLIRes/>
PREFIX comm: <http://dantenetwork.it/data/commedia/> PREFIX comm: <http://dantenetwork.it/data/commedia/>
SELECT (?form as ?IRIForma) (?Rappresentazione as ?Forma) (?lm as ?Lemma) (?textver as ?Verso) (?NumVerso as ?NumeroVerso) SELECT (?form as ?IRIForma) (?Rappresentazione as ?Forma) (?lm as ?Lemma) (?textver as ?Verso) (?NumVerso as ?NumeroVerso)
(?t_canto as ?Canto) (?t_cantica as ?Cantica) (?t_canto as ?Canto) (?t_cantica as ?Cantica) ?pos
WHERE { WHERE {
?fa orl:occurrenceOf ?form; ?fa orl:occurrenceOf ?form.
ecrm:P148i_is_component_of ?ver . ?ver ecrm:P190_Has_Symbolic_Content ?textver;
?ver ecrm:P190_Has_Symbolic_Content ?textver; olires:hasNumber ?NumVerso;
olires:hasNumber ?NumVerso; olires:hasStructuralComponent ?fa.
ecrm:P148i_is_component_of ?canto . ?fa olires:OccursInRegion ?reg .
?canto ecrm:P102_has_title ?t_canto; ?reg olires:fragmentRegionFrom ?pos .
ecrm:P148i_is_component_of ?cantica . ?canto ecrm:P102_has_title ?t_canto;
?cantica ecrm:P102_has_title ?t_cantica . olires:hasStructuralComponent ?ver.
?form ontolex:writtenRep ?Rappresentazione . ?cantica ecrm:P102_has_title ?t_cantica;
?lent ontolex:lexicalForm ?form; olires:hasStructuralComponent ?canto.
ontolex:canonicalForm ?cf . ?form ontolex:writtenRep ?Rappresentazione.
?cf ontolex:writtenRep ?lm . ?lent ontolex:lexicalForm ?form;
FILTER regex(?Rappresentazione,"^farò$","i") . ontolex:canonicalForm ?cf.
#FILTER regex(?lm,"^fare$","i") . ?cf ontolex:writtenRep ?lm.
FILTER langMatches(lang(?Rappresentazione),"it") FILTER(LANGMATCHES(LANG(?Rappresentazione), "it"))
} ORDER BY ?Cantica ?Canto ?NumVerso } ORDER BY ?Cantica ?Canto ?NumVerso
LIMIT 50` LIMIT 50`
//Togliere LIMIT in prod //Togliere LIMIT in prod
@ -219,8 +219,8 @@ function versiCantica(cantica) {
function gimmespq() { function gimmespq() {
var SparqlParser = sparqljs.Parser; var SparqlParser = sparqljs.Parser;
var parser = new SparqlParser(); var parser = new SparqlParser();
//return parser.parse(ontoSparqlQuery); return parser.parse(ontoSparqlQuery);
return parser.parse(tqvpvs); //return parser.parse(tqvpvs);
} }
@ -321,8 +321,8 @@ function buildSQ(stquery) {
var SparqlParser = sparqljs.Parser; var SparqlParser = sparqljs.Parser;
var parser = new SparqlParser(); var parser = new SparqlParser();
//Prendo la query SPARQL template //Prendo la query SPARQL template
//const parsedquery = parser.parse(ontoSparqlQuery); const parsedquery = parser.parse(ontoSparqlQuery);
const parsedquery = parser.parse(tqvpvs); //const parsedquery = parser.parse(tqvpvs);
const lf = document.getElementById("lemma_forma"); const lf = document.getElementById("lemma_forma");
//mytestq = parser.parse(tq); //mytestq = parser.parse(tq);
var ftxt = document.getElementById("queryText"); var ftxt = document.getElementById("queryText");
@ -578,8 +578,37 @@ function buildsubcategoryClause(sttmnt) {
} }
/*
//autocomplete
var categorie = ['aggettivovolgare', 'articolovolgare', 'avverbiovolgare',
'citazionevolgare', 'congiunzionevolgare', 'interiezionevolgare',
'locuzionevolgare', 'onomasticavolgare', 'preposizionevolgare',
'pronomevolgare', 'sostantivovolgare','verbovolgare'];
function autocompleteMatch(input) {
if (input == '') {
return [];
}
var reg = new RegExp(input)
return categorie.filter(function(term) {
if (term.match(reg)) {
return term;
}
});
}
function showResults(val) {
res = document.getElementById("aco");
res.innerHTML = '';
let list = '';
let terms = autocompleteMatch(val);
for (i=0; i<terms.length; i++) {
list += '<li>' + terms[i] + '</li>';
}
res.innerHTML = '<ul>' + list + '</ul>';
}
*/
var sottoCategorie = { var sottoCategorie = {
"verbovolgare": { "verbovolgare": {
"Diatesi": { "Attivo": "TipoDiatesiVerboVolgare:VerboVolgareAttivo", "Passivo": "TipoDiatesiVerboVolgare:VerboVolgarePassivo" }, "Diatesi": { "Attivo": "TipoDiatesiVerboVolgare:VerboVolgareAttivo", "Passivo": "TipoDiatesiVerboVolgare:VerboVolgarePassivo" },