browsing in progress
This commit is contained in:
cesare
parent
905d34b5cd
commit
6fe5a1cd3e
|
|
@ -13,15 +13,17 @@
|
|||
|
||||
<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> -->
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,24 +46,20 @@
|
|||
|
||||
</ol>
|
||||
</div>
|
||||
<div class="sidebar-module">
|
||||
<!-- <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> -->
|
||||
</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 class="col-sm-8 blog-main" id='displaycanto'>
|
||||
|
||||
|
||||
</div><!-- /.displaycanto -->
|
||||
|
||||
|
||||
|
||||
|
|
@ -72,6 +70,6 @@
|
|||
</div><!-- /.row -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <script type="text/javascript" src="js/minimap.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -43,6 +43,8 @@ h6, .h6 {
|
|||
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);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Nav links */
|
||||
|
|
@ -111,6 +113,7 @@ h6, .h6 {
|
|||
.sidebar-module {
|
||||
padding: 15px;
|
||||
margin: 0 -15px 15px;
|
||||
position: fixed;
|
||||
}
|
||||
.sidebar-module-inset {
|
||||
padding: 15px;
|
||||
|
|
@ -182,4 +185,86 @@ h6, .h6 {
|
|||
}
|
||||
.blog-footer p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Minimap
|
||||
*/
|
||||
|
||||
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
html, body{
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
|
||||
h1{
|
||||
font-size: clamp(1px, 3.2vw, 28px);
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: clamp(1px, 2.2vw, 20px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.minimap_container {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 1000px;
|
||||
min-width: 20px;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
|
||||
.minimap_size {
|
||||
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
border: 2px solid white;
|
||||
|
||||
}
|
||||
|
||||
.minimap_viewer {
|
||||
|
||||
width: 25%;
|
||||
|
||||
position:absolute;
|
||||
|
||||
top: 0;
|
||||
|
||||
left: 0;
|
||||
|
||||
transform-origin: 0 0;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
border: 1px solid #0000009a;
|
||||
}
|
||||
|
||||
.minimap_content {
|
||||
position:absolute;
|
||||
|
||||
top: 0;
|
||||
|
||||
left: 0;
|
||||
|
||||
width:100%;
|
||||
|
||||
height: 100%;
|
||||
|
||||
z-index: -1;
|
||||
|
||||
transform-origin: 0 0;
|
||||
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,121 +1,188 @@
|
|||
/**
|
||||
*
|
||||
*/
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
const sparqlGenerator = sparqljs.Generator;
|
||||
const myEngine = new Comunica.QueryEngine();
|
||||
const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query";
|
||||
var primaCanticaLoaded=false;
|
||||
var secondaCanticaLoaded=false;
|
||||
var terzaCanticaLoaded=false;
|
||||
var primaCanticaLoaded = false;
|
||||
var secondaCanticaLoaded = false;
|
||||
var terzaCanticaLoaded = false;
|
||||
var listaVersi = new Set()
|
||||
|
||||
|
||||
//caricamento prima cantica
|
||||
$('#cantica1').on('click', function() {
|
||||
$('.canto').each(function() {
|
||||
$(this).attr("style", 'display:none');
|
||||
$(this).attr("style", 'display:none');
|
||||
});
|
||||
hideListaCanti()
|
||||
activateMenuItem ('#cantica1')
|
||||
if(!(primaCanticaLoaded)){
|
||||
activateMenuItem('#cantica1')
|
||||
if (!(primaCanticaLoaded)) {
|
||||
jsonQuery = versiCantica("Inferno");
|
||||
execQuery = new sparqlGenerator().stringify(jsonQuery);
|
||||
executeQueryVersi(execQuery);
|
||||
primaCanticaLoaded=true;
|
||||
}
|
||||
else{
|
||||
$("#InfernoCanto_1").attr('style','display:block')
|
||||
$("#CantiInferno").attr('style','display:block')
|
||||
|
||||
executeQueryVersi(execQuery);
|
||||
primaCanticaLoaded = true;
|
||||
}
|
||||
else {
|
||||
$("#InfernoCanto_1").attr('style', 'display:block')
|
||||
$("#CantiInferno").attr('style', 'display:block')
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
//caricamento seconda cantica
|
||||
$('#cantica2').on('click', function() {
|
||||
$('.canto').each(function() {
|
||||
$(this).attr("style", 'display:none');
|
||||
$(this).attr("style", 'display:none');
|
||||
});
|
||||
hideListaCanti()
|
||||
|
||||
activateMenuItem ('#cantica2')
|
||||
if(!(secondaCanticaLoaded)){
|
||||
|
||||
activateMenuItem('#cantica2')
|
||||
if (!(secondaCanticaLoaded)) {
|
||||
jsonQuery = versiCantica("Purgatorio");
|
||||
execQuery = new sparqlGenerator().stringify(jsonQuery);
|
||||
executeQueryVersi(execQuery);
|
||||
secondaCanticaLoaded=true;
|
||||
}
|
||||
else{
|
||||
$("#PurgatorioCanto_1").attr('style','display:block')
|
||||
$("#CantiPurgatorio").attr('style','display:block')
|
||||
|
||||
executeQueryVersi(execQuery);
|
||||
secondaCanticaLoaded = true;
|
||||
}
|
||||
|
||||
else {
|
||||
$("#PurgatorioCanto_1").attr('style', 'display:block')
|
||||
$("#CantiPurgatorio").attr('style', 'display:block')
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
//caricamento terza cantica
|
||||
$('#cantica3').on('click', function() {
|
||||
$('.canto').each(function() {
|
||||
$(this).attr("style", 'display:none');
|
||||
$(this).attr("style", 'display:none');
|
||||
});
|
||||
hideListaCanti()
|
||||
|
||||
activateMenuItem ('#cantica3')
|
||||
if(!(terzaCanticaLoaded)){
|
||||
|
||||
activateMenuItem('#cantica3')
|
||||
if (!(terzaCanticaLoaded)) {
|
||||
jsonQuery = versiCantica("Paradiso");
|
||||
execQuery = new sparqlGenerator().stringify(jsonQuery);
|
||||
executeQueryVersi(execQuery);
|
||||
terzaCanticaLoaded=true;
|
||||
}
|
||||
else{
|
||||
$("#ParadisoCanto_1").attr('style','display:block')
|
||||
$("#CantiParadiso").attr('style','display:block')
|
||||
|
||||
executeQueryVersi(execQuery);
|
||||
terzaCanticaLoaded = true;
|
||||
}
|
||||
|
||||
else {
|
||||
$("#ParadisoCanto_1").attr('style', 'display:block')
|
||||
$("#CantiParadiso").attr('style', 'display:block')
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
jQuery(document).delegate('.navig-canto', 'click', function(e) {
|
||||
$('.canto').each(function() {
|
||||
$(this).attr("style", 'display:none');
|
||||
$(this).attr("style", 'display:none');
|
||||
});
|
||||
$("#"+$(this).attr('name').replace(" ","_")).attr('style','display:block')
|
||||
|
||||
|
||||
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display:block')
|
||||
showMinimap($(this).attr('name').replace(" ", "_"))
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
//Utility functions
|
||||
|
||||
|
||||
//activate navigation menu items
|
||||
|
||||
function activateMenuItem(menuItem){
|
||||
|
||||
function activateMenuItem(menuItem) {
|
||||
$('.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')
|
||||
|
||||
function hideListaCanti() {
|
||||
$("#CantiInferno").attr('style', 'display:none')
|
||||
$("#CantiPurgatorio").attr('style', 'display:none')
|
||||
$("#CantiParadiso").attr('style', 'display:none')
|
||||
}
|
||||
async function executeQueryVersi(query){
|
||||
bindingsStream = await myEngine.queryBindings(query, { sources: [ { type: 'sparql', value: sparqlEndpoint }, ], });
|
||||
|
||||
|
||||
//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;
|
||||
|
||||
function showMinimap(element) {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
minimap.className = 'minimap_container'
|
||||
minimapSize.className = 'minimap_size'
|
||||
viewer.className = 'minimap_viewer'
|
||||
minimapContent.className = 'minimap_content'
|
||||
|
||||
minimap.append(minimapSize, viewer, minimapContent);
|
||||
|
||||
document.body.appendChild(minimap)
|
||||
|
||||
let html = document.getElementById(element).innerHTML
|
||||
console.log(html)
|
||||
|
||||
let iFrameDoc = minimapContent.contentWindow.document;
|
||||
iFrameDoc.open();
|
||||
iFrameDoc.write(html);
|
||||
iFrameDoc.close();
|
||||
|
||||
getDimensions()
|
||||
window.addEventListener('scroll', trackScroll)
|
||||
window.addEventListener('resize', getDimensions)
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function getDimensions(){
|
||||
|
||||
let bodyWidth = document.body.clientWidth;
|
||||
let bodyRatio = document.body.clientHeight / bodyWidth;
|
||||
let winRatio = window.innerHeight / window.innerWidth;
|
||||
|
||||
minimap.style.width = '10%';
|
||||
|
||||
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)`
|
||||
}
|
||||
|
||||
//end minimap management
|
||||
|
||||
async function executeQueryVersi(query) {
|
||||
bindingsStream = await myEngine.queryBindings(query, { sources: [{ type: 'sparql', value: sparqlEndpoint },], });
|
||||
alert(query)
|
||||
try {
|
||||
var listaCanti = new Set()
|
||||
listaVersi = new Set()
|
||||
let cantica=0;
|
||||
let cantica = 0;
|
||||
bindingsStream.on('data', (binding) => {
|
||||
//cantica
|
||||
cantica=binding.get('Cantica').value;
|
||||
cantica = binding.get('Cantica').value;
|
||||
//la lista dei canti
|
||||
listaCanti.add( binding.get('Canto').value)
|
||||
listaCanti.add(binding.get('Canto').value)
|
||||
//la lista dei versi
|
||||
var obj = new Object();
|
||||
obj.numverso = binding.get('NumeroVerso').value;
|
||||
|
|
@ -124,65 +191,76 @@
|
|||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
if (parseInt(a.numverso) < parseInt(b.numverso)) {
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
|
||||
var divListaCanti=$('<DIV id="Canti'+cantica+'" />')
|
||||
for (canto of orderedListaCanti){
|
||||
|
||||
var divListaCanti = $('<DIV id="Canti' + cantica + '" />')
|
||||
for (canto of orderedListaCanti) {
|
||||
var licanto = $('<li class="navig-canto"/>')
|
||||
licanto.attr('name', cantica+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" />')
|
||||
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(" ","_"))
|
||||
divcanto.attr('id', (cantica + canto).replace(" ", "_"))
|
||||
titolocanto.appendTo(divcanto)
|
||||
divcanto.appendTo(' .blog-main')
|
||||
}
|
||||
divListaCanti.appendTo('#listacanti')
|
||||
|
||||
for (verso of orderedListaVersi){
|
||||
var elementoverso=$('<p />')
|
||||
elementoverso.append(verso.numverso+". "+verso.verso)
|
||||
|
||||
for (verso of orderedListaVersi) {
|
||||
var elementoverso = $('<p />')
|
||||
elementoverso.append(verso.numverso + ". " + verso.verso)
|
||||
elementoverso.attr("style", "line-height: 0.5em")
|
||||
|
||||
elementoverso.appendTo('#'+cantica+verso.canto.replace(" ","_"))
|
||||
|
||||
|
||||
|
||||
elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.message);
|
||||
$("#loader").hide();
|
||||
catch (err) {
|
||||
console.log(err.message);
|
||||
$("#loader").hide();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// scroll function
|
||||
/*
|
||||
$(window).scroll(function(e){
|
||||
var $el = $('.blog-masthead');
|
||||
var isPositionFixed = ($el.css('position') == 'fixed');
|
||||
if ($(this).scrollTop() > 10 && !isPositionFixed){
|
||||
$el.css({'position': 'fixed', 'top': '0px'});
|
||||
}
|
||||
if ($(this).scrollTop() < 10 && isPositionFixed){
|
||||
$el.css({'position': 'static', 'top': '0px'});
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue