source ⟩ hypertext ⟩ public ⟩ latbs ⟩ strelka.js

const toggleFold = square => () => {
	let pile = square.parentElement.parentElement;

	if (pile.hasAttribute("unfolded")) {
		pile.removeAttribute("unfolded");
		square.innerText = "+";
	} else {
		pile.setAttribute("unfolded", "true");
		square.innerText = "-";
	}
};

const sloganTimeline = (latin, local) => {
	const halfDiff = Math.abs(latin.length - local.length) / 2;
	if (latin.length > local.length) {
		local =
			" ".repeat(Math.floor(halfDiff)) +
			local +
			" ".repeat(Math.ceil(halfDiff));
	} else if (local.length > latin.length) {
		latin =
			" ".repeat(Math.floor(halfDiff)) +
			latin +
			" ".repeat(Math.ceil(halfDiff));
	}

	const localLetters = local
		.split("")
		.map((text, index) => ({
			text: text,
			index: index,
			shuffle: Math.random()
		}))
		.sort((a, b) => a.shuffle - b.shuffle);

	let stages = [latin];
	for (const letter of localLetters) {
		const lastStage = stages[stages.length - 1];
		stages.push(
			lastStage.slice(0, letter.index) +
				letter.text +
				lastStage.slice(letter.index + 1)
		);
	}

	return stages;
};

documentReady(() => {
	for (let button of $$("button.square")) {
		button.on("click", toggleFold(button));
	}

	let header = $(".site-header-slogan");
	header.dataset.stage = 0;

	const isHovered = el => el.parentElement.$(":hover") === el;

	let stages = sloganTimeline(header.dataset.latin, header.dataset.local);

	let sloganInterval = undefined;
	const updateSlogan = () => {
		const nextStage = +header.dataset.stage + (isHovered(header) ? 1 : -1);
		if (nextStage >= stages.length) {
			return;
		}
		if (nextStage < 0) {
			return clearInterval(sloganInterval);
		}
		header.innerText = stages[nextStage];
		header.dataset.stage = nextStage;
	};

	header.on("mouseover", () => {
		if (+header.dataset.stage === 0) {
			stages = sloganTimeline(header.dataset.latin, header.dataset.local);
			sloganInterval = setInterval(updateSlogan, 25);
		}
	});
});