diff --git a/css/browsingldc.css b/css/browsingldc.css index 1ae1b48..9a891e4 100644 --- a/css/browsingldc.css +++ b/css/browsingldc.css @@ -77,14 +77,15 @@ Minimap top: 2px; - left: 0; + left: 1px; transform-origin: 0 0; z-index: 100; - /*border: 1px solid #0000009a; */ - border: 1px solid blue; + /*border: 1px solid #0000009a; + border: 1px solid blue; */ + border: 1px solid #007bff; } diff --git a/css/custom_4.css b/css/custom_4.css index 0fc22dc..3d67714 100644 --- a/css/custom_4.css +++ b/css/custom_4.css @@ -64,6 +64,11 @@ body { border: 1px solid #3da5f4; } +.lista-risultati:hover { + font-weight: 900; + cursor: pointer; +} + .navig-canto:hover { font-weight: 800; color: #007bff !important; diff --git a/index_4.1.html b/index_4.1.html index 2b4c088..c3088b5 100644 --- a/index_4.1.html +++ b/index_4.1.html @@ -117,11 +117,18 @@
-
+
- +
+
+ +
+
+
+
@@ -202,9 +209,16 @@
- +
+
+ +
+
+
+
- +
+
+ +
+
+
+
') @@ -218,20 +218,16 @@ $(" ."+formaClass).hover(function(idx, element) { $("#" + displayId).scroll(function() { if (minimapScrolling) { minimapScrolling = false - console.log('no scroll') } else { - console.log('yes scrolling') - console.log("viewer top pos before: " + $('#minimapviewer').offset().top) trackScrollCanto() - console.log("viewer top pos after: " + $('#minimapviewer').offset().top) } }); jQuery(document).delegate(' .lista-risultati', 'click', function(e) { - var cantica=$(this).siblings(' .btn-link')[0]; - var canticaid=$(cantica).attr('id') - console.log('fava lista risultati '+canticaid) + //var cantica=$(this).siblings(' .btn-link')[0]; + var canticaid=$(this).parent()[0].id.substr(0,8); + console.log('fava lista risultati '+canticaid); }); jQuery(document).delegate('.navig-canto', 'click', function(e) { @@ -257,7 +253,7 @@ $(" ."+formaClass).hover(function(idx, element) { } //$("#" + $(this).attr('name').replace(" ", "_")).css("display", "block"); $("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display: d-flex;') - manageMiniMap(this); + drawMinimap("#" + $(this).attr('name').replace(" ", "_")) $(" ."+formaClass).each(function(idx, element) { var ele = $(element); ele.tooltip({ @@ -282,12 +278,6 @@ $(" ."+formaClass).hover(function(idx, element) { }); - function manageMiniMap(divElem) { - mmiw = $("#" + displayId).innerWidth(); - mmih = $("#" + displayId).innerHeight(); - drawMinimap($(divElem).attr('name').replace(" ", "_")) - } - //Query jQuery(document).delegate('#searchcomm, #searchcomm2', 'click', function(e) { @@ -401,7 +391,7 @@ $(" ."+formaClass).hover(function(idx, element) { listaPeriodiRisultato=[] resultSentences=new Set() if (currentMinimap != '') - showMinimap(currentMinimap) + showMinimap() } var unitaRicerca='forma' @@ -744,10 +734,10 @@ $(" ."+formaClass).hover(function(idx, element) { let count = resultsInCantica.reduce((n, x) => n + (x === cantica), 0); if (count>0){ var spanbadgecantica = $(''); - spanbadgecantica.attr('class', 'badge badge-primary badge-pill ml-1 lista-risultati'); + spanbadgecantica.attr('class', 'badge badge-primary badge-pill mx-2 lista-risultati'); spanbadgecantica.append(count +' >') - //spanbadgecantica.appendTo($('#cantica' + i)) - $('#cantica' + i).after(spanbadgecantica) + spanbadgecantica.appendTo($('#cantica' + i + '-badge')) + //$('#cantica' + i).after(spanbadgecantica) } } //aggiunge badge con totale risultati accanto ai canti @@ -776,7 +766,7 @@ $(" ."+formaClass).hover(function(idx, element) { //aggiorna minimap if (currentMinimap != '') { - showMinimap(currentMinimap) + showMinimap() } }); diff --git a/js/minimap.js b/js/minimap.js index cc912a6..9633e7d 100644 --- a/js/minimap.js +++ b/js/minimap.js @@ -2,24 +2,26 @@ * */ -const displayCantoId = '#displaycanto' -const minimapviewerId = '#minimapviewer' -const displayminimapId = '#displayminimap' -const initOffset = 63; +const displayCantoId = '#displaycanto'; +const minimapviewerId = '#minimapviewer'; +const displayminimapId = '#displayminimap'; +const visCantoClass = '.visCanto'; let minimap = document.createElement('div'); let viewer = document.createElement('div'); let minimapContent = document.createElement('iframe'); let realScale; -let mappedElement = ''; +let currentMinimap = ''; +let initOffset = ''; function drawMinimap(name){ - showMinimap(name) currentMinimap = name; + initOffset = parseInt($("body").css("padding-top").replace("px", "")); + showMinimap(); $(displayCantoId).scrollTop(0); - $(minimapviewerId).offset({ top: 63}); - var minimapTopPos = $(minimapviewerId).offset().top + $(minimapviewerId).offset({ top: initOffset}); + var minimapTopPos = $(minimapviewerId).offset().top; $(minimapviewerId).draggable({ axis: "y", @@ -35,14 +37,15 @@ function drawMinimap(name){ } -function showMinimap(element) { - viewer.className = 'minimap__viewer' - viewer.id = 'minimapviewer' - minimapContent.className = 'minimap__content' - minimap.append(viewer, minimapContent); - $(displayminimapId).append(minimap) +function showMinimap() { - let html = document.getElementById(element).outerHTML + viewer.className = 'minimap__viewer'; + viewer.id = 'minimapviewer'; + minimapContent.className = 'minimap__content'; + minimap.append(viewer, minimapContent); + $(displayminimapId).append(minimap); + + let html = $(currentMinimap)[0].outerHTML; if (html == null | html == '') return; @@ -69,40 +72,37 @@ function showMinimap(element) { $('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;'); - mappedElement = element; - getDimensionsDiv(); - window.addEventListener('resize', getDimensionsDiv) + window.addEventListener('resize', getDimensionsDiv); } function getDimensionsDiv() { - var elementplace = document.getElementById(mappedElement); + var srcCantoHeight = $(currentMinimap)[0].clientHeight; + var maxHeight = ($(displayminimapId)[0].clientHeight)-4; //h attuale dello spazio minimap -4 padding + var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css) -2 bordi + var miniCantoHeight = Math.ceil(((srcCantoHeight-44)/25*26)+44+32); //h prevista del canto nella minimap - var maxHeight = ($(displayminimapId)[0].clientHeight)-4; //h attuale dello spazio minimap - var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css) - var cantoHeight = Math.ceil(((elementplace.clientHeight-44)/25*26)+44+32); //h prevista del canto nella minimap - - var resizableWidth = $(".visCanto")[0].clientWidth; - var resizableHeight = $(".visCanto")[0].clientHeight; + var resizableWidth = $(visCantoClass)[0].clientWidth; + var resizableHeight = $(visCantoClass)[0].clientHeight; var resizableRatio = resizableHeight / resizableWidth; - var resizableHeightRatio = resizableHeight/elementplace.clientHeight; + var resizableHeightRatio = resizableHeight/srcCantoHeight; let viewerHeight = (maxHeight*resizableHeightRatio)-2; // -2 = bordi - let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth); + let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); - realScale = (maxHeight/cantoHeight); + realScale = (maxHeight/miniCantoHeight); minimap.style.width = '100%'; minimapContent.style.transform = `scale(${realScale})`; - minimapContent.style.height = Math.trunc(cantoHeight+25) + "px" + minimapContent.style.height = Math.trunc(miniCantoHeight+25) + "px"; minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px"; - viewer.style.height = viewerHeight + `px`; - viewer.style.width = viewerWidth + `px`; + viewer.style.height = viewerHeight + "px"; + viewer.style.width = viewerWidth + "px"; trackScrollCanto(); }; @@ -114,10 +114,10 @@ function showMinimap(element) { function trackScrollCanto() { - var cantoHeight = document.getElementById(mappedElement).clientHeight; var minimapHeight = $(displayminimapId)[0].clientHeight; var posDbefore = $(displayCantoId).scrollTop(); - var posAfter = minimapHeight/((cantoHeight/posDbefore)*1.014); + var srcCantoHeight = $(currentMinimap)[0].clientHeight; + var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.014); $(minimapviewerId).offset({ top: initOffset + posAfter}); }