feat: cancelar con escape

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

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

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