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-08 10:44:20 +01:00
parent 905d34b5cd
commit 6fe5a1cd3e
3 changed files with 273 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
cesareBrowse.html
View File

@ -13,15 +13,17 @@
<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>
</head> </head>
<body> <body>
<div class="blog-masthead"> <div class="blog-masthead">
<div class="container"> <div class="container">
<nav class="blog-nav"> <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="cantica1" href="#">Inferno</a>
<a class="blog-nav-item" id="cantica2" href="#">Purgatorio</a> <a class="blog-nav-item" id="cantica2" href="#">Purgatorio</a>
<a class="blog-nav-item" id="cantica3" href="#">Paradiso</a> <a class="blog-nav-item" id="cantica3" href="#">Paradiso</a>
</div>
</nav> </nav>
</div> </div>
</div> </div>
@ -44,24 +46,20 @@
</ol> </ol>
</div> </div>
<div class="sidebar-module"> <!-- <div class="sidebar-module">
<h4>Altro</h4> <h4>Altro</h4>
<ol class="list-unstyled"> <ol class="list-unstyled">
<li><a href="#">Metafore</a></li> <li><a href="#">Metafore</a></li>
<li><a href="#">Dialoghi</a></li> <li><a href="#">Dialoghi</a></li>
<li><a href="#">Personaggi</a></li> <li><a href="#">Personaggi</a></li>
</ol> </ol>
</div> </div> -->
</div><!-- /.blog-sidebar --> </div><!-- /.blog-sidebar -->
<div class="col-sm-8 blog-main"> <div class="col-sm-8 blog-main" id='displaycanto'>
<!-- <div class="canto" style="display:none">
<h2 class="titolo-canto">Titolo</h2> --> </div><!-- /.displaycanto -->
<!-- <p class="canto-meta">January 1, 2014 by <a href="#">Mark</a></p> -->
</div><!-- /.canto -->
@ -72,6 +70,6 @@
</div><!-- /.row --> </div><!-- /.row -->
</div> </div>
<!-- <script type="text/javascript" src="js/minimap.js"></script> -->
</body> </body>
</html> </html>

87
css/browsingldc.css
View File

