ngx-xtroedge-cms 1.3.0 → 1.3.2

package/dist/index.mjs

@@ -277,7 +277,9 @@ var DEFAULT_EDITABLE_TAGS = [
   "blockquote",
   "td",
   "th",
-  "div"
+  "div",
+  "header",
+  "footer"
 ];
 var XtroedgeCMS = class _XtroedgeCMS {
   constructor(config) {
@@ -751,7 +753,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     if (this.containerSelector) {
       return document.querySelector(this.containerSelector) || document.body;
     }
-    return document.querySelector(".layout") || document.body;
+    return document.body;
   }
   autoDetectElements() {
     const container = this.resolveContainer();
@@ -759,7 +761,29 @@ var XtroedgeCMS = class _XtroedgeCMS {
     for (const el of this.autoDetectedElements) {
       if (!document.contains(el)) this.autoDetectedElements.delete(el);
     }
+    const getSectionSlug = (el) => {
+      let parent = el.parentElement;
+      while (parent && parent !== document.body) {
+        const tag = parent.tagName.toLowerCase();
+        if (tag === "header" || tag.endsWith("-header")) return "/header";
+        if (tag === "footer" || tag.endsWith("-footer")) return "/footer";
+        parent = parent.parentElement;
+      }
+      return this.currentSlug;
+    };
     const tagCounters = {};
+    const assignKey = (el, sectionSlug) => {
+      const sectionKey = sectionSlug === "/header" ? "header" : sectionSlug === "/footer" ? "footer" : "page";
+      if (!tagCounters[sectionKey]) tagCounters[sectionKey] = {};
+      const tag = el.tagName.toLowerCase();
+      if (!tagCounters[sectionKey][tag]) tagCounters[sectionKey][tag] = 0;
+      const prefix = sectionKey !== "page" ? `${sectionKey}_` : "";
+      const key = `${prefix}xcms_${tag}_${tagCounters[sectionKey][tag]}`;
+      tagCounters[sectionKey][tag]++;
+      el.setAttribute("data-cms", key);
+      el.setAttribute("data-cms-section", sectionSlug);
+      this.autoDetectedElements.add(el);
+    };
     const selector = this.editableTags.join(",");
     const elements = container.querySelectorAll(selector);
     elements.forEach((el) => {
@@ -768,12 +792,13 @@ var XtroedgeCMS = class _XtroedgeCMS {
       if (el.children.length > 3) return;
       const text = this.getDirectTextContent(el).trim();
       if (text.length < 2) return;
-      const tag = el.tagName.toLowerCase();
-      if (!tagCounters[tag]) tagCounters[tag] = 0;
-      const key = `xcms_${tag}_${tagCounters[tag]}`;
-      tagCounters[tag]++;
-      el.setAttribute("data-cms", key);
-      this.autoDetectedElements.add(el);
+      assignKey(el, getSectionSlug(el));
+    });
+    const dataEditables = container.querySelectorAll("[data-editable]");
+    dataEditables.forEach((el) => {
+      if (el.hasAttribute("data-cms")) return;
+      if (el.closest("#xtroedge-cms-root, script, style, noscript")) return;
+      assignKey(el, getSectionSlug(el));
     });
   }
   scanDOM() {
@@ -844,8 +869,13 @@ var XtroedgeCMS = class _XtroedgeCMS {
       const currentVal = this.getPageText(key);
       if (text !== currentVal) this.onTextChanged(key, text);
     };
-    this.managedElements.set(el, { key, blurHandler, keydownHandler, inputHandler });
-    if (this.editMode) this.enableElementEdit(el, key, blurHandler, keydownHandler, inputHandler);
+    const clickHandler = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    const sectionSlug = el.getAttribute("data-cms-section") || this.currentSlug;
+    this.managedElements.set(el, { key, sectionSlug, blurHandler, keydownHandler, inputHandler, clickHandler });
+    if (this.editMode) this.enableElementEdit(el, key, blurHandler, keydownHandler, inputHandler, clickHandler);
   }
   detachElement(el) {
     const info = this.managedElements.get(el);
@@ -853,11 +883,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
       el.removeEventListener("blur", info.blurHandler);
       el.removeEventListener("keydown", info.keydownHandler);
       el.removeEventListener("input", info.inputHandler);
+      el.removeEventListener("click", info.clickHandler, true);
       el.removeAttribute("contenteditable");
       this.managedElements.delete(el);
     }
   }
-  enableElementEdit(el, _key, blurH, keyH, inputH) {
+  enableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     const val = this.getPageText(_key);
     if (val) el.textContent = val;
     el.setAttribute("contenteditable", "true");
@@ -871,8 +902,9 @@ var XtroedgeCMS = class _XtroedgeCMS {
     el.addEventListener("blur", blurH);
     el.addEventListener("keydown", keyH);
     el.addEventListener("input", inputH);
+    el.addEventListener("click", clickH, true);
   }
-  disableElementEdit(el, _key, blurH, keyH, inputH) {
+  disableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     el.removeAttribute("contenteditable");
     el.style.borderBottom = "";
     el.style.padding = "";
@@ -886,11 +918,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
     el.removeEventListener("blur", blurH);
     el.removeEventListener("keydown", keyH);
     el.removeEventListener("input", inputH);
+    el.removeEventListener("click", clickH, true);
   }
   applyEditMode(editMode) {
     for (const [el, info] of this.managedElements) {
-      if (editMode) this.enableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler);
-      else this.disableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler);
+      if (editMode) this.enableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler, info.clickHandler);
+      else this.disableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler, info.clickHandler);
     }
     this.applyImageEditMode(editMode);
   }
