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

View File

@ -5,12 +5,17 @@
<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://unpkg.com/tachyons/css/tachyons.min.css">
<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/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 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/cesareBrowse.js"></script>
@ -18,11 +23,31 @@
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<!-- <nav class="blog-nav"> -->
<nav id="navbar-example" class="navbar">
<div class="container">
<a class="blog-nav-item" id="cantica1" href="#">Inferno</a>
<a class="blog-nav-item" id="cantica2" href="#">Purgatorio</a>
<a class="blog-nav-item" id="cantica3" href="#">Paradiso</a>
<ul class="nav nav-pills">
<li class="dropdown">
<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>
</nav>
</div>
@ -35,35 +60,38 @@
<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><!-- /.blog-main -->
<div class="col-sm-3 blog-sidebar" style="display:block">
<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 -->

View File

@ -89,7 +89,7 @@ p{
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
padding-bottom: 60px;
}
.blog-title {
margin-top: 30px;
@ -108,8 +108,10 @@ p{
*/
.blog-main {
padding: 15px;
font-size: 18px;
line-height: 1.5;
z-index: -1;
}
/* Sidebar modules for boxing content */
@ -117,6 +119,7 @@ p{
padding: 15px;
margin: 0 -15px 15px;
position: fixed;
}
.sidebar-module-inset {
padding: 15px;
@ -130,6 +133,9 @@ p{
}
/* Pagination */
.pager {
margin-bottom: 60px;
@ -221,7 +227,7 @@ p{
.minimap_container {
position: fixed;
top: 100px;
left: 900px;
left: 600px;
min-width: 20px;
z-index: 100;
@ -249,7 +255,8 @@ p{
z-index: 100;
border: 1px solid #0000009a;
/*border: 1px solid #0000009a; */
border: 1px solid blue;
}
@ -271,4 +278,20 @@ p{
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;
}

View File

@ -11,14 +11,16 @@ $(document).ready(function() {
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() {
$('.canto').each(function() {
$(this).attr("style", 'display:none');
});
hideListaCanti()
$( ".minimap_container" ).remove();
hideMinimap();
activateMenuItem('#cantica1')
if (!(primaCanticaLoaded)) {
@ -34,16 +36,13 @@ $(document).ready(function() {
}
});
//caricamento seconda cantica
$('#cantica2').on('click', function() {
$('.canto').each(function() {
$(this).attr("style", 'display:none');
});
hideListaCanti()
$( ".minimap_container" ).remove();
hideMinimap();
activateMenuItem('#cantica2')
if (!(secondaCanticaLoaded)) {
@ -57,16 +56,13 @@ $(document).ready(function() {
$("#CantiPurgatorio").attr('style', 'display:block')
}
});
//caricamento terza cantica
$('#cantica3').on('click', function() {
$('.canto').each(function() {
$(this).attr("style", 'display:none');
});
hideListaCanti()
$( ".minimap_container" ).remove();
hideMinimap();
activateMenuItem('#cantica3')
if (!(terzaCanticaLoaded)) {
@ -80,6 +76,7 @@ $(document).ready(function() {
$("#CantiParadiso").attr('style', 'display:block')
}
});
@ -89,30 +86,53 @@ $(document).ready(function() {
});
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
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
//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');
//$('.blog-nav-item').each(function() {
// $(this).attr("class", $(this).attr("class").replace(' 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) {
var tempstringa=stringa.replaceAll(" ,", ",")
tempstringa=tempstringa.replaceAll(" .", ".")
@ -123,6 +143,16 @@ $(document).ready(function() {
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
let minimap = document.createElement('div');
@ -185,6 +215,14 @@ $(document).ready(function() {
function trackScroll(){
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
@ -192,70 +230,125 @@ $(document).ready(function() {
bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
alert(query)
try {
var listaCanti = new Set()
listaVersi = 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();
obj.numverso = binding.get('NumeroVerso').value;
obj.verso = binding.get('Verso').value;
obj.canto = binding.get('Canto').value;
obj.from = binding.get('from').value;
obj.to = binding.get('to').value;
listaVersi.add(obj)
//cantica
cantica = binding.get('Cantica').value;
//la lista dei canti
listaCanti.add(binding.get('Canto').value)
//la lista dei versi
var obj = new Object();
obj.numverso = binding.get('NumeroVerso').value;
obj.verso = binding.get('Verso').value;
obj.canto = binding.get('Canto').value;
obj.from = binding.get('from').value;
obj.to = binding.get('to').value;
obj.cantica = cantica;
listaVersi.add(obj)
});
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 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;
}
});
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')
}
});
var orderedListaVersi = Array.from(listaVersi)
orderedListaVersi = orderedListaVersi.sort((a, b) => {
if (parseInt(a.numverso) < parseInt(b.numverso)) {
return -1;
//divListaCanti.appendTo('#listacanti')
divListaCanti.appendTo(ddmenus[cantica])
for (verso of orderedListaVersi) {
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 />')
var titolocanto = $('<h1 class="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')
});
}
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;
resultVersi.add(cantica+"_"+canto.replace(" ", "_")+"_"+numverso)
for (verso of orderedListaVersi) {
var elementoverso = $('<p />')
elementoverso.append(verso.numverso + ". " + managePunctuation(verso.verso))
elementoverso.attr("style", "line-height: 0.5em")
elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
});
seachbBindingsStream.on('end', () => {
listarisultativersi = Array.from(resultVersi)
for (verso of listarisultativersi){
idverso='#'+verso
console.log(idverso)
$(idverso).attr('class', $(idverso).attr('class')+" dark-blue ")
}

View File

@ -160,25 +160,25 @@ PREFIX olires:<https://dantenetwork.it/ontology/OLIRes/>
PREFIX comm: <http://dantenetwork.it/data/commedia/>
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 {
?fa orl:occurrenceOf ?form;
ecrm:P148i_is_component_of ?ver .
?ver ecrm:P190_Has_Symbolic_Content ?textver;
olires:hasNumber ?NumVerso;
ecrm:P148i_is_component_of ?canto .
?canto ecrm:P102_has_title ?t_canto;
ecrm:P148i_is_component_of ?cantica .
?cantica ecrm:P102_has_title ?t_cantica .
?form ontolex:writtenRep ?Rappresentazione .
?lent ontolex:lexicalForm ?form;
ontolex:canonicalForm ?cf .
?cf ontolex:writtenRep ?lm .
FILTER regex(?Rappresentazione,"^farò$","i") .
#FILTER regex(?lm,"^fare$","i") .
FILTER langMatches(lang(?Rappresentazione),"it")
?fa orl:occurrenceOf ?form.
?ver ecrm:P190_Has_Symbolic_Content ?textver;
olires:hasNumber ?NumVerso;
olires:hasStructuralComponent ?fa.
?fa olires:OccursInRegion ?reg .
?reg olires:fragmentRegionFrom ?pos .
?canto ecrm:P102_has_title ?t_canto;
olires:hasStructuralComponent ?ver.
?cantica ecrm:P102_has_title ?t_cantica;
olires:hasStructuralComponent ?canto.
?form ontolex:writtenRep ?Rappresentazione.
?lent ontolex:lexicalForm ?form;
ontolex:canonicalForm ?cf.
?cf ontolex:writtenRep ?lm.
FILTER(LANGMATCHES(LANG(?Rappresentazione), "it"))
} ORDER BY ?Cantica ?Canto ?NumVerso
LIMIT 50`
//Togliere LIMIT in prod
@ -219,8 +219,8 @@ function versiCantica(cantica) {
function gimmespq() {
var SparqlParser = sparqljs.Parser;
var parser = new SparqlParser();
//return parser.parse(ontoSparqlQuery);
return parser.parse(tqvpvs);
return parser.parse(ontoSparqlQuery);
//return parser.parse(tqvpvs);
}
@ -321,8 +321,8 @@ function buildSQ(stquery) {
var SparqlParser = sparqljs.Parser;
var parser = new SparqlParser();
//Prendo la query SPARQL template
//const parsedquery = parser.parse(ontoSparqlQuery);
const parsedquery = parser.parse(tqvpvs);
const parsedquery = parser.parse(ontoSparqlQuery);
//const parsedquery = parser.parse(tqvpvs);
const lf = document.getElementById("lemma_forma");
//mytestq = parser.parse(tq);
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 = {
"verbovolgare": {
"Diatesi": { "Attivo": "TipoDiatesiVerboVolgare:VerboVolgareAttivo", "Passivo": "TipoDiatesiVerboVolgare:VerboVolgarePassivo" },