dm-4256 refactor practice card img placeholders for pagebuilder show …

…and facility show (#723) * move `#replaceImagePlaceholders` methods to `_practice_card_utilities` refactors to be more readable, removes argument as it will always be the same for practice cards * add include tags for `practice_card_utilities` and `signed_resource` * add invocation of `replaceImagePlaceholders` where practice cards have been loaded * edit `practice_card.html.erb` to always render placeholder * edit invocation of `#replaceImagePlaceholders` to no longer use argument * edit `#buildPracticeCard` function to include `data-practice-name` in `practice-card-img-placeholder` div remove `#replaceImagePlaceholders`, `#replacePlaceholderWithImage`, and `#loadImage` functions update invocation of `#replaceImagePlaceholders` to no longer use argument edit invocation of `#replaceImagePlaceholders` to no longer use argument * refactor `#replacePlaceholderWithImage` function as per CodeQl warning: "DOM text reinterpreted as HTML" * add explicit export of function as per CodeQl warning: "Unused function"
department-of-veterans-affairs · Oct 19, 2023 · 298a716 · 298a716
1 parent f916d99
commit 298a716
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 73 deletions.
diff --git a/app/assets/javascripts/_page_show.es6 b/app/assets/javascripts/_page_show.es6
@@ -130,6 +130,7 @@ const COMPONENT_CLASSES = [
         identifyExternalLinks();
         chromeWorkaroundForAnchorTags();
         fetchPageComponentFileResources();
+        replaceImagePlaceholders();
     }
 
     $document.on('turbolinks:load', execPageBuilderFunctions);

diff --git a/app/assets/javascripts/_practice_card_utilities.es6 b/app/assets/javascripts/_practice_card_utilities.es6
@@ -1,3 +1,4 @@
+
 function truncateOnArrive(arrivingEle, shaveHeight) {
     $(document).arrive(arrivingEle, function(newElem) {
         $(newElem).shave(shaveHeight);
@@ -38,6 +39,49 @@ function toggleFocusStylingForPracticeTitle() {
     });
 }
 
+export function replaceImagePlaceholders() {
+    $('.dm-practice-card').each(function() {
+        const placeholder = $(this).find('.practice-card-img-placeholder');
+
+        const practiceId = placeholder.attr('data-practice-id');
+        const imagePath = placeholder.attr('data-practice-image');
+        const practiceName = placeholder.attr('data-practice-name');
+
+        if (practiceId && imagePath) {
+            fetchSignedResource(imagePath).then(signedUrl => {
+                replacePlaceholderWithImage(signedUrl, practiceId, practiceName);
+            });
+        }
+    });
+}
+
+function replacePlaceholderWithImage(imageUrl, practiceId, practiceName) {
+    loadImage(imageUrl, function(loadedImageSrc) {
+        const imgElement = $('<img>')
+            .attr('data-resource-id', practiceId)
+            .attr('src', loadedImageSrc)
+            .attr('alt', practiceName + ' Marketplace Card Image')
+            .addClass('grid-row marketplace-card-img radius-top-sm');
+
+        const containerDiv = $('<div>')
+            .addClass('dm-practice-card-img-container')
+            .append(imgElement);
+
+        $('.practice-card-img-placeholder[data-practice-id="' + practiceId + '"]').empty().append(containerDiv);
+    });
+}
+
+function loadImage(imageSrc, callback) {
+    var img = new Image();
+    img.onload = function() {
+        callback(imageSrc);
+    };
+    img.onerror = function() {
+        console.error("Error loading image: " + imageSrc);
+    };
+    img.src = imageSrc;
+}
+
 function execPracticeCardFunctions() {
     truncateText();
     toggleFocusStylingForPracticeTitle();

diff --git a/app/assets/javascripts/va_facilities/facility_adopted_practice_search.es6 b/app/assets/javascripts/va_facilities/facility_adopted_practice_search.es6
@@ -56,6 +56,7 @@ function ajaxUpdateSearchResults(updateCat = true) {
         $(ap.tableRows).append(result.adopted_facility_results_html);
       }
       _displaySpinner({ display: false })
+      replaceImagePlaceholders();
     }
   });
 }

