STEINNI
113 lines
3.7 KiB
JavaScript
113 lines
3.7 KiB
JavaScript
class TemplatesUplImgDialog extends EICDialogContent {
|
|
constructor() {
|
|
super();
|
|
Object.assign(this, app.helpers.validators); // Inject validators
|
|
this.actions = [
|
|
{
|
|
label: 'Cancel',
|
|
onclick: this.cancel.bind(this),
|
|
severity: 'secondary',
|
|
role: 'cancel'
|
|
}
|
|
];
|
|
}
|
|
|
|
DOMContentLoaded() {
|
|
const imgId = crypto.randomUUID()
|
|
|
|
const host = window.location.hostname
|
|
let envUrl = (host.split('.')[1] !== 'eismea') ? host.split('.')[1] + '.' : ''
|
|
|
|
// Initialize file upload
|
|
this.fileUpload = new FileUpload(this.find('.browseBtn'), {
|
|
uploadId: imgId,
|
|
uploadUrl: `https://myeic.${envUrl}eismea.eu/public/images/common/${imgId}`,
|
|
uploadMethod: 'PUT',
|
|
allowedExtensions: ['jpg', 'jpeg', 'png', 'svg'],
|
|
allowedMimes: ['image/jpeg', 'image/pjpeg', 'image/png', 'image/svg+xml'],
|
|
allowDrop: true,
|
|
maxFiles: 1,
|
|
minFiles: 1,
|
|
dndLabel: 'Drop your image here !',
|
|
imageTitle: '',
|
|
noUpload: false,
|
|
})
|
|
|
|
const dropArea = this.find('.file-drop-area')
|
|
const uplButton = this.find('.uploadBtn.custom-class')
|
|
const fileUpl = this.el.querySelector('.file-upload')
|
|
|
|
dropArea.addEventListener('change', () => {
|
|
const existingInput = fileUpl.querySelector('.tpl-imgTitle')
|
|
if (!existingInput) {
|
|
const inputTitle = ui.create(`
|
|
<input eicinput type="text" name="title" class="tpl-imgTitle" placeholder="title of your image" required>
|
|
`)
|
|
dropArea.appendChild(inputTitle)
|
|
|
|
// Desabled upload button if input Title empty
|
|
uplButton.disabled = true
|
|
|
|
// Add listener to input Title
|
|
inputTitle.addEventListener('input', () => {
|
|
const titleValue = inputTitle.value.trim()
|
|
if (titleValue) {
|
|
inputTitle.classList.remove('highlight')
|
|
uplButton.disabled = false
|
|
} else {
|
|
inputTitle.classList.add('highlight')
|
|
uplButton.disabled = true
|
|
}
|
|
this.fileUpload.options.imageTitle = inputTitle.value
|
|
})
|
|
|
|
}
|
|
})
|
|
|
|
// Event upload button
|
|
uplButton.addEventListener('click', () => {
|
|
this.fileUpload.onFileAdded.bind(this)
|
|
this.addFile()
|
|
})
|
|
}
|
|
|
|
|
|
// Handle File Added
|
|
addFile() {
|
|
const fileUpL = this.fileUpload
|
|
const uplUrl = fileUpL.options?.uploadUrl
|
|
const extension = uplUrl.split('.').pop()
|
|
const uplId = fileUpL.options?.uploadId
|
|
const fileName = uplId+'.'+extension
|
|
let data = {
|
|
id: uplId,
|
|
name: fileName,
|
|
type: extension,
|
|
path: '/common',
|
|
imageTitle: fileUpL.options?.imageTitle,
|
|
meta:'',
|
|
}
|
|
this.commit(data)
|
|
|
|
}
|
|
|
|
commit(data) {
|
|
this.result = data
|
|
// NE PAS appeler this.cancel() ou this.close() ici
|
|
}
|
|
|
|
showDialogSpinner(show = true) {
|
|
let spinner = this.find('.dialog-spinner')
|
|
if (!spinner && show) {
|
|
spinner = document.createElement('div')
|
|
spinner.className = 'dialog-spinner'
|
|
spinner.innerHTML = `<span class="eic-spinner"></span> Uploading...`
|
|
this.el.appendChild(spinner)
|
|
}
|
|
if (spinner) spinner.style.display = show ? 'block' : 'none'
|
|
}
|
|
}
|
|
|
|
// Register the class
|
|
app.registerClass('TemplatesUplImgDialog', TemplatesUplImgDialog)
|