Merge pull request #2668 from sciencehistory/fix_js_bug_in_oh_toc_page

Fix js bug in oh toc page

Author: eddierubeiz

app/components/oral_history/ohms_index_component.html.erb

@@ -48,29 +48,29 @@
           </div>
 
           <% if index_point.synopsis.present? %>
-            <p>
+            <p class="highlight-matches">
               <%= index_point.synopsis %>
             </p>
           <% end %>
 
 
           <% if index_point.partial_transcript.present? %>
-            <p class="attribute">
+            <p class="attribute highlight-matches">
               <span class="attribute-label">Begins with</span>
               <%= format_partial_transcript(index_point.partial_transcript) %>
             </p>
           <% end %>
 
           <% if index_point.all_keywords_and_subjects.present?  %>
-            <p class="attribute keywords">
+            <p class="attribute keywords highlight-matches">
               <span class="attribute-label">Keywords</span>
               <% index_point.all_keywords_and_subjects.each_with_index do |keyword, index| %> <span class="oh-keyword"><%= keyword %></span> <% if index < index_point.all_keywords_and_subjects.length - 1 %><span class="keyword-seperator ml-1 mr-1">•</span><% end %>
               <%- end -%>
             </p>
           <% end %>
 
           <% if index_point.hyperlinks.present? %>
-            <div class="attribute ohms-hyperlinks">
+            <div class="attribute ohms-hyperlinks highlight-matches">
               <h4 class="attribute-label">Related <%= "URL".pluralize(index_point.hyperlinks.count) %></h4>
               <ul class="list-unstyled">
                 <% index_point.hyperlinks.each do |hyperlink| %>

app/frontend/javascript/audio/ohms_search.js

@@ -168,33 +168,26 @@ Search.searchTranscript = function(query) {
 // Highlights hits in index results.
 Search.searchIndex = function(query) {
   var _self = this;
-
   var reStr = new RegExp(_self.regexpStrForSearch(query), "gi");
-
-  return $(".ohms-index-point").map(function() {
+  var returnValue =  $(".ohms-index-point").map(function() {
     var section = $(this);
-
     var targetId = section.attr("id");
     if (! targetId) { throw "can't record ohms search without finding a dom id " + section.get(0) }
-
-    var replacementMade = false;
-    var original = section.html();
-    var replacedContent = original.replace(reStr, function(str) {
-      replacementMade = true;
-      return _self.wrapInHighlight(str);
-    });
-
-    if (replacementMade) {
-      // there was a hit, so, highlight and include result
-
-      section.html(replacedContent);
-
+    if (section.html().match(reStr) != null) {
+      // there was a hit. highlight and include result.
+      section.find('.highlight-matches').each(function() {
+        this.innerHTML = this.innerHTML.replace(reStr, function(str) {
+          return _self.wrapInHighlight(str);
+        });
+      });
       return {
         tabId: 'ohIndexTab',
-        targetId: targetId
+        targetId: targetId // the id of the accordion card for this match:
       };
     }
-  }).get() // plain array not jQuery object
+
+  }).get(); // plain array not jQuery object
+  return returnValue;
 };
 
 // Clears all search results state, restores to initial condition with no search

spec/system/oral_history_with_audio_spec.rb

@@ -410,6 +410,10 @@
         click_on "Search"
       end
 
+      expect(page).to have_selector("*[data-trigger='linkClipboardCopy']")
+      page.find("*[data-trigger='linkClipboardCopy']").click
+      expect(page).to have_content("Copied to clipboard")
+
       # ToC tab should be selected as it is first tab with results from search
       expect(page).to have_selector("#ohTocTab[aria-selected='true']")
       expect(page).to have_content(%r{Table of Contents — 1 / 7}i)