pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout de methode automatique pour les noms de fonts mais petits bugs

Browse Source
This commit is contained in:
hugogogo
2021-05-17 01:24:23 +02:00
parent 882a29f1ca
commit ce89086702
1 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
fr/script.js
View File

@@ -10,9 +10,14 @@ function fonts()
// go to the div "nav" // go to the div "nav"
let nav = document.getElementsByClassName("nav_left"); let nav = document.getElementsByClassName("nav_left");
// list the names of the fonts in fonts.css
let fontName = list_fonts();
// add an anchor // add an anchor
let anchor = document.createElement("a"); let anchor = document.createElement("a");
anchor.setAttribute('id', "fonts"); anchor.setAttribute('id', "fonts");
nav[0].appendChild(anchor);
anchor.innerHTML = ` anchor.innerHTML = `
<p>fonts</p> <p>fonts</p>
<div id="fonts_dropdown"> <div id="fonts_dropdown">
@@ -26,34 +31,46 @@ function fonts()
<button onclick="change_font()">larsseitlight (payant)</button> <button onclick="change_font()">larsseitlight (payant)</button>
</div> </div>
`; `;
nav[0].appendChild(anchor);
/*
// 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() function change_font()
{ {
let name = event.target.textContent.split(' ')[0]; let name = event.target.textContent.split(' ')[0];
console.log(name);
document.documentElement.style.cssText = "--font-texts: " + name; document.documentElement.style.cssText = "--font-texts: " + name;
/* }
let content = getComputedStyle(document.documentElement).getPropertyValue('font-family');
let content = getComputedStyle(document.documentElement).getPropertyValue('@font-face');
let content = Array.from(document.styleSheets);
console.log(content);
*/
// get all the styleSheets
const styleSheets = Array.from(document.styleSheets);
styleSheets.forEach(styleSheet => { function list_fonts()
const cssRules = styleSheet.cssRules; {
// get all style sheets
// all the font-faces rules const styleSheets = Array.from(document.styleSheets);
const rulesFontFace = cssRules.filter(rule => rule.cssText.startsWith('@font-face')); // extract rules from first styleSheet (style.css)
const cssRules = styleSheets[0].cssRules;
rulesFontFace.forEach(fontFace => { // select only the sub sheet fonts.css
console.log(fontFace); // CSSFontFaceRule object 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;
} }