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.
This commit is contained in:
parent
90e007fe21
commit
5d4e8e59fe
8 changed files with 182 additions and 9 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<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.gstatic.com" crossorigin>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 */
|
||||
/****************************************/
|
||||
|
||||
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
32
js/navbar.js
|
|
@ -10,6 +10,12 @@ var dropdownList = document.getElementById("navbar_text-container").children[0].
|
|||
var aTagList = getNavbarTextContainer();
|
||||
//a list
|
||||
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 */
|
||||
|
|
@ -69,7 +75,7 @@ function getNavbarTextContainer() {
|
|||
*/
|
||||
function resetNavbar() {
|
||||
//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";
|
||||
}
|
||||
}
|
||||
|
|
@ -78,6 +84,28 @@ function resetNavbar() {
|
|||
/* 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
|
||||
document.getElementById("navbar_logo-container").addEventListener("mouseenter", function () {
|
||||
//enterAnimation is now true (see update in logoRotate)
|
||||
|
|
@ -125,7 +153,7 @@ for (var dropdownElement of dropdownList) {
|
|||
window.addEventListener('click', function (e) {
|
||||
//clickState is set to 1 if the click is done outside any dropdownElement or the dropdown itself
|
||||
var clickState = false;
|
||||
for (dropdownClass of document.getElementsByClassName("navbar_dropdown")) {
|
||||
for (dropdownClass of navbarDropdown) {
|
||||
clickState |= dropdownClass.contains(e.target);
|
||||
}
|
||||
for (aTag of aTagList) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue