diff --git a/css/browsingldc.css b/css/browsingldc.css index 0921416..1399451 100644 --- a/css/browsingldc.css +++ b/css/browsingldc.css @@ -5,223 +5,23 @@ * Globals */ -body { - font-family: Georgia, "Times New Roman", Times, serif; - color: #555; - overscroll-behavior: none; -} - -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; -} - -p{ - font-size: clamp(1px, 2.2vw, 20px); -} - -/* - * 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); - position: fixed; - width: 100%; -} - -/* 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: 60px; -} -.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 { - padding: 15px; - font-size: 18px; - line-height: 1.5; - z-index: -1; -} - -/* Sidebar modules for boxing content */ -.sidebar-module { - padding: 15px; - margin: 0 -15px 15px; - position: fixed; - -} -.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: 8px; - font-size: 24px; -} -.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; -} + /* 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 { +.minimap__container { /*position: fixed;*/ /*top: 160px;*/ /*left: 600px;*/ @@ -230,7 +30,8 @@ p{ } -.minimap_size { + +.minimap__size { position: relative; z-index: 5; @@ -238,9 +39,11 @@ p{ } -.minimap_viewer { + + +.minimap__viewer { - /*width: 20%;*/ + width: 70%; position:absolute; @@ -257,9 +60,9 @@ p{ } -.minimap_content { + +.minimap__content { position:absolute; - top: 0; left: 0; @@ -275,4 +78,3 @@ p{ border: 1px solid white; } - diff --git a/index_3.0.html b/index_3.0.html index 4bf7048..14918fc 100644 --- a/index_3.0.html +++ b/index_3.0.html @@ -12,7 +12,7 @@ - + + diff --git a/js/cesareBrowse.js b/js/cesareBrowse.js index ec25a9c..d2417a8 100644 --- a/js/cesareBrowse.js +++ b/js/cesareBrowse.js @@ -8,6 +8,7 @@ $(document).ready(function() { const sparqlGenerator = sparqljs.Generator; const myEngine = new Comunica.QueryEngine(); const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/commediaontosintgra/query"; + //const sparqlEndpoint = "https://hdnlab1.isti.cnr.it/fuseki/hdntest/query"; var primaCanticaLoaded = false; var secondaCanticaLoaded = false; var terzaCanticaLoaded = false; @@ -25,9 +26,10 @@ $(document).ready(function() { activateMenuItem('#cantica1') if (!(primaCanticaLoaded)) { - jsonQuery = versiCantica("Inferno"); - execQuery = new sparqlGenerator().stringify(jsonQuery); - executeQueryVersi(execQuery); + //jsonQuery = versiCantica("Inferno"); + //execQuery = new sparqlGenerator().stringify(jsonQuery); + //executeQueryVersi(execQuery); + showCantica('Inferno') primaCanticaLoaded = true; $(".labelCantica").attr('style', "display: block;"); } @@ -47,9 +49,10 @@ $(document).ready(function() { activateMenuItem('#cantica2') if (!(secondaCanticaLoaded)) { - jsonQuery = versiCantica("Purgatorio"); - execQuery = new sparqlGenerator().stringify(jsonQuery); - executeQueryVersi(execQuery); + //jsonQuery = versiCantica("Purgatorio"); + //execQuery = new sparqlGenerator().stringify(jsonQuery); + //executeQueryVersi(execQuery); + showCantica('Purgatorio') secondaCanticaLoaded = true; $(".labelCantica").attr('style', "display: block;"); } @@ -67,10 +70,7 @@ $(document).ready(function() { hideMinimap(); activateMenuItem('#cantica3') if (!(terzaCanticaLoaded)) { - - jsonQuery = versiCantica("Paradiso"); - execQuery = new sparqlGenerator().stringify(jsonQuery); - executeQueryVersi(execQuery); + showCantica('Paradiso') terzaCanticaLoaded = true; $(".labelCantica").attr('style', "display: block;"); } @@ -99,6 +99,8 @@ $(document).ready(function() { console.log("viewer top pos after: "+$('#minimapviewer').offset().top) } }); + + jQuery(document).delegate('.navig-canto', 'click', function(e) { $('.canto').each(function() { $(this).attr("style", 'display:none'); @@ -109,6 +111,7 @@ $(document).ready(function() { mmih=$("#"+displayId).innerHeight(); showMinimap($(this).attr('name').replace(" ", "_")) + currentMinimap=$(this).attr('name').replace(" ", "_"); //mmviewer diventa draggable minimapTopPos=$('#minimapviewer').offset().top @@ -116,7 +119,7 @@ $(document).ready(function() { $('#minimapviewer').draggable({ axis: "y", - containment : $('#displayminimap'), + containment : $('#displayminimap'), scroll : false, stop: function( event, ui ) {minimapScrolling=true;}, stop: function( event, ui ) {minimapScrolling=false;}, @@ -164,7 +167,7 @@ $(document).ready(function() { //Reset jQuery(document).delegate('#cleanresult', 'click', function(e) { - + console.log('clean') cleanSearchResult() esprlogica=[] $('#queryText').val("") @@ -201,7 +204,8 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { for (verso of listarisultati){ idverso='#'+verso //console.log(idverso) - $(idverso).attr('class', 'f6 font-weight-lighter') + //$(idverso).attr('class', 'f6 font-weight-lighter') + $(idverso).attr('class', 'f6text-secondary text-nowrap font-weight-lighter') } $( ".badge" ).remove(); listarisultati=[] @@ -217,39 +221,33 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { let minimapContent = document.createElement('iframe'); let scale=0.1; let realScale; + let mappedElement='' function showMinimap(element) { + mmplace=document.getElementById('displayminimap') - minimap.className = 'minimap_container' - minimapSize.className = 'minimap_size' - viewer.className = 'minimap_viewer' + //mmplace=document.getElementById('displaycanto') + + minimap.className = 'minimap__container' + minimapSize.className = 'minimap__size' + viewer.className = 'minimap__viewer' viewer.id='minimapviewer' - minimapContent.className = 'minimap_content' + minimapContent.className = 'minimap__content' //class="col-3 px-0" minimap.append(minimapSize, viewer, minimapContent); //document.body.appendChild(minimap) - if (mmplace!=null) - mmplace.appendChild(minimap) - //document.body.appendChild(minimap) - else{ - minimap.style.position = 'fixed'; - document.body.appendChild(minimap) - - } - - + mmplace.appendChild(minimap) let html = document.getElementById(element).outerHTML//innerHTML //console.log(html) - + if (html==null | html=='') + return; + let iFrameDoc = minimapContent.contentWindow.document; - var cssLink = document.createElement("link"); - cssLink.href = "https://unpkg.com/tachyons/css/tachyons.min.css"; - cssLink.rel = "stylesheet"; - cssLink.type = "text/css"; + var cssLinkb = document.createElement("link"); cssLinkb.href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"; @@ -264,20 +262,17 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { iFrameDoc.open(); iFrameDoc.write(html); iFrameDoc.close(); - iFrameDoc.head.appendChild(cssLink); + iFrameDoc.head.appendChild(cssLinkb); iFrameDoc.head.appendChild(cssLinkscroll); - + mappedElement=element + getDimensionsDiv() - if (document.getElementById(displayId).getAttribute('target')==null) - window.addEventListener('scroll', trackScroll) - /*else{ - //document.getElementById(displayId).addEventListener('scroll', trackScrollCanto) - - }*/ + window.addEventListener('scroll', trackScroll) - document.getElementById(displayId).addEventListener('resize', getDimensionsDiv) + + //document.getElementById(displayId).addEventListener('resize', getDimensionsDiv) window.addEventListener('resize', getDimensionsDiv) @@ -286,57 +281,25 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { function getDimensions(){ - - cantoplace=document.getElementById(displayId) - mmplace=document.getElementById('displayminimap') - isnick=mmplace=document.getElementById('apricerca') - let bodyWidth = document.body.clientWidth; + let bodyWidth= cantoplace.clientWidth; + let bodyRatio= bodyWidth/cantoplace.clientHeight + //let winRatio=cantoplace.clientWidth / getInnerHeight(cantoplace) + let winRatio= window.innerHeight / window.innerWidth; + + + minimap.style.width='55%'; + viewer.style.width='55%' + + 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)}%`; - let bodyRatio = document.body.clientHeight / bodyWidth; - let winRatio = window.innerHeight / window.innerWidth; - //test - - //if(cantoplace!=null & mmplace!=null){ - if(mmplace!=null){ - //winRatio = mmih / mmiw;//window.innerWidth; - //bodyRatio = mmih / mmiw;//mmplace.clientHeight/cantoplace.clientWidth; - } - viewer.style.width='50%' - /*if(mmplace!=null){ - //minimap.style.width = '75%'; - //viewer.style.width='45%' - } - else{ - minimap.style.width = '15%'; - viewer.style.width='25%' - }*/ - if(isnick!=null){ - minimap.style.width = '40%'; - viewer.style.width='15%' } - - //end test - - - - - realScale = minimap.clientWidth / mmih;//bodyWidth; - - console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale) - //realScale=scale - - 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 getInnerHeight( elm ){ var computed = getComputedStyle(elm), padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom); @@ -347,52 +310,32 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { cantoplace=document.getElementById(displayId) - mmplace=document.getElementById('displayminimap') - isnick=mmplace=document.getElementById('apricerca') - cpmaxh=cantoplace.style.maxHeight - cpmaxh=cpmaxh.replace('px','') - cpbw=cantoplace.style.width - let tebodyWidth = document.body.clientWidth; - let tebodyRatio = (document.body.clientHeight) / tebodyWidth; - let tewinRatio = window.innerHeight / window.innerWidth; + elementplace=document.getElementById(mappedElement) - let bodyWidth = mmiw; + bodyWidth= elementplace.clientWidth; + bodyRatio= elementplace.clientHeight / bodyWidth; + //let bodyWidth= cantoplace.clientWidth; + //let bodyRatio= cantoplace.clientHeight / bodyWidth; + //let winRatio= window.innerHeight / (window.innerWidth); + let winRatio= getInnerHeight(cantoplace) / (cantoplace.clientWidth); - let bodyRatio = parseInt(cpmaxh) / bodyWidth; - - elmih=getInnerHeight(cantoplace) - - let winRatio = elmih / (mmiw-32); - - minimap.style.width = '70%'; - viewer.style.width='40%' - - if(isnick!=null){ - //minimap.style.width = '90%'; - //viewer.style.width='20%' - } - - - - realScale = minimap.clientWidth / cpmaxh;//bodyWidth; - - console.log(' cw ' +minimap.clientWidth+" bw "+ bodyWidth +" br "+bodyRatio+ ' rs '+realScale) - //realScale=scale - - minimapSize.style.paddingTop = `${bodyRatio * 100}%` + + //minimap.style.width='15%'; + minimap.style.width='100%'; - console.log (minimapSize.style.paddingTop) - - viewer.style.paddingTop = `${(winRatio) * 50}%`; - - - //test - minimapContent.style.transform = `scale(${realScale})`; - minimapContent.style.width = `${(100 / realScale)}%` - minimapContent.style.height = `${(100 / realScale)}%` - + + 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)}%`; + //minimapContent.style.height=`100%`; + minimapContent.style.float='right'; + } function trackScroll(){ @@ -425,7 +368,112 @@ jQuery(document).delegate('#cleanresult', 'click', function(e) { //end minimap management - + //Cantica management functions + + function showCantica(cantica){ + var listaCanti = new Set() + //var listaVersi = new Set() + var listaVersi = [] + //var listaForme = new Set() + var listaForme =[] + containerForme=formeterza + if(cantica=='Inferno') + containerForme=formeprima + if(cantica=='Purgatorio') + containerForme=formeseconda + for (cmpItem of containerForme){ + formaItem=cmpItem[0].split("_") + listaCanti.add('Canto '+formaItem[1]) + var obj = new Object(); + var forma=new Object() + obj.numverso = formaItem[3]; + //obj.verso = binding.get('Verso').value; + obj.canto = 'Canto '+formaItem[1]; + obj.cantica = cantica; + listaVersi.push(obj) + forma.numverso = formaItem[3];; + forma.canto = 'Canto '+formaItem[1]; + forma.pos = formaItem[2]; + forma.form = formaItem[0]; + forma.cantica = cantica; + listaForme.push(forma) + } + renderData(cantica, listaCanti, listaVersi, listaForme); + return + } + function renderData(cantica, listaCanti, listaVersi, listaForme){ + var orderedListaCanti = Array.from(listaCanti) + //orderedListaCanti = orderedListaCanti.sort((a, b) => { + // return parseInt(a.split(" ")[1], 10)-parseInt(b.split(" ")[1], 10) + //}); + //var orderedListaVersi = Array.from(listaVersi) + //orderedListaVersi = orderedListaVersi.sort((a, b) => { + // return parseInt(a.numverso, 10)-parseInt(b.numverso, 10) + + //}); + + listaVersi = listaVersi.filter((value, index, self) => + index === self.findIndex((t) => ( + t.numverso === value.numverso && t.canto === value.canto && t.cantica===value.cantica + )) + ) + //var orderedListaForme = Array.from(listaForme) + //orderedListaForme = orderedListaForme.sort((a, b) => { + // return parseInt(a.pos, 10)-parseInt(b.pos, 10) + + //}); + + var divListaCanti = $('
') + for (canto of orderedListaCanti) { + //var licanto = $('