fonts();

function fonts()
{
	let url = window.location.href.match(/\#.*/);
	
	if (url == "#fonts")
	{
		// go to the div "nav"
		let nav = document.getElementsByClassName("nav_left");

		// add an anchor
		let anchor = document.createElement("a");
		anchor.setAttribute('id', "fonts");
		nav[0].appendChild(anchor);

		/*---------------------------*/
		// manually write list of fonts
		anchor.innerHTML = `
			<p>fonts</p>
			<div id="fonts_dropdown">
				<button onclick="change_font()">ptroot (defaut)</button>
				<button onclick="change_font()">paradroid (titres)</button>
				<button onclick="change_font()">cabrion</button>
				<button onclick="change_font()">louisgeorge</button>
				<button onclick="change_font()">evolventa</button>
				<button onclick="change_font()">tgalcefun</button>
				<button onclick="change_font()">bentonsansbook</button>
				<button onclick="change_font()">larsseitlight</button>
			</div>
			`;

		/*-------------------------------------*/
		// or automatically write list of fonts :
		/*

		// list the names of the fonts in fonts.css
		// first solution with a complicated function :
		let fontName = list_fonts();
		// or with this really easy function :
		let list_my_fonts = Array.from(document.fonts);

		// add the buttons automatically
		let p_font = document.createElement("p");
		p_font.innerHTML = "fonts";
		let dropdown = document.createElement("div");
		dropdown.setAttribute('id', "fonts_dropdown");
		anchor.appendChild(p_font);
		anchor.appendChild(dropdown);

		fontName.forEach(function (element)
		{
			let paragraph = document.createElement("p");
			let button = '<button onclick="change_font()">' + element + '</button>';
			paragraph.innerHTML = button;
			dropdown.appendChild(paragraph);
		});
		*/
	}
}

function change_font()
{
	let name = event.target.textContent.split(' ')[0];
	document.documentElement.style.cssText = "--font-texts: " + name;
}

/*
function list_fonts()
{
		// get all style sheets
		const styleSheets = Array.from(document.styleSheets);
		// extract rules from first styleSheet (style.css)
		const cssRules = styleSheets[0].cssRules;
		// select only the sub sheet fonts.css
		let fontSheet = Object.values(cssRules).filter(val => val.cssText.includes("fonts.css"));
		// extract the rules inside fonts.css
		let fontRules = fontSheet[0].styleSheet.cssRules;
		// take only the name of "font-family: name""
		let fontName = Object.values(fontRules).map(val => val.cssText.match(/(?<=font-family: ").+?(?=")/));
		return fontName;
}
*/