ldc-le-gaulois-pro/resources/ts/fo/common.ts

import * as printJS from "print-js";

window.addEventListener("DOMContentLoaded", () => {
    // BOUTON HAMBURGER
    const toggleBtn = document.querySelector(
        "button.navbar-toggler"
    ) as HTMLButtonElement | null;

    if (toggleBtn) {
        toggleBtn.addEventListener("click", (e: MouseEvent) => {
            e.preventDefault();

            const iconToggle = document.querySelector(
                "span.navbar-toggler-icon"
            ) as HTMLSpanElement | null;
            if (iconToggle) {
                iconToggle.classList.toggle("close");
            }

            const menuNavbar = document.querySelector(
                "div.navbar-details"
            ) as HTMLDivElement | null;
            if (menuNavbar) {
                menuNavbar.classList.toggle("active");
            }
        });
    }

    // ON AFFICHE OU ON CACHE LES SOUS-MENUS DU HEADER
    const eltsNavbar = document.getElementsByClassName(
        "nav-item"
    ) as HTMLCollectionOf<HTMLLIElement>;

    const collapseMainMenuItems = () => {
        for (const eltNavBar of eltsNavbar) {
            eltNavBar.classList.remove("active");
        }
    };
    collapseMainMenuItems();

    for (const eltNavBar of eltsNavbar) {
        eltNavBar.addEventListener("mouseover", function () {
            // const isActivated = this.classList.contains("active");
            collapseMainMenuItems();
            // if (!isActivated) {
            this.classList.add("active");
            // }
        });
    }

    // Affichage de la zone de texte de recherche
    const searchBtn = document.querySelector(
        "div.search-butn"
    ) as HTMLButtonElement | null;

    if (searchBtn) {
        searchBtn.addEventListener("click", (e: MouseEvent) => {
            e.preventDefault();
            const searchInput = document.getElementById(
                "search-input"
            ) as HTMLInputElement | null;
            if (searchInput) {
                searchInput.style.display = "block";
                searchInput.focus();
            }
        });
    }

    // CHOIX FOOTER
    const footerMenu = document.querySelector(
        "footer .deactivatable"
    ) as HTMLButtonElement | null;

    if (footerMenu) {
        footerMenu.addEventListener("click", (e: MouseEvent) => {
            e.preventDefault();

            footerMenu.classList.toggle("active");
        });
    }

    // FILTER PANEL
    // Au click du bouton de filtrage, on affiche le panneau des filtres
    const btnDisplayPanel = document.querySelector(
        ".butn-filter"
    ) as HTMLButtonElement | null;

    if (btnDisplayPanel) {
        btnDisplayPanel.addEventListener("click", function () {
            const panelElt = document.querySelector(
                ".panel-wrapper"
            ) as HTMLDivElement | null;
            if (panelElt) {
                panelElt.style.visibility = "visible";
                panelElt.style.opacity = "1";
            }
        });
    }

    // Au click du bouton de fermeture, on n'affiche plus le panneau des filtres
    const btnClosePanel = document.querySelector(
        ".close-filter-panel-btn"
    ) as HTMLButtonElement | null;

    if (btnClosePanel) {
        btnClosePanel.addEventListener("click", function () {
            const panelElt = document.querySelector(
                ".panel-wrapper"
            ) as HTMLDivElement | null;
            if (panelElt) {
                panelElt.style.visibility = "hidden";
                panelElt.style.opacity = "0";
            }
        });
    }

    // PAGE NOS ACTUALITES
    // ON AFFICHE OU ON CACHE LES SOUS-MENUS DU HEADER
    const eltsBtnFilter = document.getElementsByClassName(
        "btn-filter"
    ) as HTMLCollectionOf<HTMLButtonElement>;
    const eltsInputFilter = document.getElementsByClassName(
        "input-filter"
    ) as HTMLCollectionOf<HTMLInputElement>;

    for (let i = 0; i < eltsBtnFilter.length; i++) {
        eltsBtnFilter[i].addEventListener("click", function () {
            this.classList.toggle("active");
            if (i == 0) {
                for (let i = 1; i < eltsBtnFilter.length; i++) {
                    eltsBtnFilter[i].classList.remove("active");
                    eltsInputFilter[i].checked = false;
                }
            } else {
                eltsBtnFilter[0].classList.remove("active");
                eltsInputFilter[0].checked = false;
            }
        });
    }

    // PAGE CONTACT
    // Au survol du container de la liste de déroulement "Votre activité",
    // on affiche la liste des options
    const containerActivity = document.querySelector(
        ".contact-activity-container"
    ) as HTMLDivElement | null;
    const optionWrapper = document.querySelector(
        ".option-activity-container"
    ) as HTMLButtonElement | null;

    if (containerActivity && optionWrapper) {
        containerActivity.addEventListener("mouseover", function () {
            this.classList.add("active");
        });
        containerActivity.addEventListener("mouseout", function () {
            this.classList.remove("active");
        });
    }
    // Au click d'une option de la liste déroulante, on la met dans l'input text
    const eltsItemsOption = document.getElementsByClassName(
        "option-activity-item"
    ) as HTMLCollectionOf<HTMLLIElement>;

    for (const eltItemsOption of eltsItemsOption) {
        eltItemsOption.addEventListener("click", function () {
            const inputActivity = document.querySelector(
                ".input-activity"
            ) as HTMLInputElement | null;
            if (containerActivity && inputActivity) {
                containerActivity.classList.remove("active");
                inputActivity.value = String(eltItemsOption.textContent);
            }
        });
    }

    // Au click d'une checkbox, on toggle la classe "checked" sur le label associé
    const eltsContainerContactProd = document.getElementsByClassName(
        "contact-prod-container"
    ) as HTMLCollectionOf<HTMLDivElement>;
    const eltsLabelChkContactProd = document.getElementsByClassName(
        "label-contact-prod"
    ) as HTMLCollectionOf<HTMLLabelElement>;

    for (const item of eltsLabelChkContactProd) {
        item.addEventListener("click", function () {
            item.classList.toggle("checked");
            const isActivated = this.classList.contains("checked");
            if (!isActivated) {
                if (item.parentElement) {
                    item.parentElement.remove();
                }
            }
        });
    }

    const eltsButtonPrintProd = document.getElementsByClassName(
        "btn-printing"
    ) as HTMLCollectionOf<HTMLButtonElement>,
        businessSheet = document.querySelector(
            ".business-wrap"
        ) as HTMLDivElement | null;

    // @ts-ignore
    window.printJS = printJS;

    for (const eltButtonPrintProd of eltsButtonPrintProd) {
        eltButtonPrintProd.addEventListener("click", function () {
            if (businessSheet) {
                setTimeout(() => {
                    // ! Seule solution: imprimer un pdf spécifique pour avoir le rendu souhaité.
                    printJS({
                        printable:
                            window.location.pathname +
                            "/print-commercial-sheet",
                        type: "pdf",
                        showModal: true,
                    });
                });
            } else {
                console.error(
                    "Could not find business sheet, printing window."
                );
                window.print();
            }
        });
    }

    // OVERRIDE BOOTSTRAP
});