prove con browsing cantiche
This commit is contained in:
cesare
parent
6cb0a14a31
commit
ec72d56434
|
|
@ -0,0 +1,79 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<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 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 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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="blog-masthead">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="blog-nav">
|
||||||
|
<!-- <a class="blog-nav-item active" id="cantica1" href="#">Inferno</a> -->
|
||||||
|
<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>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="blog-header">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<!-- <li><a href="#">Canto I</a></li>
|
||||||
|
<li><a href="#">Canto II</a></li>
|
||||||
|
<li><a href="#">Canto III</a></li>-->
|
||||||
|
</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">
|
||||||
|
|
||||||
|
<!-- <div class="canto" style="display:none">
|
||||||
|
<h2 class="titolo-canto">Titolo</h2> -->
|
||||||
|
<!-- <p class="canto-meta">January 1, 2014 by <a href="#">Mark</a></p> -->
|
||||||
|
|
||||||
|
|
||||||
|
</div><!-- /.canto -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div><!-- /.blog-main -->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div><!-- /.row -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,184 @@
|
||||||
|
@charset "UTF-8";
|
||||||
|
/* stylelint-disable selector-list-comma-newline-after, property-no-vendor-prefix */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Globals
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Georgia, "Times New Roman", Times, serif;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, .h1,
|
||||||
|
h2, .h2,
|
||||||
|
h3, .h3,
|
||||||
|
h4, .h4,
|
||||||
|
h5, .h5,
|
||||||
|
h6, .h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Override Bootstrap's default container.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
width: 970px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Masthead for nav
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-masthead {
|
||||||
|
background-color: #428bca;
|
||||||
|
-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
|
||||||
|
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav links */
|
||||||
|
.blog-nav-item {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #cdddeb;
|
||||||
|
}
|
||||||
|
.blog-nav-item:hover,
|
||||||
|
.blog-nav-item:focus {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active state gets a caret at the bottom */
|
||||||
|
.blog-nav .active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.blog-nav .active:after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-left: -5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
content: " ";
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
border-bottom: 5px solid;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Blog name and description
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-header {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.blog-title {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 60px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.blog-description {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Main column and sidebar layout
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-main {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar modules for boxing content */
|
||||||
|
.sidebar-module {
|
||||||
|
padding: 15px;
|
||||||
|
margin: 0 -15px 15px;
|
||||||
|
}
|
||||||
|
.sidebar-module-inset {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.sidebar-module-inset p:last-child,
|
||||||
|
.sidebar-module-inset ul:last-child,
|
||||||
|
.sidebar-module-inset ol:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pager {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.pager > li > a {
|
||||||
|
width: 140px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Blog posts
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-post {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.blog-post-title {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.blog-post-meta {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Canto
|
||||||
|
*/
|
||||||
|
|
||||||
|
.canto {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.titolo-canto {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.canto-meta {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Footer
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-footer {
|
||||||
|
padding: 40px 0;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-top: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
.blog-footer p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
|
||||||
|
const sparqlGenerator = sparqljs.Generator;
|
||||||
|
const myEngine = new Comunica.QueryEngine();
|
||||||
|
const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query";
|
||||||
|
var listaVersi = new Set()
|
||||||
|
|
||||||
|
$('#cantica1').on('click', function() {
|
||||||
|
|
||||||
|
alert("test fava")
|
||||||
|
activateMenuItem ('#cantica1')
|
||||||
|
jsonQuery = versiCantica("cantica1");
|
||||||
|
execQuery = new sparqlGenerator().stringify(jsonQuery);
|
||||||
|
executeQueryVersi(execQuery);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery(document).delegate('.navig-canto', 'click', function(e) {
|
||||||
|
$('.canto').each(function() {
|
||||||
|
$(this).attr("style", 'display:none');
|
||||||
|
});
|
||||||
|
$("#"+$(this).attr('name').replace(" ","_")).attr('style','display:block')
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
//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');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function executeQueryVersi(query){
|
||||||
|
bindingsStream = await myEngine.queryBindings(query, { sources: [ { type: 'sparql', value: sparqlEndpoint }, ], });
|
||||||
|
alert(query)
|
||||||
|
try {
|
||||||
|
var listaCanti = new Set()
|
||||||
|
listaVersi = new Set()
|
||||||
|
|
||||||
|
bindingsStream.on('data', (binding) => {
|
||||||
|
//console.log(binding.toString()); // Quick way to print bindings for testing
|
||||||
|
//console.log(binding.has('sub')); // Will be true
|
||||||
|
|
||||||
|
//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)
|
||||||
|
|
||||||
|
});
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
for (canto of orderedListaCanti){
|
||||||
|
var licanto = $('<li class="navig-canto"/>')
|
||||||
|
licanto.attr('name', canto)
|
||||||
|
licanto.attr('href', "#")
|
||||||
|
licanto.append(canto)
|
||||||
|
|
||||||
|
licanto.appendTo('#listacanti')
|
||||||
|
var divcanto=$('<div />')
|
||||||
|
var titolocanto=$('<h1 class="titolo-canto" />')
|
||||||
|
titolocanto.append(canto)
|
||||||
|
divcanto.attr('class', 'canto')
|
||||||
|
divcanto.attr('style', 'display:none')
|
||||||
|
divcanto.attr('id', canto.replace(" ","_"))
|
||||||
|
titolocanto.appendTo(divcanto)
|
||||||
|
divcanto.appendTo(' .blog-main')
|
||||||
|
}
|
||||||
|
|
||||||
|
for (verso of orderedListaVersi){
|
||||||
|
var elementoverso=$('<p />')
|
||||||
|
elementoverso.append(verso.numverso+". "+verso.verso)
|
||||||
|
elementoverso.attr("style", "line-height: 0.5em")
|
||||||
|
|
||||||
|
elementoverso.appendTo('#'+verso.canto.replace(" ","_"))
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
catch(err) {
|
||||||
|
console.log(err.message);
|
||||||
|
$("#loader").hide();
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
36
js/utils.js
36
js/utils.js
|
|
@ -75,7 +75,29 @@ WHERE {
|
||||||
LIMIT 10
|
LIMIT 10
|
||||||
`
|
`
|
||||||
|
|
||||||
//ORDER BY (?Cantica) (?Canto)
|
// Per restituire i versi di una cantica
|
||||||
|
var qVersiCantica=`
|
||||||
|
PREFIX ecrm: <http://erlangen-crm.org/current/>
|
||||||
|
PREFIX orl: <http://dantenetwork.it/ontology/ORL/>
|
||||||
|
PREFIX ontolex: <http://www.w3.org/ns/lemon/ontolex#>
|
||||||
|
PREFIX olires: <https://dantenetwork.it/ontology/OLIRes/>
|
||||||
|
PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
|
||||||
|
PREFIX text: <http://jena.apache.org/text#>
|
||||||
|
PREFIx hdn: <https://dantenetwork.it/data/commedia/>
|
||||||
|
|
||||||
|
SELECT (?textver AS ?Verso) (?NumVerso AS ?NumeroVerso) (?t_canto AS ?Canto) (?t_cantica AS ?Cantica) ?from ?to
|
||||||
|
WHERE {
|
||||||
|
?ver ecrm:P190_Has_Symbolic_Content ?textver;
|
||||||
|
olires:hasNumber ?NumVerso;
|
||||||
|
olires:OccursInRegion ?reg;
|
||||||
|
ecrm:P148i_is_component_of ?canto.
|
||||||
|
?reg olires:fragmentRegionFrom ?from;
|
||||||
|
olires:fragmentRegionTo ?to .
|
||||||
|
?canto ecrm:P102_has_title ?t_canto;
|
||||||
|
ecrm:P148i_is_component_of ?cantica.
|
||||||
|
?cantica ecrm:P102_has_title ?t_cantica.
|
||||||
|
FILTER regex(?t_cantica,"Inferno","i") .
|
||||||
|
}`
|
||||||
|
|
||||||
var hdnquerygrammar = `
|
var hdnquerygrammar = `
|
||||||
Expression
|
Expression
|
||||||
|
|
@ -181,7 +203,17 @@ function writesearchValue(form) {
|
||||||
return `Cerco: ${strq} ${form.query.value}, ${form.tipo.value}, ${strcategoria}`
|
return `Cerco: ${strq} ${form.query.value}, ${form.tipo.value}, ${strcategoria}`
|
||||||
}
|
}
|
||||||
|
|
||||||
// the basic initial query is parsed
|
//restituisce la query per ottenere tutti i versi di una cantica
|
||||||
|
|
||||||
|
function versiCantica(cantica) {
|
||||||
|
var SparqlParser = sparqljs.Parser;
|
||||||
|
var parser = new SparqlParser();
|
||||||
|
return parser.parse(qVersiCantica);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// the basic initial query is parsed RIMUOVERE
|
||||||
|
|
||||||
function gimmespq() {
|
function gimmespq() {
|
||||||
var SparqlParser = sparqljs.Parser;
|
var SparqlParser = sparqljs.Parser;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue