Files
2022_WEBSITE_kosmopolit/fr/script.js

77 lines
2.2 KiB
JavaScript

fonts();
function fonts()
{
let url = window.location.href.match(/\#.*/);
if (url == "#fonts")
{
// go to the div "nav"
let nav = document.getElementsByClassName("nav_left");
// list the names of the fonts in fonts.css
let fontName = list_fonts();
// add an anchor
let anchor = document.createElement("a");
anchor.setAttribute('id', "fonts");
nav[0].appendChild(anchor);
anchor.innerHTML = `
<p>fonts</p>
<div id="fonts_dropdown">
<button onclick="change_font()">louisgeorge (defaut)</button>
<button onclick="change_font()">cabrion</button>
<button onclick="change_font()">paradroid (titres)</button>
<button onclick="change_font()">evolvanta</button>
<button onclick="change_font()">ptroot</button>
<button onclick="change_font()">tgalcefun</button>
<button onclick="change_font()">bentonsansbook (payant)</button>
<button onclick="change_font()">larsseitlight (payant)</button>
</div>
`;
/*
// 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;
}