Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Renamed componentloader.js to base.js. Added getSlashNum() and concatPath(). Added dropdownLinks, containerLinks and navbarDropdown. Now each links of the navbar takes into account the subdirectory level.

Browse source
This commit is contained in:
Yohan Boujon 2023-06-20 00:57:41 +02:00
parent 90e007fe21
commit 5d4e8e59fe
8 changed files with 182 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
avocat/index.html
View file

@ -1 +1,24 @@
<p>Avocat</p> <!DOCTYPE html>
<html>
<head>
<title>Avocat | Saoul Bonmonsieur</title>
<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>
<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/navbar.css" rel="stylesheet">
</head>
<body>
<Navbar></Navbar>
</body>
</html>

25
droits/affaire.html
View file

@ -1 +1,24 @@
<p>Affaire</p> <!DOCTYPE html>
<html>
<head>
<title>Droit des Affaires | Saoul Bonmonsieur</title>
<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>
<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/navbar.css" rel="stylesheet">
</head>
<body>
<Navbar></Navbar>
</body>
</html>

25
droits/penal.html
View file

@ -1 +1,24 @@
<p>Penal</p> <!DOCTYPE html>
<html>
<head>
<title>Droit pénal | Saoul Bonmonsieur</title>
<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>
<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/navbar.css" rel="stylesheet">
</head>
<body>
<Navbar></Navbar>
</body>
</html>

2
index.html
View file

@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="lib/anime.min.js"></script> <script src="lib/anime.min.js"></script>
<script src="js/componentloader.js"></script> <script src="js/base.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

25
join/contact.html
View file

@ -1 +1,24 @@
<p>Contact</p> <!DOCTYPE html>
<html>
<head>
<title>Contact | Saoul Bonmonsieur</title>
<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>
<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/navbar.css" rel="stylesheet">
</head>
<body>
<Navbar></Navbar>
</body>
</html>

25
join/coordonees.html
View file

@ -1 +1,24 @@
<p>Coordonées</p> <!DOCTYPE html>
<html>
<head>
<title>Coordonées | Saoul Bonmonsieur</title>
<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>
<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/navbar.css" rel="stylesheet">
</head>
<body>
<Navbar></Navbar>
</body>
</html>

32
js/componentloader.js → js/base.js
View file

@ -46,10 +46,40 @@ function ready(callback) {
}); });
} }
/**
* Parse each character of the given string.
* @param {string} string
* @returns number of '/' in the string
*/
function getSlashNum(string) {
var returnValue = 0;
for (char of string) {
if (char == "/") {
returnValue++;
}
}
return returnValue;
}
/**
* Will contenate a string of slash (num of parent dir) onto a given path
* @param {Int, number of slashes} slashNum
* @param {Concat String} basePath
* @returns the concatened string
*/
function concatPath(slashNum, basePath)
{
var slashString = "";
for (let i = 0; i < slashNum; i++) {
slashString += "../";
}
return slashString+basePath;
}
/****************************************/ /****************************************/
/* main */ /* main */
/****************************************/ /****************************************/
window.addEventListener('load', function () { window.addEventListener('load', function () {
load("../components/navbar.html", document.getElementsByTagName("Navbar")[0],"js/navbar.js", this.document.getElementsByTagName("head")[0]); load("../components/navbar.html", document.getElementsByTagName("Navbar")[0], concatPath(getSlashNum(window.location.pathname)-1,"js/navbar.js"), this.document.getElementsByTagName("head")[0]);
}) })

32
js/navbar.js
View file

@ -10,6 +10,12 @@ var dropdownList = document.getElementById("navbar_text-container").children[0].
var aTagList = getNavbarTextContainer(); var aTagList = getNavbarTextContainer();
//a list //a list
var dropdownStatus = Array(aTagList.length).fill(false); var dropdownStatus = Array(aTagList.length).fill(false);
//list of dropdown links
var dropdownLinks = ["droits/penal.html","droits/affaire.html","join/contact.html","join/coordonees.html"];
//list of container links
var containerLinks = ["avocat"];
//navbarDropdown Element
var navbarDropdown = document.getElementsByClassName("navbar_dropdown");
/****************************************/ /****************************************/
/* animjs */ /* animjs */
@ -69,7 +75,7 @@ function getNavbarTextContainer() {
*/ */
function resetNavbar() { function resetNavbar() {
//For each dropdown found with the given classname, will set the display to none //For each dropdown found with the given classname, will set the display to none
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) { for (dropdownClass of navbarDropdown) {
dropdownClass.style.display = "none"; dropdownClass.style.display = "none";
} }
} }
@ -78,6 +84,28 @@ function resetNavbar() {
/* main */ /* main */
/****************************************/ /****************************************/
//Setting the href links for in directory links
var dropdownCount = 0;
for(var dropdown of navbarDropdown)
{
for(var aTagDropdown of dropdown.children)
{
aTagDropdown.href = concatPath(getSlashNum(window.location.pathname)-1,dropdownLinks[dropdownCount]);
dropdownCount++;
}
}
dropdownCount = 0;
for(var aTag of aTagList)
{
console.log(aTag);
if(!(aTag.href.includes("#0")))
{
console.log(aTag);
aTag.href = concatPath(getSlashNum(window.location.pathname)-1,containerLinks[dropdownCount]);
dropdownCount++;
}
}
//Mouse enter for the logo //Mouse enter for the logo
document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () { document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () {
//enterAnimation is now true (see update in logoRotate) //enterAnimation is now true (see update in logoRotate)
@ -125,7 +153,7 @@ for (var dropdownElement of dropdownList) {
window.addEventListener('click', function (e) { window.addEventListener('click', function (e) {
//clickState is set to 1 if the click is done outside any dropdownElement or the dropdown itself //clickState is set to 1 if the click is done outside any dropdownElement or the dropdown itself
var clickState = false; var clickState = false;
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) { for (dropdownClass of navbarDropdown) {
clickState |= dropdownClass.contains(e.target); clickState |= dropdownClass.contains(e.target);
} }
for (aTag of aTagList) { for (aTag of aTagList) {