Add buttons to check all/none available languages

Although most Consul Democracy installations will only have a few
available languages using `config.i18n.available_locales`, there's a
chance some installation will keep every language as available and will
enable the desired ones using the admin interface. In these cases,
enabling (or disabling) every language would be tedious, particularly
when casually experimenting in a staging environment or while using the
official Consul Democracy demo.

So we're adding buttons to simplify the process. Since some
installations might have only a couple of available languages, and in
this case these buttons would be pretty much useless, we're only showing
them when there are many languages available.

app/assets/javascripts/check_all_none.js

@@ -2,15 +2,22 @@
   "use strict";
   App.CheckAllNone = {
     initialize: function() {
-      $("[data-check-all]").on("click", function() {
-        App.CheckAllNone.associated_fields($(this), "check-all").prop("checked", true);
-      });
-      $("[data-check-none]").on("click", function() {
-        App.CheckAllNone.associated_fields($(this), "check-none").prop("checked", false);
+      $(".check-all-none button").on("click", function() {
+        var fields = App.CheckAllNone.associated_fields($(this));
+
+        if ($(this).data("check-all")) {
+          fields.prop("checked", true);
+        } else if ($(this).data("check-none")) {
+          fields.prop("checked", false);
+        }
       });
     },
-    associated_fields: function(element, data_attribute) {
-      return $("[name='" + element.data(data_attribute) + "']");
+    associated_fields: function(element) {
+      if (element.data("field-name")) {
+        return $("[name='" + element.data("field-name") + "']");
+      } else {
+        return $("[type='checkbox']", element.closest("fieldset"));
+      }
     }
   };
 }).call(this);

app/components/admin/locales/form_component.html.erb

@@ -23,6 +23,10 @@
     <legend><%= attribute_name(:enabled) %></legend>
     <p class="help-text"><%= t("admin.locales.enabled_help_text") %></p>
 
+    <% if many_available_locales? %>
+      <%= render Shared::CheckAllNoneComponent.new %>
+    <% end %>
+
     <div class="collection-check-boxes">
       <%= f.collection_check_boxes(
         :enabled,

app/components/moderation/shared/index_component.html.erb

@@ -9,10 +9,7 @@
 <% end %>
 
 <%= form_tag form_path, method: :put do %>
-  <ul class="check-all-none">
-    <li><%= button_tag t("shared.check_all"), type: "button", data: { check_all: field_name } %></li>
-    <li><%= button_tag t("shared.check_none"), type: "button", data: { check_none: field_name } %></li>
-  </ul>
+  <%= render Shared::CheckAllNoneComponent.new(field_name) %>
 
   <%= content %>
 

app/components/shared/check_all_none_component.html.erb

@@ -0,0 +1,12 @@
+<ul class="check-all-none">
+  <li>
+    <%= button_tag t("shared.check_all"),
+                   type: "button",
+                   data: { field_name: field_name, check_all: true } %>
+  </li>
+  <li>
+    <%= button_tag t("shared.check_none"),
+                   type: "button",
+                   data: { field_name: field_name, check_none: true } %>
+  </li>
+</ul>

app/components/shared/check_all_none_component.rb

@@ -0,0 +1,7 @@
+class Shared::CheckAllNoneComponent < ApplicationComponent
+  attr_reader :field_name
+
+  def initialize(field_name = nil)
+    @field_name = field_name
+  end
+end