From 1152119fb1890d0b6796f186dd977906241b9e58 Mon Sep 17 00:00:00 2001 From: Pat Date: Fri, 6 Oct 2023 10:58:46 -0600 Subject: [PATCH] wip: Fixes summary generation for other article blocks --- js/ucb-article-feature-block.js | 77 +++++++++++++++------------------ js/ucb-article-grid-block.js | 70 ++++++++++++++---------------- 2 files changed, 69 insertions(+), 78 deletions(-) diff --git a/js/ucb-article-feature-block.js b/js/ucb-article-feature-block.js index d8173407..99e35a2f 100644 --- a/js/ucb-article-feature-block.js +++ b/js/ucb-article-feature-block.js @@ -22,7 +22,7 @@ class ArticleFeatureBlockElement extends HTMLElement { } // This is the article list filtering function that assembles the article javascript object array from the JSON response. Handles exclusions of categories and tags. - build(data, display, count, imgSize, excludeCatArray, excludeTagArray, finalArticles = []){ + async build(data, display, count, imgSize, excludeCatArray, excludeTagArray, finalArticles = []){ // More than 10 articles? This sets up the next call if there's more articles to be retrieved but not enough post-filters let NEXTJSONURL = ""; if(data.links.next) { @@ -70,7 +70,7 @@ class ArticleFeatureBlockElement extends HTMLElement { }) } // Iterate over each Article - data.data.map(item=>{ + await Promise.all (data.data.map(async(item)=>{ // Article must have a thumbnail if(item.relationships.field_ucb_article_thumbnail.data){ let thisArticleCats = []; @@ -118,33 +118,7 @@ class ArticleFeatureBlockElement extends HTMLElement { let imageSrcWide = ""; if (!body.length && bodyAndImageId != "") { - this.getArticleParagraph(bodyAndImageId) - .then((response) => response.json()) - .then((data) => { - // Remove any html tags within the article - let htmlStrip = data.data.attributes.field_article_text.processed.replace( - /<\/?[^>]+(>|$)/g, - "" - ) - // Remove any line breaks if media is embedded in the body - let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); - // take only the first 100 words ~ 500 chars - let trimmedString = lineBreakStrip.substr(0, 250); - // if in the middle of the string, take the whole word - if(trimmedString.length > 100){ - trimmedString = trimmedString.substr( - 0, - Math.min( - trimmedString.length, - trimmedString.lastIndexOf(" ") - ) - ) - body = `${trimmedString}...`; - } - // set the contentBody of Article Summary card to the minified body instead - body = `${trimmedString}`; - document.getElementById(`body-${bodyAndImageId}`).innerText = body; - }) + body = await this.getArticleParagraph(bodyAndImageId); } //Use the idObj as a memo to add the corresponding image url let thumbId = item.relationships.field_ucb_article_thumbnail.data.id; @@ -170,7 +144,7 @@ class ArticleFeatureBlockElement extends HTMLElement { finalArticles.push(article) } } - }) + })); // Case for not enough articles selected and extra articles available if(finalArticles.length < count && NEXTJSONURL){ fetch(NEXTJSONURL).then(this.handleError) @@ -201,17 +175,38 @@ class ArticleFeatureBlockElement extends HTMLElement { } } } - // Gets the body if no summary - async getArticleParagraph(id) { - if(id) { - const response = await fetch( - `/jsonapi/paragraph/article_content/${id}` - ); - return response; - } else { - return ""; - } - } + // Responsible for fetching & processing the body of the Article if no summary provided + async getArticleParagraph(id) { + if (!id) { + return ""; + } + + const response = await fetch(`/jsonapi/paragraph/article_content/${id}`); + if (!response.ok) { + throw new Error('Failed to fetch article paragraph'); + } + + const data = await response.json(); + + let htmlStrip = data.data.attributes.field_article_text.processed.replace( + /<\/?[^>]+(>|$)/g, + "" + ); + let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); + let trimmedString = lineBreakStrip.substr(0, 250); + + if (trimmedString.length > 100) { + trimmedString = trimmedString.substr( + 0, + Math.min( + trimmedString.length, + trimmedString.lastIndexOf(" ") + ) + ); + } + + return trimmedString + "..."; + } // Responsible for calling the render function of the appropriate display renderDisplay(articleArray, display, imgSize){ diff --git a/js/ucb-article-grid-block.js b/js/ucb-article-grid-block.js index 4fd3d203..64fdd688 100644 --- a/js/ucb-article-grid-block.js +++ b/js/ucb-article-grid-block.js @@ -20,7 +20,7 @@ class ArticleGridBlockElement extends HTMLElement { }); } - build(data, count, includeSummary, excludeCatArray, excludeTagArray, finalArticles = []){ + async build(data, count, includeSummary, excludeCatArray, excludeTagArray, finalArticles = []){ // More than 10 articles? This sets up the next call if there's more articles to be retrieved but not enough post-filters let NEXTJSONURL = ""; if(data.links.next) { @@ -65,7 +65,7 @@ class ArticleGridBlockElement extends HTMLElement { }) } // Iterate over each Article - data.data.map(item=>{ + await Promise.all(data.data.map(async (item)=>{ // Article must have a thumbnail if(item.relationships.field_ucb_article_thumbnail.data){ let thisArticleCats = []; @@ -112,33 +112,7 @@ class ArticleGridBlockElement extends HTMLElement { let imageSrc = ""; if (!body.length && bodyAndImageId != "") { - this.getArticleParagraph(bodyAndImageId) - .then((response) => response.json()) - .then((data) => { - // Remove any html tags within the article - let htmlStrip = data.data.attributes.field_article_text.processed.replace( - /<\/?[^>]+(>|$)/g, - "" - ) - // Remove any line breaks if media is embedded in the body - let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); - // take only the first 100 words ~ 500 chars - let trimmedString = lineBreakStrip.substr(0, 250); - // if in the middle of the string, take the whole word - if(trimmedString.length > 100){ - trimmedString = trimmedString.substr( - 0, - Math.min( - trimmedString.length, - trimmedString.lastIndexOf(" ") - ) - ) - body = `${trimmedString}...`; - } - // set the contentBody of Article Summary card to the minified body instead - body = `${trimmedString}`; - document.getElementById(`body-${bodyAndImageId}`).innerText = body; - }) + body = await this.getArticleParagraph(bodyAndImageId); } // if no thumbnail, show no image @@ -168,7 +142,7 @@ class ArticleGridBlockElement extends HTMLElement { finalArticles.push(article) } } - }) + })); // Case for not enough articles selected and extra articles available if(finalArticles.length < count && NEXTJSONURL){ fetch(NEXTJSONURL).then(this.handleError) @@ -200,15 +174,37 @@ class ArticleGridBlockElement extends HTMLElement { } } + // Responsible for fetching & processing the body of the Article if no summary provided async getArticleParagraph(id) { - if(id) { - const response = await fetch( - `/jsonapi/paragraph/article_content/${id}` + if (!id) { + return ""; + } + + const response = await fetch(`/jsonapi/paragraph/article_content/${id}`); + if (!response.ok) { + throw new Error('Failed to fetch article paragraph'); + } + + const data = await response.json(); + + let htmlStrip = data.data.attributes.field_article_text.processed.replace( + /<\/?[^>]+(>|$)/g, + "" ); - return response; - } else { - return ""; - } + let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); + let trimmedString = lineBreakStrip.substr(0, 250); + + if (trimmedString.length > 100) { + trimmedString = trimmedString.substr( + 0, + Math.min( + trimmedString.length, + trimmedString.lastIndexOf(" ") + ) + ); + } + + return trimmedString + "..."; } // Responsible for calling the render function of the appropriate display