From d59defedf3df22f273486f7c7e2d1f90664981ac Mon Sep 17 00:00:00 2001 From: Brent Vardy Date: Sat, 21 Sep 2019 12:14:04 +0100 Subject: [PATCH 01/18] [WIP] - implement basic image cropping solution #1466 - co-authored-by: mattwr18 --- webapp/components/TeaserImage/TeaserImage.vue | 46 ++++++++++++++++++- webapp/package.json | 3 +- webapp/yarn.lock | 10 ++-- 3 files changed, 51 insertions(+), 8 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index 53f79bfb0..0305fdf44 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -5,8 +5,8 @@ id="postdropzone" class="ds-card-image" :use-custom-slot="true" - @vdropzone-thumbnail="thumbnail" @vdropzone-error="verror" + @vdropzone-thumbnail="transformImage" >
import vueDropzone from 'nuxt-dropzone' +import Cropper from 'cropperjs' +import 'cropperjs/dist/cropper.css' export default { components: { @@ -86,12 +88,52 @@ export default { uploadArea.classList.remove('hc-attachments-upload-area-update-post') } image = new Image() - image.src = URL.createObjectURL(file) + image.src = dataUrl image.classList.add('thumbnail-preview') if (thumbnailPreview) return thumbnailElement.replaceChild(image, thumbnailPreview) thumbnailElement.appendChild(image) } }, + transformImage(file) { + let myDropZone = this + + // Create the image editor overlay + let editor = document.createElement('div') + editor.style.position = 'fixed' + editor.style.left = 0 + editor.style.right = 0 + editor.style.top = 0 + editor.style.bottom = 0 + editor.style.zIndex = 9999 + editor.style.backgroundColor = '#000' + + // Create the confirm button + let confirm = document.createElement('button') + confirm.style.position = 'absolute' + confirm.style.left = '10px' + confirm.style.top = '10px' + confirm.style.zIndex = 9999 + confirm.textContent = 'Confirm' + confirm.addEventListener('click', function() { + // Get the canvas with image data from Cropper.js + let canvas = cropper.getCroppedCanvas() + myDropZone.thumbnail(file, canvas.toDataURL()) + + // Remove the editor from view + editor.parentNode.removeChild(editor) + }) + editor.appendChild(confirm) + + // Load the image + 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, {}) + }, }, } diff --git a/webapp/package.json b/webapp/package.json index 952913e4b..68323f93d 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -64,6 +64,7 @@ "cookie-universal-nuxt": "~2.0.18", "cross-env": "~6.0.3", "date-fns": "2.4.1", + "cropperjs": "^1.5.5", "express": "~4.17.1", "graphql": "~14.5.8", "isemail": "^3.2.0", @@ -133,4 +134,4 @@ "vue-svg-loader": "~0.12.0", "vue-template-compiler": "^2.6.10" } -} \ No newline at end of file +} diff --git a/webapp/yarn.lock b/webapp/yarn.lock index b6dca2ca6..a51aca386 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -5538,6 +5538,11 @@ create-react-context@^0.2.1: fbjs "^0.8.0" gud "^1.0.0" +cropperjs@^1.5.5: + version "1.5.6" + resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.6.tgz#82faf432bec709d828f2f7a96d1179198edaf0e2" + integrity sha512-eAgWf4j7sNJIG329qUHIFi17PSV0VtuWyAu9glZSgu/KlQSrfTQOC2zAz+jHGa5fAB+bJldEnQwvJEaJ8zRf5A== + cross-env@~6.0.3: version "6.0.3" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-6.0.3.tgz#4256b71e49b3a40637a0ce70768a6ef5c72ae941" @@ -13618,11 +13623,6 @@ serve-static@1.14.1, serve-static@^1.14.1: version "1.14.1" resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9" integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg== - dependencies: - encodeurl "~1.0.2" - escape-html "~1.0.3" - parseurl "~1.3.3" - send "0.17.1" server-destroy@^1.0.1: version "1.0.1" From fdcf2b5300832e3429cd460a7cc411fb292ba66f Mon Sep 17 00:00:00 2001 From: Brent Vardy Date: Sat, 21 Sep 2019 12:14:04 +0100 Subject: [PATCH 02/18] [WIP] - implement basic image cropping solution #1466 - co-authored-by: mattwr18 --- webapp/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/package.json b/webapp/package.json index 68323f93d..127e15623 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -62,9 +62,9 @@ "apollo-cache-inmemory": "~1.6.3", "apollo-client": "~2.6.4", "cookie-universal-nuxt": "~2.0.18", + "cropperjs": "^1.5.5", "cross-env": "~6.0.3", "date-fns": "2.4.1", - "cropperjs": "^1.5.5", "express": "~4.17.1", "graphql": "~14.5.8", "isemail": "^3.2.0", From 45dfc5cff1fd231d103b610ac860521eb6d0bae9 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Wed, 25 Sep 2019 15:35:09 +0200 Subject: [PATCH 03/18] Contain cropper overlay in image preview area - Co-authored-by: Brent Vardy --- webapp/components/TeaserImage/TeaserImage.vue | 46 +++++++++++-------- 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index 0305fdf44..564a66260 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -95,29 +95,24 @@ export default { } }, transformImage(file) { - let myDropZone = this - + let thumbnailElement, editor, confirm // Create the image editor overlay - let editor = document.createElement('div') - editor.style.position = 'fixed' - editor.style.left = 0 - editor.style.right = 0 - editor.style.top = 0 - editor.style.bottom = 0 - editor.style.zIndex = 9999 - editor.style.backgroundColor = '#000' + editor = document.createElement('div') + thumbnailElement = document.querySelectorAll('.dz-image')[0] + // dataDzThumbnail = document.querySelectorAll('[data-dz-thumbnail-bg]')[0] + // thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0] + editor.classList.add('crop-overlay') + // elementToReplace = thumbnailPreview || dataDzThumbnail + thumbnailElement.appendChild(editor) // Create the confirm button - let confirm = document.createElement('button') - confirm.style.position = 'absolute' - confirm.style.left = '10px' - confirm.style.top = '10px' - confirm.style.zIndex = 9999 + confirm = document.createElement('button') + confirm.classList.add('crop-confirm') confirm.textContent = 'Confirm' - confirm.addEventListener('click', function() { + confirm.addEventListener('click', () => { // Get the canvas with image data from Cropper.js let canvas = cropper.getCroppedCanvas() - myDropZone.thumbnail(file, canvas.toDataURL()) + this.thumbnail(file, canvas.toDataURL()) // Remove the editor from view editor.parentNode.removeChild(editor) @@ -129,7 +124,7 @@ export default { image.src = URL.createObjectURL(file) editor.appendChild(image) // Append the editor to the page - document.body.appendChild(editor) + // document.body.appendChild(editor) // Create Cropper.js and pass image let cropper = new Cropper(image, {}) @@ -223,4 +218,19 @@ export default { .contribution-image { max-height: 300px; } + +.crop-overlay { + position: relative; + width: 100%; + height: 100%; + z-index: 9999; + background-color: #000; +} + +.crop-confirm { + position: absolute; + left: 10px; + top: 10px; + z-index: 9999; +} From b089e824344d16078e9ba43421b8bbda3b67689c Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Wed, 25 Sep 2019 16:14:25 +0200 Subject: [PATCH 04/18] Configure jest to mock CSS modules - getting error from import cropperjs css --- webapp/package.json | 4 +++- webapp/yarn.lock | 12 ++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/webapp/package.json b/webapp/package.json index 127e15623..a8cfb9016 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -44,7 +44,8 @@ ], "moduleNameMapper": { "^@/(.*)$": "/src/$1", - "^~/(.*)$": "/$1" + "^~/(.*)$": "/$1", + "\\.(css|less)$": "identity-obj-proxy" }, "testMatch": [ "**/?(*.)+(spec|test).js?(x)" @@ -122,6 +123,7 @@ "eslint-plugin-vue": "~5.2.3", "flush-promises": "^1.0.2", "fuse.js": "^3.4.5", + "identity-obj-proxy": "^3.0.0", "jest": "~24.9.0", "mutation-observer": "^1.0.3", "node-sass": "~4.12.0", diff --git a/webapp/yarn.lock b/webapp/yarn.lock index a51aca386..b9dd64d1d 100644 --- a/webapp/yarn.lock +++ b/webapp/yarn.lock @@ -7861,6 +7861,11 @@ hard-source-webpack-plugin@^0.13.1: webpack-sources "^1.0.1" write-json-file "^2.3.0" +harmony-reflect@^1.4.6: + version "1.6.1" + resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9" + integrity sha512-WJTeyp0JzGtHcuMsi7rw2VwtkvLa+JyfEKJCFyfcS0+CDkjQ5lHPu7zEhFZP+PDSRrEgXa5Ah0l1MbgbE41XjA== + has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -8271,6 +8276,13 @@ icss-utils@^4.0.0, icss-utils@^4.1.1: dependencies: postcss "^7.0.14" +identity-obj-proxy@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14" + integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ= + dependencies: + harmony-reflect "^1.4.6" + ieee754@^1.1.4: version "1.1.13" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84" From 227db5f13ac5de3b583b842b3b51e570be6aebfa Mon Sep 17 00:00:00 2001 From: Brent Vardy Date: Thu, 26 Sep 2019 14:27:01 +0100 Subject: [PATCH 05/18] 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 --- webapp/components/TeaserImage/TeaserImage.vue | 46 +++++++------------ webapp/locales/de.json | 3 ++ webapp/locales/en.json | 3 ++ webapp/locales/es.json | 5 ++ webapp/locales/fr.json | 5 ++ webapp/locales/it.json | 5 ++ webapp/locales/nl.json | 5 +- webapp/locales/pl.json | 3 ++ webapp/locales/pt.json | 5 +- 9 files changed, 48 insertions(+), 32 deletions(-) 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": { From fa066968922fb4223c4592650ec3400fb2879104 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Wed, 2 Oct 2019 21:22:58 +0200 Subject: [PATCH 06/18] Convert canvas to blob to update file - what was happening is that the file was being autocropped still and sent to the backend with cropperjs autocrop... these changes update the file's attributes so they can be saved properly --- webapp/components/TeaserImage/TeaserImage.vue | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index 1d922a073..e60a466e4 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -95,12 +95,19 @@ export default { confirm.addEventListener('click', () => { // Get the canvas with image data from Cropper.js let canvas = cropper.getCroppedCanvas() - image = new Image() - image.src = canvas.toDataURL() - image.classList.add('thumbnail-preview') - thumbnailElement.appendChild(image) - // Remove the editor from view - editor.parentNode.removeChild(editor) + canvas.toBlob(blob => { + this.$refs.el.manuallyAddFile(blob, canvas.toDataURL(), null, null, { + dontSubstractMaxFiles: false, + addToFiles: true, + }) + image = new Image() + image.src = canvas.toDataURL() + image.classList.add('thumbnail-preview') + thumbnailElement.appendChild(image) + // Remove the editor from view + editor.parentNode.removeChild(editor) + this.addTeaserImage([blob]) + }) }) editor.appendChild(confirm) From db48e522cfebb9691c08053f00ccf64ce91c416d Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Wed, 2 Oct 2019 22:35:03 +0200 Subject: [PATCH 07/18] Enforce a 16/9 aspect ratio - if we set the max height any greater than this, it takes up the entire page on a desktop screen --- .../src/schema/resolvers/fileUpload/index.js | 4 +++- webapp/components/PostCard/index.vue | 2 +- webapp/components/TeaserImage/TeaserImage.vue | 20 +++++++++++++------ 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/backend/src/schema/resolvers/fileUpload/index.js b/backend/src/schema/resolvers/fileUpload/index.js index fa78238c3..81548cab3 100644 --- a/backend/src/schema/resolvers/fileUpload/index.js +++ b/backend/src/schema/resolvers/fileUpload/index.js @@ -11,14 +11,16 @@ const storeUpload = ({ createReadStream, fileLocation }) => ) export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) { + console.log('params', params) const upload = params[file] + console.log('upload', upload) if (upload) { const { createReadStream, filename } = await upload const { name } = path.parse(filename) const fileLocation = `/uploads/${Date.now()}-${slug(name)}` await uploadCallback({ createReadStream, fileLocation }) delete params[file] - + console.log('fileLocation', fileLocation) params[url] = fileLocation } diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue index c6c967759..3ba575c0d 100644 --- a/webapp/components/PostCard/index.vue +++ b/webapp/components/PostCard/index.vue @@ -131,7 +131,7 @@ export default { } - From 3beddf1f69ef739b7babc9caa71b8bfa794cb00d Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Wed, 2 Oct 2019 23:32:25 +0200 Subject: [PATCH 08/18] Contain post/contribution form to limit width - enforce 1.25:1 aspect ratio to be as close to possible with the 1:1 aspect ratio on our root path where we have 3 columns of 300px and a max-height of 300px --- .../ContributionForm/ContributionForm.vue | 138 +++++++++--------- webapp/components/TeaserImage/TeaserImage.vue | 15 +- 2 files changed, 75 insertions(+), 78 deletions(-) diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index 73fa0afd9..3c67b8ae1 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -1,73 +1,75 @@ - From 2818b63fe91411adedb54e57fa8a6046238591ef Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Wed, 2 Oct 2019 23:42:42 +0200 Subject: [PATCH 09/18] Fix lint --- backend/src/schema/resolvers/fileUpload/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/backend/src/schema/resolvers/fileUpload/index.js b/backend/src/schema/resolvers/fileUpload/index.js index 81548cab3..960dde7f9 100644 --- a/backend/src/schema/resolvers/fileUpload/index.js +++ b/backend/src/schema/resolvers/fileUpload/index.js @@ -11,16 +11,13 @@ const storeUpload = ({ createReadStream, fileLocation }) => ) export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) { - console.log('params', params) const upload = params[file] - console.log('upload', upload) if (upload) { const { createReadStream, filename } = await upload const { name } = path.parse(filename) const fileLocation = `/uploads/${Date.now()}-${slug(name)}` await uploadCallback({ createReadStream, fileLocation }) delete params[file] - console.log('fileLocation', fileLocation) params[url] = fileLocation } From cabd68f7d8077f41f2b235c14dd832f156c4bee3 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 7 Oct 2019 17:22:24 +0200 Subject: [PATCH 10/18] Clean up code - Set dropzoneOptions.url to arrow function which returns empty string... url is required, but we don't use a restful api, we crop the image and save the update file(blob) to an image - set min-height of vuedropzone to 500px to be closer to the cropped image and to center image overlay - remove dz-message div, as one is already created automatically by vue2-dropzone --- webapp/components/TeaserImage/TeaserImage.vue | 42 ++++++++----------- 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index cb4a16001..5b46de5e4 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -9,22 +9,20 @@ @vdropzone-thumbnail="transformImage" @vdropzone-drop="dropzoneDrop" > -
+
+
- -
- -
+
@@ -45,7 +43,7 @@ export default { data() { return { dropzoneOptions: { - url: this.addTeaserImage, + url: () => '', maxFilesize: 5.0, previewTemplate: this.template(), }, @@ -73,15 +71,11 @@ export default { this.error = true this.$toast.error(file.status, message) }, - addTeaserImage(file) { - this.$emit('addTeaserImage', file[0]) - return '' - }, transformImage(file) { let thumbnailElement, editor, confirm, thumbnailPreview, contributionImage // Create the image editor overlay editor = document.createElement('div') - thumbnailElement = document.querySelectorAll('.dz-image')[0] + thumbnailElement = document.querySelectorAll('#postdropzone')[0] thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0] if (thumbnailPreview) thumbnailPreview.remove() contributionImage = document.querySelectorAll('.contribution-image')[0] @@ -106,7 +100,7 @@ export default { thumbnailElement.appendChild(image) // Remove the editor from view editor.parentNode.removeChild(editor) - this.addTeaserImage([blob]) + this.$emit('addTeaserImage', blob) }) }) editor.appendChild(confirm) @@ -128,7 +122,7 @@ export default { From 0d5b334f66f7ad44af16624086162d0fb3b599db Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 7 Oct 2019 17:31:53 +0200 Subject: [PATCH 11/18] Remove unneeded max-heights --- webapp/components/TeaserImage/TeaserImage.vue | 9 --------- 1 file changed, 9 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue index 5b46de5e4..5a8d6cff6 100644 --- a/webapp/components/TeaserImage/TeaserImage.vue +++ b/webapp/components/TeaserImage/TeaserImage.vue @@ -201,15 +201,9 @@ export default { border-top: $border-size-base solid $border-color-softest; } -.contribution-image { - max-height: 710px; -} - .crop-overlay { - max-height: 710px; position: relative; width: 100%; - // height: 100%; z-index: 9999; background-color: #000; } @@ -220,7 +214,4 @@ export default { top: 10px; z-index: 9999; } -.thumbnail-preview { - max-height: 710px; -} From c85b2d49b678542c4cebad3579319b1dd30644cf Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 7 Oct 2019 19:39:28 +0200 Subject: [PATCH 12/18] Remove outdated test directly calling method --- webapp/components/TeaserImage/TeaserImage.spec.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/webapp/components/TeaserImage/TeaserImage.spec.js b/webapp/components/TeaserImage/TeaserImage.spec.js index 07b17e16b..4043cb978 100644 --- a/webapp/components/TeaserImage/TeaserImage.spec.js +++ b/webapp/components/TeaserImage/TeaserImage.spec.js @@ -25,17 +25,6 @@ describe('TeaserImage.vue', () => { wrapper = Wrapper() }) - describe('File upload', () => { - const imageUpload = [ - { file: { filename: 'avataar.svg', previewElement: '' }, url: 'someUrlToImage' }, - ] - - it('supports adding a teaser image', () => { - wrapper.vm.addTeaserImage(imageUpload) - expect(wrapper.emitted().addTeaserImage[0]).toEqual(imageUpload) - }) - }) - describe('handles errors', () => { beforeEach(() => jest.useFakeTimers()) const message = 'File upload failed' From 1c6b5f941b3213e1b73af59eb17e7c8dc058d295 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 14 Oct 2019 13:45:41 +0200 Subject: [PATCH 13/18] Remove aspect ratio on cropper, limit to max-height 2000px - discussed it today's internal meeting and agreed upon with @alina-beck, @Tirokk, @ogerly, @datenbrei, Dennis Hack - max-height was a suggestion and can be changed at any time --- .../ContributionForm/ContributionForm.vue | 136 +++++++++--------- webapp/components/PostCard/index.vue | 2 +- webapp/components/TeaserImage/TeaserImage.vue | 2 +- webapp/pages/post/_id/_slug/index.vue | 2 +- webapp/pages/post/_id/_slug/more-info.vue | 4 - 5 files changed, 70 insertions(+), 76 deletions(-) diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index 3c67b8ae1..2b21282ae 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -1,75 +1,73 @@