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": {