From 295c4f57ef4e053866037e7bdf188a0cc74bade0 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 5 Jun 2024 18:00:55 -0300 Subject: [PATCH 1/3] feat: cancelar con escape --- app/javascript/controllers/array_controller.js | 8 +++++++- app/javascript/controllers/modal_controller.js | 6 ++++++ app/views/bootstrap/_modal.haml | 4 +++- app/views/posts/attributes/_new_array.haml | 2 +- app/views/posts/attributes/_new_belongs_to.haml | 2 +- .../posts/attributes/_new_has_and_belongs_to_many.haml | 2 +- app/views/posts/attributes/_new_has_many.haml | 2 +- app/views/posts/attributes/_new_predefined_array.haml | 2 +- app/views/posts/attributes/_new_predefined_value.haml | 2 +- 9 files changed, 22 insertions(+), 8 deletions(-) diff --git a/app/javascript/controllers/array_controller.js b/app/javascript/controllers/array_controller.js index 19d00ccd..db768ef3 100644 --- a/app/javascript/controllers/array_controller.js +++ b/app/javascript/controllers/array_controller.js @@ -76,10 +76,16 @@ export default class extends Controller { return this.inputFrom(itemTarget)?.checked || false; } + cancelWithEscape(event) { + if (event?.key !== "Escape") return; + + this.cancel(); + } + /* * Al cancelar, se vuelve al estado original de la lista */ - cancel(event) { + cancel(event = undefined) { for (const itemTarget of this.itemTargets) { const input = this.inputFrom(itemTarget); diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js index 0f8deeca..2ffdedaa 100644 --- a/app/javascript/controllers/modal_controller.js +++ b/app/javascript/controllers/modal_controller.js @@ -56,6 +56,12 @@ export default class extends Controller { }, 1); } + hideWithEscape(event) { + if (event?.key !== "Escape") return; + + this.hide(); + } + hide(event = undefined) { event?.preventDefault(); const modalId = event?.detail?.id; diff --git a/app/views/bootstrap/_modal.haml b/app/views/bootstrap/_modal.haml index 3efd1525..8624f9cd 100644 --- a/app/views/bootstrap/_modal.haml +++ b/app/views/bootstrap/_modal.haml @@ -21,12 +21,14 @@ :ruby local_assigns[:hide_actions] ||= [] local_assigns[:hide_actions] << 'click->modal#hide' + local_assigns[:keydown_actions] ||= [] + local_assigns[:keydown_actions] << 'keydown->modal#hideWithEscape' local_assigns[:modal_content_attributes] ||= {} -# XXX: Necesario para poder generar todas las demás = yield -.modal.fade{ tabindex: -1, aria: { hidden: 'true' }, data: { target: 'modal.modal' } } +.modal.fade{ tabindex: -1, aria: { hidden: 'true' }, data: { target: 'modal.modal', action: local_assigns[:keydown_actions].join(' ') } } .modal-backdrop.fade{ data: { target: 'modal.backdrop', action: local_assigns[:hide_actions].join(' ') } } .modal-dialog.modal-dialog-scrollable.modal-dialog-centered.modal-lg .modal-content{ **local_assigns[:modal_content_attributes] } diff --git a/app/views/posts/attributes/_new_array.haml b/app/views/posts/attributes/_new_array.haml index 1ad12b8e..da4a93c7 100644 --- a/app/views/posts/attributes/_new_array.haml +++ b/app/views/posts/attributes/_new_array.haml @@ -30,7 +30,7 @@ - metadata.value.sort_by(&:remove_diacritics).each do |value| = render 'posts/new_array_value', value: value - = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] do + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do - content_for :"#{id}_header" do .form-group.flex-grow-1.mb-0 = label_tag id, post_label_t(attribute, post: post) diff --git a/app/views/posts/attributes/_new_belongs_to.haml b/app/views/posts/attributes/_new_belongs_to.haml index a4867276..5c8844a5 100644 --- a/app/views/posts/attributes/_new_belongs_to.haml +++ b/app/views/posts/attributes/_new_belongs_to.haml @@ -45,7 +45,7 @@ - if !metadata.empty? && (indexed_post = site.indexed_posts.find_by(post_id: metadata.value)) = render 'posts/new_related_post', post: indexed_post - = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] do + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do - content_for :"#{id}_header" do .form-group.flex-grow-1.mb-0 = label_tag id, post_label_t(attribute, post: post) diff --git a/app/views/posts/attributes/_new_has_and_belongs_to_many.haml b/app/views/posts/attributes/_new_has_and_belongs_to_many.haml index 243178d9..8b615173 100644 --- a/app/views/posts/attributes/_new_has_and_belongs_to_many.haml +++ b/app/views/posts/attributes/_new_has_and_belongs_to_many.haml @@ -45,7 +45,7 @@ - if (indexed_post = site.indexed_posts.find_by(post_id: uuid)) = render 'posts/new_related_post', post: indexed_post - = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] do + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do - content_for :"#{id}_header" do .form-group.flex-grow-1.mb-0 = label_tag id, post_label_t(attribute, post: post) diff --git a/app/views/posts/attributes/_new_has_many.haml b/app/views/posts/attributes/_new_has_many.haml index f8312c20..d211d864 100644 --- a/app/views/posts/attributes/_new_has_many.haml +++ b/app/views/posts/attributes/_new_has_many.haml @@ -45,7 +45,7 @@ - if (indexed_post = site.indexed_posts.find_by(post_id: uuid)) = render 'posts/new_related_post', post: indexed_post - = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] do + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do - content_for :"#{id}_header" do .form-group.flex-grow-1.mb-0 = label_tag id, post_label_t(attribute, post: post) diff --git a/app/views/posts/attributes/_new_predefined_array.haml b/app/views/posts/attributes/_new_predefined_array.haml index 2adf44c1..c67b2ea9 100644 --- a/app/views/posts/attributes/_new_predefined_array.haml +++ b/app/views/posts/attributes/_new_predefined_array.haml @@ -33,7 +33,7 @@ - metadata.values.slice(*metadata.value).each_key do |value| = render 'posts/new_array_value', value: value - = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] do + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do - content_for :"#{id}_header" do .form-group.flex-grow-1.mb-0 = label_tag id, post_label_t(attribute, post: post) diff --git a/app/views/posts/attributes/_new_predefined_value.haml b/app/views/posts/attributes/_new_predefined_value.haml index c592b20a..7f418472 100644 --- a/app/views/posts/attributes/_new_predefined_value.haml +++ b/app/views/posts/attributes/_new_predefined_value.haml @@ -44,7 +44,7 @@ - unless metadata.empty? = render 'posts/new_array_value', value: metadata.to_s - = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'] do + = render 'bootstrap/modal', id: id, modal_content_attributes: { class: 'h-100' }, hide_actions: ['array#cancel'], keydown_actions: %w[keydown->array#cancelWithEscape] do - content_for :"#{id}_header" do .form-group.flex-grow-1.mb-0 = label_tag id, post_label_t(attribute, post: post) From 706f0162a53d6c72b723be79fe36b5c672aaf9b5 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 5 Jun 2024 18:01:44 -0300 Subject: [PATCH 2/3] feat: pasar el foco al modal al abrir y volver al cerrar --- app/javascript/controllers/modal_controller.js | 12 +++++++++++- app/views/posts/attributes/_new_has_one.haml | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js index 2ffdedaa..1d89c826 100644 --- a/app/javascript/controllers/modal_controller.js +++ b/app/javascript/controllers/modal_controller.js @@ -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 = ""; diff --git a/app/views/posts/attributes/_new_has_one.haml b/app/views/posts/attributes/_new_has_one.haml index 4235b9b3..58e098b6 100644 --- a/app/views/posts/attributes/_new_has_one.haml +++ b/app/views/posts/attributes/_new_has_one.haml @@ -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 } From 9edbe9ecf16acf66298864eb59c397bbaade9ce4 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 5 Jun 2024 18:02:14 -0300 Subject: [PATCH 3/3] fix: pry perdido --- app/services/post_service.rb | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/services/post_service.rb b/app/services/post_service.rb index bb49c5bd..5f27211d 100644 --- a/app/services/post_service.rb +++ b/app/services/post_service.rb @@ -11,8 +11,6 @@ PostService = Struct.new(:site, :usuarie, :post, :params, keyword_init: true) do def create_or_update uuid = params.require(base).permit(:uuid).values.first - binding.pry - if uuid.blank? create elsif (indexed_post = site.indexed_posts.find_by(post_id: uuid)).present?