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

Contain cropper overlay in image preview area

Browse Source 
- Co-authored-by: Brent Vardy <brent.vardy@challengelogic.net>
This commit is contained in:
mattwr18 2019-09-25 15:35:09 +02:00
parent fdcf2b5300
commit 45dfc5cff1
1 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,29 +95,24 @@ export default {
} }
}, },
transformImage(file) { transformImage(file) {
let myDropZone = this let thumbnailElement, editor, confirm
// Create the image editor overlay // Create the image editor overlay
let editor = document.createElement('div') editor = document.createElement('div')
editor.style.position = 'fixed' thumbnailElement = document.querySelectorAll('.dz-image')[0]
editor.style.left = 0 // dataDzThumbnail = document.querySelectorAll('[data-dz-thumbnail-bg]')[0]
editor.style.right = 0 // thumbnailPreview = document.querySelectorAll('.thumbnail-preview')[0]
editor.style.top = 0
editor.style.bottom = 0
editor.style.zIndex = 9999
editor.style.backgroundColor = '#000'
editor.classList.add('crop-overlay')
// elementToReplace = thumbnailPreview || dataDzThumbnail
thumbnailElement.appendChild(editor)
// Create the confirm button // Create the confirm button
let confirm = document.createElement('button') confirm = document.createElement('button')
confirm.style.position = 'absolute' confirm.classList.add('crop-confirm')
confirm.style.left = '10px'
confirm.style.top = '10px'
confirm.style.zIndex = 9999
confirm.textContent = 'Confirm' confirm.textContent = 'Confirm'
confirm.addEventListener('click', function() { confirm.addEventListener('click', () => {
// Get the canvas with image data from Cropper.js // Get the canvas with image data from Cropper.js
let canvas = cropper.getCroppedCanvas() let canvas = cropper.getCroppedCanvas()
myDropZone.thumbnail(file, canvas.toDataURL()) this.thumbnail(file, canvas.toDataURL())
// Remove the editor from view // Remove the editor from view
editor.parentNode.removeChild(editor) editor.parentNode.removeChild(editor)
@ -129,7 +124,7 @@ export default {
image.src = URL.createObjectURL(file) image.src = URL.createObjectURL(file)
editor.appendChild(image) editor.appendChild(image)
// Append the editor to the page // Append the editor to the page
document.body.appendChild(editor) // document.body.appendChild(editor)
// Create Cropper.js and pass image // Create Cropper.js and pass image
let cropper = new Cropper(image, {}) let cropper = new Cropper(image, {})
@ -223,4 +218,19 @@ export default {
.contribution-image { .contribution-image {
max-height: 300px; max-height: 300px;
} }
.crop-overlay {
position: relative;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #000;
}
.crop-confirm {
position: absolute;
left: 10px;
top: 10px;
z-index: 9999;
}
</style> </style>