Merge pull request #1155 from ScilifelabDataCentre/adaptiveBanner

Adaptive Banner for homepage
ScilifelabDataCentre · Jul 1, 2024 · f0fe426 · f0fe426
2 parents 7b67226 + a6c732a
commit f0fe426
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -252,6 +252,34 @@ <h6><a class="btn-white-black"
       req.send(null);
     } // function "getDataFromUrl" ends here
 
+    // Update banner title for homepage from the blobserver
+    function updateBanner(data) {
+      try {
+        // Get the current language
+        const lang = document.documentElement.lang;
+
+        // Find the active title for the 'portal' target
+        const title = data.banner_titles.find(title => title.target === 'pathogens-portal' && title.active);
+        if (title && title[lang]) {
+            const titleElement = document.querySelector('h2#home-banner');
+            titleElement.textContent = title[lang];
+        } else {
+            console.warn('No title found for the language.');
+        }
+      } catch (error) {
+        console.error('An error occurred while updating banner titles:', error);
+      } finally {
+        // Show the hidden banner regardless of whether titles were fetched successfully
+        const banner1 = document.getElementById("home-banner");
+        if (banner1) {
+          banner1.classList.remove("d-none");
+        } else {
+          console.warn('Banner element with ID "home-banner" not found.');
+        }
+      }
+    }; // function updateBanner ends here
+
+    // Add the events fetched from blobserver
     function addEvents(data) {
       var dataArray = data.items, eventList = [];
       // Not interested if the deadline has already passed
@@ -302,11 +330,18 @@ <h4 class="mb-1">Events</h4>
       };
     } // function "addEvents" ends here
 
-    // Call the function to fetch, parse and display events
+    // Call the function to update banner, if any mentioned in blob server
     getDataFromUrl(
-      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Fpathogens_portal_events.json"),
-      addEvents
-    );
+      decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Ffreya-banner.json"),
+      updateBanner
+    )
+    // For english site, Call the function to fetch, parse and display events
+    if (document.documentElement.lang === "en") {
+      getDataFromUrl(
+        decodeURIComponent("https%3A%2F%2Fblobserver.dc.scilifelab.se%2Fblob%2Fpathogens_portal_events.json"),
+        addEvents
+      );
+    };
 
     // Add latest tag to very recent news when content is loaded
     document.querySelectorAll("#news-items-container .small").forEach(

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -2,7 +2,8 @@
   style="background-image: linear-gradient(to bottom, rgba(55, 174, 148, 0.52), rgba(55, 174, 148, 0.73)),
          url('{{ if .Params.header_illustration }}{{ .Params.header_illustration }}{{ else }}/img/csm_coronavirus_mc.jpg{{ end }}');">
   <div class="container">
-    <h2>{{ if .IsHome }}
+    <h2 {{ if .IsHome }}class="d-none" id="home-banner"{{ end }}>
+      {{ if .IsHome }}
       {{ (index $.Site.Params.lang_strings .Site.Language.Lang).home_title }}
       {{ else if eq .Parent.Section "highlights_topics" }}
       {{ with .Site.GetPage "/highlights" }}