Skip to content

Latest commit

 

History

History
144 lines (115 loc) · 5.12 KB

educational.md

File metadata and controls

144 lines (115 loc) · 5.12 KB
layout title
page
Open Science 101
<script> function getUniqueTags() { const educationals = {{ site.data.educational | jsonify }}; let allTags = [].concat.apply([], educationals.map(educ => educ.Tags.split(','))); allTags.push("All"); const uniqueTags = [...new Set(allTags)]; uniqueTags.sort(); return uniqueTags } function getTagColorClassName(tag) { const availableColors = ["", "pink-tag", "purple-tag"]; const allTags = getUniqueTags(); const tagPosition = allTags.indexOf(tag); return availableColors[tagPosition % availableColors.length]; } function getFilteredEducationalsByContent(filterValue) { const educationals = {{ site.data.educational | jsonify }}; return educationals.filter(educ => (educ.Name.toLowerCase().includes(filterValue.toLowerCase()))); } function getFilteredEducationalsByTag(tagValue) { const educationals = {{ site.data.educational | jsonify }}; return educationals.filter(educ => (educ.Tags.toLowerCase().includes(tagValue.toLowerCase()))); } function buildLinkDiv(educational) { let linksDiv = `
`; if (educational.Link && educational.Link !== "" && educational.Link.includes("youtu")) { linksDiv += ``; } if (educational.Douyu && educational.Douyu !== "") { linksDiv += ``; } linksDiv += `
`; return linksDiv; } function renderEducationalDiv(educationals) { const mainCategories = ["Open Access", "Open Data", "Open Code", "Reproducibility", "Research Integrity", "Research Culture"]; let educationalHTML = `
`; mainCategories.map(category => { const relevantEducationalsForCategory = educationals.filter(educational => educational.Tags.includes(category)); if (relevantEducationalsForCategory.length > 0) { educationalHTML += `

${category}

`; educationalHTML += "
"; relevantEducationalsForCategory.map((educational) => { const titleDiv = ``; const descriptionDiv = `
${educational.Description}
`; const linksDiv = buildLinkDiv(educational); educationalHTML += `
${titleDiv} ${descriptionDiv} ${linksDiv}
`; }); educationalHTML += "
"; } }); educationalHTML += `
`; // Finally add the cards inside the appropriate div document.getElementById("educational-contents").innerHTML = educationalHTML; } function renderAllEducationals() { renderEducationalDiv({{ site.data.educational || jsonify }}); } function renderTags() { let tags = getUniqueTags(); // Add additional "All" tag to let user reset the list let tagsHTML= "" // let tagsHTML = "All"; // Add all other tags available in the educationals data file tags.map((tag) => { const tagColorClassName = getTagColorClassName(tag); tagsHTML += `${tag}`; }); document.getElementById("tags-contents").innerHTML = tagsHTML; } renderTags(); renderAllEducationals(); let tagButtons = document.getElementsByClassName("tag-button"); for (let index = 0; index < tagButtons.length; index++) { tagButtons[index].addEventListener('click', (event) => { const tagValue = event.target.outerText === "All" ? "" : event.target.outerText; const filteredEducationals = getFilteredEducationalsByTag(tagValue); renderEducationalDiv(filteredEducationals); }) } document.getElementById('search-input').addEventListener('keyup', (event) => { const inputValue = event.target.value; const filteredEducational = getFilteredEducationalsByContent(inputValue); renderEducationalDiv(filteredEducational); }); </script>