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

riscritto html delle clausole draggable

This commit is contained in:
Luca Trupiano 2022-11-23 18:40:21 +01:00
parent edf5f8c11c
commit f2526ba967
3 changed files with 62 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/custom.css
View File

@ -20,9 +20,9 @@ table {
width:90% !important;
}
#sortable0 { list-style-type: none; margin: 0; padding: 0; width: 100%; }
/* #sortable0 { list-style-type: none; margin: 0; padding: 0; width: 100%; }
#sortable0 li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; }
#sortable0 li span { position: absolute; margin-left: -1.3em; }
#sortable0 li span { position: absolute; margin-left: -1.3em; } */
.ui-icon.inline { display:inline-block; }​

40
index_2.0.html
View File

@ -10,9 +10,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> -->
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<!-- <link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css"> -->
<link rel="stylesheet" href="./css/datatables.min.css">
<link rel="stylesheet" href="./css/browsingldc.css">
<!-- <link rel="stylesheet" href="./css/browsingldc.css"> -->
<link rel="stylesheet" href="./css/custom.css">
<!-- <link rel="stylesheet" href="./node_modules/normalize.css/normalize.css">
@ -491,10 +491,10 @@
</ul>
<form>
<div class="tab-content border-right border-left border-bottom" id="cla-TabContent">
<div class="tab-pane fade show active p-2 bg-white" id="cla0" role="tabpanel" aria-labelledby="cla0-tab">
<div class="row tab-content border-right border-left border-bottom m-0" id="cla-TabContent">
<div class="col-12 tab-pane fade show active px-1 py-2 bg-white" id="cla0" role="tabpanel" aria-labelledby="cla0-tab">
<div class="form-inline input-group p-1 pb-2" action="" style="display: none">
<div class="form-inline input-group p-1" action="" style="display: none">
<div class="input-group-prepend">
<label class="input-group-text"><ion-icon name="document-text"></ion-icon></label>
</div>
@ -690,10 +690,10 @@
<div class="small text-muted p-1">
Definisci i filtri usando le clausole e le condizioni logiche:
</div>
<div class=" px-2 pb-2 pt-1 m-1 border bg-light well" id="cla-list">
<div class=" p-1 border bg-light well" id="cla-list">
<div class="row ml-0 justify-content-between"><div class="pb-1 small font-weight-bold text-muted">AND</div></div>
<ul id="sortable0" class="condLIand list-group ui-sortable">
<li id="H-cla0" class="list-group-item align-items-center ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>
<li id="H-cla0" class="list-group-item align-items-center mb-1 ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>
</ul>
</div>
@ -705,13 +705,13 @@
<!-- MODELLI CLAUSOLE -->
<!-- TIPO GRAMMATICALE -->
<div style="display: none;" class="tab-pane fade p-2 bg-white" id="tipogrammaticaleN" role="tabpanel" aria-labelledby="claN-tab" data-claType="Grammaticale" data-claActive="1">
<div style="display: none;" class="col-12 tab-pane fade p-2 bg-white" id="tipogrammaticaleN" role="tabpanel" aria-labelledby="claN-tab" data-claType="Grammaticale" data-claActive="1">
<div class="p-1 text-right text-primary">
<span class="return2Query"><ion-icon name="checkmark-circle"></ion-icon></span>&nbsp;&nbsp;
<span class="removeClaInTab"><ion-icon name="close-circle"></ion-icon></span>
</div>
<div class="form-group form-inline input-group p-1 pb-2" action="">
<div class="form-group form-inline input-group p-1 mb-1" action="">
<div class="input-group-prepend">
<label class="input-group-text"><ion-icon name="document-text"></ion-icon></label>
</div>
@ -720,12 +720,12 @@
<option value="lemma">il lemma</option>
<option disabled value="testo">il testo</option>
</select>
<input type="text" class="form-control-sm" id="queryTextN" placeholder="stelle" aria-describedby="name-desc" name="query">
<input type="text" class="form-control form-control-sm" id="queryTextN" placeholder="stelle" aria-describedby="name-desc" name="query">
</div>
<div class="form-group px-1 pb-1">
<div class="form-group px-1 pb-1 mb-1">
<label for="typeGramm0" class="text-muted control-label small">Categoria grammaticale:</label>
<div class="form-inline input-group p-1" action="">
<div class="form-inline input-group" action="">
<div class="input-group-prepend">
<label class="input-group-text"><ion-icon name="options"></ion-icon></label>
</div>
@ -763,20 +763,20 @@
</select>
</div>
</div>
<div class="container form-group mx-2 mb-0 p-1 dettaglifiltri">
<div class="container form-group mr-3 mb-0 p-1 dettaglifiltri">
</div>
</div>
<!-- FINE GRAMMATICALE -->
<!-- TIPO SINTATTICO -->
<div style="display: none;" class="tab-pane fade p-2 bg-white" id="tiposintatticoN" role="tabpanel" aria-labelledby="claN-tab" data-claType="Sintattico" data-claActive="1">
<div style="display: none;" class="col-12 tab-pane fade p-2 bg-white" id="tiposintatticoN" role="tabpanel" aria-labelledby="claN-tab" data-claType="Sintattico" data-claActive="1">
<div class="p-1 text-right text-primary">
<span class="return2Query"><ion-icon name="checkmark-circle"></ion-icon></span>&nbsp;&nbsp;
<span class="removeClaInTab"><ion-icon name="close-circle"></ion-icon></span>
</div>
<div class="form-group form-inline input-group p-1 pb-2" action="">
<div class="form-group form-inline input-group p-1 mb-1" action="">
<div class="input-group-prepend">
<label class="input-group-text"><ion-icon name="document-text"></ion-icon></label>
</div>
@ -785,12 +785,12 @@
<option value="lemma">il lemma</option>
<option disabled value="testo">il testo</option>
</select>
<input type="text" class="form-control-sm" id="queryTextN" placeholder="stelle" aria-describedby="name-desc" name="query">
<input type="text" class="form-control form-control-sm" id="queryTextN" placeholder="stelle" aria-describedby="name-desc" name="query">
</div>
<div class="form-group px-1 pb-1">
<div class="form-group px-1 pb-1 mb-1">
<label for="typeSyntax0" class="text-muted control-label small">Tipo sintattico:</label>
<div class="form-inline input-group p-1" action="">
<div class="form-inline input-group" action="">
<div class="input-group-prepend">
<label class="input-group-text"><ion-icon name="options"></ion-icon></label>
</div>
@ -1223,9 +1223,9 @@
</select>
</div>
</div>
<div class="form-group px-1 pb-1">
<div class="form-group px-1 pb-1 mb-1">
<label for="functionSyntax" class="text-muted control-label small">Livello di subordinazione:</label>
<div class="form-inline input-group p-1" action="">
<div class="form-inline input-group" action="">
<div class="input-group-prepend">
<label class="input-group-text"><ion-icon name="options"></ion-icon></label>
</div>

