refactored tranformImage to remove dupication

- styled confirm button
- added locale translations
- added dropzoneDrop method to handle scenario where users drag and drop an image whilst in the cropper interface.

- co-authored-by: mattwr18 <mattwr18@gmail.com>

webapp/components/TeaserImage/TeaserImage.vue

@@ -7,6 +7,7 @@
     :use-custom-slot="true"
     @vdropzone-error="verror"
     @vdropzone-thumbnail="transformImage"
+    @vdropzone-drop="dropzoneDrop"
   >
     <div class="dz-message">
       <div
@@ -76,44 +77,28 @@ export default {
       this.$emit('addTeaserImage', file[0])
       return ''
     },
-    thumbnail: (file, dataUrl) => {
-      let thumbnailElement, contributionImage, uploadArea, thumbnailPreview, image
-      if (file.previewElement) {
-        thumbnailElement = document.querySelectorAll('#postdropzone')[0]
-        contributionImage = document.querySelectorAll('.contribution-image')[0]
-        thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
-        if (contributionImage) {
-          uploadArea = document.querySelectorAll('.hc-attachments-upload-area-update-post')[0]
-          uploadArea.removeChild(contributionImage)
-          uploadArea.classList.remove('hc-attachments-upload-area-update-post')
-        }
-        image = new Image()
-        image.src = dataUrl
-        image.classList.add('thumbnail-preview')
-        if (thumbnailPreview) return thumbnailElement.replaceChild(image, thumbnailPreview)
-        thumbnailElement.appendChild(image)
-      }
-    },
     transformImage(file) {
-      let thumbnailElement, editor, confirm
+      let thumbnailElement, editor, confirm, thumbnailPreview, contributionImage
       // Create the image editor overlay
       editor = document.createElement('div')
       thumbnailElement = document.querySelectorAll('.dz-image')[0]
-      // dataDzThumbnail = document.querySelectorAll('[data-dz-thumbnail-bg]')[0]
+      thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
-      // thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
+      if (thumbnailPreview) thumbnailPreview.remove()
-
+      contributionImage = document.querySelectorAll('.contribution-image')[0]
+      if (contributionImage) contributionImage.remove()
       editor.classList.add('crop-overlay')
-      // elementToReplace = thumbnailPreview || dataDzThumbnail
       thumbnailElement.appendChild(editor)
       // Create the confirm button
       confirm = document.createElement('button')
-      confirm.classList.add('crop-confirm')
+      confirm.classList.add('crop-confirm', 'ds-button', 'ds-button-primary')
-      confirm.textContent = 'Confirm'
+      confirm.textContent = this.$t('contribution.teaserImage.cropperConfirm')
       confirm.addEventListener('click', () => {
         // Get the canvas with image data from Cropper.js
         let canvas = cropper.getCroppedCanvas()
-        this.thumbnail(file, canvas.toDataURL())
+        image = new Image()
-
+        image.src = canvas.toDataURL()
+        image.classList.add('thumbnail-preview')
+        thumbnailElement.appendChild(image)
         // Remove the editor from view
         editor.parentNode.removeChild(editor)
       })
@@ -123,12 +108,13 @@ export default {
       let image = new Image()
       image.src = URL.createObjectURL(file)
       editor.appendChild(image)
-      // Append the editor to the page
-      // document.body.appendChild(editor)
-
       // Create Cropper.js and pass image
       let cropper = new Cropper(image, {})
     },
+    dropzoneDrop() {
+      let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
+      if (cropOverlay) cropOverlay.remove()
+    },
   },
 }
 </script>

webapp/locales/de.json

@@ -562,6 +562,9 @@
         "it-internet-data-privacy": "IT, Internet & Datenschutz",
         "art-culture-sport": "Kunst, Kultur & Sport"
       }
+    },
+    "teaserImage": {
+      "cropperConfirm": "Bestätigen"
     }
   },
   "code-of-conduct": {

webapp/locales/en.json

@@ -563,6 +563,9 @@
         "it-internet-data-privacy": "IT, Internet & Data Privacy",
         "art-culture-sport": "Art, Culture, & Sport"
       }
+    },
+    "teaserImage": {
+      "cropperConfirm": "Confirm"
     }
   },
   "code-of-conduct": {

webapp/locales/es.json

@@ -292,6 +292,11 @@
       "message": "¿Realmente quieres liberar el comentario de \"<b>{name}</b>\"?"
     }
   },
+  "contribution": {
+    "teaserImage": {
+      "cropperConfirm": "Confirmar"
+    }
+  },
   "user": {
     "avatar": {
       "submitted": "Carga con éxito"

webapp/locales/fr.json

@@ -287,6 +287,11 @@
       "message": "Voulez-vous vraiment publier le commentaire de \"<b>{name}</b>\"?"
     }
   },
+  "contribution": {
+    "teaserImage": {
+      "cropperConfirm": "Confirmer"
+    }
+  },
   "user": {
     "avatar": {
       "submitted": "Téléchargement réussi"

webapp/locales/it.json

@@ -140,5 +140,10 @@
     "save": "Salva",
     "edit": "Modifica",
     "delete": "Cancella"
+  },
+  "contribution": {
+    "teaserImage": {
+      "cropperConfirm": "Confermare"
+    }
   }
 }

webapp/locales/nl.json

@@ -158,7 +158,10 @@
   },
   "contribution": {
     "edit": "Bijdrage bewerken",
-    "delete": "Bijdrage verwijderen"
+    "delete": "Bijdrage verwijderen",
+    "teaserImage": {
+      "cropperConfirm": "Bevestigen"
+    }
   },
   "comment": {
     "edit": "Commentaar bewerken",

webapp/locales/pl.json

@@ -362,6 +362,9 @@
     "languageSelectLabel": "Język",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} z {max} wybrane kategorie"
+    },
+    "teaserImage": {
+      "cropperConfirm": "Potwierdzać"
     }
   }
 }

webapp/locales/pt.json

@@ -203,7 +203,10 @@
   },
   "contribution": {
     "edit": "Editar Contribuição",
-    "delete": "Apagar Contribuição"
+    "delete": "Apagar Contribuição",
+    "teaserImage": {
+      "cropperConfirm": "Confirmar"
+    }
   },
   "comment": {
     "content": {