Eliminate checkbox-collapse, use native bootstrap collapse

MushroomObserver · Aug 17, 2024 · 40db187 · 40db187
1 parent 7243d6d
commit 40db187
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 61 deletions.
diff --git a/app/javascript/controllers/checkbox-collapse_controller.js b/app/javascript/controllers/checkbox-collapse_controller.js
diff --git a/app/javascript/controllers/form-exif_controller.js b/app/javascript/controllers/form-exif_controller.js
@@ -13,8 +13,8 @@ const internalConfig = {
 // (formerly "observation_images" section of the form)
 // Connects to data-controller="form-exif"
 export default class extends Controller {
-  static targets = ["carousel", "item", "useExifBtn"]
-  static outlets = ["autocompleter", "map", "checkbox-collapse"]
+  static targets = ["carousel", "item", "useExifBtn", "collapseFields"]
+  static outlets = ["autocompleter", "map"]
 
   connect() {
     this.element.dataset.stimulus = "form-exif-connected";
@@ -193,8 +193,13 @@ export default class extends Controller {
     // disables the button, even when called programmatically
     this.selectExifButton(element);
     // show the geolocation fields
-    if (this.hasCheckboxCollapseOutlet) {
-      this.checkboxCollapseOutlet.showFields();
+    this.showFields();
+  }
+
+  // show the geolocation fields
+  showFields() {
+    if (this.hasCollapseFieldsTarget) {
+      $(this.collapseFieldsTarget).collapse('show');
     }
   }
 

diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js
@@ -15,7 +15,7 @@ export default class extends GeocodeController {
     "autocompleter"]
 
   connect() {
-    this.element.dataset.stimulus = "connected"
+    this.element.dataset.stimulus = "map-connected"
     this.map_type = this.mapDivTarget.dataset.mapType
     this.editable = (this.mapDivTarget.dataset.editable === "true")
     this.opened = this.element.dataset.mapOpen === "true"

diff --git a/app/views/controllers/observations/_form.html.erb b/app/views/controllers/observations/_form.html.erb
@@ -37,7 +37,6 @@ form_element_data = {
   map_open: false,
   form_exif_autocompleter_outlet: "#observation_location_autocompleter",
   form_exif_map_outlet: "#observation_form",
-  form_exif_checkbox_collapse_outlet: "#observation_details",
   action: "map:reenableBtns@window->form-exif#reenableButtons",
   upload_max_size: max_size,
   localization: image_upload_localization,

diff --git a/app/views/controllers/observations/form/_details.html.erb b/app/views/controllers/observations/form/_details.html.erb
@@ -10,8 +10,7 @@ t_s = {
 }
 %>
 
-<%= tag.div(class: "panel-body border-top", id: "observation_details",
-            data: { controller: "checkbox-collapse" }) do %>
+<%= tag.div(class: "panel-body border-top", id: "observation_details") do %>
 
   <%= tag.div(class: "row mt-3") do %>
     <%= tag.div(class: "col-xs-12 col-md-6") do %>
@@ -73,13 +72,14 @@ t_s = {
           form: f, field: :has_geolocation, # field is ignored
           label: "#{:GEOLOCATION.l}:",
           help: :form_observations_lat_long_help.t,
-          data: { checkbox_collapse_target: "checkbox",
-                  action: "change->checkbox-collapse#hideShowFields" }
+          data: { toggle: "collapse", target: "#observation_geolocation" },
+          aria: { controls: "observation_geolocation",
+                  expanded: @observation.lat }
         ) %>
 
         <%= tag.div(id: "observation_geolocation",
-                    style: ("display: none;" unless @observation.lat),
-                    data: { checkbox_collapse_target: "fields" }) do %>
+                    class: class_names("collapse", ("in" if @observation.lat)),
+                    data: { form_exif_target: "collapseFields" }) do %>
 
           <%= tag.p(:form_observations_click_point.l) %>
 

diff --git a/app/views/controllers/observations/form/_specimen_section.html.erb b/app/views/controllers/observations/form/_specimen_section.html.erb
@@ -3,16 +3,15 @@
 <%# Specimen section of create_observation form, for collection_number and
 herbarium_record. Fields hidden unless box checked. %>
 
-<%= tag.div(id: "observation_specimen_section",
-            data: { controller: "checkbox-collapse" }) do %>
+<%= tag.div(id: "observation_specimen_section") do %>
 
   <%= tag.div(class: "mt-3") do %>
     <%= check_box_with_label(
       form: f, field: :specimen,
       label: :form_observations_specimen_available.t,
       help: :form_observations_specimen_available_help.t,
-      data: { checkbox_collapse_target: "checkbox",
-              action: "change->checkbox-collapse#hideShowFields" }
+      data: { toggle: "collapse", target: "#specimen_fields" },
+      aria: { controls: "specimen_fields", expanded: @observation.specimen }
     ) %>
     <!-- no_specimen_fields -->
     <% if action == :update %>
@@ -25,9 +24,10 @@ herbarium_record. Fields hidden unless box checked. %>
 
   <% if action == :create %>
     <!-- specimen_fields -->
-    <%= tag.div(id: "specimen_fields",
-                style: ("display: none;" unless @observation.specimen),
-                data: { checkbox_collapse_target: "fields" }) do %>
+    <%= tag.div(
+      id: "specimen_fields",
+      class: class_names("collapse", ("in" if @observation.specimen))
+    ) do %>
       <%= render(partial: "observations/form/specimen/collection_number") %>
       <%= render(partial: "observations/form/specimen/herbarium_record") %>
     <% end %>

diff --git a/app/views/controllers/shared/_form_location_map.erb b/app/views/controllers/shared/_form_location_map.erb
@@ -23,7 +23,7 @@ on an ancestor element that also contains the inputs
     ].safe_join,
     name: "map_toggle", class: "map-toggle",
     data: { map_target: "toggleMapBtn",
-            action: "map#toggleMap checkbox-collapse#showFields",
+            action: "map#toggleMap form-exif#showFields",
             toggle: "collapse", target: "##{id}" },
     aria: { expanded: "false", controls: id }
   ) %>