From 398dfdd9f2d67f2136d9a9be851893f59b8f49d9 Mon Sep 17 00:00:00 2001
From: Tatiana Smirnova <tatiana.smirnova@nopio.com>
Date: Fri, 30 Aug 2024 00:57:38 +0200
Subject: [PATCH] feat: APPS-2680 html tags and "read more" button for the
 search results (#1152)

* feat: APPS-2680 html tags and "read more" button for the search results

* Allow .html_safe

* APPS-2680: updated JS to not cut description in the middle of the word

* APPS-2680: updated JS to not cut description in the middle of the word and number

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Andy Wallace <andrewwallace@library.ucla.edu>
---
 .../javascripts/truncate_description.js       | 49 +++++++++++--------
 .../legacy/ursus/_description.scss            |  1 +
 app/helpers/ursus/catalog_helper.rb           |  7 ++-
 spec/system/search_catalog_spec.rb            |  5 +-
 4 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/truncate_description.js b/app/assets/javascripts/truncate_description.js
index 275e32812..611f0f41e 100644
--- a/app/assets/javascripts/truncate_description.js
+++ b/app/assets/javascripts/truncate_description.js
@@ -1,27 +1,34 @@
-document.addEventListener("turbolinks:load", function() {
-  var viewMoreButtons = document.querySelectorAll('.view-more')
+document.addEventListener("turbolinks:load", function () {
+  var viewMoreButtons = document.querySelectorAll(".view-more");
   viewMoreButtons.forEach(function (el) {
-    var description = el.previousElementSibling
-    var originalText = description.innerText
-    var truncatedText = description.innerText.substr(0, 299)
-    truncatedText += '…'
+    var description = el.previousElementSibling;
+    var originalText = description.innerText;
 
-    if (description.innerText.length < 300) {
-      el.style.display = 'none'
-    } else {
-      description.innerText = truncatedText
+    if (originalText.length < 300) {
+      el.style.display = "none";
+      return;
     }
 
-    el.addEventListener('click', function () {
-      if (description.classList.contains('description')) {
-        el.innerHTML = 'Read Less <div class="up-arrow">&raquo;</div>'
-        description.classList.replace('description', 'description-full')
-        description.innerText = originalText
+    var truncatedText = originalText.substr(0, 299);
+
+    // To avoid truncation in the middle of the word get the end of the word
+    //   from the the cut part of the description.
+    var cutString = originalText.substr(299);
+    truncatedText += cutString.match(/^[a-z0-9]*/i)[0]; //regex gets the end of the word
+
+    truncatedText += "…";
+    description.innerText = truncatedText;
+
+    el.addEventListener("click", function () {
+      if (description.classList.contains("description")) {
+        el.innerHTML = 'Read Less <div class="up-arrow">&raquo;</div>';
+        description.classList.replace("description", "description-full");
+        description.innerText = originalText;
       } else {
-        el.innerHTML = 'Read More <div class="down-arrow">&raquo;</div>'
-        description.classList.replace('description-full', 'description')
-        description.innerText = truncatedText
+        el.innerHTML = 'Read More <div class="down-arrow">&raquo;</div>';
+        description.classList.replace("description-full", "description");
+        description.innerText = truncatedText;
       }
-    })
-  })
-})
+    });
+  });
+});
diff --git a/app/assets/stylesheets/legacy/ursus/_description.scss b/app/assets/stylesheets/legacy/ursus/_description.scss
index 7fdc85e15..96df0b47b 100644
--- a/app/assets/stylesheets/legacy/ursus/_description.scss
+++ b/app/assets/stylesheets/legacy/ursus/_description.scss
@@ -1,6 +1,7 @@
 .view-more {
   @extend a;
   cursor: pointer;
+  margin-bottom: 10px;
 }
 
 .down-arrow {
diff --git a/app/helpers/ursus/catalog_helper.rb b/app/helpers/ursus/catalog_helper.rb
index 8bd1e3c79..a6b306226 100644
--- a/app/helpers/ursus/catalog_helper.rb
+++ b/app/helpers/ursus/catalog_helper.rb
@@ -27,10 +27,9 @@ def render_truncated_description(args)
       truncated_output = String.new
       content_tag :div, class: 'truncate-description' do
         description = args[:value].first
-        button = "<span class='view-more' href>Read More <div class='down-arrow'>&raquo;</div></span></br>"
-        truncated_output << "<div class='description'>#{description}</div>#{button}</br>"
-        # return truncated_output.html_safe
-        return description
+        button = "<div class='view-more' href>Read More <div class='down-arrow'>&raquo;</div></div>"
+        truncated_output << "<div class='description'>#{description}</div>#{button}"
+        truncated_output.html_safe # rubocop:disable Rails/OutputSafety
       end
     end
 
diff --git a/spec/system/search_catalog_spec.rb b/spec/system/search_catalog_spec.rb
index 3558c3c4e..546866dc0 100644
--- a/spec/system/search_catalog_spec.rb
+++ b/spec/system/search_catalog_spec.rb
@@ -17,7 +17,7 @@
       has_model_ssim: ['Work'],
       title_tesim: ['Orange Carrot'],
       photographer_tesim: ['Bittersweet Tangerine'],
-      description_tesim: ['Long description Long description Long description Long description Long description Long description']
+      description_tesim: ['Long description Long description Long description<br>Long description Long description Long description']
     }
   end
 
@@ -147,7 +147,8 @@
     # Search for something
     fill_in 'q', with: 'carrot'
     click_on 'search'
-    expect(page).not_to have_content('Read More')
+    expect(page).to have_content('Read More')
+    expect(page).not_to have_content('<br>')
   end
 
   context 'when the sinai? flag is disabled' do