@progressive-development/pd-page/dist/bg-config-utils.js

Progressive development page helper, teaser, menu, footer.

function mapImageDisplayStyles(bg, prefix) {
  if (bg.mode !== "image") return {};
  const styles = {};
  if (bg.bgSize) styles[`--pd-${prefix}-bg-size`] = bg.bgSize;
  if (bg.bgRepeat) styles[`--pd-${prefix}-bg-repeat`] = bg.bgRepeat;
  if (bg.bgAttachment) styles[`--pd-${prefix}-bg-attachment`] = bg.bgAttachment;
  if (bg.bgPosition) styles[`--pd-${prefix}-bg-position`] = bg.bgPosition;
  return styles;
}
function mapBgBase(bg) {
  let bgImage = "";
  let bgCol = "";
  let gradient = "";
  let textShadow = "";
  switch (bg.mode) {
    case "color":
      bgCol = bg.color ?? "";
      break;
    case "gradient": {
      const angle = bg.gradientAngle ?? 180;
      const c1 = bg.gradientColor1 ?? "#000";
      const c2 = bg.gradientColor2 ?? "#000";
      const s1 = bg.gradientStop1 ?? 0;
      const s2 = bg.gradientStop2 ?? 100;
      bgCol = `linear-gradient(${angle}deg, ${c1} ${s1}%, ${c2} ${s2}%)`;
      break;
    }
    case "image": {
      bgImage = bg.bgImage ?? "";
      if (bg.overlayColor && (bg.overlayOpacity ?? 0) > 0) {
        const alphaHex = Math.round((bg.overlayOpacity ?? 0) * 2.55).toString(16).padStart(2, "0");
        const overlay = `${bg.overlayColor}${alphaHex}`;
        gradient = `linear-gradient(${overlay}, ${overlay})`;
      }
      if (bg.textShadow) {
        textShadow = "0 1px 3px rgba(0,0,0,0.4)";
      }
      break;
    }
  }
  return { bgImage, bgCol, gradient, textShadow };
}
function mapMenuBg(bg) {
  if (!bg) return { bgImage: "", styles: {} };
  const { bgImage, bgCol, gradient, textShadow } = mapBgBase(bg);
  const styles = {
    ...mapImageDisplayStyles(bg, "menu")
  };
  if (bgCol) styles["--pd-menu-bg-col"] = bgCol;
  if (gradient) styles["--pd-menu-gradient"] = gradient;
  if (textShadow) styles["--pd-menu-text-shadow"] = textShadow;
  return { bgImage, styles };
}
function mapFooterBg(bg) {
  if (!bg) return { bgImage: "", styles: {} };
  const { bgImage, bgCol, gradient, textShadow } = mapBgBase(bg);
  const styles = {
    ...mapImageDisplayStyles(bg, "footer")
  };
  if (bgCol) styles["--pd-footer-bg-col"] = bgCol;
  if (gradient) styles["--pd-footer-gradient"] = gradient;
  if (textShadow) styles["--pd-footer-text-shadow"] = textShadow;
  return { bgImage, styles };
}
function mapPageBg(bg) {
  if (!bg) return { bgImage: "", styles: {} };
  const { bgImage, bgCol, gradient } = mapBgBase(bg);
  const styles = {
    ...mapImageDisplayStyles(bg, "page")
  };
  if (bgCol) styles["--pd-page-bg"] = bgCol;
  if (gradient) styles["--pd-page-gradient"] = gradient;
  return { bgImage, styles };
}
function mapSectionBg(bg) {
  if (!bg) return { bgImage: "", styles: {} };
  const { bgImage, bgCol, gradient, textShadow } = mapBgBase(bg);
  const styles = {
    ...mapImageDisplayStyles(bg, "section")
  };
  if (bgCol) styles["--pd-section-bg"] = bgCol;
  if (gradient) styles["--pd-section-gradient"] = gradient;
  if (textShadow) styles["--pd-section-text-shadow"] = textShadow;
  return { bgImage, styles };
}

export { mapFooterBg, mapMenuBg, mapPageBg, mapSectionBg };