From 93cb4eb6bfce71a28209f98c23c5fe935bd7fd5c Mon Sep 17 00:00:00 2001 From: hystepik Date: Thu, 16 Mar 2023 14:51:15 +0100 Subject: [PATCH 1/9] New : uploadfile drag and drop on card --- htdocs/core/js/lib_foot.js.php | 43 +++++++++++++++++++++++++++++++ htdocs/core/lib/functions.lib.php | 5 ++-- htdocs/fourn/commande/card.php | 2 +- htdocs/theme/eldy/global.inc.php | 15 +++++++++++ 4 files changed, 62 insertions(+), 3 deletions(-) diff --git a/htdocs/core/js/lib_foot.js.php b/htdocs/core/js/lib_foot.js.php index 963e357199a..a6d48d10b8e 100644 --- a/htdocs/core/js/lib_foot.js.php +++ b/htdocs/core/js/lib_foot.js.php @@ -379,3 +379,46 @@ print ' }); }); '."\n"; + +// Code to manage the drag and drop file +//TODO: Find a way to display text over div +print "\n/* JS CODE TO ENABLE DRAG AND DROP OF FILE */\n"; +print ' + jQuery(document).ready(function() { + counterdragdrop = 0; + $(".cssDragDropArea").on("dragenter", function(ev) { + // Entering drop area. Highlight area + counterdragdrop++; + $(".cssDragDropArea").addClass("highlightDragDropArea"); + ev.preventDefault(); + }); + + $(".cssDragDropArea").on("dragleave", function(ev) { + // Going out of drop area. Remove Highlight + counterdragdrop--; + if (counterdragdrop === 0) { + $(".cssDragDropArea").removeClass("highlightDragDropArea"); + } + }); + + $(".cssDragDropArea").on("dragover", function(ev) { + ev.preventDefault(); + return false; + }); + + $(".cssDragDropArea").on("drop", function(e) { + console.log("Trigger event file droped"); + e.preventDefault(); + fd = new FormData(); + var dataTransfer = e.originalEvent.dataTransfer; + if(dataTransfer.files && dataTransfer.files.length){ + var droppedFiles = e.originalEvent.dataTransfer.files; + $.each(droppedFiles, function(index,file){ + fd.append("file",file,file.name) + }); + } + $(".cssDragDropArea").removeClass("highlightDragDropArea"); + counterdragdrop = 0; + }); + }); +'."\n"; diff --git a/htdocs/core/lib/functions.lib.php b/htdocs/core/lib/functions.lib.php index 4af0bbe610a..9a4ee8976ce 100644 --- a/htdocs/core/lib/functions.lib.php +++ b/htdocs/core/lib/functions.lib.php @@ -1871,9 +1871,10 @@ function dol_fiche_head($links = array(), $active = '0', $title = '', $notab = 0 * @param string $morecss More CSS on the link * @param int $limittoshow Limit number of tabs to show. Use 0 to use automatic default value. * @param string $moretabssuffix A suffix to use when you have several dol_get_fiche_head() in same page + * @param int $dragdropfile 0 (default) or 1. 1 enable a drop zone for file to be upload, 0 disable it * @return string */ -function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab = 0, $picto = '', $pictoisfullpath = 0, $morehtmlright = '', $morecss = '', $limittoshow = 0, $moretabssuffix = '') +function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab = 0, $picto = '', $pictoisfullpath = 0, $morehtmlright = '', $morecss = '', $limittoshow = 0, $moretabssuffix = '', $dragdropfile = 0) { global $conf, $langs, $hookmanager; @@ -2039,7 +2040,7 @@ function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab } if (!$notab || $notab == -1 || $notab == -2 || $notab == -3) { - $out .= "\n".'
'."\n"; + $out .= "\n".'
'."\n"; } $parameters = array('tabname' => $active, 'out' => $out); diff --git a/htdocs/fourn/commande/card.php b/htdocs/fourn/commande/card.php index f79c9fe49b4..5eb7f1a4539 100644 --- a/htdocs/fourn/commande/card.php +++ b/htdocs/fourn/commande/card.php @@ -1884,7 +1884,7 @@ if ($action == 'create') { $head = ordersupplier_prepare_head($object); $title = $langs->trans("SupplierOrder"); - print dol_get_fiche_head($head, 'card', $title, -1, 'order'); + print dol_get_fiche_head($head, 'card', $title, -1, 'order', 0, '', '', 0, '', 1); $formconfirm = ''; diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php index cab0cb247ca..73a24a1671a 100644 --- a/htdocs/theme/eldy/global.inc.php +++ b/htdocs/theme/eldy/global.inc.php @@ -7591,7 +7591,22 @@ div.clipboardCPValue.hidewithsize { /* filter: blur(4px); */ } +/* ============================================================================== */ +/* For drag and drop feature */ +/* ============================================================================== */ +.cssDragDropArea{ + border: 2px rgba(123, 123, 123, .2) dashed !important; + padding: 10px !important; +} +.highlightDragDropArea{ + border: 2px #000 dashed !important; + background-color: #666 !important; +} +.highlightDragDropArea > *{ + opacity:0.5; + filter: blur(3px) grayscale(100%); +} /* ============================================================================== */ /* CSS style used for small screen */ /* ============================================================================== */ From 559d50a28364372e05d48ed3d7a7ce6e9600c40d Mon Sep 17 00:00:00 2001 From: hystepik Date: Thu, 16 Mar 2023 16:37:10 +0100 Subject: [PATCH 2/9] activate on fourn facture --- htdocs/fourn/commande/card.php | 2 +- htdocs/fourn/facture/card.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/htdocs/fourn/commande/card.php b/htdocs/fourn/commande/card.php index 5eb7f1a4539..f79c9fe49b4 100644 --- a/htdocs/fourn/commande/card.php +++ b/htdocs/fourn/commande/card.php @@ -1884,7 +1884,7 @@ if ($action == 'create') { $head = ordersupplier_prepare_head($object); $title = $langs->trans("SupplierOrder"); - print dol_get_fiche_head($head, 'card', $title, -1, 'order', 0, '', '', 0, '', 1); + print dol_get_fiche_head($head, 'card', $title, -1, 'order'); $formconfirm = ''; diff --git a/htdocs/fourn/facture/card.php b/htdocs/fourn/facture/card.php index 30e6ceda91e..730eb1d869e 100644 --- a/htdocs/fourn/facture/card.php +++ b/htdocs/fourn/facture/card.php @@ -2797,7 +2797,7 @@ if ($action == 'create') { $head = facturefourn_prepare_head($object); $titre = $langs->trans('SupplierInvoice'); - print dol_get_fiche_head($head, 'card', $titre, -1, 'supplier_invoice'); + print dol_get_fiche_head($head, 'card', $titre, -1, 'supplier_invoice', 0, '', '', 0, '', 1); $formconfirm = ''; From 4a1dabc3d712efda566520f22462de2ce483f54c Mon Sep 17 00:00:00 2001 From: hystepik Date: Fri, 17 Mar 2023 16:43:56 +0100 Subject: [PATCH 3/9] Upload works --- htdocs/core/js/lib_foot.js.php | 43 ------------------- htdocs/core/lib/files.lib.php | 71 +++++++++++++++++++++++++++++++ htdocs/core/lib/functions.lib.php | 4 +- 3 files changed, 74 insertions(+), 44 deletions(-) diff --git a/htdocs/core/js/lib_foot.js.php b/htdocs/core/js/lib_foot.js.php index a6d48d10b8e..963e357199a 100644 --- a/htdocs/core/js/lib_foot.js.php +++ b/htdocs/core/js/lib_foot.js.php @@ -379,46 +379,3 @@ print ' }); }); '."\n"; - -// Code to manage the drag and drop file -//TODO: Find a way to display text over div -print "\n/* JS CODE TO ENABLE DRAG AND DROP OF FILE */\n"; -print ' - jQuery(document).ready(function() { - counterdragdrop = 0; - $(".cssDragDropArea").on("dragenter", function(ev) { - // Entering drop area. Highlight area - counterdragdrop++; - $(".cssDragDropArea").addClass("highlightDragDropArea"); - ev.preventDefault(); - }); - - $(".cssDragDropArea").on("dragleave", function(ev) { - // Going out of drop area. Remove Highlight - counterdragdrop--; - if (counterdragdrop === 0) { - $(".cssDragDropArea").removeClass("highlightDragDropArea"); - } - }); - - $(".cssDragDropArea").on("dragover", function(ev) { - ev.preventDefault(); - return false; - }); - - $(".cssDragDropArea").on("drop", function(e) { - console.log("Trigger event file droped"); - e.preventDefault(); - fd = new FormData(); - var dataTransfer = e.originalEvent.dataTransfer; - if(dataTransfer.files && dataTransfer.files.length){ - var droppedFiles = e.originalEvent.dataTransfer.files; - $.each(droppedFiles, function(index,file){ - fd.append("file",file,file.name) - }); - } - $(".cssDragDropArea").removeClass("highlightDragDropArea"); - counterdragdrop = 0; - }); - }); -'."\n"; diff --git a/htdocs/core/lib/files.lib.php b/htdocs/core/lib/files.lib.php index 60adcc64003..3e1c6892bbd 100644 --- a/htdocs/core/lib/files.lib.php +++ b/htdocs/core/lib/files.lib.php @@ -3316,3 +3316,74 @@ function getFilesUpdated(&$file_list, SimpleXMLElement $dir, $path = '', $pathre return $file_list; } + +/** + * Function to manage the drag and drop file. + * We use global variable $object + * + * @return string Js script to display + */ +function dragAndDropFileUpload() +{ + global $object; + //TODO: Find a way to display text over div + $out = "\n"; + return $out; +} diff --git a/htdocs/core/lib/functions.lib.php b/htdocs/core/lib/functions.lib.php index 9a4ee8976ce..92ceba99563 100644 --- a/htdocs/core/lib/functions.lib.php +++ b/htdocs/core/lib/functions.lib.php @@ -2042,7 +2042,9 @@ function dol_get_fiche_head($links = array(), $active = '', $title = '', $notab if (!$notab || $notab == -1 || $notab == -2 || $notab == -3) { $out .= "\n".'
'."\n"; } - + if (!empty($dragdropfile)) { + print dragAndDropFileUpload(); + } $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" if ($reshook > 0) { From fab9d26254f2508fac53e01417df7362cdd179e8 Mon Sep 17 00:00:00 2001 From: hystepik Date: Mon, 20 Mar 2023 16:38:45 +0100 Subject: [PATCH 4/9] 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 = "