3-row-js edit

/* scss/3-row-js/_event-row-js.scss */

/* js/event-row-js.js */ (function ($) { let rowsLoaded = 0; $(document).ready(function () { if ($('.EventRow').length > 0) { // get all EventsRow rows let allEventsRows = $('.js-event-row'); // loop through rows for (i = 0; i < allEventsRows.length; i++) { // get news topic name and random ids from data- attibutes on .EventRow let calendarName = allEventsRows[i].dataset.calendar; let feedType = allEventsRows[i].dataset.feedType; let randomID = allEventsRows[i].dataset.id; getEvents(calendarName, feedType, randomID); } } }); // fetch event feed async function getEvents(calendarName, feedType, randomID) { $.ajax({ url: "https://creative.wm.edu/feeds/events/getEventCalendarJson.php?feedType=" + feedType + "&calendarName=" + calendarName, dataType: "json", success: function (data) { outputEventSlideshows(randomID, data); }, error: function (x, y, z) { console.log("Error with getEventCalendarJson ajax: " + y); } }); } function outputEventSlideshows(randomID, data) { let dataEntries = data.entries; if (dataEntries.length != 0) { let EventsRowString = ".EventRow"; let thisEventsRow = $("[data-id='" + randomID + "']"); let EventsRowCardEls = thisEventsRow.find(EventsRowString + "__card"); // delete extra EventsRow cards if there are fewer than 4 if (dataEntries.length < 4) { // how many to delete? let leftovers = EventsRowCardEls.length - dataEntries.length; // delete those many for (let i = 1; i <= leftovers; i++) { EventsRowCardEls[i].remove(); } // update up our card array EventsRowCardEls = thisEventsRow.find(EventsRowString + "__card"); } // loop over cards and add article info for (let i = 0; i < EventsRowCardEls.length; i++) { let entry = dataEntries[i]; let card = EventsRowCardEls.eq(i); // title > a.EventRow__url > title text // update title text let myTitleEl = card.find(EventsRowString + "__eventUrl"); // snazzy entity decode trick let myTitle = $("<div></div>").html(entry.title).text(); myTitleEl.html(myTitle).text(); // update link let myLinkEl = myTitleEl; let myUrl = entry.url.replace("/wmhomepage/", "/wm/"); myLinkEl.attr("href", myUrl); myLinkEl.attr("aria-label", entry.title); // add click event to card to go to myUrl card.click(function () { window.location.href = entry.url; }); // update image let myImageWrapperEl = card.find(EventsRowString + "__image-wrapper"); let myImageEl = card.find(EventsRowString + "__image"); // load replacement image in background let imageSrc = entry.fullimageurl; 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", entry.imagetitle); placeholderImg = null; }); // update date and time // get times let startTime = entry.starttime.replace(/-/g, "/"); let endTime = entry.endtime.replace(/-/g, "/"); let formattedStartTime = formatTime(startTime); let formattedEndTime = ""; if (formattedStartTime != "Ongoing" && formattedStartTime != "All day") { formattedEndTime = "-" + formatTime(endTime); } let myTime = formattedStartTime + formattedEndTime; let myDate = formatDate(startTime, endTime); let myDateEl = card.find(EventsRowString + "__eventDate"); let myTimeEl = card.find(EventsRowString + "__eventTime"); myDateEl.html(myDate); myTimeEl.html(myTime); // slideshow gets shown in slideshow init, after things have loaded } rowsLoaded++; } else if (dataEntries.length === 0) { // NO EVENTS AVAILABLE // update classes and attributes let thisEventsRow = $("*[data-id='" + randomID + "']"); // thisEventsRow.removeClass('-loading'); thisEventsRow.addClass('-no-slides'); thisEventsRow.find('.EventRow__cards').attr('aria-busy', 'false'); thisEventsRow.find('.EventRow__cards')[0].setAttribute('aria-hidden', 'true'); // update message element thisEventsRow.find('.EventRow__message').html("<p>No events currently available.</p>"); rowsLoaded++; } if (rowsLoaded === $('.EventRow').length) { // now that we know how many cards there will be in each row, // load slideshow script // slideshow js is here: /js/wm-row-slideshow-js.js initWMRowSlideshow(); } } })(jQuery); // ---------- helper functions ---------- // // date format helper function function formatDate(startdt, enddt) { var startdt = new Date(startdt); var enddt = new Date(enddt); var startmonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(startdt); var startday = startdt.getDate(); var startyear = startdt.getFullYear(); var endmonth = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(enddt); var endday = enddt.getDate(); var endyear = enddt.getFullYear(); var formatteddate = ""; // if same month and year if (startmonth == endmonth && startyear == endyear) { // if same date if (startday == endday) { formatteddate = startmonth + " " + startday + ", " + startyear; } else { formatteddate = startmonth + " " + startday + "-" + endday + ", " + startyear; } // if different years } else if (startyear != endyear) { formatteddate = startmonth + " " + startday + ", " + startyear + "-" + endmonth + " " + endday + ", " + endyear; // if different months, same year } else { formatteddate = startmonth + " " + startday + "-" + endmonth + " " + endday + ", " + startyear; } return formatteddate; } // time format helper function function formatTime(datetime) { var eventdate = new Date(datetime); var hours = eventdate.getHours(); var ampm = "am"; if (hours == 12) { ampm = "pm"; } else if (hours > 11) { ampm = "pm"; hours = hours - 12; } else if (hours == 0) { hours = "12"; } var minutes = "0" + eventdate.getMinutes(); minutes = minutes.substr(-2); minutes == "00" ? minutes = "" : minutes = ':' + minutes; var formattedtime = hours + minutes + ampm; var nowTimestamp = new Date(); if (eventdate < nowTimestamp) { formattedtime = "Ongoing"; } if (formattedtime == '12am' || formattedtime == '12:01am') { formattedtime = 'All day'; } return formattedtime; }