mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-10-01 02:49:42 +00:00
105 lines
2.4 KiB
JavaScript
105 lines
2.4 KiB
JavaScript
/*
|
|
* Remove active class on both elements: link and content
|
|
*/
|
|
let resetActive = function (links, contents) {
|
|
for (items of [links, contents]) {
|
|
items.forEach(function (item) {
|
|
if (item.classList.contains("active")) {
|
|
item.classList.remove("active");
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
/*
|
|
* Count links array and return rank of given link
|
|
*/
|
|
let countNewActive = function (links, link) {
|
|
let rank = 0;
|
|
for (let i = 0; i < links.length; ++i) {
|
|
rank++;
|
|
if (links[i] == link) {
|
|
return rank;
|
|
}
|
|
}
|
|
};
|
|
|
|
/*
|
|
* Set class active on both new elements: link and content
|
|
*/
|
|
let setNewActive = function (links, contents, rank) {
|
|
if (!links[rank - 1]) {
|
|
rank = 1;
|
|
}
|
|
link = links[rank - 1];
|
|
|
|
link.classList.add("active");
|
|
|
|
count = 0;
|
|
contents.forEach(function (pane) {
|
|
count++;
|
|
if (rank == count) {
|
|
pane.classList.add("active");
|
|
}
|
|
});
|
|
};
|
|
|
|
/*
|
|
* Set height of content pane
|
|
*/
|
|
let setPaneHeight = function (contents) {
|
|
contents.forEach(function (pane) {
|
|
// let computedStyle = getComputedStyle(pane);
|
|
// console.log(computedStyle.height);
|
|
// comment prendre la hauteur d'une div masquée avec display:none
|
|
});
|
|
};
|
|
|
|
/*
|
|
* Check if links are defined in controller
|
|
* If true, disable javascript listener
|
|
*/
|
|
let isLinkRef = function (link) {
|
|
if (link.getAttribute("href") == "#") {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
/*
|
|
* Main function
|
|
*/
|
|
window.addEventListener("load", function () {
|
|
tabParams.forEach(function (unit) {
|
|
let tabPanel = document.querySelector("#" + unit.id);
|
|
if (tabPanel) {
|
|
let nav = tabPanel.querySelector("nav"),
|
|
tabs = nav.querySelectorAll("ul.nav-tabs li.nav-item"),
|
|
links = nav.querySelectorAll("ul.nav-tabs li.nav-item a.nav-link"),
|
|
contents = tabPanel.querySelectorAll("div.tab-content div.tab-pane");
|
|
if (unit.type == "pill") {
|
|
tabPanel.classList.add("pills");
|
|
}
|
|
|
|
if (!unit.initPane) {
|
|
unit.initPane = 1;
|
|
}
|
|
|
|
setPaneHeight(contents);
|
|
|
|
// initial position
|
|
setNewActive(links, contents, unit.initPane);
|
|
|
|
// listen
|
|
links.forEach(function (link) {
|
|
if (isLinkRef(link) == false) {
|
|
link.addEventListener("click", function () {
|
|
resetActive(links, contents);
|
|
setNewActive(links, contents, countNewActive(links, link));
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|