Merge pull request #893 from nicolas-eoxia/fix_media_js

#892 [JS] add: improve canvas size and use conf for manage fast upload
Evarisk · Apr 2, 2024 · 6b09529 · 6b09529
2 parents 15744a0 + 88dd1b9
commit 6b09529
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 64 deletions.
diff --git a/admin/setup.php b/admin/setup.php
@@ -114,6 +114,15 @@
 print '</td><td class="center">';
 print ajax_constantonoff('SATURNE_USE_ALL_EMAIL_MODE');
 print '</td></tr>';
+
+// Use fast upload improvement
+print '<tr class="oddeven"><td>';
+print  $langs->trans('UseFastUploadImprovement');
+print '</td><td>';
+print $langs->transnoentities('UseFastUploadImprovementDescription');
+print '</td><td class="center">';
+print ajax_constantonoff('SATURNE_USE_FAST_UPLOAD_IMPROVEMENT');
+print '</td></tr>';
 print '</table>';
 
 // Page end

diff --git a/core/tpl/medias/media_editor_modal.tpl.php b/core/tpl/medias/media_editor_modal.tpl.php
@@ -41,7 +41,7 @@
             <!-- Modal-ADD Image Content-->
             <div class="modal-content" id="#modalContent" style="height: 75%;">
                 <div class="canvas-container">
-                    <canvas id="canvas" style="border: #0b419b solid 2px"></canvas>
+                    <canvas id="canvas" style="border: #0b419b solid 2px; width: 100%;"></canvas>
                 </div>
             </div>
             <!-- Modal-Footer-->

diff --git a/core/tpl/medias/medias_gallery_modal.tpl.php b/core/tpl/medias/medias_gallery_modal.tpl.php
@@ -92,7 +92,7 @@
     $encodedImage = explode(',', $data['img'])[1];
     $decodedImage = base64_decode($encodedImage);
     $pathToECMImg = $conf->ecm->dir_output . '/' . $moduleNameLowerCase . '/medias';
