Merge pull request #89 from mlibrary/LIBSEARCH-864-cross-references-t…

…oggle-terms

Libsearch 864 cross references toggle terms

css/browse.css

@@ -8,4 +8,6 @@
 @import url("styles/m-callout.css");
 @import url("styles/pagination.css");
 @import url("styles/table.css");
+@import url("styles/description-list.css");
+@import url("styles/cross-references.css");
 @import url("styles/footer.css");

css/styles/cross-references.css

@@ -0,0 +1,69 @@
+/**
+ * cross-references.css
+ * 
+ * Cross references display results relating to the listed record.
+ *
+ * -----------------
+ * Table of Contents
+ * -----------------
+ * 1.0 - Cross References
+ * 2.0 - Toggle Cross References
+ *   2.1 - Summary
+ *     2.1.1 - Content
+ */
+
+
+
+/******************************/
+/*** 1.0 - Cross References ***/
+/******************************/
+
+ol.cross-references-list {
+  color: var(--search-neutral-500);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+
+
+/*************************************/
+/*** 2.0 - Toggle Cross References ***/
+/*************************************/
+
+details.toggle-cross-references:not([open]) {
+  margin-top: 0.25rem;
+}
+
+details.toggle-cross-references[open] {
+  padding-bottom: 2.125rem;
+  position: relative; 
+}
+
+/*** 2.1 - Summary ***/
+
+details.toggle-cross-references > summary {
+  border: 1px solid var(--search-neutral-500);
+  border-radius: var(--radius-default);
+  color: var(--search-neutral-500);
+  cursor: pointer;
+  padding: 0.125rem 0.375rem;
+  list-style: none;
+  width: fit-content;
+}
+
+details.toggle-cross-references > summary::-webkit-details-marker {
+  display: none;
+}
+
+details.toggle-cross-references[open] > summary {
+  bottom: 0;
+  position: absolute;
+}
+
+/* 2.1.1 - Content */
+
+details.toggle-cross-references:not([open]) .details-open,
+details.toggle-cross-references[open] .details-closed  {
+  display: none;
+}

css/styles/description-list.css

@@ -0,0 +1,40 @@
+/**
+ * description-list.css
+ * 
+ * Description lists are used to display metadata.
+ *
+ * -----------------
+ * Table of Contents
+ * -----------------
+ * 1.0 - Description List
+ *   1.1 - Term
+ *   1.2 - Description
+ */
+
+
+
+/******************************/
+/*** 1.0 - Description List ***/
+/******************************/
+
+/*** 1.1 - Term ***/
+
+dl dt {
+  font-weight: var(--semibold);
+}
+
+.browse-table:not(.subject-browse) dl dt {
+  clear: left;
+  float: left;
+  margin-right: 0.5rem;
+}
+
+/*** 1.2 - Description ***/
+
+dl dd {
+  margin: 0;
+}
+
+dl dt.visually-hidden:not(:only-of-type) + dd {
+  margin-bottom: 0.5rem;
+}

css/styles/table.css

@@ -13,9 +13,8 @@
  *   2.1 - Cells
  * 3.0 - TBody
  *   3.1 - Cells
- *   3.2 - Data
- *     3.2.1 - Anchors
- *     3.2.2 - Vernacular
+ *   3.2 - Content
+ *     3.2.1 - Anchor
  */
 
 
@@ -183,51 +182,15 @@ table.browse-table {
   border-top-color: var(--color-teal-400);
 }
 
-/*** 3.2 - Data ***/
+/*** 3.2 - Content ***/
 
 .browse-table tbody td > * {
   margin: 0;
 }
 
-.browse-table tbody dl dt {
-  clear: left;
-  float: left;
-  font-weight: var(--semibold);
-  margin-right: 0.5rem;
-}
-
-.browse-table tbody dl dd {
-  margin: 0;
-}
-
-.browse-table tbody dl dt.visually-hidden:not(:only-of-type) + dd {
-  margin-bottom: 0.5rem;
-}
-
-/* 3.2.1 - Anchors */
+/* 3.2.1 - Anchor */
 
 .browse-table tbody td.column-main dd:first-of-type a:first-of-type {
   display: inline-block;
   font-weight: var(--semibold);
 }
-
-/* 3.2.2 - Vernacular */
-
-.browse-table tbody .vernacular {
-  color: var(--search-neutral-500);
-  display: block;
-}
-
-.browse-table tbody .vernacular.pipe {
-  display: inline;
-}
-
-.browse-table tbody .vernacular.pipe:before {
-  background: var(--search-neutral-500);
-  content: '';
-  display: inline-block;
-  height: 1em;
-  margin: 0 0.5rem;
-  vertical-align: middle;
-  width: 1px;
-}

css/styles/typography.css

@@ -9,6 +9,8 @@
  * 1.0 - Headings
  * 2.0 - Font Weights
  * 3.0 - Icons
+ * 4.0 - Vernacular
+ *   4.1 - Pipe
  */
 
 
@@ -29,6 +31,10 @@ h1 {
 /*** 2.0 - Font Weights ***/
 /**************************/
 
+.regular {
+  font-weight: var(--regular);
+}
+
 .strong {
   font-weight: var(--bold);
 }
@@ -44,3 +50,30 @@ span[class^="material-symbols"] {
   line-height: inherit;
   vertical-align: middle;
 }
+
+
+
+/************************/
+/*** 4.0 - Vernacular ***/
+/************************/
+
+.vernacular {
+  color: var(--search-neutral-500);
+  display: block;
+}
+
+/*** 4.1 - Pipe ***/
+
+.vernacular.pipe {
+  display: inline;
+}
+
+.vernacular.pipe:before {
+  background: var(--search-neutral-500);
+  content: '';
+  display: inline-block;
+  height: 1em;
+  margin: 0 0.5rem;
+  vertical-align: middle;
+  width: 1px;
+}

lib/models/subject_item.rb

@@ -67,21 +67,95 @@ def has_cross_references?
 
   def cross_references
     # see_instead because this still needs to be changed in solr
-    broader = @browse_doc["broader"]&.map { |subject| SubjectItemCrossReference.new(subject) }
-    narrower = @browse_doc["narrower"]&.map { |subject| SubjectItemCrossReference.new(subject) }
-    see_also = @browse_doc["see_also"]&.map { |subject| SubjectItemCrossReference.new(subject) }
+    broader = BroaderTerms.new(@browse_doc["broader"])
+    narrower = NarrowerTerms.new(@browse_doc["narrower"])
+    see_also = SeeAlsoTerms.new(@browse_doc["see_also"])
     OpenStruct.new(broader: broader, narrower: narrower, see_also: see_also)
   end
 end
 
+class SubjectItemCrossReferences
+  def initialize(terms)
+    @terms = terms&.map { |subject| SubjectItemCrossReference.new(subject) }
+  end
+
+  def leading
+    @terms&.first(10) || []
+  end
+
+  def remaining
+    @terms&.drop(leading.count) || []
+  end
+
+  def has_remaining?
+    remaining.any?
+  end
+
+  def any?
+    leading.any?
+  end
+
+  def text
+    ""
+  end
+
+  private
+
+  def summary_text(closed, type)
+    "#{(closed == true) ? "Show all #{@terms.length}" : "Hide #{remaining.count}"}#{" #{type}" if !type.nil?} term#{"s" if closed || !closed && remaining.count != 1}"
+  end
+end
+
+class BroaderTerms < SubjectItemCrossReferences
+  def text
+    "Broader term#{"s" if @terms.count != 1}"
+  end
+
+  def summary_text_closed
+    summary_text(true, "broader")
+  end
+
+  def summary_text_open
+    summary_text(false, "broader")
+  end
+end
+
+class NarrowerTerms < SubjectItemCrossReferences
+  def text
+    "Narrower term#{"s" if @terms.count != 1}"
+  end
+
+  def summary_text_closed
+    summary_text(true, "narrower")
+  end
+
+  def summary_text_open
+    summary_text(false, "narrower")
+  end
+end
+
+class SeeAlsoTerms < SubjectItemCrossReferences
+  def text
+    "See also"
+  end
+
+  def summary_text_closed
+    summary_text(true, nil)
+  end
+
+  def summary_text_open
+    summary_text(false, nil)
+  end
+end
+
 class SubjectItemCrossReference
   attr_reader :subject, :count
   def initialize(subject)
     @subject, @count = subject.split("||").map { |x| x.strip }
   end
 
   def subject_display
-    "#{@subject} (in subject list)"
+    @subject
   end
 
   def record_text