Aggiunti slider posizione

This commit is contained in:
Luca Trupiano 2025-03-11 11:38:12 +01:00
parent ec201f7468
commit de7c61e32d
4 changed files with 2496 additions and 77 deletions

364
css/bootstrap-slider.css vendored Normal file
View File

@ -0,0 +1,364 @@
/*! =======================================================
VERSION 11.0.3
========================================================= */
/*! =========================================================
* bootstrap-slider.js
*
* Maintainers:
* Kyle Kemp
* - Twitter: @seiyria
* - Github: seiyria
* Rohit Kalkur
* - Twitter: @Rovolutionary
* - Github: rovolution
*
* =========================================================
*
* bootstrap-slider is released under the MIT License
* Copyright (c) 2019 Kyle Kemp, Rohit Kalkur, and contributors
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*
* ========================================================= */
.slider {
display: inline-block;
vertical-align: middle;
position: relative;
}
.slider.slider-horizontal {
width: 210px;
height: 20px;
}
.slider.slider-horizontal .slider-track {
height: 10px;
width: 100%;
margin-top: -5px;
top: 50%;
left: 0;
}
.slider.slider-horizontal .slider-selection, .slider.slider-horizontal .slider-track-low, .slider.slider-horizontal .slider-track-high {
height: 100%;
top: 0;
bottom: 0;
}
.slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
margin-left: -10px;
}
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
position: relative;
top: 50%;
transform: translateY(-50%);
border-width: 0 10px 10px 10px;
width: 0;
height: 0;
border-bottom-color: #054a29;
margin-top: 0;
}
.slider.slider-horizontal .slider-tick-container {
white-space: nowrap;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.slider.slider-horizontal .slider-tick-label-container {
white-space: nowrap;
margin-top: 20px;
}
.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
display: inline-block;
text-align: center;
}
.slider.slider-horizontal.slider-rtl .slider-track {
left: initial;
right: 0;
}
.slider.slider-horizontal.slider-rtl .slider-tick,
.slider.slider-horizontal.slider-rtl .slider-handle {
margin-left: initial;
margin-right: -10px;
}
.slider.slider-horizontal.slider-rtl .slider-tick-container {
left: initial;
right: 0;
}
.slider.slider-vertical {
height: 210px;
width: 20px;
}
.slider.slider-vertical .slider-track {
width: 10px;
height: 100%;
left: 25%;
top: 0;
}
.slider.slider-vertical .slider-selection {
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.slider.slider-vertical .slider-track-low, .slider.slider-vertical .slider-track-high {
width: 100%;
left: 0;
right: 0;
}
.slider.slider-vertical .slider-tick,
.slider.slider-vertical .slider-handle {
margin-top: -10px;
}
.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
border-width: 10px 0 10px 10px;
width: 1px;
height: 1px;
border-left-color: #054a29;
margin-left: 0;
}
.slider.slider-vertical .slider-tick-label-container {
white-space: nowrap;
}
.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
padding-left: 4px;
}
.slider.slider-vertical.slider-rtl .slider-track {
left: initial;
right: 25%;
}
.slider.slider-vertical.slider-rtl .slider-selection {
left: initial;
right: 0;
}
.slider.slider-vertical.slider-rtl .slider-tick.triangle,
.slider.slider-vertical.slider-rtl .slider-handle.triangle {
border-width: 10px 10px 10px 0;
}
.slider.slider-vertical.slider-rtl .slider-tick-label-container .slider-tick-label {
padding-left: initial;
padding-right: 4px;
}
.slider.slider-disabled .slider-handle {
background-color: #cfcfcf;
background-image: linear-gradient(to bottom, #DFDFDF, #BEBEBE);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DFDFDF', endColorstr='#BEBEBE', GradientType=0);
}
.slider.slider-disabled .slider-track {
background-color: #e7e7e7;
background-image: linear-gradient(to bottom, #E5E5E5, #E9E9E9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E5E5E5', endColorstr='#E9E9E9', GradientType=0);
cursor: not-allowed;
}
.slider input {
display: none;
}
.slider .tooltip-inner {
white-space: nowrap;
max-width: none;
}
.slider .bs-tooltip-top .tooltip-inner,
.slider .bs-tooltip-bottom .tooltip-inner {
position: relative;
left: -50%;
}
.slider.bs-tooltip-left .tooltip-inner, .slider.bs-tooltip-right .tooltip-inner {
position: relative;
top: -100%;
}
.slider .tooltip {
pointer-events: none;
}
.slider .tooltip.bs-tooltip-top .arrow, .slider .tooltip.bs-tooltip-bottom .arrow {
left: -.4rem;
}
.slider .tooltip.bs-tooltip-top {
margin-top: -44px;
}
.slider .tooltip.bs-tooltip-bottom {
margin-top: 2px;
}
.slider .tooltip.bs-tooltip-left, .slider .tooltip.bs-tooltip-right {
margin-top: -14px;
}
.slider .tooltip.bs-tooltip-left .arrow, .slider .tooltip.bs-tooltip-right .arrow {
top: 8px;
}
.slider .hide {
display: none;
}
.slider-track {
background-color: #c6d4ca;
background-image: linear-gradient(to bottom, #abbfb0, #e2e9e4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#abbfb0', endColorstr='#e2e9e4', GradientType=0);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 4px;
position: absolute;
cursor: pointer;
}
.slider-selection {
background-color: #c6d4ca;
background-image: linear-gradient(to bottom, #e2e9e4, #abbfb0);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e9e4', endColorstr='#abbfb0', GradientType=0);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-sizing: border-box;
border-radius: 4px;
position: absolute;
}
.slider-selection.tick-slider-selection {
background-color: #46c1fe;
background-image: linear-gradient(to bottom, #52c5ff, #3abcfd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd', GradientType=0);
}
.slider-track-low, .slider-track-high {
box-sizing: border-box;
border-radius: 4px;
position: absolute;
background: transparent;
}
.slider-handle {
background-color: #0478b2;
background-image: linear-gradient(to bottom, #275b3b, #054a29);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#275b3b', endColorstr='#054a29', GradientType=0);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
position: absolute;
top: 2px;
width: 15px;
height: 15px;
background-color: #054a29;
border: 0px solid transparent;
}
.slider-handle:hover {
cursor: pointer;
}
.slider-handle.round {
border-radius: 20px;
}
.slider-handle.triangle {
background: transparent none;
}
.slider-handle.custom {
background: transparent none;
}
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
.slider-tick {
background-color: #c6d4ca;
background-image: linear-gradient(to bottom, #abbfb0, #e2e9e4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#abbfb0', endColorstr='#e2e9e4', GradientType=0);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-sizing: border-box;
position: absolute;
cursor: pointer;
width: 20px;
height: 20px;
filter: none;
opacity: 0.8;
border: 0px solid transparent;
}
.slider-tick.round {
border-radius: 50%;
}
.slider-tick.triangle {
background: transparent none;
}
.slider-tick.custom {
background: transparent none;
}
.slider-tick.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
.slider-tick.in-selection {
background-color: #46c1fe;
background-image: linear-gradient(to bottom, #52c5ff, #3abcfd);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#52c5ff', endColorstr='#3abcfd', GradientType=0);
opacity: 1;
}
/*# sourceMappingURL=bootstrap-slider.css.map */

View File

@ -17,6 +17,7 @@
<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" href="./css/collapsemod.css">
<link rel="stylesheet" href="./css/bootstrap-slider.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
@ -35,7 +36,10 @@
<script type="module" src="./js/syntgraph_5.1.js"></script>
<script src="https://lida.dantenetwork.it/node_modules/commarcdiag/d3.js"></script>
<script type="text/javascript" src="./js/lib/peg-0.10.0.min.js"></script>
<!--
<script type="text/javascript" src="./js/lib/jquery.ui.touch-punch.js"></script>
-->
<script type="text/javascript" src="./js/lib/bootstrap-slider.js"></script>
<script type="module" src="./js/browseMgr_5.1.js"></script>
<script type="text/javascript" src="./js/minimap_4.3.js"></script>
<script type="text/javascript" src="./js/partext.js"></script>
@ -559,15 +563,6 @@
id="simpleSearchDiv" style="display: d-flex">
<div class="btn-group flex-nowrap p-0 pr-1" role="group"
aria-label="Bottoni Ricerca Semplice">
<!--
<button class="btn btn-sm btn-outline-secondary bg-light"
style="height: 32px; width: 78px;"
type="button" id="showOptions" data-toggle="collapse"
data-target="#collapseOptions" aria-expanded="false"
aria-controls="collapseOptions">
<span class="text-muted">Opzioni</span>
</button>
-->
<button class="btn btn-sm btn-outline-secondary bg-light ml-1"
type="button" id='cleanresult' aria-expanded="false"
aria-controls="collapseExample">
@ -605,14 +600,6 @@
aria-controls="collapseAdvanced">
<span class="font-weight-bold text-muted">Nascondi</span>
</button>
<!-- <button class="btn btn-sm btn-outline-success bg-light"
style="height: 32px; width: 78px;"
id="showLogic" data-toggle="collapse"
data-target="#collapseLogicCla" aria-expanded="true"
aria-controls="collapseLogicClaCla">
<span class="font-weight-bold text-muted">Nascondi</span>
</button>
--> <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>
@ -630,35 +617,6 @@
<div id="rigaRicerca" class="row mx-0">
<div id="displayOptions" class="col-12 px-0">
<!--
<div class="collapse" id="collapseOptions">
<div class="col-12 p-0">
<div class="card card-body bg-lida08 p-2">
<div class="form-inline input-group px-1 py-2">
<select
class="form-control custom-select custom-select-sm text-muted bg-light monMe btn-outline-secondary border"
id="lemma_forma">
<option value="forma">La forma</option>
<option value="lemma">Il lemma</option>
<option value="testo">Il testo</option>
</select> <select
class="form-control custom-select custom-select-sm text-muted bg-light ml-2 monMe btn-outline-secondary border"
id="opzioni_testo">
<option value="parola">come Parola</option>
<option value="sottostringa">come Sottostringa</option>
<option value="prefisso">come Prefisso</option>
<option value="suffisso">come Suffisso</option>
<option value="regexp">come Espressione regolare</option>
</select>
</div>
-->
<!--
</div>
</div>
</div>
-->
<div class="collapse" id="collapseAdvanced">
<!-- inizio RicercaAvanzata -->
@ -688,16 +646,6 @@
<option value="discorso">Discorsi</option>
<option value="riferimento">Riferimenti</option>
</select>
<!-- <select
class="custom-select text-muted bg-light border border-success btn-outline-success "
id="unitaRicerca">
<option value="forme">Forme</option>
<option value="frase">Frasi</option>
<option value="periodo">Periodi</option>
<option value="discorso">Discorsi</option>
<option value="sintagma">Sintagmi</option>
<option value="metafora">Metafore</option>
</select>-->
</div>
</div>
</div>
@ -720,16 +668,6 @@
class="addCCbtn btn btn-sm btn-outline-success bg-light">
<span class="text-muted">Clausola</span>
</button>
<!--
<button id="btnAddCla2" type="button"
class="addCCbtn btn btn-sm btn-outline-success bg-light">
<span class="text-muted">Sintassi</span>
</button>
<button id="btnAddCla3" type="button"
class="addCCbtn btn btn-sm btn-outline-success bg-light">
<span class="text-muted">Metafore</span>
</button>
-->
<label
class="input-group-text border-top border-bottom border-right-0 border-left-0 border-success"
style="border-radius: 0;"><ion-icon
@ -841,10 +779,6 @@
</div>
</div>
</div>
</div>
</div>
@ -1579,8 +1513,18 @@
</select>
</div>
</div>
<div class="form-group px-1 pb-1 pt-2 mt-1 mb-0">
<div class="justify-content-start px-0 d-flex">
<div class="text-right px-2 d-sm-inline flex-nowrap">
<label for="posSliderN"
class="text-muted control-label small">Posizione nella frase: </label>
</div>
<div class="btn-group d-sm-inline flex-nowrap p-0 pl-4 pr-3 pb-1 bg-light border rounded align-self-center" aria-label="Slider posizione">
<input id="posSliderN" type="text" class="form-control form-control-sm">
</div>
</div>
</div>
<div class="bg-light well m-0" id="contextDivN">
</div>
</div>

2074
js/lib/bootstrap-slider.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -3,7 +3,7 @@
*/
import {numeroContesti, resetResult,isSearchRiferimenti, manageRisultatoCommmenti} from './browseMgr_5.1.js'
import {numeroContesti, resetResult, isSearchRiferimenti, manageRisultatoCommmenti} from './browseMgr_5.1.js'
import { resetGraphStr } from './syntgraph_5.1.js';
export var getJsonQuery;
@ -183,7 +183,7 @@ $(document).ready(function() {
$("#simpleSearchDiv").fadeIn(400);
});
});
// Inizializza sortable
$( "#sortable0" ).sortable({
items: "> li",
@ -777,8 +777,21 @@ $(document).ready(function() {
$('#cla' + tabID + " #queryTextN").attr("id","queryText" + tabID);
$('#cla' + tabID + " #opzioni_testoN").attr("id","opzioni_testo" + tabID);
$('#cla' + tabID + " #contextDivN").attr("id","contextDiv" + tabID);
$('#cla' + tabID + " #posSliderN").attr("id","posSlider" + tabID);
// inizializzo slider
$("#posSlider" + tabID).bootstrapSlider({
id: "slider"+tabID,
min: 1,
max: 37,
range: true,
enabled: false,
value: [1, 37]
});
$("#posSlider" + tabID).on("slide", function() {
refreshClaList();
});
addClaContext(tabID);
// refreshClaList();
refreshSortables();
}
@ -794,7 +807,6 @@ $(document).ready(function() {
$("#rif" + rifID).attr("data-claActive", active);
$("#rif" + rifID).attr("style", "");
addClaContext(rifID);
// refreshClaList();
refreshSortables();
}
@ -1166,6 +1178,8 @@ $(document).ready(function() {
function updateClaListItem(claIdNum, sortableId){
var claText = '';
var termText = '';
var posText = '';
var posJson = '';
var checkInsert = '';
var claId = "cla" + claIdNum;
var claListItemId = "li-cla" + claIdNum;
@ -1217,8 +1231,26 @@ $(document).ready(function() {
var syntSelect = $("#" + claId).find("#synttypes");
var funcSelect = $("#" + claId).find("#syntfunc");
claText = claText + '</span>.<br>Tipo sintattico: <span class="font-italic">' + syntSelect[0].options[syntSelect[0].selectedIndex].text + ';</span><br>Livello di subordinazione: <span class="font-italic">' + funcSelect[0].options[funcSelect[0].selectedIndex].text + '.</span><br>Contesto: <span class="font-italic">' + contextText + '</span>';
jsonTextToParse = jsonTextToParse + ', "' + syntSelect.attr('name') + '": "' + syntSelect[0].options[syntSelect[0].selectedIndex].value + '", "' + funcSelect.attr('name') + '": "' + funcSelect[0].options[funcSelect[0].selectedIndex].value + '"';
if (!(gramSelect[0].options[gramSelect[0].selectedIndex].value == "all") && !(syntSelect[0].options[syntSelect[0].selectedIndex].value == "all")) {
var posArray = $("#posSlider" + claIdNum).bootstrapSlider("getValue")
if (posArray[0] == posArray[1]) {
posText = '</span>.<br>Posizione nella frase: <span class="font-italic"> ' + posArray[0] + '<sup>a</sup>' ;
} else {
if ((posArray[0] == 1) && (posArray[1] == 37)) {
posText = '</span>.<br>Posizione nella frase: <span class="font-italic">qualunque' ;
} else {
posText = '</span>.<br>Posizione nella frase: <span class="font-italic">dalla ' + posArray[0] + '<sup>a</sup> alla ' + posArray[1] + '<sup>a</sup>' ;
}
}
posJson = ', "Posizioni": "' + $("#posSlider" + claIdNum).bootstrapSlider("getValue") + '"';
$("#posSlider" + claIdNum).bootstrapSlider('enable');
} else {
$("#posSlider" + claIdNum).bootstrapSlider('refresh');
};
claText = claText + '</span>.<br>Tipo sintattico: <span class="font-italic">' + syntSelect[0].options[syntSelect[0].selectedIndex].text + ';</span><br>Livello di subordinazione: <span class="font-italic">' + funcSelect[0].options[funcSelect[0].selectedIndex].text + posText + '.</span><br>Contesto: <span class="font-italic">' + contextText + '</span>';
jsonTextToParse = jsonTextToParse + ', "' + syntSelect.attr('name') + '": "' + syntSelect[0].options[syntSelect[0].selectedIndex].value + '", "' + funcSelect.attr('name') + '": "' + funcSelect[0].options[funcSelect[0].selectedIndex].value + '"' + posJson;
break;
default:
claText = $("#" + claListItemId + " .clatext").text();
@ -1514,6 +1546,11 @@ $(document).ready(function() {
if (queryJson["Clausola" + itm].functionSyntax != "all") {
$("#cla" + tabID + " #syntfunc").val(queryJson["Clausola" + itm].functionSyntax);
}
if (queryJson["Clausola" + itm].Posizioni) {
var pos = queryJson["Clausola" + itm].Posizioni.split(",")
$("#posSlider" + itm).bootstrapSlider('enable');
$("#posSlider" + itm).bootstrapSlider('setValue', [parseInt(pos[0]), parseInt(pos[1])]);
}
window["context" + tabID] = JSON.parse(queryJson["Clausola" + itm].contesto);
parseContext(tabID);
break;