From e18ec31cf99a3fb0235f6bec011752a6f02d67dc Mon Sep 17 00:00:00 2001 From: Nose Date: Fri, 24 Apr 2026 01:20:21 -0700 Subject: [PATCH] update commit message --- app/styles.css | 6 ++++ app/ui-alphabet-detail.js | 46 +++++++++++++------------------ app/ui-alphabet.js | 20 ++++++++++++-- app/ui-calendar-detail-panels.js | 36 +++++++++++++++--------- app/ui-calendar-detail.js | 45 ++++++++++++------------------ app/ui-cycles.js | 7 ++--- app/ui-holidays-render.js | 47 +++++++++++++------------------- app/ui-iching.js | 18 ++++++++---- app/ui-tarot-detail.js | 20 ++++++++++---- index.html | 18 ++++++------ 10 files changed, 141 insertions(+), 122 deletions(-) diff --git a/app/styles.css b/app/styles.css index a3a1abe..3e6436e 100644 --- a/app/styles.css +++ b/app/styles.css @@ -4386,6 +4386,12 @@ color: #e0d0ff; text-decoration-color: currentColor; } + .detail-inline-link.is-selected, + .detail-inline-link[aria-pressed="true"] { + color: #e0d0ff; + text-decoration-color: currentColor; + font-weight: 600; + } /* ── Alphabet section ────────────────────────────────────────────────── */ #alphabet-section, diff --git a/app/ui-alphabet-detail.js b/app/ui-alphabet-detail.js index d986d0a..9e1a50e 100644 --- a/app/ui-alphabet-detail.js +++ b/app/ui-alphabet-detail.js @@ -49,14 +49,13 @@ const countText = entries.length ? ` of ${entries.length}` : ""; const orderText = orderLabel ? ` (${orderLabel})` : ""; const reductionText = describeDigitalRootReduction(position, digitalRoot); - const openNumberBtn = context.navBtn(`View Number ${digitalRoot}`, "nav:number", { value: digitalRoot }); + const openNumberBtn = context.inlineNavBtn(`${digitalRoot}`, "nav:number", { value: digitalRoot }); return context.card("Position Digital Root", `
Position
#${position}${countText}${orderText}
-
Digital Root
${digitalRoot}${reductionText ? ` (${reductionText})` : ""}
+
Digital Root
${openNumberBtn}${reductionText ? ` (${reductionText})` : ""}
-
${openNumberBtn}
`); } @@ -74,12 +73,11 @@ } const monthButtons = monthRefs - .map((month) => context.navBtn(month.label || month.name, "nav:calendar-month", { "month-id": month.id })) - .join(""); + .map((month) => context.inlineNavBtn(month.label || month.name, "nav:calendar-month", { "month-id": month.id })) + .join(", "); return context.card("Calendar Months", ` -
${titleLabel}
-
${monthButtons}
+
${titleLabel} ${monthButtons}
`); } @@ -91,31 +89,25 @@ if (type === "planet") { const sym = context.PLANET_SYMBOLS[id] || ""; const cubePlacement = context.getCubePlacementForPlanet(id); - const cubeBtn = context.cubePlacementBtn(cubePlacement, { "planet-id": id }); + const cubeBtn = context.cubePlacementInlineBtn(cubePlacement, { "planet-id": id }); return context.card("Astrology", `
Type
Planet
-
Ruler
${sym} ${context.cap(id)}
+
Ruler
${sym} ${context.inlineNavBtn(context.cap(id), "nav:planet", { "planet-id": id })}
-
- - ${cubeBtn} -
+ ${cubeBtn ? `
Cube placement ${cubeBtn}
` : ""} `); } if (type === "zodiac") { const sym = context.ZODIAC_SYMBOLS[id] || ""; const cubePlacement = context.getCubePlacementForSign(id); - const cubeBtn = context.cubePlacementBtn(cubePlacement, { "sign-id": id }); + const cubeBtn = context.cubePlacementInlineBtn(cubePlacement, { "sign-id": id }); return context.card("Astrology", `
Type
Zodiac Sign
-
Sign
${sym} ${context.cap(id)}
+
Sign
${sym} ${context.inlineNavBtn(context.cap(id), "nav:zodiac", { "sign-id": id })}
-
- - ${cubeBtn} -
+ ${cubeBtn ? `
Cube placement ${cubeBtn}
` : ""} `); } if (type === "element") { @@ -163,7 +155,7 @@ const body = rows.map((entry) => { const pathBtn = Number.isFinite(Number(entry?.pathNumber)) - ? context.navBtn(`View Path ${entry.pathNumber}`, "nav:kabbalah-path", { "path-no": Number(entry.pathNumber) }) + ? context.inlineNavBtn(`Path ${entry.pathNumber}`, "nav:kabbalah-path", { "path-no": Number(entry.pathNumber) }) : ""; return ` @@ -174,7 +166,7 @@
${entry.worldLayer}${entry.worldDescription ? ` · ${entry.worldDescription}` : ""}
${entry.soulLayer}${entry.soulTitle ? ` — ${entry.soulTitle}` : ""}${entry.soulDescription ? `: ${entry.soulDescription}` : ""}
-
${pathBtn}
+ ${pathBtn ? `
Linked path ${pathBtn}
` : ""} `; }).join(""); @@ -393,21 +385,21 @@ const tarotPart = letter.tarot ? `
Tarot Card
${letter.tarot.card} (Trump ${letter.tarot.trumpNumber})
` : ""; - const kabBtn = context.navBtn("View Kabbalah Path", "tarot:view-kab-path", { "path-number": letter.kabbalahPathNumber }); + const kabBtn = context.inlineNavBtn(`Path ${letter.kabbalahPathNumber}`, "tarot:view-kab-path", { "path-number": letter.kabbalahPathNumber }); const tarotBtn = letter.tarot - ? context.navBtn("View Tarot Card", "kab:view-trump", { "trump-number": letter.tarot.trumpNumber }) + ? context.inlineNavBtn(letter.tarot.card, "kab:view-trump", { "trump-number": letter.tarot.trumpNumber }) : ""; const cubePlacement = context.getCubePlacementForHebrewLetter(letter.hebrewLetterId, letter.kabbalahPathNumber); - const cubeBtn = context.cubePlacementBtn(cubePlacement, { + const cubeBtn = context.cubePlacementInlineBtn(cubePlacement, { "hebrew-letter-id": letter.hebrewLetterId, "path-no": letter.kabbalahPathNumber }); sections.push(context.card("Kabbalah & Tarot", `
-
Path Number
${letter.kabbalahPathNumber}
- ${tarotPart} +
Path Number
${kabBtn}
+ ${letter.tarot ? `
Tarot Card
${tarotBtn} (Trump ${letter.tarot.trumpNumber})
` : ""}
-
${kabBtn}${tarotBtn}${cubeBtn}
+ ${cubeBtn ? `
Cube placement ${cubeBtn}
` : ""} `)); } diff --git a/app/ui-alphabet.js b/app/ui-alphabet.js index b153274..2cba150 100644 --- a/app/ui-alphabet.js +++ b/app/ui-alphabet.js @@ -296,11 +296,23 @@ return alphabetKabbalahUi.buildCubePlacementButton(placement, navBtn, fallbackDetail); } + function cubePlacementInlineBtn(placement, fallbackDetail = null) { + return alphabetKabbalahUi.buildCubePlacementButton(placement, inlineNavBtn, fallbackDetail); + } + function cap(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ""; } - function navBtn(label, event, detail) { + function buildNavButton(label, event, detail, className, suffix = "") { const attrs = Object.entries(detail).map(([k, v]) => `data-${k}="${v}"`).join(" "); - return ``; + return ``; + } + + function navBtn(label, event, detail) { + return buildNavButton(label, event, detail, "alpha-nav-btn", " ↗"); + } + + function inlineNavBtn(label, event, detail) { + return buildNavButton(label, event, detail, "detail-inline-link"); } function getDetailRenderContext(letter, alphabet) { @@ -317,6 +329,7 @@ HEBREW_DOUBLE_DUALITY, card, navBtn, + inlineNavBtn, cap, normalizeId, normalizeLetterId, @@ -324,6 +337,7 @@ getCubePlacementForSign, getCubePlacementForHebrewLetter, cubePlacementBtn, + cubePlacementInlineBtn, arabicDisplayName, enochianGlyphImageHtml, attachDetailListeners @@ -357,7 +371,7 @@ if (!detailBodyEl) return; // Nav buttons — generic: forward all data-* (except data-event) as the event detail - detailBodyEl.querySelectorAll(".alpha-nav-btn[data-event]").forEach((btn) => { + detailBodyEl.querySelectorAll(".alpha-nav-btn[data-event], .detail-inline-link[data-event]").forEach((btn) => { btn.addEventListener("click", () => { const evtName = btn.dataset.event; const detail = {}; diff --git a/app/ui-calendar-detail-panels.js b/app/ui-calendar-detail-panels.js index 2563413..a436cd1 100644 --- a/app/ui-calendar-detail-panels.js +++ b/app/ui-calendar-detail-panels.js @@ -19,6 +19,14 @@ return null; } + function inlineNavButton(label, nav, attrs = {}, extraClass = "") { + const dataAttrs = Object.entries(attrs) + .map(([key, value]) => `data-${key}="${value}"`) + .join(" "); + const className = ["detail-inline-link", extraClass].filter(Boolean).join(" "); + return ``; + } + function buildMajorArcanaRowsForMonth(context) { const { month, api, getState } = context; const currentState = getState(); @@ -142,10 +150,10 @@ ${row.rangeLabel}
${row.signSymbol} ${row.signName} · Hebrew: ${label}
-
- - - ${row.hebrewLetterId ? `` : ""} +
+ Days ${inlineNavButton(row.rangeLabel, "calendar-day-range", { "range-start": row.dayStart, "range-end": row.dayEnd })} + · Tarot ${inlineNavButton(displayCardName, "tarot-card", { "card-name": row.cardName, "trump-number": row.trumpNumber ?? "" })} + ${row.hebrewLetterId ? ` · Hebrew ${inlineNavButton(label, "alphabet", { alphabet: "hebrew", "hebrew-letter-id": row.hebrewLetterId })}` : ""}
`; @@ -200,9 +208,7 @@ ${row.signSymbol} ${row.signName} · Decan ${row.decanIndex} ${row.startDegree}°–${row.endDegree}° · ${row.dateRange} -
- -
+
Tarot ${inlineNavButton(displayCardName, "tarot-card", { "card-name": row.cardName })}
`; }).join(""); @@ -233,11 +239,15 @@ } const isSelected = selectedDaySet.has(Number(row.day)); - return ``; + return inlineNavButton(String(row.day), "calendar-day", { + "day-number": row.day, + "gregorian-date": row.gregorianDate, + "aria-pressed": isSelected ? "true" : "false" + }, isSelected ? "is-selected" : "").replace("data-aria-pressed", "aria-pressed"); }).join(""); const clearButton = selectedContext - ? '' + ? inlineNavButton("Show All Days", "calendar-day-clear") : ""; const helperText = selectedContext @@ -249,8 +259,8 @@ Day Links
Filter this month to events, holidays, and data connected to a specific day.
${helperText} -
${links}
- ${clearButton ? `
${clearButton}
` : ""} +
Days ${links}
+ ${clearButton ? `
${clearButton}
` : ""} `; } @@ -376,7 +386,7 @@ const god = getState().godsById?.get(godId); const label = god?.name || cleanName; - buttons.push(``); + buttons.push(inlineNavButton(label, "god", { "god-id": godId, "god-name": label })); }); return buttons; } @@ -410,7 +420,7 @@ const deityButtons = buildWheelDeityButtons(assoc?.deities, context); const deityLinksCard = deityButtons.length - ? `
Linked Deities
${deityButtons.join("")}
` + ? `
Linked Deities
${deityButtons.join(", ")}
` : ""; const monthOrder = Number(month?.order); diff --git a/app/ui-calendar-detail.js b/app/ui-calendar-detail.js index 5fb152c..a1f2745 100644 --- a/app/ui-calendar-detail.js +++ b/app/ui-calendar-detail.js @@ -123,23 +123,26 @@ return current; } + function buildInlineNavButton(label, nav, attrs = {}) { + const dataAttrs = Object.entries(attrs) + .map(([key, value]) => `data-${key}="${value}"`) + .join(" "); + return ``; + } + function buildAssociationButtons(associations) { if (!associations || typeof associations !== "object") { return '
--
'; } - const buttons = []; + const rows = []; if (associations.planetId) { - buttons.push( - `` - ); + rows.push(`
Planet ${buildInlineNavButton(planetLabel(associations.planetId), "planet", { "planet-id": associations.planetId })}
`); } if (associations.zodiacSignId) { - buttons.push( - `` - ); + rows.push(`
Zodiac ${buildInlineNavButton(zodiacLabel(associations.zodiacSignId), "zodiac", { "sign-id": associations.zodiacSignId })}
`); } if (Number.isFinite(Number(associations.numberValue))) { @@ -150,9 +153,7 @@ const label = rawNumber === numberValue ? `Number ${numberValue}` : `Number ${numberValue} (from ${rawNumber})`; - buttons.push( - `` - ); + rows.push(`
Number ${buildInlineNavButton(label, "number", { "number-value": numberValue })}
`); } } } @@ -161,41 +162,31 @@ const explicitTrumpNumber = Number(associations.tarotTrumpNumber); const tarotTrumpNumber = Number.isFinite(explicitTrumpNumber) ? explicitTrumpNumber : null; const tarotLabel = api.getDisplayTarotName(associations.tarotCard, tarotTrumpNumber); - buttons.push( - `` - ); + rows.push(`
Tarot ${buildInlineNavButton(tarotLabel, "tarot-card", { "card-name": associations.tarotCard, "trump-number": tarotTrumpNumber ?? "" })}
`); } if (associations.godId || associations.godName) { const label = godLabel(associations.godId, associations.godName); - buttons.push( - `` - ); + rows.push(`
Deity ${buildInlineNavButton(label, "god", { "god-id": associations.godId || "", "god-name": associations.godName || label })}
`); } if (associations.hebrewLetterId) { - buttons.push( - `` - ); + rows.push(`
Hebrew ${buildInlineNavButton(hebrewLabel(associations.hebrewLetterId), "alphabet", { alphabet: "hebrew", "hebrew-letter-id": associations.hebrewLetterId })}
`); } if (associations.kabbalahPathNumber != null) { - buttons.push( - `` - ); + rows.push(`
Kabbalah ${buildInlineNavButton(`Path ${associations.kabbalahPathNumber}`, "kabbalah", { "path-no": associations.kabbalahPathNumber })}
`); } if (associations.iChingPlanetaryInfluence) { - buttons.push( - `` - ); + rows.push(`
I Ching ${buildInlineNavButton(associations.iChingPlanetaryInfluence, "iching", { "planetary-influence": associations.iChingPlanetaryInfluence })}
`); } - if (!buttons.length) { + if (!rows.length) { return '
--
'; } - return `
${buttons.join("")}
`; + return rows.join(""); } function renderFactsCard(month) { diff --git a/app/ui-cycles.js b/app/ui-cycles.js index 7f25c49..2ef138e 100644 --- a/app/ui-cycles.js +++ b/app/ui-cycles.js @@ -253,14 +253,13 @@ if (!relatedEntry) { return `${escapeHtml(label)}`; } - return ``; + return ``; }) - .join(""); + .join(", "); body.push([ "
", - " Related:", - `
${relatedButtons}
`, + `

Related: ${relatedButtons}

`, "
" ].join("\n")); } diff --git a/app/ui-holidays-render.js b/app/ui-holidays-render.js index 549490c..086ffdd 100644 --- a/app/ui-holidays-render.js +++ b/app/ui-holidays-render.js @@ -73,24 +73,27 @@ return current; } + function buildInlineNavButton(label, nav, attrs = {}) { + const dataAttrs = Object.entries(attrs) + .map(([key, value]) => `data-${key}="${value}"`) + .join(" "); + return ``; + } + function buildAssociationButtons(associations, context) { const { getDisplayTarotName, resolveTarotTrumpNumber } = context; if (!associations || typeof associations !== "object") { return '
--
'; } - const buttons = []; + const rows = []; if (associations.planetId) { - buttons.push( - `` - ); + rows.push(`
Planet ${buildInlineNavButton(planetLabel(associations.planetId, context), "planet", { "planet-id": associations.planetId })}
`); } if (associations.zodiacSignId) { - buttons.push( - `` - ); + rows.push(`
Zodiac ${buildInlineNavButton(zodiacLabel(associations.zodiacSignId, context), "zodiac", { "sign-id": associations.zodiacSignId })}
`); } if (Number.isFinite(Number(associations.numberValue))) { @@ -101,9 +104,7 @@ const label = rawNumber === numberValue ? `Number ${numberValue}` : `Number ${numberValue} (from ${rawNumber})`; - buttons.push( - `` - ); + rows.push(`
Number ${buildInlineNavButton(label, "number", { "number-value": numberValue })}
`); } } } @@ -113,41 +114,31 @@ const explicitTrumpNumber = Number(associations.tarotTrumpNumber); const tarotTrumpNumber = Number.isFinite(explicitTrumpNumber) ? explicitTrumpNumber : trumpNumber; const tarotLabel = getDisplayTarotName(associations.tarotCard, tarotTrumpNumber); - buttons.push( - `` - ); + rows.push(`
Tarot ${buildInlineNavButton(tarotLabel, "tarot-card", { "card-name": associations.tarotCard, "trump-number": tarotTrumpNumber ?? "" })}
`); } if (associations.godId || associations.godName) { const label = godLabel(associations.godId, associations.godName, context); - buttons.push( - `` - ); + rows.push(`
Deity ${buildInlineNavButton(label, "god", { "god-id": associations.godId || "", "god-name": associations.godName || label })}
`); } if (associations.hebrewLetterId) { - buttons.push( - `` - ); + rows.push(`
Hebrew ${buildInlineNavButton(hebrewLabel(associations.hebrewLetterId, context), "alphabet", { alphabet: "hebrew", "hebrew-letter-id": associations.hebrewLetterId })}
`); } if (associations.kabbalahPathNumber != null) { - buttons.push( - `` - ); + rows.push(`
Kabbalah ${buildInlineNavButton(`Path ${associations.kabbalahPathNumber}`, "kabbalah", { "path-no": associations.kabbalahPathNumber })}
`); } if (associations.iChingPlanetaryInfluence) { - buttons.push( - `` - ); + rows.push(`
I Ching ${buildInlineNavButton(associations.iChingPlanetaryInfluence, "iching", { "planetary-influence": associations.iChingPlanetaryInfluence })}
`); } - if (!buttons.length) { + if (!rows.length) { return '
--
'; } - return `
${buttons.join("")}
`; + return rows.join(""); } function associationSearchText(associations, context) { @@ -263,7 +254,7 @@ const monthName = monthLabelForCalendar(holiday?.calendarId, holiday?.monthId); const holidayDate = holiday?.dateText || holiday?.date || holiday?.dateRange || "--"; const sourceMonthLink = holiday?.monthId - ? `
` + ? `
Source month ${buildInlineNavButton(`${calendarLabel(holiday?.calendarId)} ${monthName}`, "calendar-month", { "calendar-id": holiday.calendarId || "", "month-id": holiday.monthId })}
` : ""; return ` diff --git a/app/ui-iching.js b/app/ui-iching.js index 8fbf5bc..b431704 100644 --- a/app/ui-iching.js +++ b/app/ui-iching.js @@ -366,7 +366,7 @@ } const buttonRow = document.createElement("div"); - buttonRow.className = "alpha-nav-btns"; + buttonRow.className = "planet-text detail-inline-value"; cards.forEach((cardName) => { const target = buildTarotTarget(cardName); @@ -374,10 +374,14 @@ return; } + if (buttonRow.childNodes.length) { + buttonRow.appendChild(document.createTextNode(", ")); + } + const button = document.createElement("button"); button.type = "button"; - button.className = "alpha-nav-btn"; - button.textContent = `${target.label} ↗`; + button.className = "detail-inline-link"; + button.textContent = target.label; button.addEventListener("click", () => { document.dispatchEvent(new CustomEvent("nav:tarot-trump", { detail: target.detail @@ -416,10 +420,14 @@ } rows.forEach((month) => { + if (elements.ichingDetailCalendarEl.childNodes.length) { + elements.ichingDetailCalendarEl.appendChild(document.createTextNode(", ")); + } + const button = document.createElement("button"); button.type = "button"; - button.className = "alpha-nav-btn"; - button.textContent = `${month.label || month.name} ↗`; + button.className = "detail-inline-link"; + button.textContent = month.label || month.name; button.addEventListener("click", () => { document.dispatchEvent(new CustomEvent("nav:calendar-month", { detail: { monthId: month.id } diff --git a/app/ui-tarot-detail.js b/app/ui-tarot-detail.js index 23c6a62..4ecad2a 100644 --- a/app/ui-tarot-detail.js +++ b/app/ui-tarot-detail.js @@ -461,14 +461,18 @@ const btn = document.createElement("button"); btn.type = "button"; - btn.className = "kab-tarot-link"; - btn.textContent = `View Path ${kabPath.pathNumber} in Kabbalah Tree`; + btn.className = "detail-inline-link"; + btn.textContent = `Path ${kabPath.pathNumber}`; btn.addEventListener("click", () => { document.dispatchEvent(new CustomEvent("tarot:view-kab-path", { detail: { pathNumber: kabPath.pathNumber } })); }); - kabPathEl.appendChild(btn); + const inline = document.createElement("div"); + inline.className = "planet-text detail-inline-value"; + inline.appendChild(document.createTextNode("Kabbalah ")); + inline.appendChild(btn); + kabPathEl.appendChild(inline); kabPathEl.hidden = false; } else if (kabSeph) { const hebrewName = kabSeph.nameHebrew ? ` (${kabSeph.nameHebrew})` : ""; @@ -488,14 +492,18 @@ const btn = document.createElement("button"); btn.type = "button"; - btn.className = "kab-tarot-link"; - btn.textContent = `View Sephirah ${kabSeph.number} in Kabbalah Tree`; + btn.className = "detail-inline-link"; + btn.textContent = `Sephirah ${kabSeph.number}`; btn.addEventListener("click", () => { document.dispatchEvent(new CustomEvent("tarot:view-kab-path", { detail: { pathNumber: kabSeph.number } })); }); - kabPathEl.appendChild(btn); + const inline = document.createElement("div"); + inline.className = "planet-text detail-inline-value"; + inline.appendChild(document.createTextNode("Kabbalah ")); + inline.appendChild(btn); + kabPathEl.appendChild(inline); kabPathEl.hidden = false; } else { kabPathEl.hidden = true; diff --git a/index.html b/index.html index b9f6459..834d463 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - +
@@ -1195,25 +1195,25 @@ - - + + - + - + - + - + @@ -1226,9 +1226,9 @@ - + - +