Edit
/* js/news-feed-js.js */
(function ($) {
let rowsLoaded = 0;
$(document).ready(function () {
// run through all news feed rows and output data from WP feed
const newsFeedRowString = ".NewsFeedRow";
let allNewsFeedRows = $('.js-news-feed-row');
let allWPNewsFeedRows = $('.js-news-feed-all-wordpress');
let allRowsWithBorrowedWPStories = $('.js-news-feed-row').has('.js-wp-news-story');
let allRowsWithNoBorrowedWPStories = $('.js-news-feed-row').not(':has(.js-wp-news-story)');
if ($('.NewsFeedRow').length) {
// loop through news rows that are all WP and output
if (allWPNewsFeedRows.length) {
fetchWPStoriesAndLoad(allWPNewsFeedRows);
}
// loop through borrowed WP stories in Cascade-based rows
if (allRowsWithBorrowedWPStories.length) {
let showSummaries = $(allRowsWithBorrowedWPStories).hasClass('js-show-summaries') ? true : false;
for (i = 0; i < allRowsWithBorrowedWPStories.length; i++) {
let allBorrowedWPNewsStories = $(allRowsWithBorrowedWPStories[i]).find('.js-wp-news-story');
for (j = 0; j < allBorrowedWPNewsStories.length; j++) {
var strStoryUrl = $(allBorrowedWPNewsStories[j]).attr("data-wpsrc");
// get the slug from the url and pull the story from the WP feed
if (strStoryUrl.substr(-1) === '/') strStoryUrl = strStoryUrl.substr(0, strStoryUrl.length - 1);
var slug = strStoryUrl.substring(strStoryUrl.lastIndexOf('/') + 1)
if (slug && slug != "") {
fetchNewsStoryAndLoad(slug, allBorrowedWPNewsStories[j], showSummaries);
}
}
rowsLoaded++;
checkRowsLoaded();
}
}
if (allRowsWithNoBorrowedWPStories.length) {
rowsLoaded++;
checkRowsLoaded();
}
}
async function fetchNewsStoryAndLoad(slug, card, showSummaries) {
try {
const newsStoryData = await fetchNewsStoryFromSlug(slug, card);
let storyTitle = newsStoryData[0].title.rendered;
let storyLink = $(card).find(newsFeedRowString + "__url").attr('href');
let storySummary = newsStoryData[0].excerpt.rendered;
// set default image info
let storyImage = "https://www.wm.edu/images/default_cypher_background.jpg";
let storyImageAlt = "";
// get image info from WP
let featuredMedia = newsStoryData[0].featured_media;
const imageData = await fetchNewsStoryImage(featuredMedia);
if (imageData) {
storyImage = imageData[0].media_details?.sizes?.large?.source_url || imageData[0].media_details.sizes.full.source_url;
storyImageAlt = imageData[0].alt_text;
}
outputCard($(card), storyTitle, storyLink, storyImage, storyImageAlt, storySummary, showSummaries);
} catch (error) {
console.log(error);
}
}
// for each row, gets news stories from WP and calls function to load them into the page
async function fetchWPStoriesAndLoad(allWPNewsFeedRows) {
for (i = 0; i < allWPNewsFeedRows.length; i++) {
// get news topic name and random ids from data- attibutes on .NewsFeedRow
let newsTopic = allWPNewsFeedRows[i].dataset.topic;
let feedType = allWPNewsFeedRows[i].dataset.feedType;
let randomID = allWPNewsFeedRows[i].dataset.id;
let feedQuery = "feedType=" + feedType;
if (feedType === "tags" || feedType === "categories") {
// get the topic id number then
// get the news stories using topic id
// (also calls output function)
fetchTopicID(feedType, newsTopic, feedQuery, randomID).then
(async topicID => {
feedQuery += "&topicID=" + topicID;
fetchNewsStoriesFromTagOrCat(feedQuery, randomID);
}).catch((error) => {
console.error(error);
});
} else {
// get the latest news stories
// (also calls output function)
fetchNewsStoriesFromTagOrCat(feedQuery, randomID);
}
}
}
// fetch id number for news tag or category
async function fetchTopicID(feedType, newsTopic) {
return $.ajax({
url: "https://creative.wm.edu/feeds/news/getNewsTagCategoryID.php?feedType=" + feedType + "&feedTopic=" + newsTopic,
dataType: "text",
success: (data) => { },
error: (x, y, z) => {
console.log("Error with fetchTopicID ajax: " + y);
}
});
}
// fetch news stories using tag or category id
async function fetchNewsStoriesFromTagOrCat(feedQuery, randomID) {
$.ajax({
url: "https://creative.wm.edu/feeds/news/getNewsFeedRowJson.php?" + feedQuery,
dataType: "json",
success: function (newsStoryData) {
outputWPRowStories(randomID, newsStoryData);
},
error: function (x, y, z) {
console.log("Error with getNewsFeedRowJson ajax: " + y);
}
});
}
// fetch news story from slug then get image data
async function fetchNewsStoryFromSlug(slug, card) {
return $.ajax({
url: "https://news.wm.edu/wp-json/wp/v2/posts/?slug=" + slug + "&_embed",
dataType: "json",
success: function (data) { },
error: function (x, y, z) {
console.log("Error with AJAX: " + y);
}
});
}
// fetch news story image data then call function to update HTML
async function fetchNewsStoryImage(imageID) {
return $.ajax({
url: "https://news.wm.edu/wp-json/wp/v2/media?include=" + imageID + "&skip_cache=1",
dataType: "json",
success: function (imagedata) { },
error: function (x, y, z) {
console.log("Error with AJAX: " + y);
}
});
}
function outputWPRowStories(randomID, data) {
let dataEntries = data;
if (dataEntries.length != 0) {
let thisNewsFeedRow = $("[data-id='" + randomID + "']");
let newsFeedRowCardEls = thisNewsFeedRow.find(newsFeedRowString + "__card");
// delete extra newsFeedRow cards if there are fewer than 4
if (dataEntries.length < 4) {
// how many to delete?
let leftovers = newsFeedRowCardEls.length - dataEntries.length;
// delete those many
for (let i = 1; i <= leftovers; i++) {
newsFeedRowCardEls[i].remove();
}
// update up our card array
newsFeedRowCardEls = thisNewsFeedRow.find(newsFeedRowString + "__card");
}
let showSummaries = thisNewsFeedRow.hasClass('js-show-summaries') ? true : false;
// loop over cards and add article info
for (let i = 0; i < newsFeedRowCardEls.length; i++) {
let entry = dataEntries[i];
let card = newsFeedRowCardEls.eq(i);
storyTitle = entry.title.rendered;
storyLink = entry.link;
storySummary = entry.excerpt.rendered;
storyImage = entry._embedded['wp:featuredmedia'][0].media_details?.sizes?.large?.source_url || entry._embedded["wp:featuredmedia"][0].media_details.sizes.full.source_url;
storyImageAlt = entry._embedded["wp:featuredmedia"][0].title.rendered;
outputCard(card, storyTitle, storyLink, storyImage, storyImageAlt, storySummary, showSummaries);
// slideshow gets shown in slideshow init, after things have loaded
}
rowsLoaded++;
} else if (dataEntries.length == 0) {
// NO STORIES AVAILABLE
// update classes and attributes
let thisNewsFeedRow = $("*[data-id='" + randomID + "']");
thisNewsFeedRow.removeClass('-loading');
thisNewsFeedRow.addClass('-no-slides');
thisNewsFeedRow.find('.NewsFeedRow__cards').attr('aria-busy', 'false');
thisNewsFeedRow.find('.NewsFeedRow__cards')[0].setAttribute('aria-hidden', 'true');
// update message element
thisNewsFeedRow.find('.NewsFeedRow__message').html("<p>No news is currently available.</p>");
rowsLoaded++;
}
checkRowsLoaded();
}
function outputCard(card, storyTitle, storyLink, storyImage, storyImageAlt, storySummary, showSummaries) {
let myTitleEl = card.find(newsFeedRowString + "__url");
let myLinkEl = myTitleEl;
let myImageWrapperEl = card.find(newsFeedRowString + "__image-wrapper");
let myImageEl = card.find(newsFeedRowString + "__image");
myTitleEl.html(storyTitle);
myLinkEl.attr("href", storyLink);
myLinkEl.attr("aria-label", storyTitle);
// load replacement image in background
let imageSrc = storyImage;
let placeholderImg = document.createElement("img");
placeholderImg.src = imageSrc;
placeholderImg.addEventListener('load', (e) => {
// when loaded, swap out src
myImageWrapperEl.css("background-image", "url(" + imageSrc + ")");
myImageEl.attr("src", imageSrc);
myImageEl.attr("alt", storyImageAlt);
placeholderImg = null;
});
// if show summaries, add caption, otherwise, remove caption div
if (showSummaries) {
let mySummaryEl = card.find(newsFeedRowString + "__description-text-caption");
mySummaryEl.html(storySummary);
} else {
card.find(newsFeedRowString + '__description-text-caption').remove();
}
return true;
}
function checkRowsLoaded() {
if (rowsLoaded === allNewsFeedRows.length) {
// after all rows have loaded
// load slideshow script
// slideshow js is here: /js/wm-row-slideshow-js.js
initWMRowSlideshow();
}
}
});
})(jQuery);