From de3d8ae84c8c6320bcba6bb62bf1f3e7e9236ace Mon Sep 17 00:00:00 2001
From: dnoneill <noneill@stanford.edu>
Date: Fri, 16 Aug 2024 14:00:33 -0400
Subject: [PATCH 1/2] add expand/collapse buttons to search results

---
 app/assets/stylesheets/earthworks.css            | 15 +++++++++++++++
 .../earthworks/search_result_component.html.erb  |  2 +-
 .../controllers/description_controller.js        |  4 ++++
 .../controllers/expandcollapse_controller.js     | 16 ++++++++++++++++
 app/views/catalog/_sort_and_per_page.html.erb    | 16 ++++++++++++++++
 5 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/controllers/description_controller.js
 create mode 100644 app/javascript/controllers/expandcollapse_controller.js
 create mode 100644 app/views/catalog/_sort_and_per_page.html.erb

diff --git a/app/assets/stylesheets/earthworks.css b/app/assets/stylesheets/earthworks.css
index 62eae128..83270e31 100644
--- a/app/assets/stylesheets/earthworks.css
+++ b/app/assets/stylesheets/earthworks.css
@@ -199,3 +199,18 @@ Uncomment lines 142-144
   color: var(--stanford-digital-blue-dark) !important;
   border-color: var(--stanford-digital-blue-dark) !important;
 }
+
+/* Styles for search result description expand/collapse */
+
+.expand-collapse .btn-outline-secondary {
+  display: flex;
+  &.active {
+    color: white;
+    background-color:var(--stanford-cardinal);
+  }
+}
+
+.expand-collapse i {
+  align-self: center;
+}
+
diff --git a/app/components/earthworks/search_result_component.html.erb b/app/components/earthworks/search_result_component.html.erb
index 3a63fc9b..de10cef8 100644
--- a/app/components/earthworks/search_result_component.html.erb
+++ b/app/components/earthworks/search_result_component.html.erb
@@ -24,7 +24,7 @@
     <% end %>
   <% end %>
   <div class='more-info-area border-bottom'>
-    <div id="doc-<%= @document.id %>-fields-collapse" class='collapse'>
+    <div id="doc-<%= @document.id %>-fields-collapse" class='collapse description' data-controller="description">
       <small itemprop="description">
         <%= index_fields_display %>
       </small>
diff --git a/app/javascript/controllers/description_controller.js b/app/javascript/controllers/description_controller.js
new file mode 100644
index 00000000..4a74342e
--- /dev/null
+++ b/app/javascript/controllers/description_controller.js
@@ -0,0 +1,4 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+}
diff --git a/app/javascript/controllers/expandcollapse_controller.js b/app/javascript/controllers/expandcollapse_controller.js
new file mode 100644
index 00000000..267362b4
--- /dev/null
+++ b/app/javascript/controllers/expandcollapse_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static outlets = [ "description" ]
+  toggleDescriptions(evt) {
+    const activeClass = 'active'
+    const currentActive = this.element.querySelector(`.${activeClass}`)
+    currentActive.classList.remove(activeClass)
+    currentActive.disabled = false;
+    evt.currentTarget.disabled = true;
+    evt.currentTarget.classList.add(activeClass)
+    this.descriptionOutletElements.forEach(function(element) {
+      element.classList.toggle("collapse");
+    });
+  }
+}
\ No newline at end of file
diff --git a/app/views/catalog/_sort_and_per_page.html.erb b/app/views/catalog/_sort_and_per_page.html.erb
new file mode 100644
index 00000000..044bb53f
--- /dev/null
+++ b/app/views/catalog/_sort_and_per_page.html.erb
@@ -0,0 +1,16 @@
+<div id="sortAndPerPage" class="sort-pagination d-md-flex justify-content-between" role="navigation" aria-label="<%= t('blacklight.search.per_page.aria_label')%>">
+  <%= render partial: "paginate_compact", object: @response if show_pagination? %>
+  <div class="search-widgets">
+    <%= render_results_collection_tools %>
+    <div class="expand-collapse btn-group" data-controller="expandcollapse" data-expandcollapse-description-outlet=".description">
+      <label class="btn btn-outline-secondary active" aria-label="collapse descriptions" disabled data-action="expandcollapse#toggleDescriptions">
+        <input type="radio" class="d-none" name="expandcollapse" value="collapse" selected data-action="expandcollapse#toggleDescriptions">
+        <i class="bi bi-list-ul"></i>
+      </label>
+      <label class="btn btn-outline-secondary" aria-label="expand descriptions" data-action="expandcollapse#toggleDescriptions">
+        <input type="radio" class="d-none" name="expandcollapse" value="expand" data-action="expandcollapse#toggleDescriptions">
+        <i class="bi bi-text-paragraph"></i>
+      </label>
+    </div>
+  </div>
+</div>
\ No newline at end of file

From 080af64bfda3c8a3820cc30da88b9637b0891322 Mon Sep 17 00:00:00 2001
From: mlongley <mlongley@stanford.edu>
Date: Thu, 22 Aug 2024 11:52:03 -0400
Subject: [PATCH 2/2] Use Stimulus targets for expand collapse button styles

