diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js index 3a614b80..011c1254 100644 --- a/app/javascript/controllers/modal_controller.js +++ b/app/javascript/controllers/modal_controller.js @@ -3,8 +3,27 @@ import { Controller } from "stimulus"; export default class extends Controller { static targets = ["modal", "backdrop"]; + // TODO: Stimulus >1 + connect() { + this.showEvent = this.show.bind(this); + + window.addEventListener("modal:show", this.showEvent); + } + + // TODO: Stimulus >1 + disconnect() { + window.removeEventListener("modal:show", this.showEvent); + } + + /* + * Podemos enviar la orden de apertura como un click o como un + * CustomEvent incluyendo el id del modal como detail. + */ show(event = undefined) { event?.preventDefault(); + const modalId = event?.detail?.id; + + if (modalId && this.element.id !== modalId) return; this.modalTarget.style.display = "block"; this.backdropTarget.style.display = "block"; diff --git a/app/views/posts/attributes/_new_has_many.haml b/app/views/posts/attributes/_new_has_many.haml index f8ec89d4..76cf299f 100644 --- a/app/views/posts/attributes/_new_has_many.haml +++ b/app/views/posts/attributes/_new_has_many.haml @@ -4,8 +4,9 @@ id = "#{base}_#{attribute}" name = "#{base}[#{attribute}][]" form_id = "form-#{Nanoid.generate}" + modal_id = "modal-#{Nanoid.generate}" -%div{ data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } +%div{ id: modal_id, data: { controller: 'modal array', 'array-original-value': metadata.value.to_json, 'array-new-array-value': site_posts_new_related_post_path(site) } } .form-group = hidden_field_tag name, '' = label_tag id, post_label_t(attribute, post: post)