コンポーザーツールバーのカスタマイズ方法は？

[opcourdis]

こんにちは。

「イベント作成アイコン」は、+メニューの右外側に配置されていますが、以下の手順で左側に配置できます。

1. 管理画面の「表示」＞「テーマ」＞「編集」＞「コードを編集」＞「head」で、お使いのテーマのヘッダーに以下のJavaScriptを追加します。

<!-- カスタムイベント作成ボタン（アイコンベース、言語対応） -->
<script>
(() => {
  const editorBarSelector = ".d-editor-button-bar";
  const triggerSelector = ".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 modalSelector = ".d-modal.fk-d-menu-modal";

  const getCreateEventButton = (container) => {
    const svgUse = container.querySelector('svg use[href="#calendar-day"]');
    return svgUse ? svgUse.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 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);
  };

  const addCustomCreateEventButton = (editorBar) => {
    if (editorBar.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>';
    editorBar.appendChild(button);

    button.addEventListener("click", async () => {
      const trigger = document.querySelector(triggerSelector);
      if (!trigger) return;
      trigger.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(menuContent, getCreateEventButton)).click();
        waitForModal();
      } catch {
        // エラー処理
      }
    });
  };

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

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

2. 同じ管理ページにある「CSS」タブで、以下を追加します。

.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }

3. ボーナス：このボタンを特定のカテゴリのみに表示したい場合は、上記のスクリプトを適用し、条件をカテゴリ名に合わせて変更してください。
   Discourse Calendar (and Event) - #547 by opcourdis