content = {
//create dom
const content = html`<div class='content'></div>`;
searchedEvents.forEach((event, i) => {
const organizer = event["Organizer"]
? `<p><strong>Organizer(s) & Speaker(s):</strong> ${event[
"Organizer"
].replace(new RegExp("\r?\n", "g"), "; ")}</p>`
: "";
const prerequisites = event["Prerequisites"]
? `<p><strong>Prerequisites:</strong> ${event["Prerequisites"]}</p>`
: "";
const materials = event["Materials"]
? `<p><strong>Materials:</strong> ${event["Materials"]}</p>`
: "";
const datasets = event["Datasets"]
? `<p><strong>Dataset(s):</strong> ${event["Datasets"]}</p>`
: "";
const icon = (currentColor = "#bbb") =>
`<span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="save" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-save fa-w-14 fa-fw"><path fill="${currentColor}" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z" class=""></path></svg></span>`;
const link = event["YouTube URL"]
? `<a href="${
event["YouTube URL"]
}" target="_blank"><span class="icon_text">${icon(
"#3182bd"
)}<span>Recorded on ${event["Event Start Time"]}</span></span></a>`
: `<span class="icon_text">${icon()}<span>No recording available for this event.</span></span>`;
const videoId = event["YouTube URL"]
? event["YouTube URL"].match(
/youtu(?:.*\/v\/|.*v\=|\.be\/)([A-Za-z0-9_\-]{11})/
)[1]
: null;
const width = 600; //window.innerWidth - 16 * 4;
const height = width * 0.66;
const embed = event["YouTube URL"]
? `<iframe width="${width}" height="${height}" data-src="https://www.youtube-nocookie.com/embed/${videoId}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
: "";
const accordion = html`
<div class='accordion'>
<h4 class='accordion_heading'>
<button class='accordion_button' aria-expanded='false' aria-controls="e${i}">
<div class="type" style='background:${
eventTopics[event["Event Tag"]]
};'></div>
<div class="flex"><span>${event["EVENT TITLE"]}</span><span class="year">${
event["Year"]
}</span></div>
</button>
</h4>
<div class='accordion_description'>
${link}
${organizer}
<div class='accordion_content' id='e${i}-preview'>
<p><strong>Description:</strong> ${truncate(
event["EVENT DESCRIPTION"],
300
)}</p>
${prerequisites}
${materials}
${datasets}
</div>
<div class='accordion_content' id='e${i}-full' style='display: none;'>
${embed}
<p><strong>Description: </strong>${event["EVENT DESCRIPTION"]}</p>
</div>
<div>`;
content.appendChild(accordion);
});
//add event listerners on buttons
const buttons = content.querySelectorAll("button");
[...Array.from(buttons)].forEach((button) => {
button.addEventListener("click", () => {
const id = button.getAttribute("aria-controls");
const toggleState = button.getAttribute("aria-expanded") === "true";
const full = content.querySelector(`#${id}-full`);
const preview = content.querySelector(`#${id}-preview`);
if (toggleState) {
//toggle off accordion
button.setAttribute("aria-expanded", "false");
preview.style.display = "block";
full.style.display = "none";
} else {
//toggle on accordion
button.setAttribute("aria-expanded", "true");
full.style.display = "block";
preview.style.display = "none";
//enable iframe
const iframe = full.querySelector("iframe");
iframe.setAttribute("src", iframe.getAttribute("data-src"));
iframe.setAttribute("width", full.clientWidth - 32);
iframe.setAttribute("height", full.clientWidth * 0.5625);
}
});
});
return content;
}
