From e351dfa00468f7b9d85df516bb08fd09ce2d2893 Mon Sep 17 00:00:00 2001
From: Luca Trupiano <luca.trupiano@isti.cnr.it>
Date: Wed, 22 Feb 2023 18:36:28 +0100
Subject: [PATCH] Modifiche a minimap, visualizzazione, bottoni ricerca

---
 css/custom1_4.2.css | 63 +++++++++++++++++++++++----------
 css/custom2_4.2.css | 66 ++++++++++++++++++++++++----------
 index_4.2.html      | 86 ++++++++++++++++++++++-----------------------
 js/minimap.js       | 60 ++++++++++++++++---------------
 js/script_4.2.js    | 49 ++++++++++++++++++++------
 5 files changed, 205 insertions(+), 119 deletions(-)

diff --git a/css/custom1_4.2.css b/css/custom1_4.2.css
index c400d6b..547844a 100644
--- a/css/custom1_4.2.css
+++ b/css/custom1_4.2.css
@@ -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 {
diff --git a/css/custom2_4.2.css b/css/custom2_4.2.css
index d1ffb33..ef491bd 100644
--- a/css/custom2_4.2.css
+++ b/css/custom2_4.2.css
@@ -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 {
diff --git a/index_4.2.html b/index_4.2.html
index 87dda59..ad2ae9a 100644
--- a/index_4.2.html
+++ b/index_4.2.html
@@ -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>
 
diff --git a/js/minimap.js b/js/minimap.js
index 2ea2250..d12dec4 100644
--- a/js/minimap.js
+++ b/js/minimap.js
@@ -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});
 	}
 	
diff --git a/js/script_4.2.js b/js/script_4.2.js
index 39d4141..70589ca 100644
--- a/js/script_4.2.js
+++ b/js/script_4.2.js
@@ -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,11 +554,42 @@ $(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){
 		if (active > 0) {