68
js/script_2.0.js
View File

@ -464,19 +464,29 @@ $(document).ready(function() {
var iconCheck = '<ion-icon name="checkmark-circle"></ion-icon>';
var iconFilter = '<ion-icon name="filter-circle"></ion-icon>';
var iconReset = '<div class="text-right text-primary radioReset"><ion-icon name="refresh-circle"></ion-icon></div>';
var iconCloseCond = '<div class="p-0 mr-1 text-right text-primary"><span class="iconClClass removeCond">' + iconClose + '</span></div>';
var iconCloseCond = '<div class="p-0 mr-3 mt-1 text-right text-primary"><span class="iconClClass removeCond">' + iconClose + '</span></div>';
var iconCheckAndClose = '<div class="p-0 m-1 text-right text-primary"><span class="return2Query">' + iconCheck + '</span>&nbsp;&nbsp;<span class="removeClaInTab">' + iconClose + '</span></div>';
var emptyClaList = '<li id="H-cla0" class="list-group-item align-items-center ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>';
var emptyClaList = '<li id="H-cla0" class="list-group-item align-items-center mb-1 ui-state-default ui-state-disabled border text-muted bg-white ui-state-disabled-opacity-06 small">Nessuna clausola aggiunta.</li>';
var claLIpart1 = '<li id="'
var claLIpart2 = '" class="claLI ml-4 my-1 p-1 list-group-item align-items-center border text-muted bg-white"><div class="handle container-fluid"><div class="row"><div class="col-md-11 px-0 pr-2"> \
<div class="bd-highlight text-primary"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div><div class="p-1 bd-highlight flex-grow-1 border-right clatext">';
var claLIpart3 = '</div></div><div class="col-md-1 px-0 pl-4"><div class="row"><div class="col-md-12 px-0 float-right"><div class="d-flex px-3 flex-nowrap float-right"> \
var claLIpart2 = '" class="claLI mx-0 my-1 p-1 list-group-item align-items-center border text-muted bg-white"> \
<div class="handle container-fluid p-0"><div class="row no-gutters flex-nowrap align-items-start"><div class="col-md-auto pl-0 pr-1 align-self-start"> \
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div><div class="col-md-auto pl-0 pr-2 flex-grow-1 align-self-start"><span class="small pl-1">';
var claLIpart3 = '</span></div><div class="col-md-auto px-0 align-self-start justify-content-end"><div class="row no-gutters justify-content-end"> \
<div class="col-auto pb-0 pl-2 pr-1 pt-1 align-top flex-grow-1 align-self-end justify-content-end text-right bd-highlight text-primary editCla">' + iconEdit + '</div> \
<div class="col-auto pb-0 pl-1 pr-2 pt-1 align-top align-self-end justify-content-end text-right bd-highlight text-primary removeClaInList">' + iconClose + '</div></div> \
<div class="row no-gutters align-items-end"><div class="col align-self-end p-0"><div class="custom-control custom-control-sm custom-switch p-0 align-self-end text-right"> \
<input type="checkbox" class="custom-control-input claAct" name="cla-attiva" aria-label="attiva" id="actiClaSW';
var claLIpart4 = '><label class="custom-control-label form-control-sm p-0" for="actiClaSW';
var claLIpart5 = '"></label></div></div></div></div></div></div></li>';
var claLIpart2o = '" class="claLI ml-3 my-1 p-1 list-group-item align-items-center border text-muted bg-white"><div class="handle container-fluid"><div class="row"><div class="col-md-auto flex-grow-1 px-0 pr-2 align-self-start"> \
<div class="bd-highlight text-primary"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></div><div class="p-1 bd-highlight clatext">';
var claLIpart3o = '</div></div><div class="col px-0 pl-2 border-left align-self-end"><div class="row"><div class="col-md-12 px-0 float-right"><div class="d-flex px-3 flex-nowrap float-right"> \
<div class="p-1 align-top bd-highlight text-primary editCla">' + iconEdit + '</div><div class="p-1 align-top bd-highlight text-primary removeClaInList">' + iconClose + '</div> \
</div></div></div><div class="row"><div class="col-md-12 px-2 float-right"><div class="custom-control custom-switch p-1 text-right bd-highlight"> \
<input type="checkbox" class="custom-control-input claAct" name="cla-attiva" aria-label="attiva" id="actiClaSW';
var claLIpart4 = '><label class="custom-control-label" for="actiClaSW';
var claLIpart5 = '"></label></div></div></div></div></div></div></li>';
var claLIpart4o = '><label class="custom-control-label form-control-sm" for="actiClaSW';
var claLIpart5o = '"></label></div></div></div></div></div></div></li>';
var condLIplaceholderText1 = 'Trascina qui almeno 1 clausola o condizione';
var condLIplaceholderText2 = 'Trascina qui almeno 2 clausole o condizioni';
@ -485,9 +495,9 @@ $(document).ready(function() {
var condLIplaceholderPart1 = '<li id="placeholderSort';
var condLIplaceholderPart2 = '" class="p-1 ml-4 mb-2 mt-1 list-group-item align-items-center border text-muted small bg-light ui-state-disabled ui-state-disabled-opacity-06">';
var condLIpart1 = '<li id="cond';
var condLIpart2and = '" class="condLIand p-1 m-1 list-group-item align-items-center border text-muted bg-lida10"><ul id="sortable';
var condLIpart2and = '" class="condLIand mx-0 my-1 p-1 list-group-item align-items-center border text-muted bg-lida10"><ul id="sortable';
var condLIpart3and = '" class="handle list-group ui-sortable"><div class="row ml-1 pr-2 justify-content-between"><div class=" pb-1 small font-weight-bold text-muted">AND</div>' + iconCloseCond + '</div>' + condLIplaceholderPart1;
var condLIpart2or = '" class="condLIor p-1 m-1 list-group-item align-items-center border text-muted bg-lida11"><ul id="sortable';
var condLIpart2or = '" class="condLIor mx-0 my-1 p-1 list-group-item align-items-center border text-muted bg-lida11"><ul id="sortable';
var condLIpart3or = '" class="handle list-group ui-sortable"><div class="row ml-1 pr-2 justify-content-between"><div class=" pb-1 small font-weight-bold text-muted">OR</div>' + iconCloseCond + '</div>' + condLIplaceholderPart1;
var condLIpart4 = condLIplaceholderPart2 + condLIplaceholderText2 + '</li></ul></li>';
@ -608,7 +618,7 @@ $(document).ready(function() {
switch (vals.length) {
case 2:
var element = $('<div />');
element.attr('class', ' d-flex flex-nowrap pr-2 mb-1 col-8 form-group form-control justify-content-between');
element.attr('class', ' d-flex flex-nowrap pr-2 py-1 mb-1 form-group form-control justify-content-between');
var rbfieldset = $('<fieldset />');
var flexdiv1 = $('<div />');
var flexdiv2 = $('<div />');
@ -618,9 +628,9 @@ $(document).ready(function() {
var label2 = $('<label />');
rbfieldset.attr('id', tabPaneId + keys[key].replace(/\s/g, ''));
rbfieldset.attr('class', 'bn');
flexdiv1.attr('class', 'custom-control custom-radio custom-control-inline');
flexdiv2.attr('class', 'custom-control custom-radio custom-control-inline');
rbfieldset.attr('class', 'custom-control-inline');
flexdiv1.attr('class', 'custom-control custom-radio custom-control-inline m-0 pb-0');
flexdiv2.attr('class', 'custom-control custom-radio custom-control-inline m-0 pb-0');
input1.attr('class', 'custom-control-input');
input2.attr('class', 'custom-control-input');
input1.attr('type', 'radio');
@ -631,8 +641,8 @@ $(document).ready(function() {
input2.attr('value', vals[1]);
input1.attr('name', tabPaneId + keys[key]);
input2.attr('name', tabPaneId + keys[key]);
label1.attr('class', 'custom-control-label');
label2.attr('class', 'custom-control-label');
label1.attr('class', 'custom-control-label form-control-sm custom-control-inline m-0 pl-1');
label2.attr('class', 'custom-control-label form-control-sm custom-control-inline m-0 pl-1');
label1.attr('for', tabPaneId + vals[0].replace(/\s/g, ''));
label2.attr('for', tabPaneId + vals[1].replace(/\s/g, ''));
label1.append(vals[0]);
@ -647,25 +657,25 @@ $(document).ready(function() {
rbfieldset.appendTo(element);
var iconR = $(iconReset);
iconR.appendTo(element);
element.attr('style', 'display:block');
//element.attr('style', 'display:block');
element.appendTo(dettagliBox);
break;
case 1:
var element = $('<div />');
element.attr('class', ' d-flex flex-nowrap mb-1 col-4 form-group form-control');
element.attr('class', ' d-flex flex-nowrap pr-2 py-1 mb-1 form-group form-control');
var rbfieldset = $('<fieldset />');
flexdiv1 = $('<div />');
input1 = $('<input />');
label1 = $('<label />');
rbfieldset.attr('id', tabPaneId + keys[key].replace(/\s/g, ''));
rbfieldset.attr('class', 'bn');
rbfieldset.attr('class', 'custom-control-inline');
flexdiv1.attr('class', 'custom-control custom-checkbox custom-control-inline');
input1.attr('class', 'custom-control-input');
input1.attr('type', 'checkbox');
input1.attr('id', tabPaneId + vals[0].replace(/\s/g, ''));
input1.attr('value', vals[0]);
input1.attr('name', keys[key]);
label1.attr('class', 'custom-control-label');
label1.attr('class', 'custom-control-label form-control-sm custom-control-inline m-0 pl-1');
label1.attr('for', tabPaneId + vals[0].replace(/\s/g, ''));
label1.append(vals[0]);
@ -673,13 +683,13 @@ $(document).ready(function() {
label1.appendTo(flexdiv1);
flexdiv1.appendTo(rbfieldset);
rbfieldset.appendTo(element);
element.attr('style', 'display:block');
//element.attr('style', 'display:block');
element.appendTo(dettagliBox);
break;
default:
var element = $('<div />');
element.attr('class', ' col-8 form-group px-0 pb-1 m-0');
var select = $('<select class="form-control custom-select"/>');
element.attr('class', ' form-group px-0 pb-1 m-0');
var select = $('<select class="form-control custom-select custom-select-sm"/>');
select.attr('id', tabPaneId + keys[key].replace(/\s/g, ''));
select.attr('title', keys[key]);
select.attr('name', keys[key]);
@ -690,7 +700,7 @@ $(document).ready(function() {
seloption.appendTo(select);
}
select.appendTo(element);
element.attr('style', 'display:block');
//element.attr('style', 'display:block');
element.appendTo(dettagliBox);
}
}
@ -849,7 +859,8 @@ $(document).ready(function() {
switch (claType) {
case "Grammaticale":
var gramSelect = $("#" + claId).find(".catgram");
claText = '<span class="small mx-1">' + len + ". Categoria grammaticale: " + gramSelect[0].options[gramSelect[0].selectedIndex].text + '</span><br><span class="small mx-1">';
//claText = '<span class="small">' + len + ". Categoria grammaticale: " + gramSelect[0].options[gramSelect[0].selectedIndex].text + '<br>';
claText = len + ". Categoria grammaticale: " + gramSelect[0].options[gramSelect[0].selectedIndex].text + '<br>';
jsonTextToParse = jsonTextToParse + ', "' + gramSelect.attr('name') + '": "' + gramSelect[0].options[gramSelect[0].selectedIndex].value + '"';
var claSubParList = $("#" + claId).children(".dettaglifiltri").find("select, fieldset");
claSubParList.each(function(){
@ -870,8 +881,9 @@ $(document).ready(function() {
break;
case "Sintattico":
var syntSelect = $("#" + claId).find("#synttypes");
; var funcSelect = $("#" + claId).find("#syntfunc");
claText = '<span class="small mx-1">' + len + ". Tipo sintattico: " + syntSelect[0].options[syntSelect[0].selectedIndex].text + '; </span><br><span class="small mx-1">Livello di subordinazione: ' + funcSelect[0].options[funcSelect[0].selectedIndex].text;
var funcSelect = $("#" + claId).find("#syntfunc");
//claText = '<span class="small mx-1">' + len + ". Tipo sintattico: " + syntSelect[0].options[syntSelect[0].selectedIndex].text + ';<br>Livello di subordinazione: ' + funcSelect[0].options[funcSelect[0].selectedIndex].text;
claText = len + ". Tipo sintattico: " + syntSelect[0].options[syntSelect[0].selectedIndex].text + ';<div class="col-md-12"></div>Livello di subordinazione: ' + funcSelect[0].options[funcSelect[0].selectedIndex].text;
jsonTextToParse = jsonTextToParse + ', "' + syntSelect.attr('name') + '": "' + syntSelect[0].options[syntSelect[0].selectedIndex].value + '", "' + funcSelect.attr('name') + '": "' + funcSelect[0].options[funcSelect[0].selectedIndex].value + '"';
break;
default:
@ -934,7 +946,7 @@ $(document).ready(function() {
};
if (inactiveLI == 0){
$(iconSpan).attr("class","iconClClass removeCond");
$(iconDiv).attr("class","p-0 mr-1 text-right text-primary");
$(iconDiv).attr("class","p-0 mr-3 mt-1 text-right text-primary");
};
break;
case 1:
@ -953,7 +965,7 @@ $(document).ready(function() {
$("#" + sortableID).append(condLIplaceholder);
};
$(iconSpan).attr("class","iconClClass NOremoveCond");
$(iconDiv).attr("class","p-0 mr-1 text-right text-muted");
$(iconDiv).attr("class","p-0 mr-3 mt-1 text-right text-muted");
break;
case 2:
if ($(placeholderID).length) {