Calendrier Discourse (et Événement)

Greffon
, ,
535

Si vous souhaitez afficher le bouton Créer un événement directement à partir de l’éditeur, comme ci-dessous, utilisez le code ci-dessous dans l’en-tête de votre thème. admin > apparence > thème > modifier > modifier le code > head (assurez-vous qu’il est placé entre les balises <head>...</head>)

Testé sur discourse 3.5.0.beta9-dev sur ordinateur de bureau dans Firefox

image
image1374×620 52.4 KB

    <!-- Bouton personnalisé Créer un événement (basé sur une icône, indépendant de la langue) -->
    <script>
    (() => {
        const composerSelector = ".d-editor-button-bar";
        const menuTriggerSelector = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
        const menuContentSelector = ".fk-d-menu__inner-content";
        const modalSelector = ".d-modal.fk-d-menu-modal";

        // Fonction pour trouver le bouton de menu existant qui ouvre le menu du calendrier
        const findCalendarMenuButton = (container) => {
            const calendarIcon = container.querySelector('svg use[href="#calendar-day"]');
            return calendarIcon ? calendarIcon.closest("button") : null;
        };

        // Fonction pour attendre qu'un élément apparaisse ou qu'un délai d'attente soit atteint
        const waitForElement = (container, selectorFn, timeout = 4000) =>
            new Promise((resolve, reject) => {
                const element = selectorFn(container);
                if (element) return resolve(element);

                const observer = new MutationObserver(() => {
                    const foundElement = selectorFn(container);
                    if (foundElement) {
                        observer.disconnect();
                        resolve(foundElement);
                    }
                });
                observer.observe(container, { childList: true, subtree: true });
                setTimeout(() => {
                    observer.disconnect();
                    reject(new Error("Element not found within timeout"));
                }, timeout);
            });

        // Fonction pour attendre que la fenêtre modale du menu apparaisse
        const waitForModal = (timeout = 4000) => {
            const observer = new MutationObserver(() => {
                if (document.querySelector(modalSelector)) {
                    observer.disconnect();
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
            setTimeout(() => observer.disconnect(), timeout);
        };

        // Fonction pour ajouter le bouton personnalisé et gérer son clic
        const addCustomCreateEventButton = (container) => {
            if (container.querySelector(".custom-create-event-btn")) return;

            const newButton = document.createElement("button");
            newButton.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
            newButton.title = "Create event"; // Texte alternatif pour l'accessibilité
            newButton.innerHTML = `
                <svg class="fa d-icon d-icon-calendar-day svg-icon">
                    <use href="#calendar-day"></use>
                </svg>
            `;
            container.appendChild(newButton);

            newButton.addEventListener("click", async () => {
                const menuTrigger = document.querySelector(menuTriggerSelector);
                if (!menuTrigger) return;

                menuTrigger.click(); // Ouvre le menu des options

                let menuContent = document.querySelector(menuContentSelector);
                if (!menuContent) {
                    // Attend que le contenu du menu apparaisse s'il n'est pas immédiatement disponible
                    await new Promise((resolve, reject) => {
                        const observer = new MutationObserver(() => {
                            menuContent = document.querySelector(menuContentSelector);
                            if (menuContent) {
                                observer.disconnect();
                                resolve();
                            }
                        });
                        observer.observe(document.body, { childList: true, subtree: true });
                        setTimeout(() => {
                            observer.disconnect();
                            reject(new Error("Menu content not found within timeout"));
                        }, 2000);
                    });
                }

                try {
                    // Clique sur l'élément du menu qui ouvre le modal de création d'événement
                    await waitForElement(menuContent, findCalendarMenuButton);
                    const calendarButton = findCalendarMenuButton(menuContent);
                    if (calendarButton) {
                        calendarButton.click();
                        waitForModal(); // Attend que le modal de création d'événement apparaisse
                    }
                } catch (error) {
                    console.error("Error clicking calendar menu item:", error);
                }
            });
        };

        // Observe les changements dans le DOM pour trouver le conteneur de l'éditeur et y ajouter le bouton
        const observer = new MutationObserver(() => {
            const composerContainer = document.querySelector(composerSelector);
            if (composerContainer) {
                addCustomCreateEventButton(composerContainer);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });

        // Ajoute le bouton si le conteneur de l'éditeur est déjà présent au chargement initial
        const initialComposerContainer = document.querySelector(composerSelector);
        if (initialComposerContainer) {
            addCustomCreateEventButton(initialComposerContainer);
        }
    })();
    </script>