From 6fe5a1cd3e76a0ef85033deb4ad8d1bb90676a5f Mon Sep 17 00:00:00 2001 From: cesare Date: Tue, 8 Nov 2022 10:44:20 +0100 Subject: [PATCH] browsing in progress --- cesareBrowse.html | 22 ++-- css/browsingldc.css | 87 +++++++++++++- js/cesareBrowse.js | 276 ++++++++++++++++++++++++++++---------------- 3 files changed, 273 insertions(+), 112 deletions(-) diff --git a/cesareBrowse.html b/cesareBrowse.html index 9dd08bb..e587a06 100644 --- a/cesareBrowse.html +++ b/cesareBrowse.html @@ -13,15 +13,17 @@ +
@@ -44,24 +46,20 @@ -
+
-
- - - - - -
+
+ + +
@@ -72,6 +70,6 @@ - + \ No newline at end of file diff --git a/css/browsingldc.css b/css/browsingldc.css index 02c9b84..b2c8cf7 100644 --- a/css/browsingldc.css +++ b/css/browsingldc.css @@ -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; -} \ No newline at end of file +} + +/* +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; +} + + diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js index 889d6c3..03abbca 100644 --- a/js/cesareBrowse.js +++ b/js/cesareBrowse.js @@ -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=$('
') - for (canto of orderedListaCanti){ + + var divListaCanti = $('
') + for (canto of orderedListaCanti) { var licanto = $('
  • ') - 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=$('
    ') - var titolocanto=$('

    ') + var divcanto = $('
    ') + var titolocanto = $('

    ') 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=$('

    ') - elementoverso.append(verso.numverso+". "+verso.verso) + + for (verso of orderedListaVersi) { + var elementoverso = $('

    ') + 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'}); + } +}); +*/ + }); - \ No newline at end of file