Extract Batch Edit controller

assets/controllers/batch_edit_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['item', 'tagAction'];
+
+  toggleSelection(e) {
+    this.itemTargets.forEach((item) => {
+      item.checked = e.currentTarget.checked; // eslint-disable-line no-param-reassign
+    });
+  }
+
+  tagSelection() {
+    this.element.requestSubmit(this.tagActionTarget);
+  }
+}

assets/index.js

@@ -173,23 +173,4 @@ $(document).ready(() => {
     $('.nav-panel-actions').show();
     return false;
   });
-
-  const mainCheckboxes = document.querySelectorAll('[data-js="checkboxes-toggle"]');
-  if (mainCheckboxes.length) {
-    [...mainCheckboxes].forEach((el) => {
-      el.addEventListener('click', () => {
-        const checkboxes = document.querySelectorAll(el.dataset.toggle);
-        [...checkboxes].forEach((checkbox) => {
-          const checkboxClone = checkbox;
-          checkboxClone.checked = el.checked;
-        });
-      });
-    });
-  }
-  $('form[name="form_mass_action"] input[name="tags"]').on('keydown', (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      $('form[name="form_mass_action"] button[name="tag"]').trigger('click');
-    }
-  });
 });

templates/Entry/Card/_mass_checkbox.html.twig

@@ -1,3 +1,3 @@
 <label class="entry-checkbox">
-    <input type="checkbox" class="entry-checkbox-input" data-js="entry-checkbox" name="entry-checkbox[]" value="{{ entry.id }}" />
+    <input type="checkbox" class="entry-checkbox-input" name="entry-checkbox[]" value="{{ entry.id }}" data-batch-edit-target="item" />
 </label>

templates/Entry/entries.html.twig

@@ -53,7 +53,7 @@
     {% if current_route == 'homepage' %}
         {% set current_route = 'unread' %}
     {% endif %}
-    <form name="form_mass_action" action="{{ path('mass_action', {redirect: current_path}) }}" method="post">
+    <form name="form_mass_action" action="{{ path('mass_action', {redirect: current_path}) }}" method="post" data-controller="batch-edit">
     <div class="results">
         <div class="nb-results">
             {{ 'entry.list.number_on_the_page'|trans({'%count%': entries.count}) }}
@@ -77,15 +77,15 @@
         <input id="mass-action-inputs-displayed" class="toggle-checkbox" type="checkbox" />
         <div class="mass-action">
             <div class="mass-action-group">
-                <input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />
+                <input type="checkbox" class="entry-checkbox-input" data-action="batch-edit#toggleSelection" />
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
             </div>
 
             <div class="mass-action-tags">
-                <button class="btn cyan darken-1 mass-action-button mass-action-button--tags" type="submit" name="tag" title="{{ 'entry.list.add_tags'|trans }}"><i class="material-icons">label</i></button>
+                <button class="btn cyan darken-1 mass-action-button mass-action-button--tags" type="submit" name="tag" title="{{ 'entry.list.add_tags'|trans }}" data-batch-edit-target="tagAction"><i class="material-icons">label</i></button>
-                <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" />
+                <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" data-action="keydown.enter->batch-edit#tagSelection:prevent:stop" />
             </div>
         </div>