@ -43,6 +43,8 @@ h6, .h6 {
background-color: #428bca; background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1); -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
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 */ /* Nav links */
@ -111,6 +113,7 @@ h6, .h6 {
.sidebar-module { .sidebar-module {
padding: 15px; padding: 15px;
margin: 0 -15px 15px; margin: 0 -15px 15px;
position: fixed;
} }
.sidebar-module-inset { .sidebar-module-inset {
padding: 15px; padding: 15px;
@ -182,4 +185,86 @@ h6, .h6 {
} }
.blog-footer p:last-child { .blog-footer p:last-child {
margin-bottom: 0; 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;
}

276
js/cesareBrowse.js
View File

@ -1,121 +1,188 @@
/** /**
* *
*/ */
$(document).ready(function() { $(document).ready(function() {
const sparqlGenerator = sparqljs.Generator; const sparqlGenerator = sparqljs.Generator;
const myEngine = new Comunica.QueryEngine(); const myEngine = new Comunica.QueryEngine();
const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query"; const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query";
var primaCanticaLoaded=false; var primaCanticaLoaded = false;
var secondaCanticaLoaded=false; var secondaCanticaLoaded = false;
var terzaCanticaLoaded=false; var terzaCanticaLoaded = false;
var listaVersi = new Set() var listaVersi = new Set()
//caricamento prima cantica //caricamento prima cantica
$('#cantica1').on('click', function() { $('#cantica1').on('click', function() {
$('.canto').each(function() { $('.canto').each(function() {
$(this).attr("style", 'display:none'); $(this).attr("style", 'display:none');
}); });
hideListaCanti() hideListaCanti()
activateMenuItem ('#cantica1') activateMenuItem('#cantica1')
if(!(primaCanticaLoaded)){ if (!(primaCanticaLoaded)) {
jsonQuery = versiCantica("Inferno"); jsonQuery = versiCantica("Inferno");
execQuery = new sparqlGenerator().stringify(jsonQuery); execQuery = new sparqlGenerator().stringify(jsonQuery);
executeQueryVersi(execQuery); executeQueryVersi(execQuery);
primaCanticaLoaded=true; primaCanticaLoaded = true;
} }
else{ else {
$("#InfernoCanto_1").attr('style','display:block') $("#InfernoCanto_1").attr('style', 'display:block')
$("#CantiInferno").attr('style','display:block') $("#CantiInferno").attr('style', 'display:block')
} }
}); });
//caricamento seconda cantica //caricamento seconda cantica
$('#cantica2').on('click', function() { $('#cantica2').on('click', function() {
$('.canto').each(function() { $('.canto').each(function() {
$(this).attr("style", 'display:none'); $(this).attr("style", 'display:none');
}); });
hideListaCanti() hideListaCanti()
activateMenuItem ('#cantica2') activateMenuItem('#cantica2')
if(!(secondaCanticaLoaded)){ if (!(secondaCanticaLoaded)) {
jsonQuery = versiCantica("Purgatorio"); jsonQuery = versiCantica("Purgatorio");
execQuery = new sparqlGenerator().stringify(jsonQuery); execQuery = new sparqlGenerator().stringify(jsonQuery);
executeQueryVersi(execQuery); executeQueryVersi(execQuery);
secondaCanticaLoaded=true; secondaCanticaLoaded = true;
}
else{
$("#PurgatorioCanto_1").attr('style','display:block')
$("#CantiPurgatorio").attr('style','display:block')
} }
else {
$("#PurgatorioCanto_1").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() { $('.canto').each(function() {
$(this).attr("style", 'display:none'); $(this).attr("style", 'display:none');
}); });
hideListaCanti() hideListaCanti()
activateMenuItem ('#cantica3') activateMenuItem('#cantica3')
if(!(terzaCanticaLoaded)){ if (!(terzaCanticaLoaded)) {
jsonQuery = versiCantica("Paradiso"); jsonQuery = versiCantica("Paradiso");
execQuery = new sparqlGenerator().stringify(jsonQuery); execQuery = new sparqlGenerator().stringify(jsonQuery);
executeQueryVersi(execQuery); executeQueryVersi(execQuery);
terzaCanticaLoaded=true; terzaCanticaLoaded = true;
}
else{
$("#ParadisoCanto_1").attr('style','display:block')
$("#CantiParadiso").attr('style','display:block')
} }
else {
$("#ParadisoCanto_1").attr('style', 'display:block')
$("#CantiParadiso").attr('style', 'display:block')
}
}); });
jQuery(document).delegate('.navig-canto', 'click', function(e) { jQuery(document).delegate('.navig-canto', 'click', function(e) {
$('.canto').each(function() { $('.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 //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 //hides liste canti
function hideListaCanti(){ function hideListaCanti() {
$("#CantiInferno").attr('style','display:none') $("#CantiInferno").attr('style', 'display:none')
$("#CantiPurgatorio").attr('style','display:none') $("#CantiPurgatorio").attr('style', 'display:none')
$("#CantiParadiso").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) 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;
@ -124,65 +191,76 @@
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) 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) var orderedListaVersi = Array.from(listaVersi)
orderedListaVersi = orderedListaVersi.sort((a, b) => { orderedListaVersi = orderedListaVersi.sort((a, b) => {
if (parseInt(a.numverso) < parseInt(b.numverso)) { if (parseInt(a.numverso) < parseInt(b.numverso)) {
return -1; return -1;
} }
}); });
var divListaCanti=$('<DIV id="Canti'+cantica+'" />') var divListaCanti = $('<DIV id="Canti' + cantica + '" />')
for (canto of orderedListaCanti){ for (canto of orderedListaCanti) {
var licanto = $('<li class="navig-canto"/>') var licanto = $('<li class="navig-canto"/>')
licanto.attr('name', cantica+canto) licanto.attr('name', cantica + canto)
licanto.attr('href', "#") licanto.attr('href', "#")
licanto.attr("style", "line-height: 1.2em") licanto.attr("style", "line-height: 1.2em")
licanto.append(canto) licanto.append(canto)
//licanto.appendTo('#listacanti') //licanto.appendTo('#listacanti')
licanto.appendTo(divListaCanti) licanto.appendTo(divListaCanti)
var divcanto=$('<div />') var divcanto = $('<div />')
var titolocanto=$('<h1 class="titolo-canto" />') var titolocanto = $('<h1 class="titolo-canto" />')
titolocanto.append(canto) titolocanto.append(canto)
divcanto.attr('class', 'canto') divcanto.attr('class', 'canto')
divcanto.attr('style', 'display:none') divcanto.attr('style', 'display:none')
divcanto.attr('id', (cantica+canto).replace(" ","_")) divcanto.attr('id', (cantica + canto).replace(" ", "_"))
titolocanto.appendTo(divcanto) titolocanto.appendTo(divcanto)
divcanto.appendTo(' .blog-main') divcanto.appendTo(' .blog-main')
} }
divListaCanti.appendTo('#listacanti') divListaCanti.appendTo('#listacanti')
for (verso of orderedListaVersi){ for (verso of orderedListaVersi) {
var elementoverso=$('<p />') var elementoverso = $('<p />')
elementoverso.append(verso.numverso+". "+verso.verso) elementoverso.append(verso.numverso + ". " + verso.verso)
elementoverso.attr("style", "line-height: 0.5em") elementoverso.attr("style", "line-height: 0.5em")
elementoverso.appendTo('#'+cantica+verso.canto.replace(" ","_")) elementoverso.appendTo('#' + cantica + verso.canto.replace(" ", "_"))
} }
}); });
} }
catch(err) { catch (err) {
console.log(err.message); console.log(err.message);
$("#loader").hide(); $("#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'});
}
});
*/
}); });