Modified loading of navbar for both js and html. Adding algorithm for href in each <a> in subdirs. Added urlStr and dirStr global variables.
This commit is contained in:
parent
5d4e8e59fe
commit
3075403ee5
3 changed files with 30 additions and 12 deletions
|
@ -21,7 +21,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="navbar_logo-container">
|
<div id="navbar_logo-container">
|
||||||
<img class="navbar_logo" src="../assets/Logo.png"><img>
|
<img class="navbar_logo"><img>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="navbar_padding"></div>
|
<div id="navbar_padding"></div>
|
10
js/base.js
10
js/base.js
|
@ -1,3 +1,11 @@
|
||||||
|
/****************************************/
|
||||||
|
/* global variables */
|
||||||
|
/****************************************/
|
||||||
|
//Getting the complete URL and slice it by [0] to the directory URL, return the domain name.
|
||||||
|
var urlStr = window.location.toString().slice(0,window.location.toString().lastIndexOf(window.location.pathname)+1);
|
||||||
|
//Getting the dir name by gathering the pathname and substract it with the last '/'.
|
||||||
|
var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
|
||||||
|
|
||||||
/****************************************/
|
/****************************************/
|
||||||
/* functions */
|
/* functions */
|
||||||
/****************************************/
|
/****************************************/
|
||||||
|
@ -81,5 +89,5 @@ function concatPath(slashNum, basePath)
|
||||||
/****************************************/
|
/****************************************/
|
||||||
|
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
load("../components/navbar.html", document.getElementsByTagName("Navbar")[0], concatPath(getSlashNum(window.location.pathname)-1,"js/navbar.js"), this.document.getElementsByTagName("head")[0]);
|
load(urlStr+"components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr+"js/navbar.js", this.document.getElementsByTagName("head")[0]);
|
||||||
})
|
})
|
30
js/navbar.js
30
js/navbar.js
|
@ -75,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 navbarDropdown) {
|
for (var dropdownClass of navbarDropdown) {
|
||||||
dropdownClass.style.display = "none";
|
dropdownClass.style.display = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -84,25 +84,35 @@ function resetNavbar() {
|
||||||
/* main */
|
/* main */
|
||||||
/****************************************/
|
/****************************************/
|
||||||
|
|
||||||
|
//Setting the logo URL
|
||||||
|
document.getElementsByClassName("navbar_logo")[0].src = urlStr+"/assets/Logo.png";
|
||||||
|
|
||||||
//Setting the href links for in directory links
|
//Setting the href links for in directory links
|
||||||
var dropdownCount = 0;
|
var urlOffset = urlStr.length
|
||||||
|
//if dir found, we apply the dir offset + '/' (1 char)
|
||||||
|
if(dirStr.length > 1)
|
||||||
|
{
|
||||||
|
urlOffset = urlOffset + dirStr.length + 1;
|
||||||
|
}
|
||||||
|
//dor evry dropdown of the navbar we check each <a>
|
||||||
for(var dropdown of navbarDropdown)
|
for(var dropdown of navbarDropdown)
|
||||||
{
|
{
|
||||||
for(var aTagDropdown of dropdown.children)
|
for(var aTagDropdown of dropdown.children)
|
||||||
{
|
{
|
||||||
aTagDropdown.href = concatPath(getSlashNum(window.location.pathname)-1,dropdownLinks[dropdownCount]);
|
//We slice the href with the url and the directory offset
|
||||||
dropdownCount++;
|
var pathStr = aTagDropdown.href.slice(urlOffset,aTagDropdown.href.length);
|
||||||
|
//We then put again the url and the path we want
|
||||||
|
aTagDropdown.href = urlStr+pathStr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
dropdownCount = 0;
|
//We do the same but with aTag replacing aTagDropdown, each <a> of the aTagList
|
||||||
for(var aTag of aTagList)
|
for(var aTag of aTagList)
|
||||||
{
|
{
|
||||||
console.log(aTag);
|
//only aTag that are not blank (=#0) are affected
|
||||||
if(!(aTag.href.includes("#0")))
|
if(!(aTag.href.includes("#0")))
|
||||||
{
|
{
|
||||||
console.log(aTag);
|
var pathStr = aTag.href.slice(urlOffset,aTag.href.length);
|
||||||
aTag.href = concatPath(getSlashNum(window.location.pathname)-1,containerLinks[dropdownCount]);
|
aTag.href = urlStr+pathStr;
|
||||||
dropdownCount++;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -153,7 +163,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 navbarDropdown) {
|
for (var dropdownClass of navbarDropdown) {
|
||||||
clickState |= dropdownClass.contains(e.target);
|
clickState |= dropdownClass.contains(e.target);
|
||||||
}
|
}
|
||||||
for (aTag of aTagList) {
|
for (aTag of aTagList) {
|
||||||
|
|
Loading…
Add table
Reference in a new issue