ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add abiltiy to cancel out of cropper and remove image

Browse Source 
Co-Authored-By: mattwr18 <mattwr18@gmail.com>
This commit is contained in:
Brent Vardy 2019-11-02 11:48:56 +00:00
parent 2670b48694
commit dfb59516d0
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webapp/components/TeaserImage/TeaserImage.vue
View File

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