diff --git a/app/assets/javascripts/va_facilities/facility_created_practice_search.es6 b/app/assets/javascripts/va_facilities/facility_created_practice_search.es6
@@ -165,6 +165,7 @@ function sendAjaxRequest(data) {
       } else {
         $(cp.loadMoreContainer).empty();
       }
+      replaceImagePlaceholders();
     },
     error: function(result) {
       $(cp.practiceCardList).addClass("display-none");

diff --git a/app/views/clinical_resource_hubs/_crh_show.js.erb b/app/views/clinical_resource_hubs/_crh_show.js.erb
@@ -79,7 +79,7 @@ function searchPracticesByCrh() {
             moreText: 'Load more',
             noMoreText: 'No more results'
         });
-        replaceImagePlaceholders('#search-results .dm-practice-card');
+        replaceImagePlaceholders();
     }
     // Search practices and populate the page
     function search(query, category, radioVal) {

diff --git a/app/views/page/show.html.erb b/app/views/page/show.html.erb
@@ -5,6 +5,8 @@
   <%= javascript_include_tag 'ie', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag '_page_show', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'false', defer: true %>
+  <%= javascript_include_tag '_practice_card_utilities', 'data-turbolinks-track': 'reload' %>
 <% end %>
 <% accordion_ctr = 0 %>
 <% page_narrow_classes = 'desktop:grid-col-8 margin-x-auto' if @page.narrow? %>

diff --git a/app/views/practices/_search.js.erb b/app/views/practices/_search.js.erb
@@ -97,7 +97,7 @@ function buildPracticeCard(result) {
 
     // Default card image
     var cardImagePlaceholder = 
-        '<div class="practice-card-img-placeholder" data-practice-id="' + practiceId + '" data-practice-image="' + practiceImage + '"></div>'
+        '<div class="practice-card-img-placeholder" data-practice-id="' + practiceId + '" data-practice-image="' + practiceImage + '" data-practice-name="' + practiceName + '"  ></div>'
 
     var cardRetiredBanner = '';
     if (result.item.retired) {
@@ -127,49 +127,6 @@ function buildPracticeCard(result) {
     return cardHtml;
 }
 
-function replaceImagePlaceholders(parentSelector) {
-    $(parentSelector).each(function() {
-        // If either the 'src' or the hidden input are undefined, return an empty string
-        var imageSelector = $(this).find('.practice-card-img-placeholder');
-        var imagePracticeId = imageSelector ? imageSelector.attr('data-practice-id') : null;
-        var practiceImagePath = imageSelector ? imageSelector.attr('data-practice-image') : null;
-        var practiceName = $(this).find('.dm-practice-title').text();
-
-        if (imagePracticeId && practiceImagePath) {
-            fetchSignedResource(practiceImagePath).then(signedImgUrl => {
-                replacePlaceholderWithImage(signedImgUrl, imagePracticeId, practiceName);
-            });
-        }
-    });
-}
-
-function replacePlaceholderWithImage(imageUrl, practiceId, practiceName) {
-    loadImage(imageUrl, function(loadedImageSrc) {
-        var imgTag =
-            '<div class="dm-practice-card-img-container">' +
-                '<img data-resource-id="' +
-                practiceId +
-                '" src="' +
-                loadedImageSrc +
-                '" alt="' + practiceName + ' Marketplace Card Image" ' +
-                'class="grid-row marketplace-card-img radius-top-sm">' +
-
-            '<div>';
-        $('.practice-card-img-placeholder[data-practice-id="' + practiceId + '"]').html(imgTag);
-    });
-}
-
-function loadImage(imageSrc, callback) {
-    var img = new Image();
-    img.onload = function() {
-        callback(imageSrc);
-    };
-    img.onerror = function() {
-        console.error("Error loading image: " + imageSrc);
-    };
-    img.src = imageSrc;
-}
-
 function showSpinner() {
     $(SPINNER).removeClass('display-none');
     $(SPINNER).addClass('display-flex');
@@ -295,8 +252,7 @@ function searchPracticesPage() {
             // Print results to the page
             document.querySelector('#search-results').innerHTML = finalResults;
             // After the html for the card has been built and applied to the DOM, replace the image 'src' based on the signed url
-            replaceImagePlaceholders('#search-results .dm-practice-card');
-
+            replaceImagePlaceholders();
             $(SEARCH_RESULTS).showMoreItems({
                 startNum: 12,
                 afterNum: 12,

diff --git a/app/views/shared/_practice_card.html.erb b/app/views/shared/_practice_card.html.erb
@@ -22,31 +22,20 @@
   %>
 
   <div class="dm-practice-card-container bg-white">
-    <% if main_display_image.present? %>
-      <div class="dm-practice-card-img-container">
-        <img alt="<%= practice.name %> Marketplace Card Image" class="grid-row marketplace-card-img radius-top-sm" src="<%= practice.main_display_image_s3_presigned_url(:thumb) %>">
-        <% if practice.retired %>
-          <div class="dm-practice-retired-banner">
-            <h5>Retired</h5>
-          </div>
-        <% end %>
-      </div>
-    <% else %>
-      <div class="practice-card-img-placeholder">
-        <h3 class="text-normal font-sans-lg multiline-ellipses-2 margin-x-2 margin-y-4">
-          <a href="<%= practice_path(practice) %>" aria-label="Go to <%= practice.name %>" class="<%= practice_link_classes %>">
-            <span class="dm-practice-title">
-              <%= practice.name %>
-            </span>
-          </a>
-        </h3>
-        <% if practice.retired %>
-          <div class="dm-practice-retired-banner">
-            <h5>Retired</h5>
-          </div>
-        <% end %>
-      </div>
-    <% end %>
+    <div class="practice-card-img-placeholder" data-practice-id=<%= practice.id %> data-practice-image=<%= practice.main_display_image&.path %> data-practice-name=<%= practice.name %>>
+      <h3 class="text-normal font-sans-lg multiline-ellipses-2 margin-x-2 margin-y-4">
+        <a href="<%= practice_path(practice) %>" aria-label="Go to <%= practice.name %>" class="<%= practice_link_classes %>">
+          <span class="dm-practice-title">
+            <%= practice.name %>
+          </span>
+        </a>
+      </h3>
+      <% if practice.retired %>
+        <div class="dm-practice-retired-banner">
+          <h5>Retired</h5>
+        </div>
+      <% end %>
+    </div>
 
     <div class="padding-105 height-card-mobile">
       <% if main_display_image.present? %>

diff --git a/app/views/va_facilities/show.html.erb b/app/views/va_facilities/show.html.erb
@@ -7,6 +7,7 @@
     var facilitySlug = "<%= @va_facility.slug %>";
   <% end %>
   <%= javascript_include_tag '_practice_card_utilities', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'shared/_signed_resource', 'data-turbolinks-track': 'false', defer: true %>
   <%= javascript_include_tag 'va_facilities/facility_adopted_practice_search', 'data-turbolinks-track': 'reload' %>
   <%= javascript_include_tag 'va_facilities/facility_created_practice_search', 'data-turbolinks-track': 'reload' %>
 <% end %>

diff --git a/app/views/visns/_show.js.erb b/app/views/visns/_show.js.erb
@@ -71,7 +71,7 @@ function searchPracticesByVisn() {
             moreText: 'Load more',
             noMoreText: 'No more results'
         });
-        replaceImagePlaceholders('#search-results .dm-practice-card');
+        replaceImagePlaceholders();
     }
     // Search practices and populate the page
     function search(query, category, radioVal) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,6 +56,7 @@ function ajaxUpdateSearchResults(updateCat = true) { @@
             $(ap.tableRows).append(result.adopted_facility_results_html);
           }
           _displaySpinner({ display: false })
+          replaceImagePlaceholders();
         }
       });
     }
@@ Expand Down @@