تقويم Discourse (والحدث)

إضافة
, ,
535

إذا كنت ترغب في إظهار زر إنشاء حدث من المنشئ مباشرةً كما هو موضح أدناه، فاستخدم الكود أدناه في رأس السمة الخاصة بك. admin>appearance>theme>edit>edit code>head (تأكد من وضعه بين علامتي <head> و </head>)

تم الاختبار على discourse 3.5.0.beta9-dev على سطح المكتب في فايرفوكس

image
image1374×620 52.4 KB

 <!-- زر إنشاء حدث مخصص (يعتمد على الأيقونة، مقاوم للغة) -->
<script>
(() => {
    const editorButtonContainerSelector = ".d-editor-button-bar";
    const calendarButtonSelector = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
    const menuInnerContentSelector = ".fk-d-menu__inner-content";
    const menuModalSelector = ".d-modal.fk-d-menu-modal";

    const getCalendarButton = (container) => {
        const svgIcon = container.querySelector('svg use[href="#calendar-day"]');
        return svgIcon ? svgIcon.closest("button") : null;
    };

    const waitForElement = (selector, findFn, timeout = 4000) =>
        new Promise((resolve, reject) => {
            const element = findFn(selector);
            if (element) return resolve(element);

            const observer = new MutationObserver(() => {
                const foundElement = findFn(selector);
                if (foundElement) {
                    observer.disconnect();
                    resolve(foundElement);
                }
            });
            observer.observe(document.body, { childList: true, subtree: true });
            setTimeout(() => {
                observer.disconnect();
                reject();
            }, timeout);
        });

    const waitForMenuModal = (timeout = 4000) => {
        const observer = new MutationObserver(() => {
            if (document.querySelector(menuModalSelector)) {
                observer.disconnect();
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => observer.disconnect(), timeout);
    };

    const addCustomCreateEventButton = (container) => {
        if (container.querySelector(".custom-create-event-btn")) return;

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

        button.addEventListener("click", async () => {
            const calendarButton = document.querySelector(calendarButtonSelector);
            if (!calendarButton) return;
            calendarButton.click();

            let menuContent = document.querySelector(menuInnerContentSelector);
            if (!menuContent) {
                await new Promise((resolve, reject) => {
                    const observer = new MutationObserver(() => {
                        menuContent = document.querySelector(menuInnerContentSelector);
                        if (menuContent) {
                            observer.disconnect();
                            resolve();
                        }
                    });
                    observer.observe(document.body, { childList: true, subtree: true });
                    setTimeout(() => {
                        observer.disconnect();
                        reject();
                    }, 2000);
                });
            }

            try {
                (await waitForElement(menuInnerContentSelector, (sel) => document.querySelector(sel)))
                    .click();
                waitForMenuModal();
            } catch {
                // Handle error if needed
            }
        });
    };

    const observer = new MutationObserver(() => {
        const editorContainer = document.querySelector(editorButtonContainerSelector);
        if (editorContainer) {
            addCustomCreateEventButton(editorContainer);
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });

    const initialEditorContainer = document.querySelector(editorButtonContainerSelector);
    if (initialEditorContainer) {
        addCustomCreateEventButton(initialEditorContainer);
    }
})();
</script>