Browse
Search and explore your courses.
const setAuthors = () => {
var all_authors = JSON.parse(localStorage.getItem("all_authors"));
if (all_authors && all_authors.length > 0) {
var authorsList = document.getElementById("authors");
var radioHtml =
'<label class="active_filter_item" onclick="setAuthors();setVideos();"><input type="radio" name="filter" value="" checked /><div class="center_content"><div style="width: 0;" class="user"></div>All Authors</div></label>';
all_authors.forEach(function (author, index) {
radioHtml +=
'<label onclick="applyFilterInput(' +
author.id +
')" ><input type="radio" name="filter" value="' +
author.id +
'"/><div class="center_content"><div class="user" style="background-image: url(\'' +
author.avatar_url +
"');\"></div>" +
author.title +
"</div></label>";
});
authorsList.innerHTML = radioHtml;
}
};
const setVideos = () => {
var all_videos = JSON.parse(localStorage.getItem("all_videos"));
if (all_videos && all_videos.length > 0) {
var videosList = document.getElementById("all_videos_content");
var radioHtml = "";
all_videos.forEach(function (video, index) {
radioHtml +=
'<div class="content_media"><div data-filterable="' +
video.author_id +
'" class="banner-container-image swiper-slide content_media_video" style="background-image: url(' +
video.main_poster +
');"></div><a data-v-0bf20b93="" href="' +
video.url +
'" class="card-title">' +
video.title +
"</a></div>";
});
videosList.innerHTML = radioHtml;
}
};
const el_filters = document.querySelectorAll('[name="year"], [name="type"]'),
el_filterable = document.querySelectorAll("[data-filterable]");
const applyFilter = () => {
// Filter checked inputs
const el_checked = [...el_filters].filter((el) => el.checked && el.value);
// Collect checked inputs values to array
const filters = [...el_checked].map((el) => el.value);
// Get elements to filter
const el_filtered = [...el_filterable].filter((el) => {
const props = el.getAttribute("data-filterable").trim().split(/\s+/);
return filters.every((fi) => props.includes(fi));
});
// Hide all
el_filterable.forEach((el) => el.classList.add("is-hidden"));
// Show filtered
el_filtered.forEach((el) => el.classList.remove("is-hidden"));
};
setAuthors();
setVideos();
// Assign event listener
el_filters.forEach((el) => el.addEventListener("change", applyFilter));
// Init
applyFilter();
const searchVideos = (e) => {
setAuthors();
if (e.value === "") {
setVideos();
} else {
var all_videos = JSON.parse(localStorage.getItem("all_videos"));
if (all_videos && all_videos.length > 0) {
var videosList = document.getElementById("all_videos_content");
var radioHtml = "";
all_videos
.filter((x) => x.title.toLowerCase().includes(e.value.toLowerCase()))
.forEach(function (video, index) {
radioHtml +=
'<div class="content_media"><div data-filterable="' +
video.author_id +
'" class="banner-container-image swiper-slide content_media_video" style="background-image: url(' +
video.main_poster +
');"></div><a data-v-0bf20b93="" href="' +
video.url +
'" class="card-title">' +
video.title +
"</a></div>";
});
videosList.innerHTML = radioHtml;
}
}
};
const applyFilterInput = (_id) => {
var all_authors = JSON.parse(localStorage.getItem("all_authors"));
if (all_authors && all_authors.length > 0) {
var authorsList = document.getElementById("authors");
var radioHtml =
'<label onclick="setAuthors();setVideos();"><input type="radio" name="filter" value="" checked /><div class="center_content"><div style="width: 0;" class="user"></div>All Authors</div></label>';
all_authors.forEach(function (author, index) {
radioHtml +=
'<label class="' +
(_id === author.id ? "active_filter_item" : "") +
'" onclick="applyFilterInput(' +
author.id +
')" ><input type="radio" name="filter" value="' +
author.id +
'"/><div class="center_content"><div class="user" style="background-image: url(\'' +
author.avatar_url +
"');\"></div>" +
author.title +
"</div></label>";
});
authorsList.innerHTML = radioHtml;
}
var all_videos = JSON.parse(localStorage.getItem("all_videos"));
if (all_videos && all_videos.length > 0) {
var videosList = document.getElementById("all_videos_content");
var radioHtml = "";
all_videos
.filter((x) => x.author_id === _id)
.forEach(function (video, index) {
radioHtml +=
'<div class="content_media"><div data-filterable="' +
video.author_id +
'" class="banner-container-image swiper-slide content_media_video" style="background-image: url(' +
video.main_poster +
');"></div><a data-v-0bf20b93="" href="' +
video.url +
'" class="card-title">' +
video.title +
"</a></div>";
});
videosList.innerHTML = radioHtml;
}
document.getElementById("myInput").value = "";
};
