diff --git a/app/javascript/elements/convert_upload.js b/app/javascript/elements/convert_upload.js index a00cd6668..0cc8f4700 100644 --- a/app/javascript/elements/convert_upload.js +++ b/app/javascript/elements/convert_upload.js @@ -59,10 +59,10 @@ export async function convertImagesInInput (input) { export default class extends HTMLElement { connectedCallback () { - const input = this.querySelector('input[type="file"]') - const form = input.form + this.addEventListener('change', async (e) => { + const input = e.target + const form = input.form - input.addEventListener('change', async () => { await convertImagesInInput(input) form.querySelector('[type="submit"]')?.setAttribute('disabled', true) diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js index fb8c1ae75..ad7843e6f 100644 --- a/app/javascript/elements/file_dropzone.js +++ b/app/javascript/elements/file_dropzone.js @@ -14,6 +14,15 @@ export default actionable(targetable(class extends HTMLElement { this.addEventListener('dragover', (e) => e.preventDefault()) this.addEventListener('drop', this.onDrop) document.addEventListener('turbo:submit-end', this.toggleLoading) + + if (this.area) { + this.initArea() + } else { + queueMicrotask(() => this.initArea()) + } + } + + initArea () { this.area?.addEventListener('dragover', this.onDragover) this.area?.addEventListener('dragleave', this.onDragleave) } diff --git a/app/javascript/elements/toggle_classes.js b/app/javascript/elements/toggle_classes.js index 332ac84ff..c9599dafb 100644 --- a/app/javascript/elements/toggle_classes.js +++ b/app/javascript/elements/toggle_classes.js @@ -1,19 +1,23 @@ export default class extends HTMLElement { connectedCallback () { + this.addEventListener('click', this.onClick) + } + + onClick = (event) => { const button = this.querySelector('a, button, label') + if (!button?.contains(event.target)) return + const target = this.dataset.targetId ? document.getElementById(this.dataset.targetId) : button - button.addEventListener('click', () => { - this.dataset.classes.split(' ').forEach((cls) => { - if (this.dataset.action === 'remove') { - target.classList.remove(cls) - } else if (this.dataset.action === 'add') { - target.classList.add(cls) - } else { - target.classList.toggle(cls) - } - }) + this.dataset.classes.split(' ').forEach((cls) => { + if (this.dataset.action === 'remove') { + target.classList.remove(cls) + } else if (this.dataset.action === 'add') { + target.classList.add(cls) + } else { + target.classList.toggle(cls) + } }) } } diff --git a/app/views/templates/_submission.html.erb b/app/views/templates/_submission.html.erb index 095afd902..1bfd95f28 100644 --- a/app/views/templates/_submission.html.erb +++ b/app/views/templates/_submission.html.erb @@ -34,14 +34,14 @@