Redone form save logic
This commit is contained in:
Djeex
+212
-73
@@ -116,54 +116,173 @@ function renderLocalFonts(fonts) {
|
||||
});
|
||||
}
|
||||
|
||||
// --- Section helpers ---
|
||||
function getSectionValues(section) {
|
||||
switch (section) {
|
||||
case "colors":
|
||||
return {
|
||||
primary: document.getElementById("color-primary-text").value,
|
||||
primary_dark: document.getElementById("color-primary-dark-text").value,
|
||||
secondary: document.getElementById("color-secondary-text").value,
|
||||
accent: document.getElementById("color-accent-text").value,
|
||||
text_dark: document.getElementById("color-text-dark-text").value,
|
||||
background: document.getElementById("color-background-text").value,
|
||||
browser_color: document.getElementById("color-browser-color-text").value
|
||||
};
|
||||
case "google-fonts":
|
||||
const googleFontsFields = document.getElementById("google-fonts-fields");
|
||||
const fonts = [];
|
||||
if (googleFontsFields) {
|
||||
googleFontsFields.querySelectorAll(".input-field").forEach(field => {
|
||||
const family = field.querySelector('input[name^="google_fonts"][name$="[family]"]').value.trim();
|
||||
const weights = field.querySelector('input[name^="google_fonts"][name$="[weights]"]').value
|
||||
.split(",").map(w => w.trim()).filter(Boolean);
|
||||
if (family) fonts.push({ family, weights });
|
||||
});
|
||||
}
|
||||
return fonts;
|
||||
case "fonts":
|
||||
return {
|
||||
primary: {
|
||||
name: document.getElementById("font-primary").value,
|
||||
fallback: document.getElementById("font-primary-fallback").value
|
||||
},
|
||||
secondary: {
|
||||
name: document.getElementById("font-secondary").value,
|
||||
fallback: document.getElementById("font-secondary-fallback").value
|
||||
}
|
||||
};
|
||||
case "favicon":
|
||||
return {
|
||||
path: document.getElementById("favicon-path").value
|
||||
};
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function isSectionComplete(section) {
|
||||
switch (section) {
|
||||
case "colors":
|
||||
const v = getSectionValues("colors");
|
||||
return (
|
||||
v.primary &&
|
||||
v.primary_dark &&
|
||||
v.secondary &&
|
||||
v.accent &&
|
||||
v.text_dark &&
|
||||
v.background &&
|
||||
v.browser_color
|
||||
);
|
||||
case "google-fonts":
|
||||
const fonts = getSectionValues("google-fonts");
|
||||
return fonts.every(f => f.family);
|
||||
case "fonts":
|
||||
const f = getSectionValues("fonts");
|
||||
return f.primary.name && f.primary.fallback && f.secondary.name && f.secondary.fallback;
|
||||
case "favicon":
|
||||
const fav = getSectionValues("favicon");
|
||||
return !!fav.path;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function isSectionSaved(section, loadedConfig) {
|
||||
switch (section) {
|
||||
case "colors":
|
||||
const v = getSectionValues("colors");
|
||||
const c = loadedConfig.colors || {};
|
||||
return (
|
||||
v.primary === c.primary &&
|
||||
v.primary_dark === c.primary_dark &&
|
||||
v.secondary === c.secondary &&
|
||||
v.accent === c.accent &&
|
||||
v.text_dark === c.text_dark &&
|
||||
v.background === c.background &&
|
||||
v.browser_color === c.browser_color
|
||||
);
|
||||
case "google-fonts":
|
||||
const fonts = getSectionValues("google-fonts");
|
||||
const cf = loadedConfig.google_fonts || [];
|
||||
return JSON.stringify(fonts) === JSON.stringify(cf);
|
||||
case "fonts":
|
||||
const f = getSectionValues("fonts");
|
||||
const cfnt = loadedConfig.fonts || {};
|
||||
return (
|
||||
f.primary.name === (cfnt.primary?.name || "") &&
|
||||
f.primary.fallback === (cfnt.primary?.fallback || "") &&
|
||||
f.secondary.name === (cfnt.secondary?.name || "") &&
|
||||
f.secondary.fallback === (cfnt.secondary?.fallback || "")
|
||||
);
|
||||
case "favicon":
|
||||
const fav = getSectionValues("favicon");
|
||||
const cfav = loadedConfig.favicon || {};
|
||||
return fav.path === (cfav.path || "");
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateSectionStatus(section, loadedConfig) {
|
||||
const statusEl = document.querySelector(`#${section}-form .section-status`);
|
||||
if (!statusEl) return;
|
||||
if (!isSectionComplete(section)) {
|
||||
statusEl.innerHTML = "⚠️ Section not yet saved. Please fill required fields";
|
||||
statusEl.style.color = "#ffc700";
|
||||
statusEl.style.display = "";
|
||||
statusEl.style.fontStyle = "normal";
|
||||
return;
|
||||
}
|
||||
if (isSectionSaved(section, loadedConfig)) {
|
||||
statusEl.innerHTML = "";
|
||||
statusEl.style.display = "none";
|
||||
} else {
|
||||
statusEl.innerHTML = "⚠️ Section not yet saved";
|
||||
statusEl.style.color = "#ffc700";
|
||||
statusEl.style.display = "";
|
||||
statusEl.style.fontStyle = "normal";
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
const themeInfo = await fetchThemeInfo();
|
||||
const themeNameSpan = document.getElementById("current-theme");
|
||||
if (themeNameSpan) themeNameSpan.textContent = themeInfo.theme_name;
|
||||
|
||||
const themeYaml = themeInfo.theme_yaml;
|
||||
const googleFonts = themeYaml.google_fonts ? JSON.parse(JSON.stringify(themeYaml.google_fonts)) : [];
|
||||
let loadedConfig = themeInfo.theme_yaml;
|
||||
let googleFonts = loadedConfig.google_fonts ? JSON.parse(JSON.stringify(loadedConfig.google_fonts)) : [];
|
||||
let localFonts = await fetchLocalFonts(themeInfo.theme_name);
|
||||
|
||||
// Colors
|
||||
if (themeYaml.colors) {
|
||||
setupColorPicker("color-primary", "color-primary-btn", "color-primary-text", themeYaml.colors.primary || "#0065a1");
|
||||
setupColorPicker("color-primary-dark", "color-primary-dark-btn", "color-primary-dark-text", themeYaml.colors.primary_dark || "#005384");
|
||||
setupColorPicker("color-secondary", "color-secondary-btn", "color-secondary-text", themeYaml.colors.secondary || "#00b0f0");
|
||||
setupColorPicker("color-accent", "color-accent-btn", "color-accent-text", themeYaml.colors.accent || "#ffc700");
|
||||
setupColorPicker("color-text-dark", "color-text-dark-btn", "color-text-dark-text", themeYaml.colors.text_dark || "#616161");
|
||||
setupColorPicker("color-background", "color-background-btn", "color-background-text", themeYaml.colors.background || "#fff");
|
||||
setupColorPicker("color-browser-color", "color-browser-color-btn", "color-browser-color-text", themeYaml.colors.browser_color || "#fff");
|
||||
if (loadedConfig.colors) {
|
||||
setupColorPicker("color-primary", "color-primary-btn", "color-primary-text", loadedConfig.colors.primary || "#0065a1");
|
||||
setupColorPicker("color-primary-dark", "color-primary-dark-btn", "color-primary-dark-text", loadedConfig.colors.primary_dark || "#005384");
|
||||
setupColorPicker("color-secondary", "color-secondary-btn", "color-secondary-text", loadedConfig.colors.secondary || "#00b0f0");
|
||||
setupColorPicker("color-accent", "color-accent-btn", "color-accent-text", loadedConfig.colors.accent || "#ffc700");
|
||||
setupColorPicker("color-text-dark", "color-text-dark-btn", "color-text-dark-text", loadedConfig.colors.text_dark || "#616161");
|
||||
setupColorPicker("color-background", "color-background-btn", "color-background-text", loadedConfig.colors.background || "#fff");
|
||||
setupColorPicker("color-browser-color", "color-browser-color-btn", "color-browser-color-text", loadedConfig.colors.browser_color || "#fff");
|
||||
}
|
||||
|
||||
// Fonts
|
||||
function refreshFontDropdowns() {
|
||||
setFontDropdown("font-primary", document.getElementById("font-primary").value, [
|
||||
setFontDropdown("font-primary", loadedConfig.fonts?.primary?.name || "Lato", [
|
||||
...googleFonts.map(f => f.family),
|
||||
...localFonts
|
||||
]);
|
||||
setFontDropdown("font-secondary", document.getElementById("font-secondary").value, [
|
||||
setFontDropdown("font-secondary", loadedConfig.fonts?.secondary?.name || "Montserrat", [
|
||||
...googleFonts.map(f => f.family),
|
||||
...localFonts
|
||||
]);
|
||||
setFallbackDropdown("font-primary-fallback", loadedConfig.fonts?.primary?.fallback || "sans-serif");
|
||||
setFallbackDropdown("font-secondary-fallback", loadedConfig.fonts?.secondary?.fallback || "serif");
|
||||
}
|
||||
if (themeYaml.fonts) {
|
||||
setFontDropdown("font-primary", themeYaml.fonts.primary?.name || "Lato", [
|
||||
...googleFonts.map(f => f.family),
|
||||
...localFonts
|
||||
]);
|
||||
setFallbackDropdown("font-primary-fallback", themeYaml.fonts.primary?.fallback || "sans-serif");
|
||||
setFontDropdown("font-secondary", themeYaml.fonts.secondary?.name || "Montserrat", [
|
||||
...googleFonts.map(f => f.family),
|
||||
...localFonts
|
||||
]);
|
||||
setFallbackDropdown("font-secondary-fallback", themeYaml.fonts.secondary?.fallback || "serif");
|
||||
}
|
||||
refreshFontDropdowns();
|
||||
|
||||
// Font upload logic
|
||||
const fontUploadInput = document.getElementById("font-upload");
|
||||
const chooseFontBtn = document.getElementById("choose-font-btn");
|
||||
const fontUploadStatus = document.getElementById("font-upload-status");
|
||||
const localFontsList = document.getElementById("local-fonts-list");
|
||||
|
||||
// Modal logic for font deletion
|
||||
@@ -341,9 +460,9 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
};
|
||||
}
|
||||
|
||||
if (themeYaml.favicon && themeYaml.favicon.path) {
|
||||
faviconInput.value = themeYaml.favicon.path;
|
||||
updateFaviconPreview(`/themes/${themeInfo.theme_name}/${themeYaml.favicon.path}?t=${Date.now()}`);
|
||||
if (loadedConfig.favicon && loadedConfig.favicon.path) {
|
||||
faviconInput.value = loadedConfig.favicon.path;
|
||||
updateFaviconPreview(`/themes/${themeInfo.theme_name}/${loadedConfig.favicon.path}?t=${Date.now()}`);
|
||||
} else {
|
||||
updateFaviconPreview("");
|
||||
}
|
||||
@@ -367,6 +486,7 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
googleFonts.push(...updatedGoogleFonts);
|
||||
renderGoogleFonts(googleFonts);
|
||||
refreshFontDropdowns();
|
||||
updateSectionStatus("google-fonts", loadedConfig);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -396,6 +516,7 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
googleFonts.push(...updatedGoogleFonts);
|
||||
renderGoogleFonts(googleFonts);
|
||||
refreshFontDropdowns();
|
||||
updateSectionStatus("google-fonts", loadedConfig);
|
||||
}
|
||||
}, true);
|
||||
|
||||
@@ -414,54 +535,72 @@ document.addEventListener("DOMContentLoaded", async () => {
|
||||
googleFonts.push(...updatedGoogleFonts);
|
||||
renderGoogleFonts(googleFonts);
|
||||
refreshFontDropdowns();
|
||||
updateSectionStatus("google-fonts", loadedConfig);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("theme-editor-form").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
showLoader("Saving theme...");
|
||||
const data = {};
|
||||
data.colors = {
|
||||
primary: document.getElementById("color-primary-text").value,
|
||||
primary_dark: document.getElementById("color-primary-dark-text").value,
|
||||
secondary: document.getElementById("color-secondary-text").value,
|
||||
accent: document.getElementById("color-accent-text").value,
|
||||
text_dark: document.getElementById("color-text-dark-text").value,
|
||||
background: document.getElementById("color-background-text").value,
|
||||
browser_color: document.getElementById("color-browser-color-text").value
|
||||
};
|
||||
data.fonts = {
|
||||
primary: {
|
||||
name: document.getElementById("font-primary").value,
|
||||
fallback: document.getElementById("font-primary-fallback").value
|
||||
},
|
||||
secondary: {
|
||||
name: document.getElementById("font-secondary").value,
|
||||
fallback: document.getElementById("font-secondary-fallback").value
|
||||
}
|
||||
};
|
||||
data.favicon = {
|
||||
path: faviconInput.value
|
||||
};
|
||||
data.google_fonts = [];
|
||||
document.querySelectorAll("#google-fonts-fields .input-field").forEach(field => {
|
||||
const family = field.querySelector('input[name^="google_fonts"][name$="[family]"]').value;
|
||||
const weights = field.querySelector('input[name^="google_fonts"][name$="[weights]"]').value
|
||||
.split(",").map(w => w.trim()).filter(w => w);
|
||||
if (family) data.google_fonts.push({ family, weights });
|
||||
});
|
||||
|
||||
const res = await fetch("/api/theme-info", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ theme_name: themeInfo.theme_name, theme_yaml: data })
|
||||
});
|
||||
hideLoader();
|
||||
if (res.ok) {
|
||||
showToast("✅ Theme saved!", "success");
|
||||
} else {
|
||||
showToast("Error saving theme.", "error");
|
||||
}
|
||||
// --- Section status listeners ---
|
||||
[
|
||||
{ form: document.getElementById("colors-form"), section: "colors" },
|
||||
{ form: document.getElementById("google-fonts-form"), section: "google-fonts" },
|
||||
{ form: document.getElementById("fonts-form"), section: "fonts" },
|
||||
{ form: document.getElementById("favicon-form"), section: "favicon" }
|
||||
].forEach(({ form, section }) => {
|
||||
if (!form) return;
|
||||
form.addEventListener("input", () => updateSectionStatus(section, loadedConfig));
|
||||
form.addEventListener("change", () => updateSectionStatus(section, loadedConfig));
|
||||
});
|
||||
|
||||
// --- Section save handlers ---
|
||||
[
|
||||
{ form: document.getElementById("colors-form"), section: "colors" },
|
||||
{ form: document.getElementById("google-fonts-form"), section: "google-fonts" },
|
||||
{ form: document.getElementById("fonts-form"), section: "fonts" },
|
||||
{ form: document.getElementById("favicon-form"), section: "favicon" }
|
||||
].forEach(({ form, section }) => {
|
||||
if (!form) return;
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
if (!form.reportValidity() || !isSectionComplete(section)) {
|
||||
showToast("❌ Please fill all required fields before saving.", "error");
|
||||
updateSectionStatus(section, loadedConfig);
|
||||
return;
|
||||
}
|
||||
// Merge with loadedConfig to avoid overwriting other sections
|
||||
let payload = { ...loadedConfig };
|
||||
switch (section) {
|
||||
case "colors":
|
||||
payload.colors = getSectionValues("colors");
|
||||
break;
|
||||
case "google-fonts":
|
||||
payload.google_fonts = getSectionValues("google-fonts");
|
||||
break;
|
||||
case "fonts":
|
||||
payload.fonts = getSectionValues("fonts");
|
||||
break;
|
||||
case "favicon":
|
||||
payload.favicon = getSectionValues("favicon");
|
||||
break;
|
||||
}
|
||||
showLoader("Saving...");
|
||||
const res = await fetch("/api/theme-info", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ theme_name: themeInfo.theme_name, theme_yaml: payload })
|
||||
});
|
||||
hideLoader();
|
||||
if (res.ok) {
|
||||
showToast("✅ Section saved!", "success");
|
||||
const updatedThemeInfo = await fetchThemeInfo();
|
||||
loadedConfig = updatedThemeInfo.theme_yaml;
|
||||
updateSectionStatus(section, loadedConfig);
|
||||
} else {
|
||||
showToast("Error saving section.", "error");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Initial status update
|
||||
["colors", "google-fonts", "fonts", "favicon"].forEach(section => updateSectionStatus(section, loadedConfig));
|
||||
});
|
||||
Reference in New Issue
Block a user