building new tarot frame component for custom layout
This commit is contained in:
@@ -27,7 +27,8 @@
|
||||
planet: true,
|
||||
zodiac: true,
|
||||
trump: true,
|
||||
path: true
|
||||
path: true,
|
||||
date: false
|
||||
},
|
||||
houseBottomCardsVisible: true,
|
||||
houseBottomInfoModes: {
|
||||
@@ -39,6 +40,7 @@
|
||||
},
|
||||
houseExportInProgress: false,
|
||||
houseExportFormat: "png",
|
||||
houseSettingsOpen: false,
|
||||
magickDataset: null,
|
||||
referenceData: null,
|
||||
monthRefsByCardId: new Map(),
|
||||
@@ -281,12 +283,15 @@
|
||||
tarotHouseOfCardsEl: document.getElementById("tarot-house-of-cards"),
|
||||
tarotBrowseViewEl: document.getElementById("tarot-browse-view"),
|
||||
tarotHouseViewEl: document.getElementById("tarot-house-view"),
|
||||
tarotHouseSettingsToggleEl: document.getElementById("tarot-house-settings-toggle"),
|
||||
tarotHouseSettingsPanelEl: document.getElementById("tarot-house-settings-panel"),
|
||||
tarotHouseTopCardsVisibleEl: document.getElementById("tarot-house-top-cards-visible"),
|
||||
tarotHouseTopInfoHebrewEl: document.getElementById("tarot-house-top-info-hebrew"),
|
||||
tarotHouseTopInfoPlanetEl: document.getElementById("tarot-house-top-info-planet"),
|
||||
tarotHouseTopInfoZodiacEl: document.getElementById("tarot-house-top-info-zodiac"),
|
||||
tarotHouseTopInfoTrumpEl: document.getElementById("tarot-house-top-info-trump"),
|
||||
tarotHouseTopInfoPathEl: document.getElementById("tarot-house-top-info-path"),
|
||||
tarotHouseTopInfoDateEl: document.getElementById("tarot-house-top-info-date"),
|
||||
tarotHouseBottomCardsVisibleEl: document.getElementById("tarot-house-bottom-cards-visible"),
|
||||
tarotHouseBottomInfoZodiacEl: document.getElementById("tarot-house-bottom-info-zodiac"),
|
||||
tarotHouseBottomInfoDecanEl: document.getElementById("tarot-house-bottom-info-decan"),
|
||||
@@ -544,6 +549,15 @@
|
||||
elements.tarotHouseViewEl.classList.toggle("is-house-focus", Boolean(state.houseFocusMode));
|
||||
}
|
||||
|
||||
if (elements?.tarotHouseSettingsToggleEl) {
|
||||
elements.tarotHouseSettingsToggleEl.setAttribute("aria-expanded", state.houseSettingsOpen ? "true" : "false");
|
||||
elements.tarotHouseSettingsToggleEl.textContent = state.houseSettingsOpen ? "Hide Settings" : "Settings";
|
||||
}
|
||||
|
||||
if (elements?.tarotHouseSettingsPanelEl) {
|
||||
elements.tarotHouseSettingsPanelEl.hidden = !state.houseSettingsOpen;
|
||||
}
|
||||
|
||||
if (elements?.tarotHouseTopCardsVisibleEl) {
|
||||
elements.tarotHouseTopCardsVisibleEl.checked = Boolean(state.houseTopCardsVisible);
|
||||
elements.tarotHouseTopCardsVisibleEl.disabled = Boolean(state.houseExportInProgress);
|
||||
@@ -554,6 +568,7 @@
|
||||
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoZodiacEl, state.houseTopInfoModes.zodiac);
|
||||
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoTrumpEl, state.houseTopInfoModes.trump);
|
||||
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoPathEl, state.houseTopInfoModes.path);
|
||||
setHouseBottomInfoCheckboxState(elements?.tarotHouseTopInfoDateEl, state.houseTopInfoModes.date);
|
||||
|
||||
if (elements?.tarotHouseBottomCardsVisibleEl) {
|
||||
elements.tarotHouseBottomCardsVisibleEl.checked = Boolean(state.houseBottomCardsVisible);
|
||||
@@ -839,6 +854,7 @@
|
||||
getSelectedCardId: () => state.selectedCardId,
|
||||
getHouseTopCardsVisible: () => state.houseTopCardsVisible,
|
||||
getHouseTopInfoModes: () => ({ ...state.houseTopInfoModes }),
|
||||
getMagickDataset: () => state.magickDataset,
|
||||
getHouseBottomCardsVisible: () => state.houseBottomCardsVisible,
|
||||
getHouseBottomInfoModes: () => ({ ...state.houseBottomInfoModes })
|
||||
});
|
||||
@@ -929,12 +945,47 @@
|
||||
});
|
||||
}
|
||||
|
||||
if (elements.tarotHouseSettingsToggleEl) {
|
||||
elements.tarotHouseSettingsToggleEl.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
state.houseSettingsOpen = !state.houseSettingsOpen;
|
||||
syncHouseControls(elements);
|
||||
});
|
||||
}
|
||||
|
||||
if (elements.tarotHouseSettingsPanelEl) {
|
||||
elements.tarotHouseSettingsPanelEl.addEventListener("click", (event) => {
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!state.houseSettingsOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
const target = event.target;
|
||||
if (!(target instanceof Node)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const settingsPanelEl = elements.tarotHouseSettingsPanelEl;
|
||||
const settingsToggleEl = elements.tarotHouseSettingsToggleEl;
|
||||
if (settingsPanelEl?.contains(target) || settingsToggleEl?.contains(target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.houseSettingsOpen = false;
|
||||
syncHouseControls(elements);
|
||||
});
|
||||
|
||||
[
|
||||
[elements.tarotHouseTopInfoHebrewEl, "hebrew"],
|
||||
[elements.tarotHouseTopInfoPlanetEl, "planet"],
|
||||
[elements.tarotHouseTopInfoZodiacEl, "zodiac"],
|
||||
[elements.tarotHouseTopInfoTrumpEl, "trump"],
|
||||
[elements.tarotHouseTopInfoPathEl, "path"]
|
||||
[elements.tarotHouseTopInfoPathEl, "path"],
|
||||
[elements.tarotHouseTopInfoDateEl, "date"]
|
||||
].forEach(([checkbox, key]) => {
|
||||
if (!checkbox) {
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user