From 5b33fbe0c9be47d4bc699e5473c683f0ca667776 Mon Sep 17 00:00:00 2001 From: Abdullah Aziz Date: Fri, 28 Jun 2024 09:43:11 +0200 Subject: [PATCH 1/2] Adaptive Banner for homepage --- layouts/index.html | 1 + layouts/partials/header.html | 3 ++- static/js/banner_title.js | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) create mode 100644 static/js/banner_title.js diff --git a/layouts/index.html b/layouts/index.html index 87df43fdf..017817911 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -341,6 +341,7 @@

Events

+ diff --git a/layouts/partials/header.html b/layouts/partials/header.html index e78efc3fd..bb8a7d234 100644 --- 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 }}');">
-

{{ if .IsHome }} +

+ {{ if .IsHome }} {{ (index $.Site.Params.lang_strings .Site.Language.Lang).home_title }} {{ else if eq .Parent.Section "highlights_topics" }} {{ with .Site.GetPage "/highlights" }} diff --git a/static/js/banner_title.js b/static/js/banner_title.js new file mode 100644 index 000000000..12467d344 --- /dev/null +++ b/static/js/banner_title.js @@ -0,0 +1,37 @@ +// Fetch the banner title for homepage from the blobserver and update the page title +document.addEventListener("DOMContentLoaded", async function() { + try { + // Fetch the banner titles + const response = await fetch('https://blobserver.dc.scilifelab.se/blob/freya-banner_titles.json'); + if (!response.ok) { + throw new Error(`Failed to fetch banner titles. Status: ${response.status}`); + } + const data = await response.json(); + + // Get the current language + const lang = document.documentElement.lang; + + // Select the title element + const titleElement = document.querySelector('h1'); + + // Find the title for the 'portal' target + const title = data.banner_titles.find(title => title.target === 'portal'); + + if (title && title[lang] && title['active']) { + // Update the title if it exists and is active + titleElement.textContent = title[lang]; + } else { + console.warn('No active title found for the "portal" target.'); + } + } catch (error) { + console.error('An error occurred while fetching banner titles:', error); + } finally { + // Show the hidden banner regardless of whether titles were fetched successfully + const banner1 = document.getElementById("banner1"); + if (banner1) { + banner1.classList.remove("d-none"); + } else { + console.warn('Banner element with ID "banner1" not found.'); + } + } +}); From a6c732a2f91bddb85eeac5929306446e31f79c9a Mon Sep 17 00:00:00 2001 From: Senthilkumar Panneerselvam Date: Mon, 1 Jul 2024 13:42:38 +0200 Subject: [PATCH 2/2] Small tweaks --- layouts/index.html | 44 ++++++++++++++++++++++++++++++++---- layouts/partials/header.html | 2 +- static/js/banner_title.js | 37 ------------------------------ 3 files changed, 40 insertions(+), 43 deletions(-) delete mode 100644 static/js/banner_title.js diff --git a/layouts/index.html b/layouts/index.html index e7ccb6cde..5be79c314 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -252,6 +252,34 @@
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 @@

Events

}; } // 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( @@ -323,7 +358,6 @@

Events

- diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 42ee34126..6da8d71a0 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,7 +2,7 @@ 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 }}');">
-

+

{{ if .IsHome }} {{ (index $.Site.Params.lang_strings .Site.Language.Lang).home_title }} {{ else if eq .Parent.Section "highlights_topics" }} diff --git a/static/js/banner_title.js b/static/js/banner_title.js deleted file mode 100644 index 12467d344..000000000 --- a/static/js/banner_title.js +++ /dev/null @@ -1,37 +0,0 @@ -// Fetch the banner title for homepage from the blobserver and update the page title -document.addEventListener("DOMContentLoaded", async function() { - try { - // Fetch the banner titles - const response = await fetch('https://blobserver.dc.scilifelab.se/blob/freya-banner_titles.json'); - if (!response.ok) { - throw new Error(`Failed to fetch banner titles. Status: ${response.status}`); - } - const data = await response.json(); - - // Get the current language - const lang = document.documentElement.lang; - - // Select the title element - const titleElement = document.querySelector('h1'); - - // Find the title for the 'portal' target - const title = data.banner_titles.find(title => title.target === 'portal'); - - if (title && title[lang] && title['active']) { - // Update the title if it exists and is active - titleElement.textContent = title[lang]; - } else { - console.warn('No active title found for the "portal" target.'); - } - } catch (error) { - console.error('An error occurred while fetching banner titles:', error); - } finally { - // Show the hidden banner regardless of whether titles were fetched successfully - const banner1 = document.getElementById("banner1"); - if (banner1) { - banner1.classList.remove("d-none"); - } else { - console.warn('Banner element with ID "banner1" not found.'); - } - } -});