add of tyext when overing

This commit is contained in:
hystepik 2023-03-20 16:38:45 +01:00
parent 4a1dabc3d7
commit fab9d26254
4 changed files with 34 additions and 18 deletions

View File

@ -3321,30 +3321,32 @@ function getFilesUpdated(&$file_list, SimpleXMLElement $dir, $path = '', $pathre
* Function to manage the drag and drop file. * Function to manage the drag and drop file.
* We use global variable $object * 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; global $object, $langs;
//TODO: Find a way to display text over div $out = "";
$out = "<script>"; $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 .= "\n<!-- JS CODE TO ENABLE DRAG AND DROP OF FILE -->\n";
$out .= "<script>";
$out .= ' $out .= '
jQuery(document).ready(function() { jQuery(document).ready(function() {
counterdragdrop = 0; $("#'.$htmlname.'").addClass("cssDragDropArea");
$(".cssDragDropArea").on("dragenter", function(ev) { $(".cssDragDropArea").on("dragenter", function(ev) {
// Entering drop area. Highlight area // Entering drop area. Highlight area
counterdragdrop++; console.log("We add class highlightDragDropArea")
$(".cssDragDropArea").addClass("highlightDragDropArea"); $(this).addClass("highlightDragDropArea");
$("#'.$htmlname.'Message").removeClass("hidden");
ev.preventDefault(); ev.preventDefault();
}); });
$(".cssDragDropArea").on("dragleave", function(ev) { $(".cssDragDropArea").on("dragleave", function(ev) {
// Going out of drop area. Remove Highlight // Going out of drop area. Remove Highlight
counterdragdrop--; console.log("We remove class highlightDragDropArea")
if (counterdragdrop === 0) { $("#'.$htmlname.'Message").addClass("hidden");
$(".cssDragDropArea").removeClass("highlightDragDropArea"); $(this).removeClass("highlightDragDropArea");
}
}); });
$(".cssDragDropArea").on("dragover", function(ev) { $(".cssDragDropArea").on("dragover", function(ev) {

View File

@ -2040,10 +2040,10 @@ function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab
} }
if (!$notab || $notab == -1 || $notab == -2 || $notab == -3) { 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)) { if (!empty($dragdropfile)) {
print dragAndDropFileUpload(); $out .= dragAndDropFileUpload("dragDropAreaTabBar");
} }
$parameters = array('tabname' => $active, 'out' => $out); $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" $reshook = $hookmanager->executeHooks('printTabsHead', $parameters); // This hook usage is called just before output the head of tabs. Take also a look at "completeTabsHead"

View File

@ -1227,3 +1227,4 @@ LastPasswordChangeDate=Last password change date
PublicVirtualCardUrl=Virtual business card page URL PublicVirtualCardUrl=Virtual business card page URL
PublicVirtualCard=Virtual business card PublicVirtualCard=Virtual business card
TreeView=Tree view TreeView=Tree view
DropFileToAddItToObject=Drop a file to add it to this object

View File

@ -7596,17 +7596,30 @@ div.clipboardCPValue.hidewithsize {
/* ============================================================================== */ /* ============================================================================== */
.cssDragDropArea{ .cssDragDropArea{
border: 2px rgba(123, 123, 123, .2) dashed !important; position: relative;
padding: 10px !important; border: 2px rgba(123, 123, 123, .2) dashed !important;
padding: 10px !important;
} }
.highlightDragDropArea{ .highlightDragDropArea{
border: 2px #000 dashed !important; border: 2px #000 dashed !important;
background-color: #666 !important; background-color: #666 !important;
} }
.highlightDragDropArea > *{ .highlightDragDropArea * {
pointer-events: none;
}
.highlightDragDropArea * :not(.dragDropAreaMessage *){
opacity:0.5; opacity:0.5;
filter: blur(3px) grayscale(100%); 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 */ /* CSS style used for small screen */
/* ============================================================================== */ /* ============================================================================== */