152 lines
4.9 KiB
JavaScript
152 lines
4.9 KiB
JavaScript
// Selected = is clicked sport selected or not, BOOL
|
|
// Sports = all selected sports, ARRAY
|
|
$(".sport").on("selected", function(e, selected, sports) {
|
|
filters.sports = sports;
|
|
$(window).trigger("filter");
|
|
showFeeds()
|
|
})
|
|
|
|
window.addEventListener('DOMContentLoaded', (event) => {
|
|
window.sessionStorage.setItem('tweets', JSON.stringify([]));
|
|
// run code every 5 seconds
|
|
setInterval(function() {
|
|
$(window).trigger("filter");
|
|
}, 1000);
|
|
});
|
|
|
|
$(".sport").on("click", function() {
|
|
$(this).toggleClass("selected")
|
|
|
|
let sportName = $(this).children()[1].innerHTML // 2nd element, which is the sport name
|
|
|
|
|
|
let index = selectedSports.indexOf(sportName)
|
|
if (index > -1 ) { // If element is found in array
|
|
selectedSports.splice(index, 1) // Remove sport at index
|
|
} else {
|
|
selectedSports.push(sportName) // Add sport to array
|
|
}
|
|
|
|
showFeeds()
|
|
$(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
|
|
})
|
|
|
|
//evaluate and alter our page layout when page gets resized
|
|
$(window).on("resize", function(){
|
|
showFeeds()
|
|
});
|
|
|
|
//evaluate and alter our page layout when page gets loaded
|
|
$(window).on("load", function() {
|
|
showFeeds()
|
|
})
|
|
|
|
let root = document.querySelector(":root")
|
|
|
|
//switch between light and dark mode
|
|
$(".logo").on("click", function() {
|
|
if (root.style.getPropertyValue("--main-bg") === 'snow') {
|
|
var audio = new Audio("../media/Chicken.mp3");
|
|
audio.play();
|
|
root.style.setProperty('--main-medium-dark', '#1E1E1E');
|
|
root.style.setProperty('--main-bg', '#292929');
|
|
root.style.setProperty('--main-light', ' #ffffff' );
|
|
root.style.setProperty('--main-dark', '#ffffff');
|
|
root.style.setProperty('--tweet-color', '#000000')
|
|
root.style.setProperty('--column-color', '#1E1E1E')
|
|
} else {
|
|
var audio = new Audio("../media/Rooster.mp3");
|
|
audio.play();
|
|
root.style.setProperty('--main-medium-dark', '#1D9BF0');
|
|
root.style.setProperty('--main-bg', 'snow');
|
|
root.style.setProperty('--main-light', '#000000');
|
|
root.style.setProperty('--main-dark', ' #000000');
|
|
root.style.setProperty('--tweet-color', 'whitesmoke');
|
|
root.style.setProperty('--column-color', 'rgba(112, 128, 144, 0.388');
|
|
}
|
|
})
|
|
|
|
//when a filter event happens, filter and sort tweets, then remove all old HTML and fill with new HTML
|
|
$(window).on("filter", function() {
|
|
var parent = document.querySelector("#filtered")
|
|
var lastTweet = parent.firstChild
|
|
|
|
tweets = window.sessionStorage.getItem('tweets');
|
|
tweets = JSON.parse(tweets);
|
|
tweets = filterTweets(tweets, filters.blockedWords, filters.searchedWords.concat(filters.sports), filters.sorted, filters.order);
|
|
tweets = sortTweets(tweets, {"sortby":filters.sorted, "order":filters.order});
|
|
var displayTweets = tweets.reverse().slice(0, 100).reverse();
|
|
if(displayTweets.length == 0) {
|
|
parent.replaceChildren();
|
|
return
|
|
}
|
|
if(!paused) {
|
|
if(tweetCell(displayTweets[0]) != lastTweet){
|
|
parent.replaceChildren();
|
|
for (i = 0; i < Math.min(100, displayTweets.length); i++){
|
|
tweet = displayTweets[i];
|
|
parent.prepend(tweetCell(tweet));
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// toggle html for the sorting dropdown menu
|
|
$(".current-sort").on("click", function() {
|
|
$(".sort-dropdown-list li:not(:first-of-type)").toggle()
|
|
})
|
|
|
|
$(".sort-btn").on("click", function() {
|
|
$(".sort-dropdown-list li:not(:first-of-type)").toggle()
|
|
})
|
|
|
|
$(".sort-dropdown-list li:not(:first-of-type)").on("click", function() {
|
|
$(".sort-dropdown-list li:not(:first-of-type)").toggle()
|
|
$(".current-sort").html($(this).html())
|
|
})
|
|
|
|
// toggle ordering between ascending or descending and changing arrow to match
|
|
$(".order-btn").on("click", function() {
|
|
if($(this).html() == "arrow_downward") { // Descending to ascending
|
|
$(this).html("arrow_upward")
|
|
filters.order = 'asc'
|
|
} else { // Ascending to descending
|
|
$(this).html("arrow_downward")
|
|
filters.order = 'desc'
|
|
}
|
|
$(window).trigger("filter")
|
|
showFeeds()
|
|
})
|
|
|
|
//functions that get called in HTML onchange attributes to trigger filters
|
|
function updateSearched(searched){
|
|
searched = searched.split(",");
|
|
filters.searchedWords = searched;
|
|
$(window).trigger("filter");
|
|
showFeeds()
|
|
}
|
|
|
|
function updateBlocked(blocked){
|
|
blocked = blocked.split(",");
|
|
filters.blockedWords = blocked;
|
|
$(window).trigger("filter");
|
|
showFeeds()
|
|
}
|
|
|
|
function updateSort(sort){
|
|
sortarray = []
|
|
filters.sorted = sort;
|
|
$(window).trigger("filter");
|
|
showFeeds()
|
|
}
|
|
|
|
// toggle between paused and unpaused
|
|
$(".pause-btn").on("click", function() {
|
|
if($(".pause-btn").html() == "pause") { // Unpaused to paused
|
|
$(".pause-btn").html("play_arrow")
|
|
paused = true;
|
|
} else { // Paused to unpaused
|
|
$(".pause-btn").html("pause")
|
|
paused = false;
|
|
}
|
|
}) |