sort-stories.js

import {createOptionsBar, getGroupedStories} from '../libs/dom-utils';
import {paths} from '../libs/paths';

function updateStoriesHtml(stories) {
	const itemlistTable = document.querySelector('table.itemlist > tbody');
	const moreRow = itemlistTable.lastElementChild;
	const morespaceRow = moreRow.previousElementSibling;

	let extraItems = [];
	if (window.location.pathname === '/show') {
		extraItems = [...document.querySelectorAll('table.itemlist > tbody > tr')].slice(0, 3);
	}

	itemlistTable.innerHTML = '';
	itemlistTable.append(...extraItems);

	for (const story of stories) {
		for (const element of story.elements) {
			itemlistTable.append(element);
		}
	}

	itemlistTable.append(morespaceRow, moreRow);
}

function sort() {
	const method = document.querySelector('#sort-stories-input').value;
	const stories = getGroupedStories(document.querySelector('table.itemlist'));

	switch (method) {
		case 'time': {
			stories.sort((a, b) => a.id < b.id ? 1 : -1);
			break;
		}

		case 'score': {
			stories.sort((a, b) => a.score < b.score ? 1 : -1);
			break;
		}

		case 'comments/score ratio': {
			stories.sort((a, b) => {
				const ratioA = (a.commentsCount ? a.commentsCount : 0) / a.score;
				const ratioB = (b.commentsCount ? b.commentsCount : 0) / b.score;

				return ratioA < ratioB ? 1 : -1;
			});
			break;
		}

		case 'default':
		default: {
			stories.sort((a, b) => a.defaultRank > b.defaultRank ? 1 : -1);
			break;
		}
	}

	updateStoriesHtml(stories);
}

function init(metadata) {
	const optionsBar = createOptionsBar(metadata.options.optionsBarPosition);
	const sortLabel = document.createElement('label');
	const sortSelect = document.createElement('select');
	const reverseButton = document.createElement('a');

	sortLabel.innerHTML = 'sort stories:&nbsp;';
	sortLabel.setAttribute('for', 'sort-stories-input');

	sortSelect.id = 'sort-stories-input';
	sortSelect.innerHTML = '';

	reverseButton.innerHTML = 'reverse';
	reverseButton.href = 'javascript:void(0)';

	[
		'default',
		'time',
		'score',
		'comments/score ratio'
	].forEach(opt => {
		sortSelect.innerHTML += `<option value="${opt}">${opt}</option>`;
	});

	if (document.querySelector('#auto-refresh-input')) {
		const {firstChild} = optionsBar;
		optionsBar.insertBefore(sortLabel, firstChild);
		optionsBar.insertBefore(sortSelect, firstChild);
		optionsBar.insertBefore(reverseButton, firstChild);
	} else {
		optionsBar.append(sortLabel, sortSelect, reverseButton);
	}

	sortSelect.addEventListener('change', sort);
	reverseButton.addEventListener('click', () => {
		const stories = getGroupedStories(document.querySelector('table.itemlist'));
		updateStoriesHtml(stories.reverse());
	});

	return true;
}

const details = {
	id: 'sort-stories',
	pages: {
		include: paths.stories,
		exclude: [
			'/front',
			'/jobs'
		]
	},
	loginRequired: false,
	awaitInit: true,
	init
};

export default details;

export {sort as sortStories};