Lista note funzionante con collapse

This commit is contained in:
Luca Trupiano 2023-12-05 10:27:27 +01:00
parent 042dcc8e83
commit bb7c345d6d
3 changed files with 71 additions and 182 deletions

View File

@ -15,6 +15,7 @@
<link rel="stylesheet" id="style1-Custom" href="./css/custom1_4.3.css" disabled>
<link rel="stylesheet" id="style2-Boot" href="./css/bootstrap.min.lida2.css">
<link rel="stylesheet" id="style2-Custom" href="./css/custom2_4.3.css">
<link rel="stylesheet" id="style2-Custom" href="./css/collapsemod.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script
@ -481,11 +482,17 @@
<div class="tab-content visInfo w-100 d-flex bg-lida-vis" id="vis-TabContent" style="flex-direction: column;">
<div class="tab-pane fade show active p-0 bg-lida-vis" id="vis0" role="tabpanel" aria-labelledby="vis0-tab">
<div id='displaynote' class="p-3 pt-0"><span>Visualizza commenti</span>
<div id='displaynote' class="p-0">
<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard0">
<span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessun commento visualizzato</span>
</div>
</div>
</div>
<div class="tab-pane fade p-0 bg-lida-vis" id="vis1" role="tabpanel" aria-labelledby="vis1-tab">
<div id='displayinfo' class="p-3"><span>Visualizza struttura periodo</span>
<div id='displayinfo' class="p-0">
<div class="card card-body well well-sm m-1 mt-2 p-0" id="infoCard0">
<span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessuna struttura visualizzata</span>
</div>
</div>
</div>
</div>
@ -520,7 +527,7 @@
style="height: 32px; width: 76px;"
type="button" id="showOptions" data-toggle="collapse"
data-target="#collapseOptions" aria-expanded="false"
aria-controls="collapseExample">
aria-controls="collapseOptions">
<span class="text-muted">Opzioni</span>
</button>
<button class="btn btn-sm btn-outline-secondary bg-light ml-1"

View File