---
 app/assets/stylesheets/earthworks.css         | 30 ++++++++---------
 .../controllers/description_controller.js     |  7 ++++
 .../controllers/expandcollapse_controller.js  | 33 +++++++++++++------
 app/views/catalog/_sort_and_per_page.html.erb | 10 +++---
 4 files changed, 50 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/earthworks.css b/app/assets/stylesheets/earthworks.css
index 83270e31..6b30e23b 100644
--- a/app/assets/stylesheets/earthworks.css
+++ b/app/assets/stylesheets/earthworks.css
@@ -164,6 +164,21 @@ Uncomment lines 142-144
   --bs-pagination-focus-bg: none;
   --bs-pagination-focus-box-shadow: none;
 }
+
+/* Styles for search result description expand/collapse */
+
+.expand-collapse .btn-outline-secondary {
+  display: flex;
+  &.active {
+    color: white;
+    background-color:var(--stanford-cardinal);
+  }
+}
+
+.expand-collapse i {
+  align-self: center;
+}
+
 /* Styles for code snippet */
 
 .code-snippet-content {
@@ -199,18 +214,3 @@ Uncomment lines 142-144
   color: var(--stanford-digital-blue-dark) !important;
   border-color: var(--stanford-digital-blue-dark) !important;
 }
-
-/* Styles for search result description expand/collapse */
-
-.expand-collapse .btn-outline-secondary {
-  display: flex;
-  &.active {
-    color: white;
-    background-color:var(--stanford-cardinal);
-  }
-}
-
-.expand-collapse i {
-  align-self: center;
-}
-
diff --git a/app/javascript/controllers/description_controller.js b/app/javascript/controllers/description_controller.js
index 4a74342e..0ce869ac 100644
--- a/app/javascript/controllers/description_controller.js
+++ b/app/javascript/controllers/description_controller.js
@@ -1,4 +1,11 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+    expand() {
+        this.element.classList.remove("collapse");
+    }
+
+    collapse() {
+        this.element.classList.add("collapse");
+    }
 }
diff --git a/app/javascript/controllers/expandcollapse_controller.js b/app/javascript/controllers/expandcollapse_controller.js
index 267362b4..3a0bdb80 100644
--- a/app/javascript/controllers/expandcollapse_controller.js
+++ b/app/javascript/controllers/expandcollapse_controller.js
@@ -1,16 +1,29 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static outlets = [ "description" ]
-  toggleDescriptions(evt) {
-    const activeClass = 'active'
-    const currentActive = this.element.querySelector(`.${activeClass}`)
-    currentActive.classList.remove(activeClass)
-    currentActive.disabled = false;
-    evt.currentTarget.disabled = true;
-    evt.currentTarget.classList.add(activeClass)
-    this.descriptionOutletElements.forEach(function(element) {
-      element.classList.toggle("collapse");
+  static outlets = ["description"]
+  static targets = ["expandButton", "collapseButton"]
+
+  expandDescriptions() {
+    this.descriptionOutlets.forEach(description => {
+      description.expand();
+    });
+
+    this.toggleButtonStates();
+  }
+
+
+  collapseDescriptions() {
+    this.descriptionOutlets.forEach(description => {
+      description.collapse();
     });
+
+    this.toggleButtonStates();
   }
+
+  toggleButtonStates() {
+    this.expandButtonTarget.classList.toggle("active");
+    this.collapseButtonTarget.classList.toggle("active");
+  }
+
 }
\ No newline at end of file
diff --git a/app/views/catalog/_sort_and_per_page.html.erb b/app/views/catalog/_sort_and_per_page.html.erb
index 044bb53f..f79f97bf 100644
--- a/app/views/catalog/_sort_and_per_page.html.erb
+++ b/app/views/catalog/_sort_and_per_page.html.erb
@@ -3,14 +3,14 @@
   <div class="search-widgets">
     <%= render_results_collection_tools %>
     <div class="expand-collapse btn-group" data-controller="expandcollapse" data-expandcollapse-description-outlet=".description">
-      <label class="btn btn-outline-secondary active" aria-label="collapse descriptions" disabled data-action="expandcollapse#toggleDescriptions">
-        <input type="radio" class="d-none" name="expandcollapse" value="collapse" selected data-action="expandcollapse#toggleDescriptions">
+      <label class="btn btn-outline-secondary active" aria-label="collapse descriptions" data-expandcollapse-target="expandButton">
+        <input type="radio" class="d-none" name="expandcollapse" value="collapse" data-action="expandcollapse#collapseDescriptions" selected>
         <i class="bi bi-list-ul"></i>
       </label>
-      <label class="btn btn-outline-secondary" aria-label="expand descriptions" data-action="expandcollapse#toggleDescriptions">
-        <input type="radio" class="d-none" name="expandcollapse" value="expand" data-action="expandcollapse#toggleDescriptions">
+      <label class="btn btn-outline-secondary" aria-label="expand descriptions"  data-expandcollapse-target="collapseButton">
+        <input type="radio" class="d-none" name="expandcollapse" value="expand" data-action="expandcollapse#expandDescriptions">
         <i class="bi bi-text-paragraph"></i>
       </label>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>  
\ No newline at end of file