@@ -1212,23 +1245,43 @@ var XtroedgeCMS = class _XtroedgeCMS {
   getPageSection() {
     return this.currentSlug.replace(/^\//, "").replace(/-/g, "_").toUpperCase();
   }
+  // Fetch texts for a single slug and merge into pageTexts
+  async fetchSectionTexts(slug, status) {
+    try {
+      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(slug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
+      if (!res.ok) return null;
+      const page = await res.json();
+      return page?.published_content?.texts || page?.content?.texts || null;
+    } catch {
+      return null;
+    }
+  }
   async loadPageContent(status) {
     this.setLoading(true);
     this.cleanOldHistory();
     try {
-      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const page = await res.json();
-      const texts = page?.published_content?.texts || page?.content?.texts;
-      if (texts) {
-        this.pageTexts = JSON.parse(JSON.stringify(texts));
+      const [pageTexts, headerTexts, footerTexts] = await Promise.all([
+        this.fetchSectionTexts(this.currentSlug, status),
+        this.fetchSectionTexts("/header", status),
+        this.fetchSectionTexts("/footer", status)
+      ]);
+      if (pageTexts || headerTexts || footerTexts) {
+        this.pageTexts = {
+          ...pageTexts || {},
+          ...headerTexts || {},
+          ...footerTexts || {}
+        };
       } else {
         this.buildDefaultTexts();
       }
-      const images = page?.published_content?.images || page?.content?.images;
-      if (images) {
-        this.pageImages = JSON.parse(JSON.stringify(images));
-        this.applyPageImages();
+      const resImg = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`).catch(() => null);
+      if (resImg?.ok) {
+        const page = await resImg.json();
+        const images = page?.published_content?.images || page?.content?.images;
+        if (images) {
+          this.pageImages = JSON.parse(JSON.stringify(images));
+          this.applyPageImages();
+        }
       }
       this.originalTexts = JSON.parse(JSON.stringify(this.pageTexts));
       this.originalImages = JSON.parse(JSON.stringify(this.pageImages));
@@ -1246,18 +1299,24 @@ var XtroedgeCMS = class _XtroedgeCMS {
   async loadPublishedContent() {
     this.setLoading(true);
     try {
-      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=published&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const page = await res.json();
-      const texts = page?.published_content?.texts;
-      if (texts && Object.keys(texts).length > 0) {
-        this.pageTexts = JSON.parse(JSON.stringify(texts));
+      const [pageTexts, headerTexts, footerTexts] = await Promise.all([
+        this.fetchSectionTexts(this.currentSlug, "published"),
+        this.fetchSectionTexts("/header", "published"),
+        this.fetchSectionTexts("/footer", "published")
+      ]);
+      const merged = { ...pageTexts || {}, ...headerTexts || {}, ...footerTexts || {} };
+      if (Object.keys(merged).length > 0) {
+        this.pageTexts = JSON.parse(JSON.stringify(merged));
         this.updateElementTexts();
       }
-      const images = page?.published_content?.images;
-      if (images && Object.keys(images).length > 0) {
-        this.pageImages = JSON.parse(JSON.stringify(images));
-        this.applyPageImages();
+      const res = await fetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(this.currentSlug)}&status=published&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
+      if (res.ok) {
+        const page = await res.json();
+        const images = page?.published_content?.images;
+        if (images && Object.keys(images).length > 0) {
+          this.pageImages = JSON.parse(JSON.stringify(images));
+          this.applyPageImages();
+        }
       }
     } catch {
     } finally {
@@ -1295,6 +1354,18 @@ var XtroedgeCMS = class _XtroedgeCMS {
       }
     }
   }
+  // Group pageTexts by section slug based on managedElements info
+  groupTextsBySection() {
+    const sections = {};
+    for (const [, info] of this.managedElements) {
+      const slug = info.sectionSlug;
+      if (!sections[slug]) sections[slug] = {};
+      if (this.pageTexts[info.key] !== void 0) {
+        sections[slug][info.key] = this.pageTexts[info.key];
+      }
+    }
+    return sections;
+  }
   async saveChanges() {
     if (!this.config.apiBase) {
       this.showToast("No API configured. Set apiBase to enable save.", "error");
@@ -1302,19 +1373,22 @@ var XtroedgeCMS = class _XtroedgeCMS {
     }
     this.isSaving = true;
     this.updateUI();
-    const payload = {
-      slug: this.currentSlug,
-      title: this.currentTitle,
-      site_identifier: this.siteIdentifier,
-      content: { texts: this.pageTexts, images: this.pageImages }
-    };
     try {
-      const res = await fetch(`${this.config.apiBase}/web_page/save`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const sections = this.groupTextsBySection();
+      const requests = Object.entries(sections).map(
+        ([slug, texts]) => fetch(`${this.config.apiBase}/web_page/save`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            slug,
+            title: slug === this.currentSlug ? this.currentTitle : slug.replace("/", ""),
+            site_identifier: this.siteIdentifier,
+            content: { texts, ...slug === this.currentSlug ? { images: this.pageImages } : {} }
+          })
+        })
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => !r.ok)) throw new Error("One or more sections failed to save");
       this.isSaving = false;
       this.resetAfterSave();
       this.updateUI();
@@ -1334,19 +1408,22 @@ var XtroedgeCMS = class _XtroedgeCMS {
     }
     this.isPublishing = true;
     this.updateUI();
-    const payload = {
-      slug: this.currentSlug,
-      title: this.currentTitle,
-      site_identifier: this.siteIdentifier,
-      published_content: { texts: this.pageTexts, images: this.pageImages }
-    };
     try {
-      const res = await fetch(`${this.config.apiBase}/web_page/publish`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload)
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const sections = this.groupTextsBySection();
+      const requests = Object.entries(sections).map(
+        ([slug, texts]) => fetch(`${this.config.apiBase}/web_page/publish`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            slug,
+            title: slug === this.currentSlug ? this.currentTitle : slug.replace("/", ""),
+            site_identifier: this.siteIdentifier,
+            published_content: { texts, ...slug === this.currentSlug ? { images: this.pageImages } : {} }
+          })
+        })
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => !r.ok)) throw new Error("One or more sections failed to publish");
       this.isPublishing = false;
       this.resetAfterSave();
       this.updateUI();