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;
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;
}

5
css/custom_4.css
View File

@ -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;

41
index_4.1.html
View File

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

34
js/cesareBrowse.js
View File

@ -59,7 +59,7 @@ $(document).ready(function() {
//$("#InfernoCanto_1").removeClass('hidecanto')
//$("#InfernoCanto_1").css("display", "block");
drawMinimap("InfernoCanto_1")
drawMinimap("#InfernoCanto_1")
const end = performance.now();
console.log(`Load cantiche time: ${end - start} ms`);
@ -116,7 +116,7 @@ function loadFrasi() {
$(this).css('color', colorssp(mapsynttypestopalette[stp]));
})
drawMinimap(cantoDisplayed.replace('#',''))
drawMinimap(cantoDisplayed)
}
function resetFrasi(){
@ -127,7 +127,7 @@ function resetFrasi(){
//console.log(colorssp(mapsynttypestopalette[stp]))
$(this).css('color', '');
})
drawMinimap(cantoDisplayed.replace('#',''))
drawMinimap(cantoDisplayed)
}
function loadDialoghi() {
var spanFrase = $('<span />')
@ -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 = $('<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.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()
}
});

66
js/minimap.js
View File

@ -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});
}