From fab9d26254f2508fac53e01417df7362cdd179e8 Mon Sep 17 00:00:00 2001
From: hystepik <lucas.marcouiller@gmail.com>
Date: Mon, 20 Mar 2023 16:38:45 +0100
Subject: [PATCH] add of tyext when overing

---
 htdocs/core/lib/files.lib.php     | 28 +++++++++++++++-------------
 htdocs/core/lib/functions.lib.php |  4 ++--
 htdocs/langs/en_US/main.lang      |  1 +
 htdocs/theme/eldy/global.inc.php  | 19 ++++++++++++++++---
 4 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/htdocs/core/lib/files.lib.php b/htdocs/core/lib/files.lib.php
index 3e1c6892bbd..caeeb9c2976 100644
--- a/htdocs/core/lib/files.lib.php
+++ b/htdocs/core/lib/files.lib.php
@@ -3321,30 +3321,32 @@ function getFilesUpdated(&$file_list, SimpleXMLElement $dir, $path = '', $pathre
  * Function to manage the drag and drop file.
  * We use global variable $object
  *
- * @return  string	Js script to display
+ * @param	string	$htmlname	The id of the component where we need to drag and drop
+ * @return  string				Js script to display
  */
-function dragAndDropFileUpload()
+function dragAndDropFileUpload($htmlname)
 {
-	global $object;
-	//TODO: Find a way to display text over div
-	$out = "<script>";
-	$out .= "\n/* JS CODE TO ENABLE DRAG AND DROP OF FILE */\n";
+	global $object, $langs;
+	$out = "";
+	$out .= '<div id="'.$htmlname.'Message" class="dragDropAreaMessage hidden"><span>'.img_picto("", 'download').'<br>'.$langs->trans("DropFileToAddItToObject").'</span></div>';
+	$out .= "\n<!-- JS CODE TO ENABLE DRAG AND DROP OF FILE -->\n";
+	$out .= "<script>";
 	$out .= '
 		jQuery(document).ready(function() {
-			counterdragdrop = 0;
+			$("#'.$htmlname.'").addClass("cssDragDropArea");
 			$(".cssDragDropArea").on("dragenter", function(ev) {
 				// Entering drop area. Highlight area
-				counterdragdrop++;
-				$(".cssDragDropArea").addClass("highlightDragDropArea");
+				console.log("We add class highlightDragDropArea")
+				$(this).addClass("highlightDragDropArea");
+				$("#'.$htmlname.'Message").removeClass("hidden");
 				ev.preventDefault();
 			});
 			
 			$(".cssDragDropArea").on("dragleave", function(ev) {
 				// Going out of drop area. Remove Highlight
-				counterdragdrop--;
-				if (counterdragdrop === 0) { 
-					$(".cssDragDropArea").removeClass("highlightDragDropArea");
-				}
+				console.log("We remove class highlightDragDropArea")
+				$("#'.$htmlname.'Message").addClass("hidden");
+				$(this).removeClass("highlightDragDropArea");
 			});
 
 			$(".cssDragDropArea").on("dragover", function(ev) {
diff --git a/htdocs/core/lib/functions.lib.php b/htdocs/core/lib/functions.lib.php
index 92ceba99563..776f898d9b0 100644
--- a/htdocs/core/lib/functions.lib.php
+++ b/htdocs/core/lib/functions.lib.php
@@ -2040,10 +2040,10 @@ function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab
 	}
 
 	if (!$notab || $notab == -1 || $notab == -2 || $notab == -3) {
-		$out .= "\n".'<div class="tabBar'.($notab == -1 ? '' : ($notab == -2 ? ' tabBarNoTop' : (($notab == -3 ? ' noborderbottom' : '').' tabBarWithBottom'))).(!empty($dragdropfile) ? ' cssDragDropArea' : '').'">'."\n";
+		$out .= "\n".'<div id="dragDropAreaTabBar" class="tabBar'.($notab == -1 ? '' : ($notab == -2 ? ' tabBarNoTop' : (($notab == -3 ? ' noborderbottom' : '')))).'">'."\n";
 	}
 	if (!empty($dragdropfile)) {
-		print dragAndDropFileUpload();
+		$out .= dragAndDropFileUpload("dragDropAreaTabBar");
 	}
 	$parameters = array('tabname' => $active, 'out' => $out);
 	$reshook = $hookmanager->executeHooks('printTabsHead', $parameters); // This hook usage is called just before output the head of tabs. Take also a look at "completeTabsHead"
diff --git a/htdocs/langs/en_US/main.lang b/htdocs/langs/en_US/main.lang
index 6734168621c..a8d96c77f6f 100644
--- a/htdocs/langs/en_US/main.lang
+++ b/htdocs/langs/en_US/main.lang
@@ -1227,3 +1227,4 @@ LastPasswordChangeDate=Last password change date
 PublicVirtualCardUrl=Virtual business card page URL
 PublicVirtualCard=Virtual business card
 TreeView=Tree view
+DropFileToAddItToObject=Drop a file to add it to this object
diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index 73a24a1671a..7968ea0dece 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -7596,17 +7596,30 @@ div.clipboardCPValue.hidewithsize {
 /* ============================================================================== */
 
 .cssDragDropArea{
-  border: 2px rgba(123, 123, 123, .2) dashed !important;
-  padding: 10px !important;
+	position: relative;
+	 border: 2px rgba(123, 123, 123, .2) dashed !important;
+	padding: 10px !important;
 }
 .highlightDragDropArea{
 	border: 2px #000 dashed !important;
 	background-color: #666 !important;
 }
-.highlightDragDropArea > *{
+.highlightDragDropArea * {
+	pointer-events: none;
+}
+.highlightDragDropArea * :not(.dragDropAreaMessage *){
 	opacity:0.5;
 	filter: blur(3px) grayscale(100%);
 }
+.dragDropAreaMessage {
+	position: absolute;
+	left:50%;
+	   top:50%;
+	   transform: translate(-50%, -50%);
+	text-align:center;
+	/*BIEN PLACER CETTE DIV */
+}
+
 /* ============================================================================== */
 /* CSS style used for small screen                                                */
 /* ============================================================================== */