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] 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>