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

update to use ref

Browse Source
This commit is contained in:
Brent Vardy 2019-10-17 15:18:21 +01:00
parent d3480534b1
commit ddadcd919e
1 changed files with 3 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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