test new global styles for inline buttons in details, and add links to tarot cards in planet details
This commit is contained in:
+116
-75
@@ -76,10 +76,55 @@
|
||||
function metaCard(label, value, wide) {
|
||||
const card = document.createElement("div");
|
||||
card.className = wide ? "planet-meta-card kab-wide-card" : "planet-meta-card";
|
||||
card.innerHTML = `<strong>${label}</strong><p class="planet-text">${value || "—"}</p>`;
|
||||
|
||||
const title = document.createElement("strong");
|
||||
title.textContent = label;
|
||||
card.appendChild(title);
|
||||
|
||||
if (value instanceof Node) {
|
||||
card.appendChild(value);
|
||||
} else {
|
||||
const body = document.createElement("p");
|
||||
body.className = "planet-text";
|
||||
body.textContent = value || "—";
|
||||
card.appendChild(body);
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
function appendInlineParts(target, parts) {
|
||||
(Array.isArray(parts) ? parts : []).forEach((part) => {
|
||||
if (part instanceof Node) {
|
||||
target.appendChild(part);
|
||||
return;
|
||||
}
|
||||
|
||||
const text = String(part ?? "");
|
||||
if (text) {
|
||||
target.appendChild(document.createTextNode(text));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createInlineEventLink(label, eventName, detail) {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "detail-inline-link";
|
||||
btn.textContent = String(label || "—");
|
||||
btn.addEventListener("click", () => {
|
||||
document.dispatchEvent(new CustomEvent(eventName, { detail }));
|
||||
});
|
||||
return btn;
|
||||
}
|
||||
|
||||
function inlineValue(parts) {
|
||||
const body = document.createElement("p");
|
||||
body.className = "planet-text detail-inline-value";
|
||||
appendInlineParts(body, parts);
|
||||
return body;
|
||||
}
|
||||
|
||||
function createNavButton(label, eventName, detail) {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
@@ -91,31 +136,22 @@
|
||||
return btn;
|
||||
}
|
||||
|
||||
function appendLinkRow(card, buttons) {
|
||||
if (!buttons?.length) return;
|
||||
const row = document.createElement("div");
|
||||
row.className = "kab-god-links";
|
||||
buttons.forEach((button) => row.appendChild(button));
|
||||
card.appendChild(row);
|
||||
}
|
||||
|
||||
function buildPlanetLuminaryCard(planetValue, context) {
|
||||
const card = metaCard("Planet / Luminary", planetValue);
|
||||
const planetId = context.resolvePlanetId(planetValue);
|
||||
if (planetId) {
|
||||
appendLinkRow(card, [
|
||||
createNavButton(`View ${PLANET_ID_TO_LABEL[planetId] || planetValue} in Planets`, "nav:planet", { planetId })
|
||||
]);
|
||||
return card;
|
||||
return metaCard("Planet / Luminary", inlineValue([
|
||||
createInlineEventLink(PLANET_ID_TO_LABEL[planetId] || planetValue, "nav:planet", { planetId })
|
||||
]));
|
||||
}
|
||||
|
||||
const zodiacId = context.resolveZodiacId(planetValue);
|
||||
if (zodiacId) {
|
||||
appendLinkRow(card, [
|
||||
createNavButton(`View ${zodiacId.charAt(0).toUpperCase() + zodiacId.slice(1)} in Zodiac`, "nav:zodiac", { signId: zodiacId })
|
||||
]);
|
||||
return metaCard("Planet / Luminary", inlineValue([
|
||||
createInlineEventLink(zodiacId.charAt(0).toUpperCase() + zodiacId.slice(1), "nav:zodiac", { signId: zodiacId })
|
||||
]));
|
||||
}
|
||||
return card;
|
||||
|
||||
return metaCard("Planet / Luminary", planetValue);
|
||||
}
|
||||
|
||||
function extractMinorRank(attribution) {
|
||||
@@ -131,61 +167,70 @@
|
||||
}
|
||||
|
||||
function buildTarotAttributionCard(attribution) {
|
||||
const card = metaCard("Tarot Attribution", attribution);
|
||||
const minorCards = buildMinorTarotNames(attribution);
|
||||
if (minorCards.length) {
|
||||
appendLinkRow(card, minorCards.map((cardName) =>
|
||||
createNavButton(cardName, "nav:tarot-trump", { cardName })
|
||||
));
|
||||
const parts = [];
|
||||
minorCards.forEach((cardName, index) => {
|
||||
if (index > 0) {
|
||||
parts.push(", ");
|
||||
}
|
||||
parts.push(createInlineEventLink(cardName, "nav:tarot-trump", { cardName }));
|
||||
});
|
||||
return metaCard("Tarot Attribution", inlineValue(parts));
|
||||
}
|
||||
return card;
|
||||
|
||||
return metaCard("Tarot Attribution", attribution);
|
||||
}
|
||||
|
||||
function buildAstrologyCard(astrology, context) {
|
||||
const astroText = astrology ? `${astrology.name} (${astrology.type})` : "—";
|
||||
const card = metaCard("Astrology", astroText);
|
||||
if (astrology?.type === "planet") {
|
||||
const planetId = context.resolvePlanetId(astrology.name);
|
||||
if (planetId) {
|
||||
appendLinkRow(card, [
|
||||
createNavButton(`View ${PLANET_ID_TO_LABEL[planetId] || astrology.name} in Planets`, "nav:planet", { planetId })
|
||||
]);
|
||||
return metaCard("Astrology", inlineValue([
|
||||
createInlineEventLink(PLANET_ID_TO_LABEL[planetId] || astrology.name, "nav:planet", { planetId }),
|
||||
" (planet)"
|
||||
]));
|
||||
}
|
||||
} else if (astrology?.type === "zodiac") {
|
||||
const signId = context.resolveZodiacId(astrology.name);
|
||||
if (signId) {
|
||||
appendLinkRow(card, [
|
||||
createNavButton(`View ${signId.charAt(0).toUpperCase() + signId.slice(1)} in Zodiac`, "nav:zodiac", { signId })
|
||||
]);
|
||||
return metaCard("Astrology", inlineValue([
|
||||
createInlineEventLink(signId.charAt(0).toUpperCase() + signId.slice(1), "nav:zodiac", { signId }),
|
||||
" (zodiac)"
|
||||
]));
|
||||
}
|
||||
}
|
||||
return card;
|
||||
|
||||
return metaCard("Astrology", astrology ? `${astrology.name} (${astrology.type})` : "—");
|
||||
}
|
||||
|
||||
function buildConnectsCard(path, fromName, toName) {
|
||||
const card = metaCard("Connects", `${fromName} → ${toName}`);
|
||||
appendLinkRow(card, [
|
||||
createNavButton(`View ${fromName}`, "nav:kabbalah-path", { pathNo: Number(path.connects.from) }),
|
||||
createNavButton(`View ${toName}`, "nav:kabbalah-path", { pathNo: Number(path.connects.to) })
|
||||
]);
|
||||
return card;
|
||||
return metaCard("Connects", inlineValue([
|
||||
createInlineEventLink(fromName, "nav:kabbalah-path", { pathNo: Number(path.connects.from) }),
|
||||
" → ",
|
||||
createInlineEventLink(toName, "nav:kabbalah-path", { pathNo: Number(path.connects.to) })
|
||||
]));
|
||||
}
|
||||
|
||||
function buildHebrewLetterCard(letter, context) {
|
||||
const label = `${letter.char || ""} ${letter.transliteration || ""} — "${letter.meaning || ""}" (${letter.letterType || ""})`;
|
||||
const card = metaCard("Hebrew Letter", label);
|
||||
const hebrewLetterId = context.resolveHebrewLetterId(letter.transliteration || letter.char || "");
|
||||
const letterLabel = `${letter.char || ""} ${letter.transliteration || ""}`.replace(/\s+/g, " ").trim() || "Letter";
|
||||
const suffix = [
|
||||
letter.meaning ? ` — "${letter.meaning}"` : "",
|
||||
letter.letterType ? ` (${letter.letterType})` : ""
|
||||
].join("");
|
||||
|
||||
if (hebrewLetterId) {
|
||||
appendLinkRow(card, [
|
||||
createNavButton(`View ${letter.transliteration || letter.char || "Letter"} in Alphabet`, "nav:alphabet", {
|
||||
return metaCard("Hebrew Letter", inlineValue([
|
||||
createInlineEventLink(letterLabel, "nav:alphabet", {
|
||||
alphabet: "hebrew",
|
||||
hebrewLetterId
|
||||
})
|
||||
]);
|
||||
}),
|
||||
suffix
|
||||
]));
|
||||
}
|
||||
|
||||
return card;
|
||||
return metaCard("Hebrew Letter", `${letterLabel}${suffix}`);
|
||||
}
|
||||
|
||||
function buildFourWorldsCard(tree, activeHebrewToken, context) {
|
||||
@@ -228,11 +273,11 @@
|
||||
soulLine.textContent = `${layer.soulLayer} — ${layer.soulTitle}: ${layer.soulDescription}`;
|
||||
row.appendChild(soulLine);
|
||||
|
||||
const buttonRow = [];
|
||||
const parts = [];
|
||||
const hebrewLetterId = context.resolveHebrewLetterId(layer.hebrewToken);
|
||||
if (hebrewLetterId) {
|
||||
buttonRow.push(
|
||||
createNavButton(`View ${layer.letterChar} in Alphabet`, "nav:alphabet", {
|
||||
parts.push(
|
||||
createInlineEventLink(layer.letterChar || layer.hebrewToken, "nav:alphabet", {
|
||||
alphabet: "hebrew",
|
||||
hebrewLetterId
|
||||
})
|
||||
@@ -241,12 +286,17 @@
|
||||
|
||||
const linkedPath = context.findPathByHebrewToken(tree, layer.hebrewToken);
|
||||
if (linkedPath?.pathNumber != null) {
|
||||
buttonRow.push(
|
||||
createNavButton(`View Path ${linkedPath.pathNumber}`, "nav:kabbalah-path", { pathNo: Number(linkedPath.pathNumber) })
|
||||
if (parts.length) {
|
||||
parts.push(" · ");
|
||||
}
|
||||
parts.push(
|
||||
createInlineEventLink(`Path ${linkedPath.pathNumber}`, "nav:kabbalah-path", { pathNo: Number(linkedPath.pathNumber) })
|
||||
);
|
||||
}
|
||||
|
||||
appendLinkRow(row, buttonRow);
|
||||
if (parts.length) {
|
||||
row.appendChild(inlineValue(parts));
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
row.style.borderColor = "#818cf8";
|
||||
@@ -293,23 +343,18 @@
|
||||
card.appendChild(meta);
|
||||
}
|
||||
|
||||
const row = document.createElement("div");
|
||||
row.className = "kab-god-links";
|
||||
|
||||
names.forEach((name) => {
|
||||
const btn = document.createElement("button");
|
||||
btn.type = "button";
|
||||
btn.className = "kab-god-link";
|
||||
btn.textContent = name;
|
||||
btn.addEventListener("click", () => {
|
||||
document.dispatchEvent(new CustomEvent("nav:gods", {
|
||||
detail: { godName: name, pathNo: Number(pathNo) }
|
||||
}));
|
||||
});
|
||||
row.appendChild(btn);
|
||||
const parts = [];
|
||||
names.forEach((name, index) => {
|
||||
if (index > 0) {
|
||||
parts.push(", ");
|
||||
}
|
||||
parts.push(createInlineEventLink(name, "nav:gods", {
|
||||
godName: name,
|
||||
pathNo: Number(pathNo)
|
||||
}));
|
||||
});
|
||||
|
||||
card.appendChild(row);
|
||||
card.appendChild(inlineValue(parts));
|
||||
return card;
|
||||
}
|
||||
|
||||
@@ -450,16 +495,12 @@
|
||||
tarotLabel.textContent = "Tarot";
|
||||
tarotMetaCard.appendChild(tarotLabel);
|
||||
if (path.tarot?.card && path.tarot.trumpNumber != null) {
|
||||
const tarotBtn = document.createElement("button");
|
||||
tarotBtn.type = "button";
|
||||
tarotBtn.className = "kab-tarot-link";
|
||||
tarotBtn.textContent = `${path.tarot.card} · Trump ${path.tarot.trumpNumber}`;
|
||||
const tarotBtn = createInlineEventLink(
|
||||
`${path.tarot.card} · Trump ${path.tarot.trumpNumber}`,
|
||||
"kab:view-trump",
|
||||
{ trumpNumber: path.tarot.trumpNumber }
|
||||
);
|
||||
tarotBtn.title = "Open in Tarot section";
|
||||
tarotBtn.addEventListener("click", () => {
|
||||
document.dispatchEvent(new CustomEvent("kab:view-trump", {
|
||||
detail: { trumpNumber: path.tarot.trumpNumber }
|
||||
}));
|
||||
});
|
||||
tarotMetaCard.appendChild(tarotBtn);
|
||||
} else {
|
||||
const tarotP = document.createElement("p");
|
||||
|
||||
Reference in New Issue
Block a user