From 40db1871d597150f7ea15ddd7aeb1fb8bceaba53 Mon Sep 17 00:00:00 2001 From: andrew nimmo Date: Fri, 16 Aug 2024 17:59:50 -0700 Subject: [PATCH] Eliminate checkbox-collapse, use native bootstrap collapse --- .../checkbox-collapse_controller.js | 41 ------------------- .../controllers/form-exif_controller.js | 13 ++++-- app/javascript/controllers/map_controller.js | 2 +- .../controllers/observations/_form.html.erb | 1 - .../observations/form/_details.html.erb | 12 +++--- .../form/_specimen_section.html.erb | 14 +++---- .../controllers/shared/_form_location_map.erb | 2 +- 7 files changed, 24 insertions(+), 61 deletions(-) delete mode 100644 app/javascript/controllers/checkbox-collapse_controller.js diff --git a/app/javascript/controllers/checkbox-collapse_controller.js b/app/javascript/controllers/checkbox-collapse_controller.js deleted file mode 100644 index afd0250912..0000000000 --- a/app/javascript/controllers/checkbox-collapse_controller.js +++ /dev/null @@ -1,41 +0,0 @@ -import { Controller } from "@hotwired/stimulus" - -// Connects to data-controller="checkbox-collapse" -export default class extends Controller { - static targets = ["checkbox", "fields"] - - connect() { - this.element.dataset.stimulus = "checkbox-collapse-connected"; - } - - // Only show if user prefers - hideShowFields() { - if (this.checkboxTarget.checked) { - $(this.fieldsTarget).show() - } else { - $(this.fieldsTarget).hide() - } - } - - // Programmatically show or hide fields. To keep the checkbox in sync, - // it also checks or unchecks the checkbox, in case called directly. - hideFields() { - $(this.fieldsTarget).hide() - this.uncheckCheckbox() - } - - showFields() { - this.fieldsTarget.classList.remove("hidden") - $(this.fieldsTarget).show() - this.checkCheckbox() - } - - // This checks "specimen" anyway if people add a CN or HR. - checkCheckbox() { - this.checkboxTarget.setAttribute("checked", true) - } - - uncheckCheckbox() { - this.checkboxTarget.removeAttribute("checked") - } -} diff --git a/app/javascript/controllers/form-exif_controller.js b/app/javascript/controllers/form-exif_controller.js index 6f4e4cff5f..d966c80f9d 100644 --- 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 index 2a115b765b..207085ba67 100644 --- 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 index 02220909e7..7291e9dc23 100644 --- 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 index 6bafe82150..eaac83ae5d 100644 --- 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 index 362fcd9ad8..ae96a32c6d 100644 --- 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 } ) %> <% if action == :update %> @@ -25,9 +24,10 @@ herbarium_record. Fields hidden unless box checked. %> <% if action == :create %> - <%= 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 index 44addb8671..1831402983 100644 --- 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 } ) %>