diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 564a66260..1d922a073 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -7,6 +7,7 @@
:use-custom-slot="true"
@vdropzone-error="verror"
@vdropzone-thumbnail="transformImage"
+ @vdropzone-drop="dropzoneDrop"
>
{
- 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.textContent = 'Confirm'
+ confirm.classList.add('crop-confirm', 'ds-button', 'ds-button-primary')
+ 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()
+ },
},
}
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index b2f1313da..96c1cd322 100644
--- a/webapp/locales/de.json
+++ b/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": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 9d68ae6a0..90bb84c37 100644
--- a/webapp/locales/en.json
+++ b/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": {
diff --git a/webapp/locales/es.json b/webapp/locales/es.json
index e52933c69..5890e4314 100644
--- a/webapp/locales/es.json
+++ b/webapp/locales/es.json
@@ -292,6 +292,11 @@
"message": "¿Realmente quieres liberar el comentario de \"{name}\"?"
}
},
+ "contribution": {
+ "teaserImage": {
+ "cropperConfirm": "Confirmar"
+ }
+ },
"user": {
"avatar": {
"submitted": "Carga con éxito"
diff --git a/webapp/locales/fr.json b/webapp/locales/fr.json
index 631c9436a..3f3f59b05 100644
--- a/webapp/locales/fr.json
+++ b/webapp/locales/fr.json
@@ -287,6 +287,11 @@
"message": "Voulez-vous vraiment publier le commentaire de \"{name}\"?"
}
},
+ "contribution": {
+ "teaserImage": {
+ "cropperConfirm": "Confirmer"
+ }
+ },
"user": {
"avatar": {
"submitted": "Téléchargement réussi"
diff --git a/webapp/locales/it.json b/webapp/locales/it.json
index fc6371b24..26dea37bd 100644
--- a/webapp/locales/it.json
+++ b/webapp/locales/it.json
@@ -140,5 +140,10 @@
"save": "Salva",
"edit": "Modifica",
"delete": "Cancella"
+ },
+ "contribution": {
+ "teaserImage": {
+ "cropperConfirm": "Confermare"
+ }
}
}
diff --git a/webapp/locales/nl.json b/webapp/locales/nl.json
index da763735a..c62ca9497 100644
--- a/webapp/locales/nl.json
+++ b/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",
diff --git a/webapp/locales/pl.json b/webapp/locales/pl.json
index 305487717..4684290e9 100644
--- a/webapp/locales/pl.json
+++ b/webapp/locales/pl.json
@@ -362,6 +362,9 @@
"languageSelectLabel": "Język",
"categories": {
"infoSelectedNoOfMaxCategories": "{chosen} z {max} wybrane kategorie"
+ },
+ "teaserImage": {
+ "cropperConfirm": "Potwierdzać"
}
}
}
diff --git a/webapp/locales/pt.json b/webapp/locales/pt.json
index b43711998..6eccc2fc0 100644
--- a/webapp/locales/pt.json
+++ b/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": {