concordia
/
LiDa_Search
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Aggiunti bottoni lista risultati e modifiche alla minimap

This commit is contained in:
Luca Trupiano 2023-02-09 19:21:04 +01:00
parent fa9aecd1e2
commit 2d9246f837
5 changed files with 85 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/browsingldc.css
View File

@ -77,14 +77,15 @@ Minimap
top: 2px; top: 2px;
left: 0; left: 1px;
transform-origin: 0 0; transform-origin: 0 0;
z-index: 100; z-index: 100;
/*border: 1px solid #0000009a; */ /*border: 1px solid #0000009a;
border: 1px solid blue; border: 1px solid blue; */
border: 1px solid #007bff;
} }

5
css/custom_4.css
View File

@ -64,6 +64,11 @@ body {
border: 1px solid #3da5f4; border: 1px solid #3da5f4;
} }
.lista-risultati:hover {
font-weight: 900;
cursor: pointer;
}
.navig-canto:hover { .navig-canto:hover {
font-weight: 800; font-weight: 800;
color: #007bff !important; color: #007bff !important;

41
index_4.1.html
View File

@ -117,11 +117,18 @@
<div id="accordionNav" class="sticky-top pr-2"> <div id="accordionNav" class="sticky-top pr-2">
<div class="card"> <div class="card">
<div class="card-header px-1 pt-3" id="headingOne"> <div class="card-header px-1" id="headingOne">
<h6 class="mb-0"> <h6 class="mb-0">
<button class="btn btn-sm btn-link" id="cantica1" <div class="row no-gutters justify-content-between">
data-toggle="collapse" data-target="#collapseOne" <div class="col-auto flex-fill align-self-center text-muted">
aria-expanded="true" aria-controls="collapseOne">Inferno</button> <button class="btn btn-sm btn-link" id="cantica1"
data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">Inferno</button>
</div>
<div id="cantica1-badge"
class="col-auto align-self-center justify-content-end text-right">
</div>
</div>
</h6> </h6>
</div> </div>
@ -202,9 +209,16 @@
<div class="card"> <div class="card">
<div class="card-header px-1" id="headingTwo"> <div class="card-header px-1" id="headingTwo">
<h6 class="mb-0"> <h6 class="mb-0">
<button class="btn btn-sm btn-link collapsed" id="cantica2" <div class="row no-gutters justify-content-between">
data-toggle="collapse" data-target="#collapseTwo" <div class="col-auto flex-fill align-self-center text-muted">
aria-expanded="false" aria-controls="collapseTwo">Purgatorio</button> <button class="btn btn-sm btn-link" id="cantica2"
data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">Purgatorio</button>
</div>
<div id="cantica2-badge"
class="col-auto align-self-center justify-content-end text-right">
</div>
</div>
</h6> </h6>
</div> </div>
<div id="collapseTwo" class="collapse" <div id="collapseTwo" class="collapse"
@ -282,9 +296,16 @@
<div class="card"> <div class="card">
<div class="card-header px-1" id="headingThree"> <div class="card-header px-1" id="headingThree">
<h6 class="mb-0"> <h6 class="mb-0">
<button class="btn btn-sm btn-link collapsed" id="cantica3" <div class="row no-gutters justify-content-between">
data-toggle="collapse" data-target="#collapseThree" <div class="col-auto flex-fill align-self-center text-muted">
aria-expanded="false" aria-controls="collapseThree">Paradiso</button> <button class="btn btn-sm btn-link" id="cantica3"
data-toggle="collapse" data-target="#collapseThree"
aria-expanded="true" aria-controls="collapseThree">Paradiso</button>
</div>
<div id="cantica3-badge"
class="col-auto align-self-center justify-content-end text-right">
</div>
</div>
</h6> </h6>
</div> </div>
<div id="collapseThree" class="collapse" <div id="collapseThree" class="collapse"

34
js/cesareBrowse.js
View File

@ -59,7 +59,7 @@ $(document).ready(function() {
//$("#InfernoCanto_1").removeClass('hidecanto') //$("#InfernoCanto_1").removeClass('hidecanto')
//$("#InfernoCanto_1").css("display", "block"); //$("#InfernoCanto_1").css("display", "block");
drawMinimap("InfernoCanto_1") drawMinimap("#InfernoCanto_1")
const end = performance.now(); const end = performance.now();
console.log(`Load cantiche time: ${end - start} ms`); console.log(`Load cantiche time: ${end - start} ms`);
@ -116,7 +116,7 @@ function loadFrasi() {
$(this).css('color', colorssp(mapsynttypestopalette[stp])); $(this).css('color', colorssp(mapsynttypestopalette[stp]));
}) })
drawMinimap(cantoDisplayed.replace('#','')) drawMinimap(cantoDisplayed)
} }
function resetFrasi(){ function resetFrasi(){
@ -127,7 +127,7 @@ function resetFrasi(){
//console.log(colorssp(mapsynttypestopalette[stp])) //console.log(colorssp(mapsynttypestopalette[stp]))
$(this).css('color', ''); $(this).css('color', '');
}) })
drawMinimap(cantoDisplayed.replace('#','')) drawMinimap(cantoDisplayed)
} }
function loadDialoghi() { function loadDialoghi() {
var spanFrase = $('<span />') var spanFrase = $('<span />')
@ -218,20 +218,16 @@ $(" ."+formaClass).hover(function(idx, element) {
$("#" + displayId).scroll(function() { $("#" + displayId).scroll(function() {
if (minimapScrolling) { if (minimapScrolling) {
minimapScrolling = false minimapScrolling = false
console.log('no scroll')
} }
else { else {
console.log('yes scrolling')
console.log("viewer top pos before: " + $('#minimapviewer').offset().top)
trackScrollCanto() trackScrollCanto()
console.log("viewer top pos after: " + $('#minimapviewer').offset().top)
} }
}); });
jQuery(document).delegate(' .lista-risultati', 'click', function(e) { jQuery(document).delegate(' .lista-risultati', 'click', function(e) {
var cantica=$(this).siblings(' .btn-link')[0]; //var cantica=$(this).siblings(' .btn-link')[0];
var canticaid=$(cantica).attr('id') var canticaid=$(this).parent()[0].id.substr(0,8);
console.log('fava lista risultati '+canticaid) console.log('fava lista risultati '+canticaid);
}); });
jQuery(document).delegate('.navig-canto', 'click', function(e) { 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(" ", "_")).css("display", "block");
$("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display: d-flex;') $("#" + $(this).attr('name').replace(" ", "_")).attr('style', 'display: d-flex;')
manageMiniMap(this); drawMinimap("#" + $(this).attr('name').replace(" ", "_"))
$(" ."+formaClass).each(function(idx, element) { $(" ."+formaClass).each(function(idx, element) {
var ele = $(element); var ele = $(element);
ele.tooltip({ 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 //Query
jQuery(document).delegate('#searchcomm, #searchcomm2', 'click', function(e) { jQuery(document).delegate('#searchcomm, #searchcomm2', 'click', function(e) {
@ -401,7 +391,7 @@ $(" ."+formaClass).hover(function(idx, element) {
listaPeriodiRisultato=[] listaPeriodiRisultato=[]
resultSentences=new Set() resultSentences=new Set()
if (currentMinimap != '') if (currentMinimap != '')
showMinimap(currentMinimap) showMinimap()
} }
var unitaRicerca='forma' var unitaRicerca='forma'
@ -744,10 +734,10 @@ $(" ."+formaClass).hover(function(idx, element) {
let count = resultsInCantica.reduce((n, x) => n + (x === cantica), 0); let count = resultsInCantica.reduce((n, x) => n + (x === cantica), 0);
if (count>0){ if (count>0){
var spanbadgecantica = $('<span />'); var spanbadgecantica = $('<span />');
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.append(count +' >')
//spanbadgecantica.appendTo($('#cantica' + i)) spanbadgecantica.appendTo($('#cantica' + i + '-badge'))
$('#cantica' + i).after(spanbadgecantica) //$('#cantica' + i).after(spanbadgecantica)
} }
} }
//aggiunge badge con totale risultati accanto ai canti //aggiunge badge con totale risultati accanto ai canti
@ -776,7 +766,7 @@ $(" ."+formaClass).hover(function(idx, element) {
//aggiorna minimap //aggiorna minimap
if (currentMinimap != '') { if (currentMinimap != '') {
showMinimap(currentMinimap) showMinimap()
} }
}); });

66
js/minimap.js
View File

@ -2,24 +2,26 @@
* *
*/ */
const displayCantoId = '#displaycanto' const displayCantoId = '#displaycanto';
const minimapviewerId = '#minimapviewer' const minimapviewerId = '#minimapviewer';
const displayminimapId = '#displayminimap' const displayminimapId = '#displayminimap';
const initOffset = 63; const visCantoClass = '.visCanto';
let minimap = document.createElement('div'); let minimap = document.createElement('div');
let viewer = document.createElement('div'); let viewer = document.createElement('div');
let minimapContent = document.createElement('iframe'); let minimapContent = document.createElement('iframe');
let realScale; let realScale;
let mappedElement = ''; let currentMinimap = '';
let initOffset = '';
function drawMinimap(name){ function drawMinimap(name){
showMinimap(name)
currentMinimap = name; currentMinimap = name;
initOffset = parseInt($("body").css("padding-top").replace("px", ""));
showMinimap();
$(displayCantoId).scrollTop(0); $(displayCantoId).scrollTop(0);
$(minimapviewerId).offset({ top: 63}); $(minimapviewerId).offset({ top: initOffset});
var minimapTopPos = $(minimapviewerId).offset().top var minimapTopPos = $(minimapviewerId).offset().top;
$(minimapviewerId).draggable({ $(minimapviewerId).draggable({
axis: "y", axis: "y",
@ -35,14 +37,15 @@ function drawMinimap(name){
} }
function showMinimap(element) { function showMinimap() {
viewer.className = 'minimap__viewer'
viewer.id = 'minimapviewer'
minimapContent.className = 'minimap__content'
minimap.append(viewer, minimapContent);
$(displayminimapId).append(minimap)
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 == '') if (html == null | html == '')
return; return;
@ -69,40 +72,37 @@ function showMinimap(element) {
$('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;'); $('iframe').contents().find('body').css('backgroundColor', '#f8f9fa;');
mappedElement = element;
getDimensionsDiv(); getDimensionsDiv();
window.addEventListener('resize', getDimensionsDiv) window.addEventListener('resize', getDimensionsDiv);
} }
function 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 resizableWidth = $(visCantoClass)[0].clientWidth;
var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css) var resizableHeight = $(visCantoClass)[0].clientHeight;
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 resizableRatio = resizableHeight / resizableWidth; var resizableRatio = resizableHeight / resizableWidth;
var resizableHeightRatio = resizableHeight/elementplace.clientHeight; var resizableHeightRatio = resizableHeight/srcCantoHeight;
let viewerHeight = (maxHeight*resizableHeightRatio)-2; // -2 = bordi 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%'; minimap.style.width = '100%';
minimapContent.style.transform = `scale(${realScale})`; 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"; minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
viewer.style.height = viewerHeight + `px`; viewer.style.height = viewerHeight + "px";
viewer.style.width = viewerWidth + `px`; viewer.style.width = viewerWidth + "px";
trackScrollCanto(); trackScrollCanto();
}; };
@ -114,10 +114,10 @@ function showMinimap(element) {
function trackScrollCanto() { function trackScrollCanto() {
var cantoHeight = document.getElementById(mappedElement).clientHeight;
var minimapHeight = $(displayminimapId)[0].clientHeight; var minimapHeight = $(displayminimapId)[0].clientHeight;
var posDbefore = $(displayCantoId).scrollTop(); 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}); $(minimapviewerId).offset({ top: initOffset + posAfter});
} }