@ -727,7 +727,7 @@ function resetFrasi(){
function initCitazioni(){
//"#InfernoCanto_1"
console.log('VISTA CITAZIONI!')
//console.log('VISTA CITAZIONI!')
var mcanto=cantoDisplayed.replace("#",'')
cantica=''
if (mcanto.startsWith('Inf'))
@ -739,15 +739,15 @@ function resetFrasi(){
canto=mcanto.split('_')[1]
if (canto.length==1)
canto='0'+canto
console.log(cantica+', '+canto)
//console.log(cantica+', '+canto)
commentsArray=getVersiConCitazioni(cantica, canto)
console.log("Array prima")
console.log(commentsArray)
//console.log("Array prima")
//console.log(commentsArray)
commentsArray.forEach(removeHtmlTags)
console.log("Array dopo")
console.log(commentsArray)
commentsArray.forEach(removeHtmlTags2)
//console.log("Array dopo")
//console.log(commentsArray)
}
/* Luca: removeHtmlTags2 e' la versione compatta di removeHtmlTags*/
@ -764,125 +764,6 @@ function resetFrasi(){
}
}
}
function removeHtmlTags(value){
var text = value["annotazione"]
if (text != null){
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;","");
text = text.replace("&raquo;","");
text = text.replaceAll("\n"," ");
value["annotazione"] = text;
}
text = value["verso"]
if (text != null){
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;","");
text = text.replace("&raquo;","");
text = text.replaceAll("\n"," ");
value["verso"] = text;
}
text = value["commentario"]
if (text != null){
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;","");
text = text.replace("&raquo;","");
text = text.replaceAll("\n"," ");
value["commentario"] = text;
}
text = value["frammentoNota"]
if (text != null){
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;","");
text = text.replace("&raquo;","");
text = text.replaceAll("\n"," ");
value["frammentoNota"] = text;
}
text = value["AutoreCitazione"]
if (text != null){
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;","");
text = text.replace("&raquo;","");
text = text.replaceAll("\n"," ");
value["AutoreCitazione"] = text;
}
text = value["FonteCitazione"]
if (text != null){
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;","");
text = text.replace("&raquo;","");
text = text.replaceAll("\n"," ");
value["FonteCitazione"] = text;
}
text = value["NotaFonteCitazione"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["NotaFonteCitazione"] = text;
}
text = value["LuogoFonteCitazione"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["LuogoFonteCitazione"] = text;
}
text = value["TestoFonteCitazione"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["TestoFonteCitazione"] = text;
}
text = value["URLFonteCitazione"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["URLFonteCitazione"] = text;
}
text = value["NaturaRiferimento"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["NaturaRiferimento"] = text;
}
text = value["RapportoCommentoCommentatoreText"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["RapportoCommentoCommentatoreText"] = text;
}
text = value["RapportoSoggettoOggetto"]
if (text != null) {
text = text.replace(/<(.|\n)*?>/g, '');
text = text.replace("&laquo;", "");
text = text.replace("&raquo;", "");
text = text.replaceAll("\n"," ");
value["RapportoSoggettoOggetto"] = text;
}
}
jQuery(document).delegate(' .showcomments', 'click', function() {
var cid = $(this).attr('id');
@ -899,84 +780,82 @@ function resetFrasi(){
break;
case "3": cantica = "Paradiso";
}
var commentArea = $('#CardCommenti');
commentArea.empty()
var commentArea = $('#displaynote');
// commentArea.empty()
if ($('#noteCard0').length ) {
$("#noteCard0")[0].remove();
}
var id = cid.substr(9);
var collapseNote;
for (var pos in commentsArray){
var claBody = $('<div class="card-body p-0 mx-1 mb-1 bg-lida11 border rounded" id="claBodyxX1Xx">');
console.log("Id: "+id);
var noteCard = $('<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard' + id + '">');
var collapseCardBody = $('<div class="card-body p-0 mx-1 mb-1 border rounded" >');
var divCampiSingoli = $('<div class="d-flex align-content-start flex-wrap text-muted">');
var comments = commentsArray[pos]
if (comments.verso == id){
createNoteHeader(commentArea, comments, id, cantica, parcid);
createNoteHeader(noteCard, comments, id, pos, cantica, parcid);
collapseNote = $('<div class="collapse show"'+'aria-labelledby="headingCX" data-parent="#sortable0">');
collapseNote.attr('id',"collapseNote"+id)
collapseNote.append(claBody);
commentArea.append(collapseNote)
collapseNote = $('<div class="collapse show">');
collapseNote.attr('id',"collapseNote"+id+ '_' + pos)
if (comments.TestoFonteCitazione != null && comments.TestoFonteCitazione != "nan"){
createModule(collapseNote,"Testo della fonte: ", comments.TestoFonteCitazione, "1", id)
createModule(collapseCardBody,"Testo della fonte: ", comments.TestoFonteCitazione, "1", id, pos)
}
if (comments.NaturaRiferimento != null){
createDivSingola(divCampiSingoli, "Tipo Riferimento: ", comments.NaturaRiferimento)
divCampiSingoli.appendTo(collapseNote);
divCampiSingoli.appendTo(collapseCardBody);
}
if (comments.commentario != null){
createDivSingola(divCampiSingoli, "Commentatore: ", comments.commentario)
divCampiSingoli.appendTo(collapseNote);
divCampiSingoli.appendTo(collapseCardBody);
}
if (comments.RapportoSoggettoOggetto != null){
createDivSingola(divCampiSingoli, "Rapporto Testo/Fonte: ", comments.RapportoSoggettoOggetto)
divCampiSingoli.appendTo(collapseNote);
divCampiSingoli.appendTo(collapseCardBody);
}
if (comments.RapportoCommentoCommentatoreText != null && comments.RapportoCommentoCommentatoreText != "nan"){
createModuleCommentatore (collapseNote, comments.RapportoCommentoCommentatoreText, "5", id)
createModuleCommentatore (collapseCardBody, comments.RapportoCommentoCommentatoreText, "5", id, pos)
}
if (comments.frammentoNota != null && comments.frammentoNota != "nan"){
createModule(collapseNote,"Nota: ", comments.frammentoNota, "7", id)
createModule(collapseCardBody,"Nota: ", comments.frammentoNota, "7", id, pos)
}
if (comments.annotazione != null && comments.annotazione != "nan"){
createModule(collapseNote,"Annotazione completa: ", comments.annotazione, "6", id)
createModule(collapseCardBody,"Annotazione completa: ", comments.annotazione, "6", id, pos)
}
if (comments.NotaFonteCitazione != null && comments.NotaFonteCitazione != "nan" && comments.NotaFonteCitazione != ""){
createModule(collapseNote,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id)
createModule(collapseCardBody,"Nota dell'annotatore: ", comments.NotaFonteCitazione, "8", id, pos)
}
commentArea.append('<hr class="pt-0 center text-dark bg-dark" style="width: 100%;">');
//commentArea.append('<hr class="pt-0 center text-dark bg-dark" style="width: 100%;">');
collapseCardBody.appendTo(collapseNote);
collapseNote.appendTo(noteCard);
commentArea.append(noteCard)
}
}
$('#tab-list #vis0-tab').tab('show')
})
function createNoteHeader(headerDiv, comments, id, cantica, parcid){
function createNoteHeader(noteCardX, comments, id, pos, cantica, parcid){
var nomeAutore = "";
var titoloFonte = "";
var luogoFonte = "";
var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted mt-1" id= commentoVerso' + id + ' >')
var rigaNota = $('<div class="p-2" >');
var spanButtons = $('<span class="h6">');
var buttons = $('<div class="ml-auto p-1 pr-2">')
var collapseButton = $('<button id="collapseBtnNote'+id+'"'+
'class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded text-primary px-1 pb-0 show"'+
'data-toggle="collapse" data-target="#collapseNote'+id+'"'+
'aria-expanded="true" aria-controls="collapseNote'+id+'">'+
var commentHeader = $('<div class="d-flex align-content-start flex-nowrap text-muted" id="commentoVerso' + id + '_' + pos + '">')
var rigaNota = $('<div class="p-2 mt-1">');
var buttons = $('<div class="d-flex flex-wrap-reverse ml-auto align-items-center justify-content-end p-1">')
var collapseButton = $('<button id="collapseBtnNote'+id+ '_' + pos +'"'+
'class="btn btn-sm btn-outline-primary bg-light collapseNote border rounded mb-auto text-primary align-self-end px-1 pb-0"'+
'data-toggle="collapse" data-target="#collapseNote'+id+ '_' + pos +'"'+
'aria-expanded="true" aria-controls="collapseNote'+id+ '_' + pos +'">'+
'<ion-icon name="archive"></ion-icon>');
var closeButton = $('<button id="closeNote'+id+'"'+
'class="btn btn-sm btn-outline-primary bg-light closeNote border rounded text-primary px-1 pb-0"'+
'style="z-index: 1000">'+
var closeButton = $('<button id="closeNote'+id+ '_' + pos +'"'+
'class="btn btn-sm btn-outline-primary bg-light closeNote border rounded mb-auto text-primary align-self-end px-1 pb-0 ml-1">'+
'<ion-icon name="close-circle"></ion-icon>');
rigaNota.append('<b>' + cantica + '</b><i>' + ", Canto " + getRoman(parcid[2]) + " Verso " + parcid[3] + "</i> - ");
collapseButton.appendTo(spanButtons);
closeButton.appendTo(spanButtons);
spanButtons.appendTo(buttons)
collapseButton.appendTo(buttons);
closeButton.appendTo(buttons);
if (comments.NomeAutoreCitazione == null) {
nomeAutore = 'riferimento';
@ -1008,12 +887,10 @@ function resetFrasi(){
rigaNota.append('<b>Coordinate della Fonte:</b><a href="' + comments.URLFonteCitazione + '"target="_blank"<i> ' + luogoFonte + '</i>, </a><br>');
} else {
rigaNota.append('<b>Coordinate della Fonte:</b><i> ' + luogoFonte + '</i><br>');
}
rigaNota.appendTo(commentHeader);
buttons.appendTo(commentHeader);
commentHeader.appendTo(headerDiv);
commentHeader.appendTo(noteCardX);
}
function createDivSingola(divCampi, campo, valore){
@ -1022,24 +899,24 @@ function resetFrasi(){
divSingola.appendTo(divCampi);
}
function createModule(collapse,label, testo, num, id){
function createModule(collapse,label, testo, num, id, pos){
var divModule = $('<div class="module pb-0">');
var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
var divTesto = $('<div class="p-2">')
var nota = '<b>'+label+'</b>'+testo;
divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+'" role="button"></a>')
divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
divTesto.append(nota);
divContent.append(divTesto);
divNote.append(divContent)
divModule.append(divNote);
divModule.appendTo(collapse);
}
function createModuleCommentatore(collapse, commento, num, id){
function createModuleCommentatore(collapse, commento, num, id, pos){
var commentoCommentatore = commento.split(',');
var divModule = $('<div class="module pb-0">');
var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+'" aria-expanded="false">')
var divNote = $('<div class="collapse" id="collapse'+num+'Note'+id+ '_' + pos +'" aria-expanded="false">')
var divContent = $('<div class="d-flex align-content-start flex-wrap text-muted">');
var divTesto = $('<div class="p-2">')
@ -1067,13 +944,13 @@ function resetFrasi(){
nota = '<b>Rapporto Commento/Commentatore: </b>'+esitoCommento +' <a href="'+urlCommento+'"target="_blank"<i>' + autoreCommento+ '</i></a>, ' + '</b><br>';
}
divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+'" role="button"></a>')
divModule.append('<a class="read-more collapsed" data-toggle="collapse" href="#collapse'+num+'Note'+id+ '_' + pos +'" role="button"></a>')
divTesto.append(nota);
divContent.append(divTesto);
divNote.append(divContent)
divModule.append(divNote);
divModule.appendTo(collapse);
//divModule.appendTo(collapse);
}
function hasComments(cid){
@ -1310,7 +1187,7 @@ function resetFrasi(){
//if (hasComments(idCommento)){
if (commNumber>0){
createCommentSpan(idCommento, elverso, commNumber)
console.log("Numero commenti: "+commNumber)
//console.log("Numero commenti: "+commNumber)
}
if(currSentenceId!=null && currSentenceId != sentenceid){

View File

@ -179,7 +179,7 @@ $(document).ready(function() {
//maxHeight: 880,
alsoResize: "#displaycanto",
resize: function(event, ui) {
console.log($("#colVisualizza").css("height"));
//console.log($("#colVisualizza").css("height"));
$("#displaycanto").width(" min-content");
var infoHeightToSet = $("body")[0].clientHeight*cssTableMainHeight - $(visCantoClass)[0].clientHeight-2-63-2-46;
$("#displayinfo").css("maxHeight", infoHeightToSet+"px");
@ -187,7 +187,7 @@ $(document).ready(function() {
$("#displaynote").css("maxHeight", infoHeightToSet+"px");
$("#displaynote").css("height", infoHeightToSet+"px");
$(".visInfo").css("height", (infoHeightToSet+4)+"px");
console.log($("#colVisualizza").css("height"));
//console.log($("#colVisualizza").css("height"));
getDimensionsDiv(true);
},
stop: function(event, ui) {
@ -430,8 +430,11 @@ $(document).ready(function() {
// Evento: click sull'icona rimuovi nota
$('#displaynote').on('click', '.closeNote', function() {
var claListItemId = $(this).closest('.card');
$(claListItemId).remove();
var noteListItemId = $(this).closest('.card');
$(noteListItemId).remove();
if ($('#displaynote .card').length == 0) {
$('#displaynote').append($(emptyNoteList))
};
});
@ -590,6 +593,8 @@ $(document).ready(function() {
const iconCloseCond = '<div class="p-0 mr-3 mt-0 text-right text-success"><span class="iconClClass removeCond"><ion-icon name="close-circle"></ion-icon></span></div>';
const emptyClaList = '<li id="li-cla0" class="list-group-item align-items-center my-1 ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>';
const defaultCond = '<div id="cla-defaultCond" class="col-12 p-1 small font-weight-bold text-muted"> Clausole e condizioni in AND di default</div>';
const emptyNoteList = '<div class="card card-body well well-sm m-1 mt-2 p-0" id="noteCard0"><span class="p-3 text-muted bg-lida-vis small" style="opacity: 0.6;">Nessun commento visualizzato</span></div>';
const canticheList = ["Inferno","Purgatorio","Paradiso"];
const cla0JsonText = '{"queryText": "", "lemma_forma": "lemma", "opzioni_testo": "parola", "TipoClausola": "0", "Attiva": "0"}';
const condLIplaceholderText1 = 'Trascina qui almeno 1 clausola o condizione';