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

Minimap liste funzionante, nascosta scrollbar, altre mod minime

This commit is contained in:
Luca Trupiano 2023-03-10 13:04:38 +01:00
parent 1054780b42
commit 230ce596b7
6 changed files with 82 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/custom1_4.2.css
View File

@ -171,6 +171,17 @@ Minimap
border-style: none;
}
.filler {
width: 100%;
position: relative;
}
.filler img {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
/*
Ex browsingldc.css

11
css/custom2_4.2.css
View File

@ -171,6 +171,17 @@ Minimap
border-style: none;
}
.filler {
width: 100%;
position: relative;
}
.filler img {
position: absolute; top: 0; left: 0;
width: 100%;
height: 100%;
}
/*
Ex browsingldc.css

BIN
images/fefeff.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 B

15
index_4.2.html
View File

@ -427,6 +427,7 @@
<div id="colMinimap" class="d-table-cell bg-lida-vis minimap border-right border-bottom align-top">
<div id="displayminimap" class="col px-0 pb-0 m-0 w-100 scrollMon"></div>
<div class="filler"><img src="./images/fefeff.png"></div>
</div>
<div id="colRicerca" class="d-table-cell menuRicerca align-top">
@ -441,7 +442,7 @@
<div class="col-12 d-flex justify-content-end px-0"
id="simpleSearchDiv" style="display: d-flex">
<div class="btn-group flex-nowrap p-0" role="group"
<div class="btn-group flex-nowrap p-0 pr-1" role="group"
aria-label="Bottoni Ricerca Semplice">
<button class="btn btn-sm btn-outline-success bg-light"
style="height: 32px; width: 76px;"
@ -450,12 +451,12 @@
aria-controls="collapseExample">
<span class="text-muted">Opzioni</span>
</button>
<button class="btn btn-sm btn-outline-success bg-light ml-2"
<button class="btn btn-sm btn-outline-success bg-light ml-1"
type="button" id='cleanresult' aria-expanded="false"
aria-controls="collapseExample">
<span class="text-muted">Reset</span>
</button>
<div class="pr-0 align-self-end ml-2">
<div class="pr-0 align-self-end ml-1">
<input class="form-control-sm pr-0 borderRadiusZero border border-success monMe"
type="text" id="queryText"
placeholder=' inserisci un termine'
@ -480,7 +481,7 @@
name="cloud-upload-outline"></ion-icon> <ion-icon
name="cloud-download-outline"></ion-icon></span>
</div>
<div class="btn-group d-sm-inline flex-nowrap p-0" role="group"
<div class="btn-group d-sm-inline flex-nowrap p-0 pr-1" role="group"
aria-label="Bottoni Ricerca Avanzata">
<button class="btn btn-sm btn-outline-success bg-light"
style="height: 32px; width: 76px;"
@ -489,12 +490,12 @@
aria-controls="collapseLogic">
<span class="font-weight-bold text-muted">Nascondi</span>
</button>
<button class="btn btn-sm btn-outline-success bg-light ml-1"
<button class="btn btn-sm btn-outline-success bg-light ml-0"
type="button" id='cleanresult2' aria-expanded="false"
aria-controls="collapseExample">
<span class="text-muted">Reset</span>
</button>
<button class="btn btn-sm btn-success ml-1" type="submit"
<button class="btn btn-sm btn-success ml-0" type="submit"
id='searchcomm2'>
<ion-icon name="search"></ion-icon>
</button>
@ -953,7 +954,7 @@
id="tipoRicerca">Definisci i filtri modificando
le clausole e/o trascinandole nelle condizioni logiche:</span>
</div>
<div class="col-12 tab-pane fade show active p-1 pb-2"
<div class="col-12 tab-pane fade show active pt-1 px-2 pb-2"
id="cla0" role="tabpanel" aria-labelledby="cla0-tab">

58
js/minimap.js
View File

@ -7,8 +7,9 @@ const displayCantoWrapperId = '#displaycantoWrapper';
const minimapviewerId = '#minimapviewer';
const displayminimapId = '#displayminimap';
const visCantoClass = '.visCanto';
const tableMainHeight = 0.95; //.tableMain {height: 95%;}
const cantoHeight = 0.65;
const fillerClass = '.filler';
const cssTableMainHeight = 0.95; //.tableMain {height: 95%;}
const cssCantoHeight = 0.65;
const bodyScript = '<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>'
let minimap = document.createElement('div');
@ -17,22 +18,44 @@ let minimapContent = document.createElement('iframe');
let realScale;
let currentMinimap = '';
let initOffset = '';
let correctionFactor = 1;
let scrollCorrectionFactor = 1.003;
function drawMinimap(name){
var cantoHeightToSet = $("body")[0].clientHeight*cantoHeight;
var maxCantoHeightToSet = $("body")[0].clientHeight*tableMainHeight-110;
var cantoHeightToSet = $("body")[0].clientHeight*cssCantoHeight;
var maxCantoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight-110; // 63 padding top + 47 margine bottom
$(visCantoClass).css("max-height", maxCantoHeightToSet);
$(visCantoClass).css("height", cantoHeightToSet);
$(displayCantoId).css("max-height", maxCantoHeightToSet);
$(displayCantoId).css("height", cantoHeightToSet);
//var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
//$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
//$("#displayinfo").css("height", infoHeightToSet+"px");
//$(".visInfo").css("height", (infoHeightToSet+4)+"px");
currentMinimap = name;
if (currentMinimap == '#vistaFrasi') {
correctionFactor = 0.967;
scrollCorrectionFactor = 1.02;
} else {
correctionFactor = 1;
scrollCorrectionFactor = 1.003;
};
initOffset = parseInt($("body").css("padding-top").replace("px", ""))+63;
if ($(displayminimapId).lenght > 0) {
$(displayminimapId)[0].remove();
}
showMinimap();
//$(displayCantoId).scrollTop(0);
$(displayCantoWrapperId).scrollTop(0);
$(minimapviewerId).offset({ top: initOffset});
var minimapTopPos = $(minimapviewerId).offset().top;
$(minimapviewerId).draggable({
@ -43,7 +66,7 @@ function drawMinimap(name){
stop: function(event, ui) { minimapScrolling = false; },
drag: function(event, ui) {
minimapScrolling = true;
$(displayCantoWrapperId).scrollTop((ui.offset.top - minimapTopPos) / realScale);
$(displayCantoWrapperId).scrollTop((ui.offset.top - minimapTopPos) / (realScale*correctionFactor));
}
});
}
@ -85,7 +108,7 @@ function showMinimap() {
let bgCanto = $(visCantoClass).css('background-color');
$('iframe').contents().find('body').css('background-color', bgCanto + ' !important;');
var infoHeightToSet = $("body")[0].clientHeight*tableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
$("#displayinfo").css("height", infoHeightToSet+"px");
$(".visInfo").css("height", (infoHeightToSet+4)+"px");
@ -101,12 +124,12 @@ function showMinimap() {
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -1 bordo col, -4 bordi iframe
var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
var miniCantoWidth = srcCantoWidth+64; //h prevista del canto nella minimap 64: padding pr + blank space
var miniCantoHeight = srcCantoHeight; //h prevista del canto nella minimap 16x2: padding py
var miniCantoWidth = srcCantoWidth+64; //w prevista del canto nella minimap 64: padding pr + blank space
var miniCantoHeight = srcCantoHeight*correctionFactor; //h prevista del canto nella minimap
var resizableWidth = $(visCantoClass)[0].clientWidth;
var resizableHeight = $(visCantoClass)[0].clientHeight;
var resizableRatio = resizableHeight/resizableWidth;
var widthRatio = resizableWidth/srcCantoWidth;
//var widthRatio = resizableWidth/srcCantoWidth;
var heightRatio = resizableHeight/srcCantoHeight;
if (onlyViewer == false) {
@ -116,27 +139,28 @@ function showMinimap() {
minimapContent.style.width = maxWidth/realScale + "px";
}
let viewerHeight = (miniCantoHeight*realScale*heightRatio)-2; // -2 = bordi
let viewerHeight = (miniCantoHeight*realScale*heightRatio/correctionFactor)-2; // -2 = bordi
let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi
viewer.style.height = viewerHeight + "px";
viewer.style.width = viewerWidth + "px";
$(displayminimapId).height((miniCantoHeight*realScale)+6);
var displayminimapHeight = (miniCantoHeight*realScale)+6;
$(displayminimapId).height(displayminimapHeight);
$(fillerClass).height(Math.max(maxHeight-displayminimapHeight)+2, 0);
trackScrollCanto();
};
function trackScrollCanto() {
//var minimapHeight = $(displayminimapId)[0].clientHeight;
var minimapHeight = ($(currentMinimap)[0].clientHeight+32)*realScale;
//var posDbefore = $(displayCantoId).scrollTop();
var posDbefore = $(displayCantoWrapperId).scrollTop();
//console.log(posDbefore);
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.005);
//var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.088);
//var posAfter = (minimapHeight*posDbefore*correctionFactor)/(srcCantoHeight*1.003);
var posAfter = (minimapHeight*posDbefore*correctionFactor)/(srcCantoHeight*scrollCorrectionFactor);
//var posAfter = (minimapHeight*posDbefore*correctionFactor)/(srcCantoHeight*1.02);
$(minimapviewerId).offset({ top: initOffset + posAfter});
}

54
js/script_4.2.js
View File

@ -6,7 +6,17 @@ var getJsonQuery;
var currStyle = "style1";
$(document).ready(function() {
window.addEventListener("resize", function() {
clearTimeout(this.id);
this.id = setTimeout(doneResizing, 300);
}, true);
function doneResizing(){
$("#displayminimap").empty();;
drawMinimap(currentMinimap);
}
// Evento: click sul cambio stile
$('.stileLink').on('click', function() {
var newStyle = $(this)[0].id;
@ -155,7 +165,7 @@ $(document).ready(function() {
resize: function(event, ui) {
$("#displaycanto").width(" min-content");
var infoHeightToSet = $("body")[0].clientHeight*tableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2
$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
$("#displayinfo").css("height", infoHeightToSet+"px");
$(".visInfo").css("height", (infoHeightToSet+4)+"px");
@ -546,54 +556,12 @@ $(document).ready(function() {
const jsonReplacer = (key, value) =>
typeof value === 'undefined' ? 0 : value;
//const cantoHeight = 0.65;
// Fine variabili
//var cantoHeightToSet = $("body")[0].clientHeight*cantoHeight;
//$(".visCanto").css("max-height", cantoHeightToSet);
//$("#displaycanto").css("max-height", cantoHeightToSet);
//$(".visCanto").css("height", cantoHeightToSet);
//$("#displaycanto").css("height", cantoHeightToSet);
//$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
var elem = document.getElementsByClassName('scrollMon');
// $(".scrollMon").each(function(){
// $(this).bind("mousewheel", doScroll, false);
//console.log($(this));
// });
//if ($(".scrollMon").addEventListener) {
//$(".scrollMon").bind("wheel", doScroll, false);
//$(".scrollMon").addEventListener("mousewheel", doScroll, false);
//$(".scrollMon").addEventListener("DOMMouseScroll", doScroll, false);
//} else {
//$(".scrollMon").attachEvent("onmousewheel", doScroll);
//}
getJsonQuery = function(){
return queryJson;
};
function doScroll(e){
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
console.log(" "+delta);
///var scrolltop = elem.scrollTop;
// scrollTop property takes positive values when you scroll down and our delta variable behaves otherwise, so the equation will be:
///elem.scrollTop = scrolltop - delta * mean;
// set top position for the scrollbar thumb
///thumb.style.top = (elem.scrollTop / cntHeight * trcHeight) + 'px';
//e.preventDefault();
};
// Funzione di creazione del tab delle clausole grammaticali
function addGramCla(sortableId,active,tabID,toExpand){