51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
/******/ (() => { // webpackBootstrap
|
|
var __webpack_exports__ = {};
|
|
/*!*************************!*\
|
|
!*** ./src/frontend.js ***!
|
|
\*************************/
|
|
window.addEventListener("DOMContentLoaded", event => {
|
|
// GETTING ELEMENTS FROM THE DOM
|
|
const vocabulaireSummary = document.querySelector(".homegrade-blocks-vocabulaire-summary");
|
|
const wordsDetails = vocabulaireSummary.querySelectorAll("details");
|
|
function openAccordion(wordDetail) {
|
|
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
|
|
let contentDefinitionParagraph = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content");
|
|
wordDetail.setAttribute("open", "true");
|
|
wordDetail.setAttribute("is_opening", "");
|
|
contentDefinitionWrapper.style.height = contentDefinitionParagraph.offsetHeight + "px";
|
|
// remove is opening after css transition
|
|
|
|
wordDetail.addEventListener("transitionend", () => {
|
|
wordDetail.removeAttribute("is_opening");
|
|
});
|
|
}
|
|
function closeAccordion(wordDetail) {
|
|
let contentDefinitionWrapper = wordDetail.querySelector(".homegrade-blocks-vocabulaire-summary__content-wrapper");
|
|
contentDefinitionWrapper.style.height = "0px";
|
|
setTimeout(() => {
|
|
wordDetail.removeAttribute("open");
|
|
}, 300);
|
|
}
|
|
// HANDLING CLICK
|
|
function toggleActive(wordDetail) {
|
|
let isOpen = wordDetail.getAttribute("open");
|
|
let isOpening = wordDetail.getAttribute("is_opening");
|
|
if (isOpen == null && isOpening == null) {
|
|
openAccordion(wordDetail);
|
|
}
|
|
if (isOpen == "true") {
|
|
closeAccordion(wordDetail);
|
|
}
|
|
}
|
|
|
|
// HANDLING CLICK
|
|
Array.from(wordsDetails).forEach(wordDetail => {
|
|
wordDetail.addEventListener("click", event => {
|
|
event.preventDefault();
|
|
toggleActive(wordDetail);
|
|
});
|
|
});
|
|
});
|
|
/******/ })()
|
|
;
|
|
//# sourceMappingURL=frontend.js.map
|