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