diff --git a/blocks/header/header-megamenu-components.js b/blocks/header/header-megamenu-components.js index b770d4143..bafaf49ad 100644 --- a/blocks/header/header-megamenu-components.js +++ b/blocks/header/header-megamenu-components.js @@ -1,13 +1,13 @@ import { buildSearchBar, submitSearchForm } from './menus/search.js'; import { - img, div, a, p, - h3, - strong, + img, div, a, p, h3, strong, } from '../../scripts/dom-helpers.js'; import ffetch from '../../scripts/ffetch.js'; import { createOptimizedPicture, toClassName } from '../../scripts/lib-franklin.js'; import { formatEventDates } from '../latest-events/latest-events.js'; -import { sortDataByDate, summariseDescription } from '../../scripts/scripts.js'; +import { + formatDate, sortDataByDate, summariseDescription, unixDateToString, +} from '../../scripts/scripts.js'; function wrapLinkAroundComponent(link, component, removeLink = false) { let linkCopy; @@ -223,6 +223,12 @@ async function recentEventHandler(block) { .slice(0, 2); sortedEvents.forEach((event) => { + let description; + if (event.cardDescription && event.cardDescription !== '0') { + description = event.cardDescription; + } else { + description = event.description; + } const title = div(h3({ id: toClassName(event.title) }, event.title)); const eventContent = div( div( @@ -232,7 +238,7 @@ async function recentEventHandler(block) { } — ${formatEventDates(event.eventStart, event.eventEnd)}`, ), ), - p(summariseDescription(event.description, 180)), + p(summariseDescription(description, 120)), p(a({ href: event.path }, 'Read more')), ), ); @@ -260,6 +266,57 @@ function buildEventCardSubmenu(block) { }, 300); } +/* RECENT NEWS */ +async function recentNewsHandler() { + const newsMenu = div({ class: ['flex-space-between'] }); + document.querySelector('.news-cards-submenu').replaceChildren(newsMenu); + + let news = await ffetch('/query-index.json') + .sheet('news') + .all(); + + news = sortDataByDate(news).slice(0, 1); + + news.forEach((item) => { + const newsDate = formatDate(unixDateToString(item.date)); + const title = div(h3({ id: toClassName(item.title) }, item.title)); + let description; + if (item.cardDescription && item.cardDescription !== '0') { + description = item.cardDescription; + } else { + description = item.description; + } + const newsContent = div( + div( + p(strong(newsDate)), + p(summariseDescription(description, 120)), + p(a({ href: item.path }, 'Read more')), + ), + ); + + const newsBlock = div( + { + class: [ + 'actionable-card-submenu', + 'col-1', + 'news-right-submenu', + 'right-submenu-content', + 'text-only', + ], + }, + title, + newsContent, + ); + newsMenu.replaceWith(newsBlock); + }); +} + +function buildNewsCardSubmenu(block) { + setTimeout(async () => { + await recentNewsHandler(block); + }, 300); +} + function getRightSubmenuBuilder(className) { const map = new Map(); map.set('cards-submenu', buildCardsMenu); @@ -271,6 +328,7 @@ function getRightSubmenuBuilder(className) { map.set('image-card-submenu', buildImageCardSubmenu); map.set('blog-cards-submenu', buildBlogCardSubmenu); map.set('event-cards-submenu', buildEventCardSubmenu); + map.set('news-cards-submenu', buildNewsCardSubmenu); return map.get(className); } diff --git a/blocks/latest-events/latest-events.js b/blocks/latest-events/latest-events.js index 32a680614..9e5922e5b 100644 --- a/blocks/latest-events/latest-events.js +++ b/blocks/latest-events/latest-events.js @@ -30,7 +30,7 @@ export function buildList(data, block) { export default async function decorate(block) { const currentDate = Date.now(); - let events = await ffetch('/query-index.json') + const events = await ffetch('/query-index.json') .sheet('events') .all(); @@ -46,9 +46,5 @@ export default async function decorate(block) { const upcomingEvents = sortedEvents.filter((item) => item.eventEnd * 1000 > currentDate); - if (upcomingEvents.length > 5) { - events = upcomingEvents; - } - - buildList(events.slice(0, 4), block); + buildList(upcomingEvents.slice(0, 4), block); }