121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
import { h, render } from 'preact';
|
|
|
|
/* global userData */
|
|
|
|
// This logic is similar to that in initScrolling.js.erb
|
|
const frontPageFeedPathNames = new Map([
|
|
['/', ''],
|
|
['/top/week', 'week'],
|
|
['/top/month', 'month'],
|
|
['/top/year', 'year'],
|
|
['/top/infinity', 'infinity'],
|
|
['/latest', 'latest'],
|
|
]);
|
|
|
|
const mainNavMoreTrigger = document.getElementById('main-nav-more-trigger');
|
|
function toggleMainNavMore() {
|
|
document.getElementById('main-nav-more').classList.remove('hidden');
|
|
mainNavMoreTrigger.classList.add('hidden');
|
|
}
|
|
if (mainNavMoreTrigger) {
|
|
mainNavMoreTrigger.addEventListener('click', toggleMainNavMore);
|
|
}
|
|
|
|
/**
|
|
* Renders tags followed in the left side bar of the homepage.
|
|
*
|
|
* @param {HTMLElement} tagsFollowedContainer DOM element to render tags followed.
|
|
* @param {object} user The currently logged on user, null if not logged on.
|
|
*/
|
|
|
|
function renderTagsFollowed(tagsFollowedContainer, user = userData()) {
|
|
if (user === null || document.getElementById('followed-tags-wrapper')) {
|
|
return;
|
|
}
|
|
|
|
// Only render if a user is logged on.
|
|
import('../leftSidebar/TagsFollowed').then(({ TagsFollowed }) => {
|
|
const { followed_tags } = user; // eslint-disable-line camelcase
|
|
const followedTags = JSON.parse(followed_tags);
|
|
|
|
// This should be done server-side potentially
|
|
// sort tags by descending weight, descending popularity and name
|
|
followedTags.sort((tagA, tagB) => {
|
|
return (
|
|
tagB.points - tagA.points ||
|
|
tagB.hotness_score - tagA.hotness_score ||
|
|
tagA.name.localeCompare(tagB.name)
|
|
);
|
|
});
|
|
|
|
render(
|
|
<TagsFollowed tags={followedTags} />,
|
|
tagsFollowedContainer,
|
|
tagsFollowedContainer.firstElementChild,
|
|
);
|
|
});
|
|
}
|
|
|
|
const feedTimeFrame = frontPageFeedPathNames.get(window.location.pathname);
|
|
|
|
if (!document.getElementById('featured-story-marker')) {
|
|
const waitingForDataLoad = setInterval(function dataLoadedCheck() {
|
|
const { user = null, userStatus } = document.body.dataset;
|
|
if (userStatus === 'logged-out') {
|
|
return;
|
|
}
|
|
|
|
if (userStatus === 'logged-in' && user !== null) {
|
|
clearInterval(waitingForDataLoad);
|
|
if (document.getElementById('rendered-article-feed')) {
|
|
return;
|
|
}
|
|
import('./homePageFeed').then(({ renderFeed }) => {
|
|
// We have user data, render followed tags.
|
|
renderFeed(feedTimeFrame);
|
|
|
|
InstantClick.on('change', () => {
|
|
const { userStatus: currentUserStatus } = document.body.dataset;
|
|
|
|
if (currentUserStatus === 'logged-out') {
|
|
return;
|
|
}
|
|
|
|
const url = new URL(window.location);
|
|
const changedFeedTimeFrame = frontPageFeedPathNames.get(url.pathname);
|
|
|
|
if (!frontPageFeedPathNames.has(url.pathname)) {
|
|
return;
|
|
}
|
|
|
|
renderFeed(changedFeedTimeFrame);
|
|
});
|
|
});
|
|
renderTagsFollowed(document.getElementById('sidebar-nav-followed-tags'));
|
|
}
|
|
}, 2);
|
|
}
|
|
|
|
InstantClick.on('receive', (address, body, title) => {
|
|
if (document.body.dataset.userStatus !== 'logged-in') {
|
|
// Nothing to do, the user is not logged on.
|
|
return false;
|
|
}
|
|
|
|
const tagsFollowedContainer = body.querySelector(
|
|
'#sidebar-nav-followed-tags',
|
|
);
|
|
|
|
if (!tagsFollowedContainer) {
|
|
// Not on the homepage, so nothing to do.
|
|
return false;
|
|
}
|
|
|
|
renderTagsFollowed(tagsFollowedContainer);
|
|
|
|
return {
|
|
body,
|
|
title,
|
|
};
|
|
});
|
|
InstantClick.init();
|