feat: APPS-2680 html tags and "read more" button for the search resul…

…ts (#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>

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;
       }
-    })
-  })
-})
+    });
+  });
+});

app/assets/stylesheets/legacy/ursus/_description.scss

@@ -1,6 +1,7 @@
 .view-more {
   @extend a;
   cursor: pointer;
+  margin-bottom: 10px;
 }
 
 .down-arrow {

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
 

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