-    $fileName     = dol_print_date(dol_now(), 'dayhourlog') . '_img.jpg';
+    $fileName     = dol_print_date(dol_now(), 'dayhourlog') . '_img.png';
 
     if (!dol_is_dir($pathToECMImg)) {
         dol_mkdir($pathToECMImg);
@@ -107,6 +107,10 @@
 
     if (dol_strlen($object->ref) > 0) {
         $pathToObjectImg = $conf->$moduleNameLowerCase->multidir_output[$conf->entity] . '/' . $object->element . '/' . $object->ref . '/' . $data['objectSubdir'];
+        if (empty($object->$data['objectSubType'])) {
+            $object->$data['objectSubType'] = $fileName;
+            $object->setValueFrom($object->$data['objectSubType'], $object->$data['objectSubType'], '', '', 'text', '', $user);
+        }
     } else {
         $pathToObjectImg = $conf->$moduleNameLowerCase->multidir_output[$conf->entity] . '/' . $object->element . '/tmp/' . $modObject->prefix . '0/' . $data['objectSubdir'];
     }

diff --git a/js/modules/media.js b/js/modules/media.js
@@ -79,7 +79,7 @@ window.saturne.media.init = function() {
  * @returns {void}
  */
 window.saturne.media.event = function() {
-  $(document).on('change', '.fast-upload', window.saturne.media.uploadImage);
+  $(document).on('change', '.fast-upload-improvement', window.saturne.media.uploadImage);
   $(document).on('click', '.image-rotate-left', function() {
     window.saturne.media.rotateImage(-90);
   });
@@ -186,14 +186,15 @@ window.saturne.media.drawImageOnCanvas = function(event) {
     const context = window.saturne.media.canvas.getContext('2d');
 
     // Draw the image on the canvas
-    var img = new Image(300, 300);
+    var img = new Image();
     img.src = event.target.result;
     window.saturne.media.img = event;
     img.onload = function() {
-
-      window.saturne.media.canvas.width  = 400;
-      window.saturne.media.canvas.height = 400;
-      context.drawImage(this, 0, 0);
+      let canvasWidth  = $(window.saturne.media.canvas).width();
+      let canvasHeight = $(window.saturne.media.canvas).height();
+      window.saturne.media.canvas.width  = canvasWidth;
+      window.saturne.media.canvas.height = canvasHeight;
+      context.drawImage(img, 0, 0, window.saturne.media.canvas.width, window.saturne.media.canvas.height);
     };
 
     window.saturne.media.rotation = 0; // Reset rotation when a new image is selected
@@ -212,24 +213,32 @@ window.saturne.media.drawImageOnCanvas = function(event) {
  */
 window.saturne.media.createImg = function() {
   let canvas = $(this).closest('.wpeo-modal').find('canvas')[0];
-  let img    = canvas.toDataURL('image/jpeg');
+  let img    = canvas.toDataURL('image/png');
 
-  let objectSubdir = $('.fast-upload-options').attr('data-from-subdir');
+  let objectSubType = $('.fast-upload-options').attr('data-from-subtype');
+  let objectSubdir  = $('.fast-upload-options').attr('data-from-subdir');
 
   let token          = window.saturne.toolbox.getToken();
   let querySeparator = window.saturne.toolbox.getQuerySeparator(document.URL);
 
+  window.saturne.loader.display($(this));
   $.ajax({
     url: document.URL + querySeparator + 'subaction=add_img&token=' + token,
     type: 'POST',
     processData: false,
     contentType: 'application/octet-stream',
     data: JSON.stringify({
       img: img,
+      objectSubType: objectSubType,
       objectSubdir: objectSubdir
     }),
-    success: function() {
+    success: function(resp) {
+      $('.wpeo-loader').removeClass('wpeo-loader');
       $('.wpeo-modal').removeClass('modal-active');
+      if ($('.floatleft.inline-block.valignmiddle.divphotoref').length > 0) {
+        $('.floatleft.inline-block.valignmiddle.divphotoref').replaceWith($(resp).find('.floatleft.inline-block.valignmiddle.divphotoref'));
+      }
+      $('.linked-medias.' + objectSubType).replaceWith($(resp).find('.linked-medias.' + objectSubType));
     },
     error: function () {}
   });

diff --git a/js/saturne.min.js b/js/saturne.min.js
diff --git a/langs/en_US/saturne.lang b/langs/en_US/saturne.lang
@@ -36,32 +36,34 @@ ReadAdminPage = Access the module configuration %s
 #
 
 # Data
-ModuleSettings                    = Settings
-ModuleSetup                       = Module configuration %s
-Contributing                      = Contributing
-SaturneModule                     = %s module
-GeneralConfig                     = General configuration
-ConfigData                        = Configurable data from %s
-Configs                           = Configurable % data
-ConfigDatas                       = Configurations
-ModuleMediaGallery                = Configuration of %s media
-SavedMediaData                    = Recording of media data
-EnablePublicInterface             = Public interface
-EnablePublicInterfaceDescription  = Activation of public interfaces
-ShowCompanyLogo                   = Display the company logo
-ShowCompanyLogoDescription        = Enable this option to hide the company logo in the public interface pages
-UseCaptcha                        = Graphic code (CAPTCHA)
-UseCaptchaDescription             = Use of graphic code (CAPTCHA) on public interface pages
-UseAllEmailMode                   = Use of all email configuration modes
-UseAllEmailModeDescription        = Allow the use of all email configuration modes by default, only SMTP mode is allowed
-SignaturePublicInterfaceForbidden = No access to the public signature interface
-ShowSpecimen                      = See signatures on specimen documents
-ShowSpecimenDescription           = Allows viewing of signatures on specimen documents
-ObjectVisibleDescription          = Display the %s field
-SavedConfig                       = Saved configuration
-ErrorSavedConfig                  = An error occurred during the configuration
-Config                            = Configuration
-Extrafields                       = Extra attributes
+ModuleSettings                      = Settings
+ModuleSetup                         = Module configuration %s
+Contributing                        = Contributing
+SaturneModule                       = %s module
+GeneralConfig                       = General configuration
+ConfigData                          = Configurable data from %s
+Configs                             = Configurable % data
+ConfigDatas                         = Configurations
+ModuleMediaGallery                  = Configuration of %s media
+SavedMediaData                      = Recording of media data
+EnablePublicInterface               = Public interface
+EnablePublicInterfaceDescription    = Activation of public interfaces
+ShowCompanyLogo                     = Display the company logo
+ShowCompanyLogoDescription          = Enable this option to hide the company logo in the public interface pages
+UseCaptcha                          = Graphic code (CAPTCHA)
+UseCaptchaDescription               = Use of graphic code (CAPTCHA) on public interface pages
+UseAllEmailMode                     = Use of all email configuration modes
+UseAllEmailModeDescription          = Allow the use of all email configuration modes by default, only SMTP mode is allowed
+UseFastUploadImprovement            = Improved fast image loading
+UseFastUploadImprovementDescription = Activate this option to improve image loading speed <br> Option available : <ul><li>Image rotation</li><li>Drawing on the image</li><li>Saving the image on a reduced format</li></ul>
+SignaturePublicInterfaceForbidden   = No access to the public signature interface
+ShowSpecimen                        = See signatures on specimen documents
+ShowSpecimenDescription             = Allows viewing of signatures on specimen documents
+ObjectVisibleDescription            = Display the %s field
+SavedConfig                         = Saved configuration
+ErrorSavedConfig                    = An error occurred during the configuration
+Config                              = Configuration
+Extrafields                         = Extra attributes
 
 
 # Mod Numbering

diff --git a/langs/fr_FR/saturne.lang b/langs/fr_FR/saturne.lang
@@ -36,32 +36,34 @@ ReadAdminPage = Accéder à la configuration du module %s
 #
 
 # Data - Donnée
-ModuleSettings                    = Réglages
-ModuleSetup                       = Configuration du module %s
-Contributing                      = Contribution
-SaturneModule                     = Module %s
-GeneralConfig                     = Configuration générale
-ConfigData                        = Données configurables de %s
-Configs                           = Configuration des %s
-ConfigDatas                       = Configurations
-ModuleMediaGallery                = Configuration des médias de %s
-SavedMediaData                    = Enregistrement des données des médias
-EnablePublicInterface             = Interface publique
-EnablePublicInterfaceDescription  = Activation des interfaces publiques
-ShowCompanyLogo                   = Afficher le logo de la société
-ShowCompanyLogoDescription        = Activez cette option pour masquer le logo de la société dans les pages d'interface publique
-UseCaptcha                        = Code graphique (CAPTCHA)
-UseCaptchaDescription             = Utilisation du code graphique (CAPTCHA) sur les pages d'interfaces publique
-UseAllEmailMode                   = Utilisation de tous les modes de configuration des emails
-UseAllEmailModeDescription        = Autorise l'utilisation de tous les modes de configuration des emails par défaut, seul le mode SMTP est autorisé
-SignaturePublicInterfaceForbidden = Accès interdit à l'interface publique de signature
-ObjectVisibleDescription          = Afficher le champ %s
-ShowSignatureSpecimen             = Voir les signatures sur les documents specimens
-ShowSignatureSpecimenDescription  = Permet la visualisation des signatures sur les documents specimens
-SavedConfig                       = Configuration sauvegardée
-ErrorSavedConfig                  = Une erreur est survenue lors de la configuration
-Config                            = Configuration
-Extrafields                       = Attributs supplémentaires
+ModuleSettings                      = Réglages
+ModuleSetup                         = Configuration du module %s
+Contributing                        = Contribution
+SaturneModule                       = Module %s
+GeneralConfig                       = Configuration générale
+ConfigData                          = Données configurables de %s
+Configs                             = Configuration des %s
+ConfigDatas                         = Configurations
+ModuleMediaGallery                  = Configuration des médias de %s
+SavedMediaData                      = Enregistrement des données des médias
+EnablePublicInterface               = Interface publique
+EnablePublicInterfaceDescription    = Activation des interfaces publiques
+ShowCompanyLogo                     = Afficher le logo de la société
+ShowCompanyLogoDescription          = Activez cette option pour masquer le logo de la société dans les pages d'interface publique
+UseCaptcha                          = Code graphique (CAPTCHA)
+UseCaptchaDescription               = Utilisation du code graphique (CAPTCHA) sur les pages d'interfaces publique
+UseAllEmailMode                     = Utilisation de tous les modes de configuration des emails
+UseAllEmailModeDescription          = Autorise l'utilisation de tous les modes de configuration des emails par défaut, seul le mode SMTP est autorisé
+UseFastUploadImprovement            = Utilisation chargement rapide d'image amélioré
+UseFastUploadImprovementDescription = Activez cette option pour améliorer le chargement rapide d'image <br> Option disponible : <ul><li>Rotation d'image</li><li>Dessin  sur l'image</li><li>Enregistrement de l'image sur un format réduit</li></ul>
+SignaturePublicInterfaceForbidden   = Accès interdit à l'interface publique de signature
+ObjectVisibleDescription            = Afficher le champ %s
+ShowSignatureSpecimen               = Voir les signatures sur les documents specimens
+ShowSignatureSpecimenDescription    = Permet la visualisation des signatures sur les documents specimens
+SavedConfig                         = Configuration sauvegardée
+ErrorSavedConfig                    = Une erreur est survenue lors de la configuration
+Config                              = Configuration
+Extrafields                         = Attributs supplémentaires
 
 
 # Mod Numbering - Modèle de numérotation