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
|
||||
`
|
||||
|
||||
//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 = `
|
||||
Expression
|
||||
|
|
@ -181,7 +203,17 @@ function writesearchValue(form) {
|
|||
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() {
|
||||
var SparqlParser = sparqljs.Parser;
|
||||
|
|
|
|||
Loading…
Reference in New Issue