@aurigma/design-editor-iframe
Version:
Using this module you can embed Design Editor (a part of Customer's Canvas) to your page through the IFrame API.
88 lines • 4.21 kB
JavaScript
import "./LoadMask.css";
var maskStyles = require('./LoadMask.css');
var logo;
export function maskElement(element) {
if (isMaskedElement(element)) {
unmaskElement(element);
}
element.classList.add("masked-element");
var maskElementDiv = document.createElement("div");
maskElementDiv.classList.add("mask");
maskElementDiv.innerHTML = "<div class='loader-wraper icon-cc-logo'><div class='loader'></div></div><div class='masked-element-message'></div>";
if (maskElementDiv.querySelector(".logo") == null)
addLogoElement(maskElementDiv.querySelector(".loader-wraper"));
prependChild(element, maskElementDiv);
}
export function maskMessage(element, message, isError) {
if (isError === void 0) { isError = false; }
if (!isMaskedElement(element)) {
maskElement(element);
}
element.querySelector(".masked-element-message").innerText = message;
if (isError) {
var mask = element.querySelector(".mask");
mask.classList.add("warning");
if (logo == null) {
var loaderWrapper = element.querySelector(".loader-wraper");
loaderWrapper.innerHTML = "<div class='loader'></div><svg viewBox=\"0 0 32 32\" class=\"logo\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 4H4V28H13V24.2494H7.7506V7.7506H13V4Z\" fill=\"red\"/><path d=\"M19 28V24.2494H24.2494V7.7506H19V4H28V28H19Z\" fill=\"red\"/></svg>";
}
}
else {
element.querySelector(".mask").classList.remove("warning");
}
}
export function unmaskElement(element) {
element.classList.remove("masked-element");
var maskElements = element.querySelectorAll(".mask");
for (var i = 0; i < maskElements.length; i++) {
element.removeChild(maskElements.item(i));
}
}
export function isMaskedElement(element) {
return element.classList.contains("masked-element");
}
export function setLogo(value) {
if (value != null)
logo = value;
}
function addLogoElement(maskElement) {
if (typeof logo === "string") {
if (logo.startsWith("data:image") || logo.startsWith("http")) {
var logoElement = document.createElement("div");
logoElement.className = "logo";
logoElement.style.backgroundSize = "contain";
logoElement.style.backgroundImage = "url(" + logo + ")";
logoElement.style.backgroundRepeat = "no-repeat";
logoElement.style.backgroundPositionX = "50%";
logoElement.style.backgroundPositionY = "50%";
if (document.documentElement.style.getPropertyValue("--de-brand-primary") != null)
logoElement.style.color = "var(--de-brand-primary)";
logoElement.style.color = "var()";
maskElement.appendChild(logoElement);
return;
}
else {
var svg = new DOMParser().parseFromString(logo, "image/svg+xml");
if (svg.documentElement.tagName.toLowerCase() === "svg") {
svg.documentElement.classList.add("logo");
if (document.documentElement.style.getPropertyValue("--de-brand-primary") != null)
svg.documentElement.style.color = "var(--de-brand-primary)";
maskElement.appendChild(svg.documentElement);
return;
}
}
}
maskElement.innerHTML += "<svg viewBox=\"0 0 32 32\" class=\"logo\" style=\"color:#0090FF\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13 4H4V28H13V24.2494H7.7506V7.7506H13V4Z\" fill=\"currentColor\"/><path d=\"M19 28V24.2494H24.2494V7.7506H19V4H28V28H19Z\" fill=\"currentColor\"/></svg>";
}
function prependChild(rootElement, childElement) {
rootElement.insertBefore(childElement, rootElement.firstChild);
}
export var ensureMaskStylesExist = function () {
if (document.getElementById("cc-load-mask") != null)
return;
var stylesTag = document.createElement("style");
stylesTag.id = "cc-load-mask";
stylesTag.innerHTML += maskStyles;
document.querySelector('head').appendChild(stylesTag);
};
//# sourceMappingURL=LoadMask.js.map