refactoring

app/ui-navigation.js

@@ -0,0 +1,402 @@
+(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.openTarotEl, () => {
+      if (getActiveSection() === "tarot") {
+        setActiveSection("home");
+      } else {
+        setActiveSection("tarot");
+        config.tarotSpreadUi?.showCardsView?.();
+      }
+    });
+
+    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.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 === "calendar" || activeSection === "holidays";
+      setActiveSection(isCalendarMenuActive ? "home" : "calendar");
+    });
+
+    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");
+
+      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
+  };
+})();