Sutty/panel
5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-11-23 04:46:21 +00:00
Code Issues Projects Releases Wiki Activity

feat: pasar el foco al modal al abrir y volver al cerrar

Browse source
This commit is contained in:
f 2024-06-05 18:01:44 -03:00
parent 295c4f57ef
commit 706f0162a5
No known key found for this signature in database
2 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/javascript/controllers/modal_controller.js
View file

@ -26,7 +26,7 @@ export default class extends Controller {
if (!event.target?.dataset?.modalShowValue) return;
window.dispatchEvent(new CustomEvent("modal:show", { detail: { id: event.target.dataset.modalShowValue } }));
window.dispatchEvent(new CustomEvent("modal:show", { detail: { id: event.target.dataset.modalShowValue, previousFocus: event.target.id } }));
}
/*
@ -50,9 +50,17 @@ export default class extends Controller {
window.document.body.classList.add("modal-open");
if (event?.detail?.previousFocus) {
this.previousFocus = window.document.getElementById(event.detail.previousFocus);
} else {
this.previousFocus = event?.target;
}
setTimeout(() => {
this.modalTarget.classList.add("show");
this.backdropTarget.classList.add("show");
this.modalTarget.focus();
}, 1);
}
@ -75,6 +83,8 @@ export default class extends Controller {
this.modalTarget.removeAttribute("role");
this.modalTarget.removeAttribute("aria-modal");
this.previousFocus?.focus();
setTimeout(() => {
this.modalTarget.style.display = "";
this.backdropTarget.style.display = "";

2
app/views/posts/attributes/_new_has_one.haml
View file

@ -25,7 +25,7 @@
= hidden_field_tag name, ''
.d-flex.align-items-center.justify-content-between
= label_tag id, post_label_t(attribute, post: post), class: 'h3'
= render 'bootstrap/btn', content: t('.edit'), action: 'modal#showAnother', data: { 'modal-show-value': modal_id }
= render 'bootstrap/btn', content: t('.edit'), action: 'modal#showAnother', data: { 'modal-show-value': modal_id }, id: random_id
-# Aquí se reemplaza por la tarjeta y el UUID luego de guardar
.row.row-cols-1.no-gutters.placeholder-glow{ id: target_id }