From b6252bf6b67d41f402eac6d229f019e47eee850d Mon Sep 17 00:00:00 2001 From: Ralf Stockmann Date: Fri, 19 May 2023 16:16:49 +0200 Subject: [PATCH] Update script.js - option for also displaying replies - more comments --- script.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/script.js b/script.js index 1fd9609..4ed0a8e 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,7 @@ +// The existingPosts array is used to track already displayed posts let existingPosts = []; +// getUrlParameter helps to fetch URL parameters function getUrlParameter(name) { name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]'); var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'); @@ -7,8 +9,12 @@ function getUrlParameter(name) { return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' ')); } +// secondsAgo calculates how many seconds have passed since the provided date const secondsAgo = date => Math.floor((new Date() - date) / 1000); + +// timeAgo formats the time elapsed in a human readable format const timeAgo = function(seconds) { + // An array of intervals for years, months, days, hours, and minutes. const intervals = [ { limit: 31536000, text: 'years' }, { limit: 2592000, text: 'months' }, @@ -17,6 +23,7 @@ const timeAgo = function(seconds) { { limit: 60, text: 'minutes' } ]; + // Loop through the intervals to find which one is the best fit. for (let interval of intervals) { if (seconds >= interval.limit) { return Math.floor(seconds / interval.limit) + ` ${interval.text} ago`; @@ -25,16 +32,22 @@ const timeAgo = function(seconds) { return Math.floor(seconds) + " seconds ago"; }; +let includeReplies; + +// fetchConfig fetches the configuration from the config.json file const fetchConfig = async function() { try { const config = await $.getJSON('config.json'); $('#navbar-brand').text(config.navbarBrandText); + $('.navbar').css('background-color', config.navbarColor); + includeReplies = config.includeReplies; return config.defaultServerUrl; } catch (error) { console.error("Error loading config.json:", error); } } +// fetchPosts fetches posts from the server using the given hashtag const fetchPosts = async function(serverUrl, hashtag) { try { const posts = await $.get(`${serverUrl}/api/v1/timelines/tag/${hashtag}?limit=20`); @@ -44,6 +57,7 @@ const fetchPosts = async function(serverUrl, hashtag) { } }; +// updateTimesOnPage updates the time information displayed for each post const updateTimesOnPage = function() { $('.card-text a').each(function() { const date = new Date($(this).attr('data-time')); @@ -52,8 +66,9 @@ const updateTimesOnPage = function() { }); }; +// displayPost creates and displays a post const displayPost = function(post) { - if (existingPosts.includes(post.id) || post.in_reply_to_id !== null) return; + if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return; existingPosts.push(post.id); @@ -77,6 +92,7 @@ const displayPost = function(post) { $('.masonry-grid').masonry('prepended', $card); }; +// updateWall displays all posts const updateWall = function(posts) { if (!posts || posts.length === 0) return; @@ -84,10 +100,12 @@ const updateWall = function(posts) { posts.forEach(post => displayPost(post)); }; +// updateHashtagsOnPage updates the displayed hashtags const updateHashtagsOnPage = function(hashtagsArray) { $('#hashtag-display').text(hashtagsArray.length > 0 ? `${hashtagsArray.map(hashtag => `#${hashtag}`).join(' ')}` : 'No hashtags set'); }; +// handleHashtagDisplayClick handles the event when the hashtag display is clicked const handleHashtagDisplayClick = function(serverUrl) { $('#app-content').addClass('d-none'); $('#zero-state').removeClass('d-none'); @@ -101,6 +119,7 @@ const handleHashtagDisplayClick = function(serverUrl) { $('#serverUrl').val(serverUrl); }; +// handleHashtagFormSubmit handles the submission of the hashtag form const handleHashtagFormSubmit = function(e, hashtagsArray) { e.preventDefault(); @@ -126,6 +145,7 @@ const handleHashtagFormSubmit = function(e, hashtagsArray) { window.location.href = newUrl; }; +// On document ready, the script configures Masonry, handles events, fetches and displays posts $(document).ready(async function() { const defaultServerUrl = await fetchConfig(); $('.masonry-grid').masonry({