From 886f34ed30d4a23ebfa143abc2d8154331525b7e Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Thu, 17 Oct 2019 14:52:47 +0100
Subject: [PATCH 1/7] remove need to create new crop overlay

---
 webapp/components/TeaserImage/TeaserImage.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index dc096710d..a90bf91d6 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -48,6 +48,7 @@ export default {
         previewTemplate: this.template(),
       },
       error: false,
+      showCropper: false,
     }
   },
   watch: {
@@ -63,6 +64,7 @@ export default {
       return `<div class="dz-preview dz-file-preview">
                 <div class="dz-image">
                   <div data-dz-thumbnail-bg></div>
+                  <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper"></div>
                 </div>
               </div>
       `
@@ -74,13 +76,12 @@ export default {
     transformImage(file) {
       let thumbnailElement, editor, confirm, thumbnailPreview, contributionImage
       // Create the image editor overlay
-      editor = document.createElement('div')
+      this.showCropper = false
       thumbnailElement = document.querySelectorAll('#postdropzone')[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')
       thumbnailElement.appendChild(editor)
       // Create the confirm button
       confirm = document.createElement('button')
@@ -114,8 +115,9 @@ export default {
       let cropper = new Cropper(image, { zoomable: false })
     },
     dropzoneDrop() {
-      let cropOverlay = document.querySelectorAll('.crop-overlay')[0]
-      if (cropOverlay) cropOverlay.remove()
+      let cropperOverlay = this.$refs.cropperOverlay
+      cropperOverlay.innerHTML = ''
+      this.showCropper = true
     },
   },
 }

From d3480534b1f97134685db4e0dbf75f139af7ce43 Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Thu, 17 Oct 2019 14:54:27 +0100
Subject: [PATCH 2/7] fix assigning editor

---
 webapp/components/TeaserImage/TeaserImage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index a90bf91d6..7ae64674d 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -76,6 +76,7 @@ export default {
     transformImage(file) {
       let thumbnailElement, editor, confirm, thumbnailPreview, contributionImage
       // Create the image editor overlay
+      editor = document.querySelectorAll('.crop-overlay')[0]
       this.showCropper = false
       thumbnailElement = document.querySelectorAll('#postdropzone')[0]
       thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]

From ddadcd919e457c226f30bf15859fb716c3835f7e Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Thu, 17 Oct 2019 15:18:21 +0100
Subject: [PATCH 3/7] update to use ref

---
 webapp/components/TeaserImage/TeaserImage.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 7ae64674d..e095c3d23 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -9,6 +9,7 @@
     @vdropzone-thumbnail="transformImage"
     @vdropzone-drop="dropzoneDrop"
   >
+    <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper"></div>
     <div
       :class="{
         'hc-attachments-upload-area-post': true,
@@ -64,7 +65,6 @@ export default {
       return `<div class="dz-preview dz-file-preview">
                 <div class="dz-image">
                   <div data-dz-thumbnail-bg></div>
-                  <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper"></div>
                 </div>
               </div>
       `
@@ -76,8 +76,7 @@ export default {
     transformImage(file) {
       let thumbnailElement, editor, confirm, thumbnailPreview, contributionImage
       // Create the image editor overlay
-      editor = document.querySelectorAll('.crop-overlay')[0]
-      this.showCropper = false
+      editor = this.$refs.cropperOverlay
       thumbnailElement = document.querySelectorAll('#postdropzone')[0]
       thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
       if (thumbnailPreview) thumbnailPreview.remove()
@@ -90,6 +89,7 @@ export default {
       confirm.textContent = this.$t('contribution.teaserImage.cropperConfirm')
       confirm.addEventListener('click', () => {
         // Get the canvas with image data from Cropper.js
+        this.showCropper = false
         let canvas = cropper.getCroppedCanvas()
         canvas.toBlob(blob => {
           this.$refs.el.manuallyAddFile(blob, canvas.toDataURL(), null, null, {
@@ -116,8 +116,6 @@ export default {
       let cropper = new Cropper(image, { zoomable: false })
     },
     dropzoneDrop() {
-      let cropperOverlay = this.$refs.cropperOverlay
-      cropperOverlay.innerHTML = ''
       this.showCropper = true
     },
   },

From 2670b4869481e9256d5475807af7b43c2d38fb66 Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Sat, 2 Nov 2019 11:07:06 +0000
Subject: [PATCH 4/7] removed unused code and refactor cropper

- Removed unused code
- updated confirm button to be ds-button component
- split into multiple functions

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
---
 backend/yarn.lock                             |  3 +-
 webapp/components/TeaserImage/TeaserImage.vue | 75 +++++++++----------
 2 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/backend/yarn.lock b/backend/yarn.lock
index c8589a508..e6c662229 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -963,7 +963,7 @@
     url-regex "~4.1.1"
     video-extensions "~1.1.0"
 
-"@metascraper/helpers@^5.7.14", "@metascraper/helpers@^5.7.17":
+"@metascraper/helpers@^5.7.17":
   version "5.7.17"
   resolved "https://registry.yarnpkg.com/@metascraper/helpers/-/helpers-5.7.17.tgz#401897c7239090ca7149b83e581712845bbb3709"
   integrity sha512-t21LqfDpaIrWg2JaivXG6mVzUsIVW05cAsKySA5Tj9Hgi9oZXxaaNes5XipOzk6P242RI48SDo7CkSbYiio7Tw==
@@ -3589,7 +3589,6 @@ extsprintf@^1.2.0:
 
 faker@Marak/faker.js#master:
   version "4.1.0"
-  uid "9fd8d7d37b398842d0784a116a340f7aa6afb89b"
   resolved "https://codeload.github.com/Marak/faker.js/tar.gz/9fd8d7d37b398842d0784a116a340f7aa6afb89b"
 
 fast-deep-equal@^2.0.1:
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 245436612..c50f69cd8 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -7,9 +7,10 @@
     :use-custom-slot="true"
     @vdropzone-error="verror"
     @vdropzone-thumbnail="transformImage"
-    @vdropzone-drop="dropzoneDrop"
   >
-    <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper"></div>
+    <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper">
+      <ds-button @click="cropImage" class="crop-confirm" primary>{{ $t('contribution.teaserImage.cropperConfirm') }}</ds-button>
+    </div>
     <div
       :class="{
         'hc-attachments-upload-area-post': true,
@@ -48,6 +49,11 @@ export default {
         maxFilesize: 5.0,
         previewTemplate: this.template(),
       },
+      image: null,
+      file: null,
+      editor: null,
+      cropper: null,
+      thumbnailElement: null,
       error: false,
       showCropper: false,
     }
@@ -74,49 +80,40 @@ export default {
       this.$toast.error(file.status, message)
     },
     transformImage(file) {
-      let thumbnailElement, editor, confirm, thumbnailPreview, contributionImage
+      this.file = file
+      this.showCropper = true
       // Create the image editor overlay
-      editor = this.$refs.cropperOverlay
-      thumbnailElement = document.querySelectorAll('#postdropzone')[0]
+      this.initEditor()
+
+      // Load the image
+      this.image = new Image()
+      this.image.src = URL.createObjectURL(this.file)
+      this.editor.appendChild(this.image)
+      this.cropper = new Cropper(this.image, { zoomable: false, autoCropArea: 0.9 })
+    },
+    initEditor() {
+      let thumbnailPreview, contributionImage
+      this.editor = this.$refs.cropperOverlay
+      this.thumbnailElement = document.querySelectorAll('#postdropzone')[0]
       thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
       if (thumbnailPreview) thumbnailPreview.remove()
       contributionImage = document.querySelectorAll('.contribution-image')[0]
       if (contributionImage) contributionImage.remove()
-      thumbnailElement.appendChild(editor)
-      // Create the confirm button
-      confirm = document.createElement('button')
-      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
-        this.showCropper = false
-        let canvas = cropper.getCroppedCanvas()
-        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)
-          const croppedImageFile = new File([blob], file.name, { type: 'image/jpeg' })
-          this.$emit('addTeaserImage', croppedImageFile)
-        }, 'image/jpeg')
-      })
-      editor.appendChild(confirm)
-
-      // Load the image
-      let image = new Image()
-      image.src = URL.createObjectURL(file)
-      editor.appendChild(image)
-      // Create Cropper.js and pass image
-      let cropper = new Cropper(image, { zoomable: false, autoCropArea: 1.0 })
+      this.thumbnailElement.appendChild(this.editor)
     },
-    dropzoneDrop() {
-      this.showCropper = true
+    cropImage() {
+      this.showCropper = false
+      let canvas = this.cropper.getCroppedCanvas()
+      canvas.toBlob(blob => {
+        this.image = new Image()
+        this.image.src = canvas.toDataURL()
+        this.image.classList.add('thumbnail-preview')
+        this.thumbnailElement.appendChild(this.image)
+        // Remove the editor from view
+        this.editor.removeChild(document.querySelectorAll('.cropper-container')[0])
+        const croppedImageFile = new File([blob], this.file.name, { type: 'image/jpeg' })
+        this.$emit('addTeaserImage', croppedImageFile)
+      }, 'image/jpeg')
     },
   },
 }

From dfb59516d0f7028352553465c6dcea039bc2c8a9 Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Sat, 2 Nov 2019 11:48:56 +0000
Subject: [PATCH 5/7] Add abiltiy to cancel out of cropper and remove image

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
---
 webapp/components/TeaserImage/TeaserImage.vue | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index c50f69cd8..e3afafa3c 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -9,7 +9,10 @@
     @vdropzone-thumbnail="transformImage"
   >
     <div class="crop-overlay" ref="cropperOverlay" v-show="showCropper">
-      <ds-button @click="cropImage" class="crop-confirm" primary>{{ $t('contribution.teaserImage.cropperConfirm') }}</ds-button>
+      <ds-button @click="cropImage" class="crop-confirm" primary>
+        {{ $t('contribution.teaserImage.cropperConfirm') }}
+      </ds-button>
+      <ds-button @click="cancelCrop" class="crop-cancel" icon="close"></ds-button>
     </div>
     <div
       :class="{
@@ -110,11 +113,18 @@ export default {
         this.image.classList.add('thumbnail-preview')
         this.thumbnailElement.appendChild(this.image)
         // Remove the editor from view
-        this.editor.removeChild(document.querySelectorAll('.cropper-container')[0])
+        this.removeCropper()
         const croppedImageFile = new File([blob], this.file.name, { type: 'image/jpeg' })
         this.$emit('addTeaserImage', croppedImageFile)
       }, 'image/jpeg')
     },
+    cancelCrop() {
+      this.showCropper = false
+      this.removeCropper()
+    },
+    removeCropper() {
+      this.editor.removeChild(document.querySelectorAll('.cropper-container')[0])
+    },
   },
 }
 </script>
@@ -207,4 +217,10 @@ export default {
   top: 10px;
   z-index: 1;
 }
+.crop-cancel {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+}
 </style>

From 99816f1c2130a427bfa199c3b01120b1bc8c5cbf Mon Sep 17 00:00:00 2001
From: Brent Vardy <brent.vardy@challengelogic.net>
Date: Sat, 2 Nov 2019 12:09:28 +0000
Subject: [PATCH 6/7] update cancel crop to keep previous image

- Also refactor to split into more methods

Co-Authored-By: mattwr18 <mattwr18@gmail.com>
---
 webapp/components/TeaserImage/TeaserImage.vue | 45 +++++++++++--------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index e3afafa3c..d7ba0e7d8 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -57,6 +57,7 @@ export default {
       editor: null,
       cropper: null,
       thumbnailElement: null,
+      oldImage: null,
       error: false,
       showCropper: false,
     }
@@ -85,41 +86,47 @@ export default {
     transformImage(file) {
       this.file = file
       this.showCropper = true
-      // Create the image editor overlay
       this.initEditor()
-
-      // Load the image
+      this.initCropper()
+    },
+    initEditor() {
+      this.editor = this.$refs.cropperOverlay
+      this.clearImages()
+      this.thumbnailElement.appendChild(this.editor)
+    },
+    clearImages() {
+      this.thumbnailElement = document.querySelectorAll('#postdropzone')[0]
+      const thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
+      if (thumbnailPreview) thumbnailPreview.remove()
+      const contributionImage = document.querySelectorAll('.contribution-image')[0]
+      this.oldImage = contributionImage
+      if (contributionImage) contributionImage.remove()
+    },
+    initCropper() {
       this.image = new Image()
       this.image.src = URL.createObjectURL(this.file)
       this.editor.appendChild(this.image)
       this.cropper = new Cropper(this.image, { zoomable: false, autoCropArea: 0.9 })
     },
-    initEditor() {
-      let thumbnailPreview, contributionImage
-      this.editor = this.$refs.cropperOverlay
-      this.thumbnailElement = document.querySelectorAll('#postdropzone')[0]
-      thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
-      if (thumbnailPreview) thumbnailPreview.remove()
-      contributionImage = document.querySelectorAll('.contribution-image')[0]
-      if (contributionImage) contributionImage.remove()
-      this.thumbnailElement.appendChild(this.editor)
-    },
     cropImage() {
       this.showCropper = false
-      let canvas = this.cropper.getCroppedCanvas()
+      const canvas = this.cropper.getCroppedCanvas()
       canvas.toBlob(blob => {
-        this.image = new Image()
-        this.image.src = canvas.toDataURL()
-        this.image.classList.add('thumbnail-preview')
-        this.thumbnailElement.appendChild(this.image)
-        // Remove the editor from view
+        this.setupPreview(canvas)
         this.removeCropper()
         const croppedImageFile = new File([blob], this.file.name, { type: 'image/jpeg' })
         this.$emit('addTeaserImage', croppedImageFile)
       }, 'image/jpeg')
     },
+    setupPreview(canvas) {
+      this.image = new Image()
+      this.image.src = canvas.toDataURL()
+      this.image.classList.add('thumbnail-preview')
+      this.thumbnailElement.appendChild(this.image)
+    },
     cancelCrop() {
       this.showCropper = false
+      if (this.oldImage) this.thumbnailElement.appendChild(this.oldImage)
       this.removeCropper()
     },
     removeCropper() {

From a78a58ad8dcda2f070ea87ae3a8cffff5fc80632 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Sat, 2 Nov 2019 17:02:19 +0100
Subject: [PATCH 7/7] Mock $t in TeaserImage test

---
 webapp/components/TeaserImage/TeaserImage.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/TeaserImage/TeaserImage.spec.js b/webapp/components/TeaserImage/TeaserImage.spec.js
index 4043cb978..048a7914c 100644
--- a/webapp/components/TeaserImage/TeaserImage.spec.js
+++ b/webapp/components/TeaserImage/TeaserImage.spec.js
@@ -15,6 +15,7 @@ describe('TeaserImage.vue', () => {
       $toast: {
         error: jest.fn(),
       },
+      $t: jest.fn(string => string),
     }
   })
   describe('mount', () => {