source ⟩ hypertext ⟩ public ⟩ 100 ⟩ films ⟩ zoetrope.js

const sortList = (list, topic) => {
	list.innerHTML = [...list.children]
		.sort((a, b) =>
			JSON.parse(a.dataset.info)[topic] >
			JSON.parse(b.dataset.info)[topic]
				? 1
				: -1
		)
		.map(el => el.outerHTML)
		.join("");
};

documentReady(() => {
	for (const film of $$("ol.films > li")) {
		const director = film.$(".director");
		film.dataset.info = JSON.stringify({
			rank: parseInt(film.$(".marker").innerText),
			title:
				film.$("strong.title").dataset.sortAs ??
				(film.$(".translated")
					? film.$(".translated").innerText
					: film.$(".original").innerText
				)
					.toLowerCase()
					.replace(/^(the|a) /g, "")
					.replace(/[':,’]/g, ""),
			director:
				director.dataset.sortAs ??
				(director.classList.contains("surname-first")
					? director.innerText.toLowerCase()
					: (rx => `${rx[2]} ${rx[1]}`)(
							director.innerText.match(/^(.*?)([\S]+)$/)
					  ).toLowerCase()),
			country: [...film.$$("img.flag")]
				.map(el => el.getAttribute("alt").replace(/^the /, ""))
				.join(" ")
				.toLowerCase(),
			year: parseInt(film.$(".year").innerText),
			length: film.$(".length").innerText
		});
	}

	$("#sort-rank").on("click", () => sortList($("ol.films"), "rank"));
	$("#sort-title").on("click", () => sortList($("ol.films"), "title"));
	$("#sort-director").on("click", () => sortList($("ol.films"), "director"));
	$("#sort-country").on("click", () => sortList($("ol.films"), "country"));
	$("#sort-year").on("click", () => sortList($("ol.films"), "year"));
	$("#sort-length").on("click", () => sortList($("ol.films"), "length"));
});