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

Modifiche a minimap, visualizzazione, bottoni ricerca

This commit is contained in:
Luca Trupiano 2023-02-22 18:36:28 +01:00
parent 4c2133c720
commit e351dfa004
5 changed files with 205 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
css/custom1_4.2.css
View File

@ -18,21 +18,40 @@ body {
font-family: 'Humanist-777', 'Roboto';
}
.tableMain {
height: 950px;
min-height: 600px;
}
.distanziatore {
height: 63px;
overflow:hidden;
}
.menuNavigazione {
width: 15%;
}
#displayinfo {
min-height: 300px !important;
overflow: scroll !important;
#colVisualizza {
min-height: 600px;
}
#colVisualizza {
min-height: 700px;
.tableVis {
border-left-width: 2px !important;
border-bottom-width: 2px !important;
}
#colMinimap {
padding-top: 63px;
min-height: 600px;
min-width: 110px !important;
width: 110px !important;
border-right-width: 2px !important;
border-bottom-width: 2px !important;
}
.minimap {
width: 110px;
width: 108px;
min-height: 700px;
}
@ -44,16 +63,21 @@ body {
height: 500px;
}
.visInfo {
height: 200px;
}
#displaycanto {
display: d-flex;
height: 450px;
height: 500px;
overflow-y: scroll;
}
.visInfo2 {
height: 300px !important;
padding-top: 4px;
}
#displayinfo {
overflow: auto !important;
}
.doubleborder {
z-index: 90;
border-bottom-width: 8px !important;
@ -69,6 +93,15 @@ body {
border: 1px solid;
}
.borderRadiusZero {
border-radius: 0 !important;
}
.leftBorderRadiusZero {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.lista-risultati:hover {
font-weight: 900;
cursor: pointer;
@ -101,12 +134,6 @@ body {
padding: 0;
}
.selCantiXX {
border:6px solid #f8f9fa;
border-collapse:collapse;
padding:0px;
}
#queryText {
width: 150px;
border-width: 2px !important;
@ -137,7 +164,7 @@ Minimap
left: 1px;
transform-origin: 0 0;
z-index: 100;
border: 1px solid;
border: 2px solid;
}
.minimap__content {

66
css/custom2_4.2.css
View File

@ -18,21 +18,40 @@ body {
font-family: 'Humanist-777', 'Roboto';
}
.tableMain {
height: 950px;
min-height: 600px;
}
.distanziatore {
height: 63px;
overflow:hidden;
}
.menuNavigazione {
width: 15%;
}
#displayinfo {
min-height: 300px !important;
overflow: scroll !important;
#colVisualizza {
min-height: 600px;
}
#colVisualizza {
min-height: 700px;
.tableVis {
border-left-width: 2px !important;
border-bottom-width: 2px !important;
}
#colMinimap {
padding-top: 63px;
min-height: 600px;
min-width: 110px !important;
width: 110px !important;
border-right-width: 2px !important;
border-bottom-width: 2px !important;
}
.minimap {
width: 110px;
width: 108px;
min-height: 700px;
}
@ -44,16 +63,22 @@ body {
height: 500px;
}
.visInfo {
height: 200px;
}
#displaycanto {
display: d-flex;
height: 450px;
height: 500px;
overflow-y: scroll;
}
.visInfo {
height: 300px !important;
padding-top: 4px;
}
#displayinfo {
min-height: 296px !important;
overflow: auto !important;
}
.doubleborder {
z-index: 90;
border-bottom-width: 8px !important;
@ -66,7 +91,16 @@ body {
margin-right: .2rem;
font-weight: 300;
vertical-align: super;
border: 1px solid;
border: 1px solid;
}
.borderRadiusZero {
border-radius: 0 !important;
}
.leftBorderRadiusZero {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.lista-risultati:hover {
@ -101,12 +135,6 @@ body {
padding: 0;
}
.selCantiXX {
border:6px solid #f8f9fa;
border-collapse:collapse;
padding:0px;
}
#queryText {
width: 150px;
border-width: 2px !important;
@ -137,7 +165,7 @@ Minimap
left: 1px;
transform-origin: 0 0;
z-index: 100;
border: 1px solid;
border: 2px solid;
}
.minimap__content {

86
index_4.2.html
View File

@ -79,14 +79,14 @@
</ul>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item pt-1">
<div class="input-group input-group-sm pr-2" style="height: 32px; max-width: 180px;">
<div class="input-group input-group-sm pr-2" style="height: 31px; max-width: 180px;">
<div class="input-group-prepend">
<label class="input-group-text border-right-0 pr-0"><ion-icon
<label class="input-group-text border-right-0 border-secondary pr-0"><ion-icon
name="glasses"></ion-icon></label> <label
class="input-group-text text-muted border-left-0 "
class="input-group-text text-muted border-secondary border-left-0 "
for="valoreVista">Vista:</label>
</div>
<select class="custom-select text-muted bg-light border"
<select class="custom-select text-muted bg-light border border-secondary"
id="valoreVista">
<option value="forme">Forme</option>
<option value="frasi">Frasi</option>
@ -98,14 +98,14 @@
<li class="nav-item pt-1">
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<label class="input-group-text border-right-0 pr-0"><ion-icon
<label class="input-group-text border-right-0 border-secondary pr-0"><ion-icon
name="search-circle"></ion-icon></label> <label
class="input-group-text text-muted border-left-0"
class="input-group-text text-muted border-left-0 border-secondary"
for="tipoRicerca">Ricerca:</label>
</div>
<input id="searchToggle" type="checkbox" data-toggle="toggle0"
data-on="Avanzata" data-off="Semplice" data-size="small"
data-style="font-size: 80%!important;" data-onstyle="success"
data-style="leftBorderRadiusZero" data-onstyle="success border-secondary"
data-offstyle="secondary">
</div>
</li>
@ -118,11 +118,11 @@
<div id="rigaContenuti" class="row no-gutters">
<div class="d-table h-100 w-100">
<div class="d-table w-100 tableMain">
<div id="colNavigazione" class="d-table-cell menuNavigazione">
<div id="accordionNav" class="pr-2 sticky-top">
<div style="height: 63px; overflow:hidden;">&nbsp;</div>
<div class="distanziatore">&nbsp;</div>
<div class="card">
<div class="card-header px-1" id="headingOne">
<h6 class="mb-0">
@ -405,31 +405,31 @@
</div>
<div id="colVisualizza" class="d-table-cell bg-lida-vis border-left border-bottom align-top">
<div id="colVisualizza" class="d-table-cell tableVis bg-lida-vis border-right border-bottom border-left align-top">
<div style="height: 63px; overflow:hidden;">&nbsp;</div>
<div class="d-table h-75 w-100">
<div class="d-table-row">
<div class="distanziatore">&nbsp;</div>
<div class="d-table w-100">
<div class="d-table-row scrollMon">
<div class="blog-main visCanto h-100">
<div id='displaycanto' class="py-3 pl-3 " style="width: min-content;"></div>
<div id='displaycanto' class="py-3 pl-3" style="width: min-content;"></div>
<div class="ui-resizable-handle ui-resizable-s border-bottom doubleborder"></div>
</div>
</div>
<div class="d-table-row h-100 w-100">
<div class="visInfo w-100 h-100" style="padding-top: 6px;">
<div id='displayinfo' class="w-100 border pt-3 pl-3" style="display: d-flex;">Visualizza info <br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<div class="d-table-row w-100">
<div class="visInfo w-100">
<div id='displayinfo' class="w-100 h-100 border-bottom border-danger pt-3 pl-3" style="display: d-flex;">Visualizza info <br><br><br><br><br></div>
</div>
</div>
</div>
</div>
<div id="colMinimap" class="d-table-cell bg-lida-vis minimap border-right border-bottom align-top">
<div id="displayminimap" style="padding-top: 63px;" class="col px-0 pb-0 m-0 w-100 h-100"></div>
<div id="displayminimap" class="col px-0 pb-0 m-0 w-100 border-bottom border-danger scrollMon"></div>
</div>
<div id="colRicerca" class="d-table-cell menuRicerca align-top">
<div style="height: 63px; overflow:hidden;">&nbsp;</div>
<div class="distanziatore">&nbsp;</div>
<div class="w-100 pl-2 py-0 m-0">
<form>
@ -441,21 +441,6 @@
id="simpleSearchDiv" style="display: d-flex">
<div class="btn-group flex-nowrap p-0" role="group"
aria-label="Bottoni Ricerca Semplice">
<div class="pr-0 align-self-end">
<input class="form-control-sm pr-0 border border-success monMe"
type="text" id="queryText"
placeholder=' inserisci un termine'
style="height: 32px;">
</div>
<button class="btn btn-sm btn-success mr-2" type="submit"
id='searchcomm'>
<ion-icon name="search"></ion-icon>
</button>
<button class="btn btn-sm btn-outline-success bg-light mr-2"
type="button" id='cleanresult' aria-expanded="false"
aria-controls="collapseExample">
<span class="text-muted">Reset</span>
</button>
<button class="btn btn-sm btn-outline-success bg-light"
style="height: 32px; width: 76px;"
type="button" id="showOptions" data-toggle="collapse"
@ -463,6 +448,21 @@
aria-controls="collapseExample">
<span class="text-muted">Opzioni</span>
</button>
<button class="btn btn-sm btn-outline-success bg-light ml-2"
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">
<input class="form-control-sm pr-0 borderRadiusZero border border-success monMe"
type="text" id="queryText"
placeholder=' inserisci un termine'
style="height: 32px;">
</div>
<button class="btn btn-sm btn-success" type="submit"
id='searchcomm'>
<ion-icon name="search"></ion-icon>
</button>
</div>
</div>
@ -479,15 +479,6 @@
</div>
<div class="btn-group d-sm-inline flex-nowrap p-0" role="group"
aria-label="Bottoni Ricerca Avanzata">
<button class="btn btn-sm btn-success mr-1" type="submit"
id='searchcomm2'>
<ion-icon name="search"></ion-icon>
</button>
<button class="btn btn-sm btn-outline-success bg-light mr-1"
type="button" id='cleanresult2' aria-expanded="false"
aria-controls="collapseExample">
<span class="text-muted">Reset</span>
</button>
<button class="btn btn-sm btn-outline-success bg-light"
style="height: 32px; width: 76px;"
id="showLogic" data-toggle="collapse"
@ -495,6 +486,15 @@
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"
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"
id='searchcomm2'>
<ion-icon name="search"></ion-icon>
</button>
</div>
</div>

60
js/minimap.js
View File

@ -26,6 +26,7 @@ function drawMinimap(name){
$(minimapviewerId).draggable({
axis: "y",
containment: $(displayminimapId),
//containment: $(".minimap__content"),
scroll: false,
start: function(event, ui) { minimapScrolling = true; },
stop: function(event, ui) { minimapScrolling = false; },
@ -38,7 +39,6 @@ function drawMinimap(name){
function showMinimap() {
viewer.className = 'minimap__viewer';
viewer.id = 'minimapviewer';
minimapContent.className = 'minimap__content';
@ -79,57 +79,59 @@ function showMinimap() {
}
function getDimensionsDiv() {
function getDimensionsDiv(onlyViewer = false) {
var srcCantoWidth = $(currentMinimap)[0].clientWidth;
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
//var maxHeight = ($(displayminimapId)[0].clientHeight)-4-63; //h attuale dello spazio minimap -4 padding -63 top padding
var maxHeight = ($(displayminimapId)[0].clientHeight)-66; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe
var maxHeight = ($("#colMinimap")[0].clientHeight)-68; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe
var maxHeight2 = ($(displayminimapId)[0].clientHeight)-66; //h attuale dello spazio minimap; -63 top padding, -2 bordi minimapviewer, -1 bordo col, -4 bordi iframe
console.log("maxHeight2: "+maxHeight2+" maxHeight: "+maxHeight);
var maxWidth = $(displayminimapId)[0].clientWidth; //w attuale della minimap (css)
//var miniCantoHeight = Math.ceil(((srcCantoHeight-44)/25*26)+44+32); //h prevista del canto nella minimap
var miniCantoHeight = srcCantoHeight+32; //h prevista del canto nella minimap 16x2: padding py
var miniCantoWidth = srcCantoWidth+64; //h prevista del canto nella minimap 64: padding pr + blank space
var miniCantoHeight = srcCantoHeight+16; //h prevista del canto nella minimap 16x2: padding py
var resizableWidth = $(visCantoClass)[0].clientWidth;
var resizableHeight = $(visCantoClass)[0].clientHeight;
var resizableRatio = resizableHeight/resizableWidth;
var widthRatio = resizableWidth/srcCantoWidth;
var heightRatio = resizableHeight/srcCantoHeight;
let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
//var realScaleW = Math.min((maxWidth/miniCantoWidth), 1);
//var realScaleH = Math.min((maxHeight/miniCantoHeight), 1);
realScale= Math.min((maxWidth/miniCantoWidth), (maxHeight/miniCantoHeight), 1);
//minimap.style.width = '100%';
if (onlyViewer == false) {
minimapContent.style.transform = `scale(${realScale})`;
//minimapContent.style.height = Math.trunc(miniCantoHeight) + "px";
//minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
minimapContent.style.height = miniCantoHeight + "px";
minimapContent.style.width = maxWidth/realScale + "px";
}
console.log("minimapContent height: "+(miniCantoHeight*realScale));
//let viewerHeight = (maxHeight*heightRatio)-2; // -2 = bordi
let viewerHeight = (miniCantoHeight*realScale*heightRatio)-2; // -2 = bordi
let viewerWidth = Math.min(viewerHeight/resizableRatio, maxWidth-2); // -2 bordi
realScale = Math.min((maxHeight/miniCantoHeight), 1);
minimap.style.width = '100%';
//console.log("maxHeight: "+maxHeight)
//console.log("maxWidth: "+maxWidth)
//console.log("srcCantoHeight: "+$(currentMinimap)[0].clientHeight)
//console.log("realScale: "+realScale)
minimapContent.style.transform = `scale(${realScale})`;
//minimapContent.style.height = Math.trunc(miniCantoHeight) + "px";
//minimapContent.style.width = Math.trunc(maxWidth/realScale) + "px";
minimapContent.style.height = miniCantoHeight + "px";
minimapContent.style.width = maxWidth/realScale + "px";
//console.log("minimapContent.style.height: "+minimapContent.style.height)
//console.log("minimapContent.style.width: "+minimapContent.style.width)
viewer.style.height = viewerHeight + "px";
viewer.style.width = viewerWidth + "px";
$(displayminimapId).height((miniCantoHeight*realScale)+2);
trackScrollCanto();
};
getDimDiv = function(){
getDimensionsDiv();
}
function trackScrollCanto() {
var minimapHeight = $(displayminimapId)[0].clientHeight;
//var minimapHeight = $(displayminimapId)[0].clientHeight;
var minimapHeight = ($(currentMinimap)[0].clientHeight+32)*realScale;
var posDbefore = $(displayCantoId).scrollTop();
//console.log(posDbefore);
var srcCantoHeight = $(currentMinimap)[0].clientHeight;
//var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.014);
var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.088);
var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.011);
//var posAfter = (minimapHeight*posDbefore)/(srcCantoHeight*1.088);
$(minimapviewerId).offset({ top: initOffset + posAfter});
}

49
js/script_4.2.js
View File

@ -88,9 +88,7 @@ $(document).ready(function() {
$("#collapseOptions").collapse('hide');
$("#simpleSearchDiv").fadeOut(300, function(){
$("#simpleSearchDiv").removeClass( "d-flex" )
//$("#simpleSearchDiv").attr('style', "display: none;");
$("#advancedSearchDiv").addClass( "d-flex" )
//$("#advancedSearchDiv").attr('style', "display: flex;");
$("#advancedSearchDiv").fadeIn(400, function(){
$("#collapseAdvanced").collapse('show');
$("#collapseLogic").collapse('show');
@ -101,9 +99,7 @@ $(document).ready(function() {
$("#collapseAdvanced").collapse('hide');
$("#advancedSearchDiv").fadeOut(300, function(){
$("#advancedSearchDiv").removeClass( "d-flex" )
//$("#advancedSearchDiv").attr('style', "display: none;");
$("#simpleSearchDiv").addClass( "d-flex" )
//$("#simpleSearchDiv").attr('style', "display: flex;");
$("#simpleSearchDiv").fadeIn(400);
});
@ -134,7 +130,7 @@ $(document).ready(function() {
resize: function(event, ui) {
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv();
getDimensionsDiv(true);
},
stop: function(event, ui) {
setWidthInPercent(ui.element);
@ -148,7 +144,7 @@ $(document).ready(function() {
ui.position.left = 0;
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv();
getDimensionsDiv(true);
},
stop: function(event, ui) {
setWidthInPercent(ui.element);
@ -158,22 +154,24 @@ $(document).ready(function() {
$(".visCanto").resizable({
handles: "s",
minHeight: 80,
maxHeight: 800,
maxHeight: 880,
alsoResize: "#displaycanto",
resize: function(event, ui) {
$("#displaycanto").width(" min-content");
$("#displayinfo").css("maxWidth", $(".visInfo").width()+"px");
$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
getDimensionsDiv();
//$("#displayinfo").css("maxHeight", "");
getDimensionsDiv(true);
},
stop: function(event, ui) {
$("#displaycanto").width(" min-content");
//$("#displayinfo").css("maxHeight", $(".visInfo").height()+"px");
//$(".canto").fitText();
// ui.element.width("");
}
});
// Evento: modifica dell'unitaRicerca'
// Evento: modifica dell'unita di ricerca'
$("#unitaRicerca").on('change', function() {
queryJson.unitaRicerca = $("#unitaRicerca")[0].options[$("#unitaRicerca")[0].selectedIndex].value;
});
@ -556,10 +554,41 @@ $(document).ready(function() {
$("#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){