From da602d347f4090223cadcd04bec032081cace51f Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 13:15:42 +0530 Subject: [PATCH 1/9] embed code changes in news --- blocks/embed/embed.js | 2 +- blocks/news/news.js | 150 +++++++++++++++++++++++++++--------------- 2 files changed, 97 insertions(+), 55 deletions(-) diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js index 87db19f68..2b2778aef 100644 --- a/blocks/embed/embed.js +++ b/blocks/embed/embed.js @@ -156,7 +156,7 @@ function embedAdobeIndesign(url) { `; } -const loadEmbed = (block, link) => { +export const loadEmbed = (block, link) => { if (block.classList.contains('embed-is-loaded')) { return; } diff --git a/blocks/news/news.js b/blocks/news/news.js index 5b1b2441b..493ae6f94 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -1,70 +1,112 @@ +import { formatDate } from '../../scripts/scripts.js'; +import { loadEmbed } from '/blocks/embed/embed.js'; + import { - fetchPlaceholders, - readBlockConfig, + getMetadata, buildBlock, } from '../../scripts/lib-franklin.js'; -import ffetch from '../../scripts/ffetch.js'; -import { createList, createDropdown } from '../../scripts/list.js'; -let placeholders = {}; +function decorateTitle(parentElem, titleElem) { + titleElem.classList.add('event-title'); + if (titleElem) { + parentElem.append(titleElem); + } +} -function formatDateFullYear(unixDateString) { - return new Date(unixDateString * 1000).getFullYear(); +function decorateCite(parentElem) { + const dt = getMetadata('publication-date'); + if (dt) { + const cite = document.createElement('cite'); + cite.classList.add('event-date'); + cite.innerHTML = formatDate(dt); + parentElem.append(cite); + } } -function createFilters(options) { - const date = Array.from(new Set(options.data.map((n) => n.filterYear))); - return [ - createDropdown(date, options.activeFilters.year, 'year', placeholders.selectYear || 'Select Year'), - ]; +function decorateStrong(elems) { + elems.forEach((elem) => { + const parent = elem.parentElement; + if (parent.children.length === 1) { + parent.classList.add('text-strong'); + } + }); } -function prepareEntry(entry, showDescription, viewMoreText) { - entry.filterYear = formatDateFullYear(entry.date); - if (!showDescription) { - entry.description = ''; - } - if (viewMoreText) { - entry.viewMoreText = viewMoreText; +function decorateCaption(elems) { + elems.forEach((elem) => { + const parent = elem.parentElement; + const next = parent.nextElementSibling; + if (parent && next && next.querySelector('p > em')) { + next.classList.add('text-caption'); + } + }); +} + +function decorateReadMore(linkElem) { + if (linkElem) { + linkElem.classList.add('ext'); + linkElem.setAttribute('target', '_blank'); + linkElem.setAttribute('rel', 'noopener noreferrer'); + + const extLinkBtn = document.createElement('i'); + extLinkBtn.classList.add('fa', 'fa-external-link'); + extLinkBtn.setAttribute('aria-hidden', 'true'); + + linkElem.append(extLinkBtn); } } -export async function createOverview( - block, - options, -) { - block.innerHTML = ''; - options.data.forEach( - (entry) => prepareEntry(entry, options.showDescription, options.viewMoreText), - ); - await createList( - createFilters(options), - options, - block); +function decorateEmbed(elems) { + elems.forEach((elem) => { + const embedUrl = elem.querySelector('a'); + loadEmbed(elem, embedUrl.href); + embedUrl.remove(); + }); } -export async function fetchData(type) { - const data = await ffetch('/query-index.json') - .sheet(type) - .all(); - return data; +export function decorateAutoBlock(content) { + if (!content) { + return; + } + + const contentWrapper = document.createElement('span'); + contentWrapper.classList.add('event-container'); + + decorateTitle(contentWrapper, content.querySelector('h1')); + decorateCite(contentWrapper); + + const hasLeftCol = content.querySelector('p:first-child picture'); + const pic = document.createElement('div'); + if (hasLeftCol) { + pic.classList.add('left-col'); + contentWrapper.append(pic); + } + + const txt = document.createElement('div'); + txt.classList.add('right-col'); + + let isInleftCol = hasLeftCol; + [...content.children].forEach((child) => { + if (isInleftCol && child.matches('p') && child.querySelector('picture')) { + pic.append(child); + } else if (!child.matches('h1') && !child.matches('cite')) { + isInleftCol = false; + txt.append(child); + } + }); + + contentWrapper.append(txt); + content.append(contentWrapper); + + decorateEmbed(contentWrapper.querySelectorAll('.embed')); + decorateStrong(contentWrapper.querySelectorAll('.right-col p > strong')); + decorateCaption(contentWrapper.querySelectorAll('.left-col p > picture')); + decorateCaption(contentWrapper.querySelectorAll('.right-col p > picture')); + + decorateReadMore(contentWrapper.querySelector('p:last-child a')); } -export default async function decorate(block) { - const config = readBlockConfig(block); - placeholders = await fetchPlaceholders(); - const options = { - limitPerPage: parseInt(config.limitPerPage, 10) || 10, - limitForPagination: parseInt(config.limitForPagination, 9) || 9, - showDescription: false, - viewMoreText: '', - panelTitle: `${placeholders.filterBy || 'Filter By'} :`, - }; - options.activeFilters = new Map(); - options.activeFilters.set('year', ''); - options.activeFilters.set('page', 1); - - options.data = await fetchData('news'); - await createOverview( - block, - options); +export default function buildAutoBlocks() { + const container = document.querySelector('main div'); + decorateAutoBlock(container); + container.append(buildBlock('social-share', '

Share this news

')); } From ad60c3f69010816e9a5aebac829697c20f8abb03 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 13:37:09 +0530 Subject: [PATCH 2/9] news js changes --- blocks/news/news.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/news/news.js b/blocks/news/news.js index 493ae6f94..5070428e9 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -1,5 +1,5 @@ import { formatDate } from '../../scripts/scripts.js'; -import { loadEmbed } from '/blocks/embed/embed.js'; +import { loadEmbed } from '../../blocks/embed/embed.js'; import { getMetadata, buildBlock, From 182217cc5b791cb08e232c88179b0da5e3b403bc Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 15:03:17 +0530 Subject: [PATCH 3/9] news changes --- blocks/news/news.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/news/news.js b/blocks/news/news.js index 5070428e9..493ae6f94 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -1,5 +1,5 @@ import { formatDate } from '../../scripts/scripts.js'; -import { loadEmbed } from '../../blocks/embed/embed.js'; +import { loadEmbed } from '/blocks/embed/embed.js'; import { getMetadata, buildBlock, From bc14586fe0c3c5a3a1da1144ae7ab641f28f6b75 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 15:10:49 +0530 Subject: [PATCH 4/9] news js changes --- blocks/news/news.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/news/news.js b/blocks/news/news.js index 493ae6f94..383b4bd97 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -1,5 +1,5 @@ import { formatDate } from '../../scripts/scripts.js'; -import { loadEmbed } from '/blocks/embed/embed.js'; +import { loadEmbed } from './blocks/embed/embed.js'; import { getMetadata, buildBlock, From 01d51544d462b3064d19334ba603566786a2af56 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 15:21:04 +0530 Subject: [PATCH 5/9] script added --- blocks/news/news.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/news/news.js b/blocks/news/news.js index 383b4bd97..4d67072c6 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -1,6 +1,6 @@ import { formatDate } from '../../scripts/scripts.js'; import { loadEmbed } from './blocks/embed/embed.js'; - +// import metadata nd build block import { getMetadata, buildBlock, } from '../../scripts/lib-franklin.js'; From fb4e841f4c5d45159643e62cafc59cbd9babc0ee Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 15:26:55 +0530 Subject: [PATCH 6/9] news script added --- blocks/news/news.js | 152 +++++++++++++++-------------------------- templates/news/news.js | 10 +++ 2 files changed, 65 insertions(+), 97 deletions(-) diff --git a/blocks/news/news.js b/blocks/news/news.js index 4d67072c6..e6df2328f 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -1,112 +1,70 @@ -import { formatDate } from '../../scripts/scripts.js'; -import { loadEmbed } from './blocks/embed/embed.js'; -// import metadata nd build block import { - getMetadata, buildBlock, + fetchPlaceholders, + readBlockConfig, } from '../../scripts/lib-franklin.js'; +import ffetch from '../../scripts/ffetch.js'; +import { createList, createDropdown } from '../../scripts/list.js'; -function decorateTitle(parentElem, titleElem) { - titleElem.classList.add('event-title'); - if (titleElem) { - parentElem.append(titleElem); - } -} - -function decorateCite(parentElem) { - const dt = getMetadata('publication-date'); - if (dt) { - const cite = document.createElement('cite'); - cite.classList.add('event-date'); - cite.innerHTML = formatDate(dt); - parentElem.append(cite); - } -} +let placeholders = {}; -function decorateStrong(elems) { - elems.forEach((elem) => { - const parent = elem.parentElement; - if (parent.children.length === 1) { - parent.classList.add('text-strong'); - } - }); +function formatDateFullYear(unixDateString) { + return new Date(unixDateString * 1000).getFullYear(); } -function decorateCaption(elems) { - elems.forEach((elem) => { - const parent = elem.parentElement; - const next = parent.nextElementSibling; - if (parent && next && next.querySelector('p > em')) { - next.classList.add('text-caption'); - } - }); +function createFilters(options) { + const date = Array.from(new Set(options.data.map((n) => n.filterYear))); + return [ + createDropdown(date, options.activeFilters.year, 'year', placeholders.selectYear || 'Select Year'), + ]; } -function decorateReadMore(linkElem) { - if (linkElem) { - linkElem.classList.add('ext'); - linkElem.setAttribute('target', '_blank'); - linkElem.setAttribute('rel', 'noopener noreferrer'); - - const extLinkBtn = document.createElement('i'); - extLinkBtn.classList.add('fa', 'fa-external-link'); - extLinkBtn.setAttribute('aria-hidden', 'true'); - - linkElem.append(extLinkBtn); +function prepareEntry(entry, showDescription, viewMoreText) { + entry.filterYear = formatDateFullYear(entry.date); + if (!showDescription) { + entry.description = ''; + } + if (viewMoreText) { + entry.viewMoreText = viewMoreText; } } -function decorateEmbed(elems) { - elems.forEach((elem) => { - const embedUrl = elem.querySelector('a'); - loadEmbed(elem, embedUrl.href); - embedUrl.remove(); - }); +export async function createOverview( + block, + options, +) { + block.innerHTML = ''; + options.data.forEach( + (entry) => prepareEntry(entry, options.showDescription, options.viewMoreText), + ); + await createList( + createFilters(options), + options, + block); } -export function decorateAutoBlock(content) { - if (!content) { - return; - } - - const contentWrapper = document.createElement('span'); - contentWrapper.classList.add('event-container'); - - decorateTitle(contentWrapper, content.querySelector('h1')); - decorateCite(contentWrapper); - - const hasLeftCol = content.querySelector('p:first-child picture'); - const pic = document.createElement('div'); - if (hasLeftCol) { - pic.classList.add('left-col'); - contentWrapper.append(pic); - } - - const txt = document.createElement('div'); - txt.classList.add('right-col'); - - let isInleftCol = hasLeftCol; - [...content.children].forEach((child) => { - if (isInleftCol && child.matches('p') && child.querySelector('picture')) { - pic.append(child); - } else if (!child.matches('h1') && !child.matches('cite')) { - isInleftCol = false; - txt.append(child); - } - }); - - contentWrapper.append(txt); - content.append(contentWrapper); - - decorateEmbed(contentWrapper.querySelectorAll('.embed')); - decorateStrong(contentWrapper.querySelectorAll('.right-col p > strong')); - decorateCaption(contentWrapper.querySelectorAll('.left-col p > picture')); - decorateCaption(contentWrapper.querySelectorAll('.right-col p > picture')); - - decorateReadMore(contentWrapper.querySelector('p:last-child a')); +export async function fetchData(type) { + const data = await ffetch('/query-index.json') + .sheet(type) + .all(); + return data; } -export default function buildAutoBlocks() { - const container = document.querySelector('main div'); - decorateAutoBlock(container); - container.append(buildBlock('social-share', '

Share this news

')); -} +export default async function decorate(block) { + const config = readBlockConfig(block); + placeholders = await fetchPlaceholders(); + const options = { + limitPerPage: parseInt(config.limitPerPage, 10) || 10, + limitForPagination: parseInt(config.limitForPagination, 9) || 9, + showDescription: false, + viewMoreText: '', + panelTitle: `${placeholders.filterBy || 'Filter By'} :`, + }; + options.activeFilters = new Map(); + options.activeFilters.set('year', ''); + options.activeFilters.set('page', 1); + + options.data = await fetchData('news'); + await createOverview( + block, + options); +} \ No newline at end of file diff --git a/templates/news/news.js b/templates/news/news.js index 55890b928..383b4bd97 100644 --- a/templates/news/news.js +++ b/templates/news/news.js @@ -1,4 +1,5 @@ import { formatDate } from '../../scripts/scripts.js'; +import { loadEmbed } from './blocks/embed/embed.js'; import { getMetadata, buildBlock, @@ -54,6 +55,14 @@ function decorateReadMore(linkElem) { } } +function decorateEmbed(elems) { + elems.forEach((elem) => { + const embedUrl = elem.querySelector('a'); + loadEmbed(elem, embedUrl.href); + embedUrl.remove(); + }); +} + export function decorateAutoBlock(content) { if (!content) { return; @@ -88,6 +97,7 @@ export function decorateAutoBlock(content) { contentWrapper.append(txt); content.append(contentWrapper); + decorateEmbed(contentWrapper.querySelectorAll('.embed')); decorateStrong(contentWrapper.querySelectorAll('.right-col p > strong')); decorateCaption(contentWrapper.querySelectorAll('.left-col p > picture')); decorateCaption(contentWrapper.querySelectorAll('.right-col p > picture')); From 79aa275131a1daf07a3d3d9167f08bca5324f6cf Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 15:30:50 +0530 Subject: [PATCH 7/9] news scripts --- blocks/news/news.js | 2 +- templates/news/news.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/news/news.js b/blocks/news/news.js index e6df2328f..5b1b2441b 100644 --- a/blocks/news/news.js +++ b/blocks/news/news.js @@ -67,4 +67,4 @@ export default async function decorate(block) { await createOverview( block, options); -} \ No newline at end of file +} diff --git a/templates/news/news.js b/templates/news/news.js index 383b4bd97..5070428e9 100644 --- a/templates/news/news.js +++ b/templates/news/news.js @@ -1,5 +1,5 @@ import { formatDate } from '../../scripts/scripts.js'; -import { loadEmbed } from './blocks/embed/embed.js'; +import { loadEmbed } from '../../blocks/embed/embed.js'; import { getMetadata, buildBlock, From 2913b508364f383289d6dc0040018c0dec8f7026 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 18:44:20 +0530 Subject: [PATCH 8/9] script changes --- templates/news/news.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/templates/news/news.js b/templates/news/news.js index 5070428e9..0082666ef 100644 --- a/templates/news/news.js +++ b/templates/news/news.js @@ -1,5 +1,8 @@ import { formatDate } from '../../scripts/scripts.js'; import { loadEmbed } from '../../blocks/embed/embed.js'; +import { + div, i, span, +} from '../../scripts/dom-helpers.js'; import { getMetadata, buildBlock, @@ -15,9 +18,7 @@ function decorateTitle(parentElem, titleElem) { function decorateCite(parentElem) { const dt = getMetadata('publication-date'); if (dt) { - const cite = document.createElement('cite'); - cite.classList.add('event-date'); - cite.innerHTML = formatDate(dt); + const cite = span( { class: 'event-date' }, formatDate(dt)); parentElem.append(cite); } } @@ -47,10 +48,7 @@ function decorateReadMore(linkElem) { linkElem.setAttribute('target', '_blank'); linkElem.setAttribute('rel', 'noopener noreferrer'); - const extLinkBtn = document.createElement('i'); - extLinkBtn.classList.add('fa', 'fa-external-link'); - extLinkBtn.setAttribute('aria-hidden', 'true'); - + const extLinkBtn = i( { class: 'fa fa-external-link', 'aria-hidden': 'true' } ); linkElem.append(extLinkBtn); } } @@ -68,21 +66,19 @@ export function decorateAutoBlock(content) { return; } - const contentWrapper = document.createElement('span'); - contentWrapper.classList.add('event-container'); + const contentWrapper = span( {class: 'event-container'} ); decorateTitle(contentWrapper, content.querySelector('h1')); decorateCite(contentWrapper); const hasLeftCol = content.querySelector('p:first-child picture'); - const pic = document.createElement('div'); + const pic = div(); if (hasLeftCol) { pic.classList.add('left-col'); contentWrapper.append(pic); } - const txt = document.createElement('div'); - txt.classList.add('right-col'); + const txt = div( { class: 'right-col'} ); let isInleftCol = hasLeftCol; [...content.children].forEach((child) => { From 479bcc1efe0b3a53748314e12f14f092594323f8 Mon Sep 17 00:00:00 2001 From: Rajneesh Date: Thu, 23 Nov 2023 18:50:13 +0530 Subject: [PATCH 9/9] lint fixes --- templates/news/news.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/news/news.js b/templates/news/news.js index 0082666ef..bfa7c5f0d 100644 --- a/templates/news/news.js +++ b/templates/news/news.js @@ -18,7 +18,7 @@ function decorateTitle(parentElem, titleElem) { function decorateCite(parentElem) { const dt = getMetadata('publication-date'); if (dt) { - const cite = span( { class: 'event-date' }, formatDate(dt)); + const cite = span({ class: 'event-date' }, formatDate(dt)); parentElem.append(cite); } } @@ -48,7 +48,7 @@ function decorateReadMore(linkElem) { linkElem.setAttribute('target', '_blank'); linkElem.setAttribute('rel', 'noopener noreferrer'); - const extLinkBtn = i( { class: 'fa fa-external-link', 'aria-hidden': 'true' } ); + const extLinkBtn = i({ class: 'fa fa-external-link', 'aria-hidden': 'true' }); linkElem.append(extLinkBtn); } } @@ -66,7 +66,7 @@ export function decorateAutoBlock(content) { return; } - const contentWrapper = span( {class: 'event-container'} ); + const contentWrapper = span({ class: 'event-container' }); decorateTitle(contentWrapper, content.querySelector('h1')); decorateCite(contentWrapper); @@ -78,7 +78,7 @@ export function decorateAutoBlock(content) { contentWrapper.append(pic); } - const txt = div( { class: 'right-col'} ); + const txt = div({ class: 'right-col' }); let isInleftCol = hasLeftCol; [...content.children].forEach((child) => {