Added loadCSS(). Now css links are no longer required for both footer and navbar.

This commit is contained in:
Yohan Boujon 2023-06-20 21:55:24 +02:00
parent b234e14298
commit 58c108a229
7 changed files with 17 additions and 19 deletions

View file

@ -6,16 +6,14 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="lib/anime.min.js"></script>
<script src="js/base.js"></script>
<script src="../lib/anime.min.js"></script>
<script src="../js/base.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
</head>
<body>

View file

@ -14,8 +14,6 @@
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
</head>
<body>

View file

@ -14,8 +14,6 @@
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
</head>
<body>

View file

@ -14,9 +14,6 @@
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>

View file

@ -14,8 +14,6 @@
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
</head>
<body>

View file

@ -14,8 +14,6 @@
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/navbar.css" rel="stylesheet">
</head>
<body>

View file

@ -20,7 +20,7 @@ function load(urlHTML, elementHTML, urlJS, elementJS) {
})
.catch(
function (err) {
console.warn('Could not load the Navbar.', err)
console.warn('Could not load '+urlHTML+': Add the correct tag ?', err);
}
);
}
@ -32,7 +32,7 @@ function loadHTML(url, element) {
element.innerHTML = htmltext;
}).catch(
function (err) {
console.warn('Could not load the Navbar.', err)
console.warn('Could not load '+url+': Add the correct tag ?', err);
}
);
}
@ -43,6 +43,13 @@ function loadJS(url, element) {
element.appendChild(scriptTag);
}
function loadCSS(url, element) {
var linkTag = document.createElement('link');
linkTag.rel = "stylesheet";
linkTag.href = url;
element.appendChild(linkTag);
}
function ready(callback) {
// in case the document is already rendered
if (document.readyState != 'loading') callback();
@ -88,7 +95,11 @@ function concatPath(slashNum, basePath)
/* main */
/****************************************/
var headTag = document.getElementsByTagName("head")[0];
window.addEventListener('load', function () {
load(urlStr+"components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr+"js/navbar.js", this.document.getElementsByTagName("head")[0]);
load(urlStr+"components/footer.html", document.getElementsByTagName("Footer")[0], urlStr+"js/footer.js", this.document.getElementsByTagName("head")[0]);
loadCSS(urlStr+"css/base.css", headTag);
loadCSS(urlStr+"css/navbar.css", headTag);
load(urlStr+"components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr+"js/navbar.js", headTag);
loadCSS(urlStr+"css/footer.css", headTag);
load(urlStr+"components/footer.html", document.getElementsByTagName("Footer")[0], urlStr+"js/footer.js", headTag);
})