Merge branch 'issue-15068' into production.panel.sutty.nl

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);
 

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,12 +50,26 @@ 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);
   }
 
+  hideWithEscape(event) {
+    if (event?.key !== "Escape") return;
+
+    this.hide();
+  }
+
   hide(event = undefined) {
     event?.preventDefault();
     const modalId = event?.detail?.id;
@@ -69,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 = "";

app/services/post_service.rb

@@ -12,8 +12,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?

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] }

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)

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)

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)

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)

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 }

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)

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)