86 lines
2.5 KiB
JavaScript
86 lines
2.5 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");
|
|
|
|
// 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;
|
|
}
|
|
*/
|
|
|