TaroTime/app/ui-navigation.js

(function () {
  "use strict";

  let config = {};
  let initialized = false;

  function getActiveSection() {
    return typeof config.getActiveSection === "function"
      ? config.getActiveSection()
      : "home";
  }

  function setActiveSection(section) {
    config.setActiveSection?.(section);
  }

  function getReferenceData() {
    return config.getReferenceData?.() || null;
  }

  function getMagickDataset() {
    return config.getMagickDataset?.() || null;
  }

  function bindClick(element, handler) {
    if (!element) {
      return;
    }

    element.addEventListener("click", handler);
  }

  function bindTopLevelNavButtons() {
    const elements = config.elements || {};

    bindClick(elements.openHomeEl, () => {
      setActiveSection("home");
    });

    bindClick(elements.openAudioEl, () => {
      const activeSection = getActiveSection();
      const isAudioSectionActive = activeSection === "audio-notes" || activeSection === "audio-circle";
      setActiveSection(isAudioSectionActive ? "home" : "audio-notes");
    });

    bindClick(elements.openAudioCircleEl, () => {
      setActiveSection("audio-circle");
    });

    bindClick(elements.openAudioNotesEl, () => {
      setActiveSection("audio-notes");
    });

    bindClick(elements.openTarotEl, () => {
      if (getActiveSection() === "tarot") {
        setActiveSection("home");
      } else {
        setActiveSection("tarot");
        config.tarotSpreadUi?.showCardsView?.();
      }
    });

    bindClick(elements.openTarotHouseEl, () => {
      setActiveSection(getActiveSection() === "tarot-house" ? "home" : "tarot-house");
    });

    bindClick(elements.openAstronomyEl, () => {
      setActiveSection(getActiveSection() === "astronomy" ? "home" : "astronomy");
    });

    bindClick(elements.openPlanetsEl, () => {
      setActiveSection(getActiveSection() === "planets" ? "home" : "planets");
    });

    bindClick(elements.openCyclesEl, () => {
      setActiveSection(getActiveSection() === "cycles" ? "home" : "cycles");
    });

    bindClick(elements.openElementsEl, () => {
      setActiveSection(getActiveSection() === "elements" ? "home" : "elements");
    });

    bindClick(elements.openIChingEl, () => {
      setActiveSection(getActiveSection() === "iching" ? "home" : "iching");
    });

    bindClick(elements.openKabbalahEl, () => {
      setActiveSection(getActiveSection() === "kabbalah" ? "home" : "kabbalah");
    });

    bindClick(elements.openKabbalahTreeEl, () => {
      setActiveSection(getActiveSection() === "kabbalah-tree" ? "home" : "kabbalah-tree");
    });

    bindClick(elements.openKabbalahCubeEl, () => {
      setActiveSection(getActiveSection() === "cube" ? "home" : "cube");
    });

    bindClick(elements.openAlphabetEl, () => {
      setActiveSection(getActiveSection() === "alphabet" ? "home" : "alphabet");
    });

    bindClick(elements.openAlphabetLettersEl, () => {
      setActiveSection(getActiveSection() === "alphabet-letters" ? "home" : "alphabet-letters");
    });

    bindClick(elements.openAlphabetTextEl, () => {
      setActiveSection(getActiveSection() === "alphabet-text" ? "home" : "alphabet-text");
    });

    bindClick(elements.openNumbersEl, () => {
      setActiveSection(getActiveSection() === "numbers" ? "home" : "numbers");
    });

    bindClick(elements.openZodiacEl, () => {
      setActiveSection(getActiveSection() === "zodiac" ? "home" : "zodiac");
    });

    bindClick(elements.openNatalEl, () => {
      setActiveSection(getActiveSection() === "natal" ? "home" : "natal");
    });

    bindClick(elements.openQuizEl, () => {
      setActiveSection(getActiveSection() === "quiz" ? "home" : "quiz");
    });

    bindClick(elements.openGodsEl, () => {
      setActiveSection(getActiveSection() === "gods" ? "home" : "gods");
    });

    bindClick(elements.openEnochianEl, () => {
      setActiveSection(getActiveSection() === "enochian" ? "home" : "enochian");
    });

    bindClick(elements.openCalendarEl, () => {
      const activeSection = getActiveSection();
      const isCalendarMenuActive = activeSection === "timeline" || activeSection === "calendar" || activeSection === "holidays";
      setActiveSection(isCalendarMenuActive ? "home" : "timeline");
    });

    bindClick(elements.openCalendarTimelineEl, () => {
      setActiveSection(getActiveSection() === "timeline" ? "home" : "timeline");
    });

    bindClick(elements.openCalendarMonthsEl, () => {
      setActiveSection(getActiveSection() === "calendar" ? "home" : "calendar");
    });

    bindClick(elements.openHolidaysEl, () => {
      setActiveSection(getActiveSection() === "holidays" ? "home" : "holidays");
    });
  }

  function bindCustomNavEvents() {
    const ensure = config.ensure || {};

    document.addEventListener("nav:cube", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      if (typeof ensure.ensureCubeSection === "function" && magickDataset) {
        ensure.ensureCubeSection(magickDataset, referenceData);
      }

      setActiveSection("cube");

      const detail = event?.detail || {};
      requestAnimationFrame(() => {
        const ui = window.CubeSectionUi;
        const selected = ui?.selectPlacement?.(detail);
        if (!selected && detail?.wallId) {
          ui?.selectWallById?.(detail.wallId);
        }
      });
    });

    document.addEventListener("nav:zodiac", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      if (typeof ensure.ensureZodiacSection === "function" && referenceData && magickDataset) {
        ensure.ensureZodiacSection(referenceData, magickDataset);
      }
      setActiveSection("zodiac");
      const signId = event?.detail?.signId;
      if (signId) {
        requestAnimationFrame(() => {
          window.ZodiacSectionUi?.selectBySignId?.(signId);
        });
      }
    });

    document.addEventListener("nav:alphabet", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      if (typeof ensure.ensureAlphabetSection === "function" && magickDataset) {
        ensure.ensureAlphabetSection(magickDataset, referenceData);
      }
      setActiveSection("alphabet-letters");

      const alphabet = event?.detail?.alphabet;
      const hebrewLetterId = event?.detail?.hebrewLetterId;
      const greekName = event?.detail?.greekName;
      const englishLetter = event?.detail?.englishLetter;
      const arabicName = event?.detail?.arabicName;
      const enochianId = event?.detail?.enochianId;

      requestAnimationFrame(() => {
        const ui = window.AlphabetSectionUi;
        if ((alphabet === "hebrew" || (!alphabet && hebrewLetterId)) && hebrewLetterId) {
          ui?.selectLetterByHebrewId?.(hebrewLetterId);
          return;
        }
        if (alphabet === "greek" && greekName) {
          ui?.selectGreekLetterByName?.(greekName);
          return;
        }
        if (alphabet === "english" && englishLetter) {
          ui?.selectEnglishLetter?.(englishLetter);
          return;
        }
        if (alphabet === "arabic" && arabicName) {
          ui?.selectArabicLetter?.(arabicName);
          return;
        }
        if (alphabet === "enochian" && enochianId) {
          ui?.selectEnochianLetter?.(enochianId);
        }
      });
    });

    document.addEventListener("nav:number", (event) => {
      const rawValue = event?.detail?.value;
      const normalizedValue = typeof config.normalizeNumberValue === "function"
        ? config.normalizeNumberValue(rawValue)
        : 0;
      if (normalizedValue === null) {
        return;
      }

      setActiveSection("numbers");
      requestAnimationFrame(() => {
        if (typeof config.selectNumberEntry === "function") {
          config.selectNumberEntry(normalizedValue);
        }
      });
    });

    document.addEventListener("nav:iching", (event) => {
      const referenceData = getReferenceData();
      if (typeof ensure.ensureIChingSection === "function" && referenceData) {
        ensure.ensureIChingSection(referenceData);
      }

      setActiveSection("iching");

      const hexagramNumber = event?.detail?.hexagramNumber;
      const planetaryInfluence = event?.detail?.planetaryInfluence;

      requestAnimationFrame(() => {
        const ui = window.IChingSectionUi;
        if (hexagramNumber != null) {
          ui?.selectByHexagramNumber?.(hexagramNumber);
          return;
        }
        if (planetaryInfluence) {
          ui?.selectByPlanetaryInfluence?.(planetaryInfluence);
        }
      });
    });

    document.addEventListener("nav:gods", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      if (typeof ensure.ensureGodsSection === "function" && magickDataset) {
        ensure.ensureGodsSection(magickDataset, referenceData);
      }
      setActiveSection("gods");
      const godId = event?.detail?.godId;
      const godName = event?.detail?.godName;
      const pathNo = event?.detail?.pathNo;
      requestAnimationFrame(() => {
        const ui = window.GodsSectionUi;
        const viaId = godId ? ui?.selectById?.(godId) : false;
        const viaName = !viaId && godName ? ui?.selectByName?.(godName) : false;
        if (!viaId && !viaName && pathNo != null) {
          ui?.selectByPathNo?.(pathNo);
        }
      });
    });

    document.addEventListener("nav:calendar-month", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      const calendarId = event?.detail?.calendarId;
      const monthId = event?.detail?.monthId;
      if (!monthId) {
        return;
      }

      if (typeof ensure.ensureCalendarSection === "function" && referenceData) {
        ensure.ensureCalendarSection(referenceData, magickDataset);
      }

      setActiveSection("calendar");

      requestAnimationFrame(() => {
        if (calendarId) {
          window.CalendarSectionUi?.selectCalendarType?.(calendarId);
        }
        window.CalendarSectionUi?.selectByMonthId?.(monthId);
      });
    });

    document.addEventListener("nav:kabbalah-path", (event) => {
      const magickDataset = getMagickDataset();
      const pathNo = event?.detail?.pathNo;
      if (typeof ensure.ensureKabbalahSection === "function" && magickDataset) {
        ensure.ensureKabbalahSection(magickDataset);
      }
      setActiveSection("kabbalah-tree");
      if (pathNo != null) {
        requestAnimationFrame(() => {
          window.KabbalahSectionUi?.selectNode?.(pathNo);
        });
      }
    });

    document.addEventListener("nav:planet", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      const planetId = event?.detail?.planetId;
      if (!planetId) {
        return;
      }
      if (typeof ensure.ensurePlanetSection === "function" && referenceData) {
        ensure.ensurePlanetSection(referenceData, magickDataset);
      }
      setActiveSection("planets");
      requestAnimationFrame(() => {
        window.PlanetSectionUi?.selectByPlanetId?.(planetId);
      });
    });

    document.addEventListener("nav:elements", (event) => {
      const magickDataset = getMagickDataset();
      const elementId = event?.detail?.elementId;
      if (!elementId) {
        return;
      }

      if (typeof ensure.ensureElementsSection === "function" && magickDataset) {
        ensure.ensureElementsSection(magickDataset);
      }

      setActiveSection("elements");

      requestAnimationFrame(() => {
        window.ElementsSectionUi?.selectByElementId?.(elementId);
      });
    });

    document.addEventListener("nav:tarot-trump", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      if (typeof ensure.ensureTarotSection === "function" && referenceData) {
        ensure.ensureTarotSection(referenceData, magickDataset);
      }
      setActiveSection("tarot");
      const { trumpNumber, cardName } = event?.detail || {};
      requestAnimationFrame(() => {
        if (trumpNumber != null) {
          window.TarotSectionUi?.selectCardByTrump?.(trumpNumber);
        } else if (cardName) {
          window.TarotSectionUi?.selectCardByName?.(cardName);
        }
      });
    });

    document.addEventListener("kab:view-trump", (event) => {
      const referenceData = getReferenceData();
      const magickDataset = getMagickDataset();
      setActiveSection("tarot");
      const trumpNumber = event?.detail?.trumpNumber;
      if (trumpNumber != null) {
        if (typeof ensure.ensureTarotSection === "function" && referenceData) {
          ensure.ensureTarotSection(referenceData, magickDataset);
        }
        requestAnimationFrame(() => {
          window.TarotSectionUi?.selectCardByTrump?.(trumpNumber);
        });
      }
    });

    document.addEventListener("tarot:view-kab-path", (event) => {
      setActiveSection("kabbalah-tree");
      const pathNumber = event?.detail?.pathNumber;
      if (pathNumber != null) {
        requestAnimationFrame(() => {
          const kabbalahUi = window.KabbalahSectionUi;
          if (typeof kabbalahUi?.selectNode === "function") {
            kabbalahUi.selectNode(pathNumber);
          } else {
            kabbalahUi?.selectPathByNumber?.(pathNumber);
          }
        });
      }
    });
  }

  function init(nextConfig = {}) {
    config = {
      ...config,
      ...nextConfig,
      elements: {
        ...(config.elements || {}),
        ...(nextConfig.elements || {})
      },
      ensure: {
        ...(config.ensure || {}),
        ...(nextConfig.ensure || {})
      }
    };

    if (initialized) {
      return;
    }

    initialized = true;
    bindTopLevelNavButtons();
    bindCustomNavEvents();
  }

  window.TarotNavigationUi = {
    ...(window.TarotNavigationUi || {}),
    init
  };
})();