IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove need to create new crop overlay

Browse Source
This commit is contained in:
Brent Vardy 2019-10-17 14:52:47 +01:00
parent 4a2f8edb9e
commit 886f34ed30
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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