f3ff7b7186
- WordPress 6.9.4 (es_ES) with Kadence theme - Homepage: Hero, La Asociación, Pilares, Beneficios, Eventos, Miembros, Hazte Miembro, Contacto - Brand identity: #13294b navy, #a12932 burgundy, #c69c48 gold - Fonts: Raleway (headings) + Source Sans 3 (body) + Lato (UI) - Plugins: Kadence Blocks, Polylang, Contact Form 7 - Custom CSS with full brand styling and responsive layout - HTTPS enforced via wp-config.php proxy detection
2619 lines
76 KiB
JavaScript
2619 lines
76 KiB
JavaScript
(function ($) {
|
|
"use strict";
|
|
var $window = $(window),
|
|
$document = $(document),
|
|
$body = $("body");
|
|
// Site title and description.
|
|
wp.customize("blogname", function (value) {
|
|
value.bind(function (to) {
|
|
$(".site-title").text(to);
|
|
});
|
|
});
|
|
wp.customize("blogdescription", function (value) {
|
|
value.bind(function (to) {
|
|
$(".site-description").text(to);
|
|
});
|
|
});
|
|
wp.customize.bind("preview-ready", function () {
|
|
var defaultTarget = window.parent === window ? null : window.parent;
|
|
$document.on(
|
|
"click",
|
|
".site-header-focus-item .item-customizer-focus, .builder-item-focus .edit-row-action",
|
|
function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var p = $(this).closest(".site-header-focus-item");
|
|
var section_id = p.attr("data-section") || "";
|
|
if (section_id) {
|
|
if (defaultTarget.wp.customize.section(section_id)) {
|
|
defaultTarget.wp.customize.section(section_id).focus();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
$document.on(
|
|
"click",
|
|
".site-footer-focus-item .item-customizer-focus",
|
|
function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var p = $(this).closest(".site-footer-focus-item");
|
|
var section_id = p.attr("data-section") || "";
|
|
if (section_id) {
|
|
if (defaultTarget.wp.customize.section(section_id)) {
|
|
defaultTarget.wp.customize.section(section_id).focus();
|
|
}
|
|
}
|
|
}
|
|
);
|
|
});
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
if (navigator.userAgent.toLowerCase().indexOf("safari/") != -1) {
|
|
if (navigator.userAgent.toLowerCase().indexOf("chrome") > -1) {
|
|
} else {
|
|
// Safari doesn't want to render the iframe... This hack at least makes it render although it's not idea because of the flash.
|
|
// $body.animate({
|
|
// opacity: 0,
|
|
// }, 50, function() {
|
|
// $body.css( 'display', 'none' );
|
|
// $body.css( 'opacity', 1 );
|
|
// });
|
|
// setTimeout(function(){
|
|
// $body.css( 'display', 'block' );
|
|
// }, 100);
|
|
}
|
|
}
|
|
var hasSelectiveRefresh =
|
|
"undefined" !== typeof wp &&
|
|
wp.customize &&
|
|
wp.customize.selectiveRefresh &&
|
|
wp.customize.widgetsPreview &&
|
|
wp.customize.widgetsPreview.WidgetPartial;
|
|
if (hasSelectiveRefresh) {
|
|
wp.customize.selectiveRefresh.bind(
|
|
"partial-content-rendered",
|
|
function (placement) {
|
|
if (placement.partial.id === "header_desktop_items") {
|
|
window.kadence.initToggleDrawer();
|
|
}
|
|
window.kadence.initTransHeaderPadding();
|
|
if (
|
|
typeof window.kadence.initStickyHeader !== "undefined"
|
|
) {
|
|
window.kadence.initStickyHeader();
|
|
window.kadence.initScrollToTop();
|
|
}
|
|
}
|
|
);
|
|
}
|
|
});
|
|
var kadenceCustomizer = {
|
|
/**
|
|
* Calculate preferred value with custom viewport widths using precise calc formula
|
|
*
|
|
* @param {object} font Font settings object
|
|
* @return {string} Calculated preferred value as calc expression
|
|
*/
|
|
calculate_preferred_value_with_viewports: function (font) {
|
|
var min_value = font.minFontSize;
|
|
var max_value = font.maxFontSize;
|
|
var min_viewport = font.minScreenSize;
|
|
var max_viewport = font.maxScreenSize;
|
|
var unit = font.fontSizeUnit || "px";
|
|
var viewport_unit = font.screenSizeUnit || "px";
|
|
|
|
if (!min_value || !max_value || !min_viewport || !max_viewport) {
|
|
return "";
|
|
}
|
|
|
|
// Convert to rem if needed for consistent calculation
|
|
var min_in_rem = min_value;
|
|
var max_in_rem = max_value;
|
|
|
|
// Convert px to rem for calculation (but keep original unit in output)
|
|
var output_unit = unit;
|
|
if (unit === "px") {
|
|
min_in_rem = min_value / 16;
|
|
max_in_rem = max_value / 16;
|
|
unit = "rem";
|
|
}
|
|
|
|
// For rem-based calculations, use the precise formula
|
|
// The formula: preferred = a + b*vw where:
|
|
// b = 1600 * (F2 - F1) / (W2 - W1)
|
|
// a = F1 - (b/1600) * W1
|
|
// This ensures at W1: a + b*(W1/100) = F1 and at W2: a + b*(W2/100) = F2
|
|
|
|
if (unit === "rem" || unit === "em") {
|
|
var slope =
|
|
(1600 * (max_in_rem - min_in_rem)) /
|
|
(max_viewport - min_viewport);
|
|
var intercept = min_in_rem - (slope / 1600) * min_viewport;
|
|
|
|
// Round to 4 decimal places for precision
|
|
var rounded_intercept = Math.round(intercept * 10000) / 10000;
|
|
var rounded_slope = Math.round(slope * 10000) / 10000;
|
|
|
|
// Return clean expression without calc()
|
|
return rounded_intercept + unit + " + " + rounded_slope + "vw";
|
|
}
|
|
|
|
// For other units (%, vw), use a simpler approach
|
|
var slope =
|
|
((max_value - min_value) / (max_viewport - min_viewport)) * 100;
|
|
var intercept = min_value - (slope * min_viewport) / 100;
|
|
|
|
var rounded_intercept = Math.round(intercept * 10000) / 10000;
|
|
var rounded_slope = Math.round(slope * 10000) / 10000;
|
|
|
|
return rounded_intercept + unit + " + " + rounded_slope + "vw";
|
|
},
|
|
|
|
/**
|
|
* Generate a clamp value from mobile and desktop sizes
|
|
*
|
|
* @param {object} font Font settings object
|
|
* @return {string} Generated clamp value
|
|
*/
|
|
generate_clamp_value: function (font) {
|
|
var clamped = font.clamped === true;
|
|
if (clamped) {
|
|
var min_value = font.minFontSize;
|
|
var max_value = font.maxFontSize;
|
|
var unit = font.fontSizeUnit || "px";
|
|
|
|
var preferred =
|
|
this.calculate_preferred_value_with_viewports(font);
|
|
|
|
if (preferred && min_value && max_value) {
|
|
return (
|
|
"clamp(" +
|
|
min_value +
|
|
unit +
|
|
", " +
|
|
preferred +
|
|
", " +
|
|
max_value +
|
|
unit +
|
|
")"
|
|
);
|
|
}
|
|
}
|
|
|
|
return "";
|
|
},
|
|
|
|
live_css_typography: function (key, rules, newValue) {
|
|
var styleID = "kadence-customize-preview-css-" + key,
|
|
$style = $("#" + styleID),
|
|
css = "",
|
|
media_tablet = "@media screen and (max-width: 1023px)",
|
|
media_mobile = "@media screen and (max-width: 499px)",
|
|
selector,
|
|
cssArray = {};
|
|
|
|
// Create <style> tag if doesn't exist.
|
|
if (0 === $style.length) {
|
|
$style = $(document.createElement("style"));
|
|
$style.attr("id", styleID);
|
|
$style.attr("type", "text/css");
|
|
|
|
// Append <style> tag to <head>.
|
|
$style.appendTo($("head"));
|
|
}
|
|
_.each(rules, function (rule) {
|
|
if (
|
|
undefined == rule["property"] ||
|
|
undefined == rule["selector"]
|
|
) {
|
|
return;
|
|
}
|
|
rule["media"] = rule["media"] || "global";
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
if ("object" == typeof newValue) {
|
|
let clamped_value = "";
|
|
if (
|
|
undefined !== newValue["clamped"] &&
|
|
true === newValue["clamped"]
|
|
) {
|
|
clamped_value =
|
|
kadenceCustomizer.generate_clamp_value(newValue);
|
|
}
|
|
if (clamped_value) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
cssArray[rule["media"]][selector]["font-size"] =
|
|
clamped_value;
|
|
} else {
|
|
if (
|
|
undefined !== newValue["size"] &&
|
|
"object" == typeof newValue["size"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
if (
|
|
undefined !== newValue["size"]["desktop"] &&
|
|
"" !== newValue["size"]["desktop"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[rule["media"]][selector]
|
|
)
|
|
cssArray[rule["media"]][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["sizeType"] &&
|
|
"" !== newValue["sizeType"]
|
|
? newValue["sizeType"]
|
|
: "px";
|
|
cssArray[rule["media"]][selector]["font-size"] =
|
|
newValue["size"]["desktop"] + unit;
|
|
}
|
|
if (
|
|
undefined !== newValue["size"]["tablet"] &&
|
|
"" !== newValue["size"]["tablet"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["tablet"]
|
|
? rule["selector"]["tablet"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[media_tablet][selector]
|
|
)
|
|
cssArray[media_tablet][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["sizeType"] &&
|
|
"" !== newValue["sizeType"]
|
|
? newValue["sizeType"]
|
|
: "px";
|
|
cssArray[media_tablet][selector]["font-size"] =
|
|
newValue["size"]["tablet"] + unit;
|
|
}
|
|
if (
|
|
undefined !== newValue["size"]["mobile"] &&
|
|
"" !== newValue["size"]["mobile"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["mobile"]
|
|
? rule["selector"]["mobile"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[media_mobile][selector]
|
|
)
|
|
cssArray[media_mobile][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["sizeType"] &&
|
|
"" !== newValue["sizeType"]
|
|
? newValue["sizeType"]
|
|
: "px";
|
|
cssArray[media_mobile][selector]["font-size"] =
|
|
newValue["size"]["mobile"] + unit;
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
undefined !== newValue["lineHeight"] &&
|
|
"object" == typeof newValue["lineHeight"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
if (
|
|
undefined !== newValue["lineHeight"]["desktop"] &&
|
|
"" !== newValue["lineHeight"]["desktop"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["lineType"] &&
|
|
"" !== newValue["lineType"] &&
|
|
"-" !== newValue["lineType"]
|
|
? newValue["lineType"]
|
|
: "";
|
|
cssArray[rule["media"]][selector]["line-height"] =
|
|
newValue["lineHeight"]["desktop"] + unit;
|
|
}
|
|
if (
|
|
undefined !== newValue["lineHeight"]["tablet"] &&
|
|
"" !== newValue["lineHeight"]["tablet"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["tablet"]
|
|
? rule["selector"]["tablet"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (undefined == cssArray[media_tablet][selector])
|
|
cssArray[media_tablet][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["lineType"] &&
|
|
"" !== newValue["lineType"] &&
|
|
"-" !== newValue["lineType"]
|
|
? newValue["lineType"]
|
|
: "";
|
|
cssArray[media_tablet][selector]["line-height"] =
|
|
newValue["lineHeight"]["tablet"] + unit;
|
|
}
|
|
if (
|
|
undefined !== newValue["lineHeight"]["mobile"] &&
|
|
"" !== newValue["lineHeight"]["mobile"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["mobile"]
|
|
? rule["selector"]["mobile"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (undefined == cssArray[media_mobile][selector])
|
|
cssArray[media_mobile][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["lineType"] &&
|
|
"" !== newValue["lineType"] &&
|
|
"-" !== newValue["lineType"]
|
|
? newValue["lineType"]
|
|
: "";
|
|
cssArray[media_mobile][selector]["line-height"] =
|
|
newValue["lineHeight"]["mobile"] + unit;
|
|
}
|
|
}
|
|
if (
|
|
undefined !== newValue["letterSpacing"] &&
|
|
"object" == typeof newValue["letterSpacing"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
if (
|
|
undefined !==
|
|
newValue["letterSpacing"]["desktop"] &&
|
|
"" !== newValue["letterSpacing"]["desktop"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["spacingType"] &&
|
|
"" !== newValue["spacingType"]
|
|
? newValue["spacingType"]
|
|
: "";
|
|
cssArray[rule["media"]][selector][
|
|
"letter-spacing"
|
|
] = newValue["letterSpacing"]["desktop"] + unit;
|
|
}
|
|
if (
|
|
undefined !== newValue["letterSpacing"]["tablet"] &&
|
|
"" !== newValue["letterSpacing"]["tablet"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["tablet"]
|
|
? rule["selector"]["tablet"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (undefined == cssArray[media_tablet][selector])
|
|
cssArray[media_tablet][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["spacingType"] &&
|
|
"" !== newValue["spacingType"]
|
|
? newValue["spacingType"]
|
|
: "";
|
|
cssArray[media_tablet][selector]["letter-spacing"] =
|
|
newValue["letterSpacing"]["tablet"] + unit;
|
|
}
|
|
if (
|
|
undefined !== newValue["letterSpacing"]["mobile"] &&
|
|
"" !== newValue["letterSpacing"]["mobile"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["mobile"]
|
|
? rule["selector"]["mobile"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (undefined == cssArray[media_mobile][selector])
|
|
cssArray[media_mobile][selector] = {};
|
|
var unit =
|
|
undefined !== newValue["spacingType"] &&
|
|
"" !== newValue["spacingType"]
|
|
? newValue["spacingType"]
|
|
: "";
|
|
cssArray[media_mobile][selector]["letter-spacing"] =
|
|
newValue["letterSpacing"]["mobile"] + unit;
|
|
}
|
|
}
|
|
if (
|
|
undefined !== newValue["family"] &&
|
|
"" !== newValue["family"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
if (
|
|
undefined !== newValue["google"] &&
|
|
newValue["google"] &&
|
|
typeof WebFont !== "undefined" &&
|
|
WebFont
|
|
) {
|
|
var link = newValue["family"];
|
|
if (
|
|
"family" === rule["key"] &&
|
|
newValue["variant"]
|
|
) {
|
|
link += ":" + newValue["variant"].toString();
|
|
} else if (
|
|
newValue["variant"] &&
|
|
"" !== newValue["variant"]
|
|
) {
|
|
link += ":" + newValue["variant"];
|
|
}
|
|
WebFont.load({ google: { families: [link] } });
|
|
}
|
|
cssArray[rule["media"]][selector]["font-family"] =
|
|
"inherit" !== newValue["family"]
|
|
? newValue["family"]
|
|
: "";
|
|
}
|
|
if (
|
|
undefined !== newValue["style"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
cssArray[rule["media"]][selector]["font-style"] =
|
|
newValue["style"];
|
|
}
|
|
if (
|
|
undefined !== newValue["weight"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
cssArray[rule["media"]][selector]["font-weight"] =
|
|
newValue["weight"];
|
|
}
|
|
if (
|
|
undefined !== newValue["transform"] &&
|
|
"" !== newValue["transform"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
cssArray[rule["media"]][selector]["text-transform"] =
|
|
newValue["transform"];
|
|
}
|
|
if (
|
|
undefined !== newValue["color"] &&
|
|
"family" !== rule["key"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
var color_type = "";
|
|
if (newValue["color"].includes("palette")) {
|
|
color_type =
|
|
"var(--global-" + newValue["color"] + ")";
|
|
} else {
|
|
color_type = newValue["color"];
|
|
}
|
|
cssArray[rule["media"]][selector]["color"] = color_type;
|
|
}
|
|
}
|
|
});
|
|
// Loop into the sorted array to build CSS string.
|
|
_.each(cssArray, function (selectors, media) {
|
|
if ("global" !== media) css += media + "{";
|
|
_.each(selectors, function (properties, selector) {
|
|
css += selector + "{";
|
|
_.each(properties, function (value, property) {
|
|
css += property + ":" + value + ";";
|
|
});
|
|
css += "}";
|
|
});
|
|
if ("global" !== media) css += "}";
|
|
});
|
|
// Add CSS string to <style> tag.
|
|
$style.html(css);
|
|
},
|
|
live_css_background: function (key, rules, newValue) {
|
|
var styleID = "kadence-customize-preview-css-" + key,
|
|
$style = $("#" + styleID),
|
|
css = "",
|
|
media_tablet = "@media screen and (max-width: 1023px)",
|
|
media_mobile = "@media screen and (max-width: 499px)",
|
|
selector,
|
|
cssArray = {};
|
|
|
|
// Create <style> tag if doesn't exist.
|
|
if (0 === $style.length) {
|
|
$style = $(document.createElement("style"));
|
|
$style.attr("id", styleID);
|
|
$style.attr("type", "text/css");
|
|
|
|
// Append <style> tag to <head>.
|
|
$style.appendTo($("head"));
|
|
}
|
|
_.each(rules, function (rule) {
|
|
if (
|
|
undefined == rule["property"] ||
|
|
undefined == rule["selector"]
|
|
) {
|
|
return;
|
|
}
|
|
rule["media"] = rule["media"] || "global";
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
if ("object" == typeof newValue) {
|
|
if (undefined !== newValue["desktop"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
var background_type =
|
|
undefined !== newValue["desktop"]["type"] &&
|
|
"" !== newValue["desktop"]["type"]
|
|
? newValue["desktop"]["type"]
|
|
: "color";
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes("palette")
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("image" === background_type) {
|
|
var imageValue =
|
|
undefined !== newValue["desktop"]["image"] &&
|
|
undefined !==
|
|
newValue["desktop"]["image"]["url"] &&
|
|
"" !== newValue["desktop"]["image"]["url"]
|
|
? "url(" +
|
|
newValue["desktop"]["image"]["url"] +
|
|
")"
|
|
: false;
|
|
if (imageValue) {
|
|
cssArray[rule["media"]][selector][
|
|
"background-color"
|
|
] = color_type;
|
|
cssArray[rule["media"]][selector][
|
|
"background-image"
|
|
] = imageValue;
|
|
cssArray[rule["media"]][selector][
|
|
"background-repeat"
|
|
] =
|
|
undefined !==
|
|
newValue["desktop"]["image"][
|
|
"repeat"
|
|
] &&
|
|
"" !==
|
|
newValue["desktop"]["image"]["repeat"]
|
|
? newValue["desktop"]["image"]["repeat"]
|
|
: "inherit";
|
|
cssArray[rule["media"]][selector][
|
|
"background-size"
|
|
] =
|
|
undefined !==
|
|
newValue["desktop"]["image"]["size"] &&
|
|
"" !== newValue["desktop"]["image"]["size"]
|
|
? newValue["desktop"]["image"]["size"]
|
|
: "inherit";
|
|
cssArray[rule["media"]][selector][
|
|
"background-position"
|
|
] =
|
|
undefined !==
|
|
newValue["desktop"]["image"][
|
|
"position"
|
|
] &&
|
|
undefined !==
|
|
newValue["desktop"]["image"][
|
|
"position"
|
|
]["x"] &&
|
|
"" !==
|
|
newValue["desktop"]["image"][
|
|
"position"
|
|
]["x"]
|
|
? `${
|
|
newValue["desktop"]["image"][
|
|
"position"
|
|
]["x"] * 100
|
|
}% ${
|
|
newValue["desktop"]["image"][
|
|
"position"
|
|
]["y"] * 100
|
|
}%`
|
|
: "center";
|
|
cssArray[rule["media"]][selector][
|
|
"background-attachment"
|
|
] =
|
|
undefined !==
|
|
newValue["desktop"]["image"][
|
|
"attachment"
|
|
] &&
|
|
"" !==
|
|
newValue["desktop"]["image"][
|
|
"attachment"
|
|
]
|
|
? newValue["desktop"]["image"][
|
|
"attachment"
|
|
]
|
|
: "inherit";
|
|
} else {
|
|
if ("" !== color_type) {
|
|
cssArray[rule["media"]][selector][
|
|
"background"
|
|
] = color_type;
|
|
}
|
|
}
|
|
} else if ("gradient" === background_type) {
|
|
var gradientValue =
|
|
undefined !== newValue["desktop"]["gradient"] &&
|
|
"" !== newValue["desktop"]["gradient"]
|
|
? newValue["desktop"]["gradient"]
|
|
: false;
|
|
if ("" !== gradientValue) {
|
|
cssArray[rule["media"]][selector][
|
|
"background"
|
|
] = gradientValue;
|
|
}
|
|
} else {
|
|
if ("" !== color_type) {
|
|
cssArray[rule["media"]][selector][
|
|
"background"
|
|
] = color_type;
|
|
}
|
|
}
|
|
}
|
|
if (undefined !== newValue["tablet"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["tablet"]
|
|
? rule["selector"]["tablet"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (undefined == cssArray[media_tablet][selector])
|
|
cssArray[media_tablet][selector] = {};
|
|
var background_type =
|
|
undefined !== newValue["tablet"]["type"] &&
|
|
"" !== newValue["tablet"]["type"]
|
|
? newValue["tablet"]["type"]
|
|
: "color";
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["tablet"]["color"] &&
|
|
"" !== newValue["tablet"]["color"]
|
|
) {
|
|
if (
|
|
newValue["tablet"]["color"].includes("palette")
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["tablet"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["tablet"]["color"];
|
|
}
|
|
}
|
|
if ("image" === background_type) {
|
|
var imageValue =
|
|
undefined !== newValue["tablet"]["image"] &&
|
|
undefined !==
|
|
newValue["tablet"]["image"]["url"] &&
|
|
"" !== newValue["tablet"]["image"]["url"]
|
|
? "url(" +
|
|
newValue["tablet"]["image"]["url"] +
|
|
")"
|
|
: false;
|
|
if (imageValue) {
|
|
cssArray[media_tablet][selector][
|
|
"background-color"
|
|
] = color_type;
|
|
cssArray[media_tablet][selector][
|
|
"background-image"
|
|
] = imageValue;
|
|
cssArray[media_tablet][selector][
|
|
"background-repeat"
|
|
] =
|
|
undefined !==
|
|
newValue["tablet"]["image"]["repeat"] &&
|
|
"" !== newValue["tablet"]["image"]["repeat"]
|
|
? newValue["tablet"]["image"]["repeat"]
|
|
: "inherit";
|
|
cssArray[media_tablet][selector][
|
|
"background-size"
|
|
] =
|
|
undefined !==
|
|
newValue["tablet"]["image"]["size"] &&
|
|
"" !== newValue["tablet"]["image"]["size"]
|
|
? newValue["tablet"]["image"]["size"]
|
|
: "inherit";
|
|
cssArray[media_tablet][selector][
|
|
"background-position"
|
|
] =
|
|
undefined !==
|
|
newValue["tablet"]["image"][
|
|
"position"
|
|
] &&
|
|
undefined !==
|
|
newValue["tablet"]["image"]["position"][
|
|
"x"
|
|
] &&
|
|
"" !==
|
|
newValue["tablet"]["image"]["position"][
|
|
"x"
|
|
]
|
|
? `${
|
|
newValue["tablet"]["image"][
|
|
"position"
|
|
]["x"] * 100
|
|
}% ${
|
|
newValue["tablet"]["image"][
|
|
"position"
|
|
]["y"] * 100
|
|
}%`
|
|
: "center";
|
|
cssArray[media_tablet][selector][
|
|
"background-attachment"
|
|
] =
|
|
undefined !==
|
|
newValue["tablet"]["image"][
|
|
"attachment"
|
|
] &&
|
|
"" !==
|
|
newValue["tablet"]["image"][
|
|
"attachment"
|
|
]
|
|
? newValue["tablet"]["image"][
|
|
"attachment"
|
|
]
|
|
: "inherit";
|
|
} else {
|
|
if ("" !== color_type) {
|
|
cssArray[media_tablet][selector][
|
|
"background"
|
|
] = color_type;
|
|
}
|
|
}
|
|
} else if ("gradient" === background_type) {
|
|
var gradientValue =
|
|
undefined !== newValue["tablet"]["gradient"] &&
|
|
"" !== newValue["tablet"]["gradient"]
|
|
? newValue["tablet"]["gradient"]
|
|
: false;
|
|
if ("" !== gradientValue) {
|
|
cssArray[rule["media"]][selector][
|
|
"background"
|
|
] = gradientValue;
|
|
}
|
|
} else {
|
|
if ("" !== color_type) {
|
|
cssArray[media_tablet][selector]["background"] =
|
|
color_type;
|
|
}
|
|
}
|
|
}
|
|
if (undefined !== newValue["mobile"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["mobile"]
|
|
? rule["selector"]["mobile"]
|
|
: rule["selector"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (undefined == cssArray[media_mobile][selector])
|
|
cssArray[media_mobile][selector] = {};
|
|
var background_type =
|
|
undefined !== newValue["mobile"]["type"] &&
|
|
"" !== newValue["mobile"]["type"]
|
|
? newValue["mobile"]["type"]
|
|
: "color";
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["mobile"]["color"] &&
|
|
"" !== newValue["mobile"]["color"]
|
|
) {
|
|
if (
|
|
newValue["mobile"]["color"].includes("palette")
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["mobile"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["mobile"]["color"];
|
|
}
|
|
}
|
|
if ("image" === background_type) {
|
|
var imageValue =
|
|
undefined !== newValue["mobile"]["image"] &&
|
|
undefined !==
|
|
newValue["mobile"]["image"]["url"] &&
|
|
"" !== newValue["mobile"]["image"]["url"]
|
|
? "url(" +
|
|
newValue["mobile"]["image"]["url"] +
|
|
")"
|
|
: false;
|
|
if (imageValue) {
|
|
cssArray[media_mobile][selector][
|
|
"background-color"
|
|
] = color_type;
|
|
cssArray[media_mobile][selector][
|
|
"background-image"
|
|
] = imageValue;
|
|
cssArray[media_mobile][selector][
|
|
"background-repeat"
|
|
] =
|
|
undefined !==
|
|
newValue["mobile"]["image"]["repeat"] &&
|
|
"" !== newValue["mobile"]["image"]["repeat"]
|
|
? newValue["mobile"]["image"]["repeat"]
|
|
: "inherit";
|
|
cssArray[media_mobile][selector][
|
|
"background-size"
|
|
] =
|
|
undefined !==
|
|
newValue["mobile"]["image"]["size"] &&
|
|
"" !== newValue["mobile"]["image"]["size"]
|
|
? newValue["mobile"]["image"]["size"]
|
|
: "inherit";
|
|
cssArray[media_mobile][selector][
|
|
"background-position"
|
|
] =
|
|
undefined !==
|
|
newValue["mobile"]["image"][
|
|
"position"
|
|
] &&
|
|
undefined !==
|
|
newValue["mobile"]["image"]["position"][
|
|
"x"
|
|
] &&
|
|
"" !==
|
|
newValue["mobile"]["image"]["position"][
|
|
"x"
|
|
]
|
|
? `${
|
|
newValue["mobile"]["image"][
|
|
"position"
|
|
]["x"] * 100
|
|
}% ${
|
|
newValue["mobile"]["image"][
|
|
"position"
|
|
]["y"] * 100
|
|
}%`
|
|
: "inherit";
|
|
cssArray[media_mobile][selector][
|
|
"background-attachment"
|
|
] =
|
|
undefined !==
|
|
newValue["mobile"]["image"][
|
|
"attachment"
|
|
] &&
|
|
"" !==
|
|
newValue["mobile"]["image"][
|
|
"attachment"
|
|
]
|
|
? newValue["mobile"]["image"][
|
|
"attachment"
|
|
]
|
|
: "inherit";
|
|
} else {
|
|
if ("" !== color_type) {
|
|
cssArray[media_mobile][selector][
|
|
"background"
|
|
] = color_type;
|
|
}
|
|
}
|
|
} else if ("gradient" === background_type) {
|
|
var gradientValue =
|
|
undefined !== newValue["mobile"]["gradient"] &&
|
|
"" !== newValue["mobile"]["gradient"]
|
|
? newValue["mobile"]["gradient"]
|
|
: false;
|
|
if ("" !== gradientValue) {
|
|
cssArray[rule["media"]][selector][
|
|
"background"
|
|
] = gradientValue;
|
|
}
|
|
} else {
|
|
if ("" !== color_type) {
|
|
cssArray[media_mobile][selector]["background"] =
|
|
color_type;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
// Loop into the sorted array to build CSS string.
|
|
_.each(cssArray, function (selectors, media) {
|
|
if ("global" !== media) css += media + "{";
|
|
_.each(selectors, function (properties, selector) {
|
|
css += selector + "{";
|
|
_.each(properties, function (value, property) {
|
|
css += property + ":" + value + ";";
|
|
});
|
|
css += "}";
|
|
});
|
|
if ("global" !== media) css += "}";
|
|
});
|
|
|
|
// Add CSS string to <style> tag.
|
|
$style.html(css);
|
|
},
|
|
live_css_border: function (key, rules, newValue) {
|
|
var styleID = "kadence-customize-preview-css-" + key,
|
|
$style = $("#" + styleID),
|
|
css = "",
|
|
media_tablet = "@media screen and (max-width: 1023px)",
|
|
media_mobile = "@media screen and (max-width: 499px)",
|
|
selector,
|
|
property,
|
|
cssArray = {};
|
|
// Create <style> tag if doesn't exist.
|
|
if (0 === $style.length) {
|
|
$style = $(document.createElement("style"));
|
|
$style.attr("id", styleID);
|
|
$style.attr("type", "text/css");
|
|
|
|
// Append <style> tag to <head>.
|
|
$style.appendTo($("head"));
|
|
}
|
|
_.each(rules, function (rule) {
|
|
if (
|
|
undefined == rule["property"] ||
|
|
undefined == rule["selector"]
|
|
) {
|
|
return;
|
|
}
|
|
rule["media"] = rule["media"] || "global";
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
if ("object" == typeof newValue) {
|
|
if (undefined !== newValue["desktop"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
property =
|
|
undefined !== rule["property"]["desktop"]
|
|
? rule["property"]["desktop"]
|
|
: rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
var border_style =
|
|
undefined !== newValue["desktop"]["style"] &&
|
|
"" !== newValue["desktop"]["style"]
|
|
? newValue["desktop"]["style"]
|
|
: "undefined";
|
|
if ("undefined" !== border_style) {
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0") +
|
|
newValue["desktop"]["unit"] +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0") +
|
|
newValue["desktop"]["unit"] +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
undefined !== newValue["tablet"] &&
|
|
undefined !== newValue["tablet"]["width"] &&
|
|
"" !== newValue["tablet"]["width"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["tablet"]
|
|
? rule["selector"]["tablet"]
|
|
: rule["selector"];
|
|
property =
|
|
undefined !== rule["property"]["tablet"]
|
|
? rule["property"]["tablet"]
|
|
: rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (undefined == cssArray[media_tablet][selector])
|
|
cssArray[media_tablet][selector] = {};
|
|
var tablet_border_style =
|
|
undefined !== newValue["tablet"]["style"] &&
|
|
"" !== newValue["tablet"]["style"]
|
|
? newValue["tablet"]["style"]
|
|
: "";
|
|
var desktop_border_style =
|
|
undefined !== newValue["desktop"]["style"] &&
|
|
"" !== newValue["desktop"]["style"]
|
|
? newValue["desktop"]["style"]
|
|
: "";
|
|
var border_style = "undefined";
|
|
if ("" !== tablet_border_style) {
|
|
border_style = tablet_border_style;
|
|
} else if ("" !== desktop_border_style) {
|
|
border_style = desktop_border_style;
|
|
}
|
|
if ("undefined" !== border_style) {
|
|
var color_type = "";
|
|
var width = newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0";
|
|
var unit = newValue["desktop"]["unit"]
|
|
? newValue["desktop"]["unit"]
|
|
: "px";
|
|
if (
|
|
undefined !== newValue["tablet"]["color"] &&
|
|
"" !== newValue["tablet"]["color"]
|
|
) {
|
|
if (
|
|
newValue["tablet"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["tablet"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["tablet"]["color"];
|
|
}
|
|
} else if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[media_tablet][selector][property] =
|
|
("" !== newValue["tablet"]["width"]
|
|
? newValue["tablet"]["width"]
|
|
: width) +
|
|
(newValue["tablet"]["unit"]
|
|
? newValue["tablet"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[media_tablet][selector][property] =
|
|
("" !== newValue["tablet"]["width"]
|
|
? newValue["tablet"]["width"]
|
|
: width) +
|
|
(newValue["tablet"]["unit"]
|
|
? newValue["tablet"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
}
|
|
}
|
|
if (
|
|
undefined !== newValue["mobile"] &&
|
|
undefined !== newValue["mobile"]["width"] &&
|
|
"" !== newValue["mobile"]["width"]
|
|
) {
|
|
selector =
|
|
undefined !== rule["selector"]["mobile"]
|
|
? rule["selector"]["mobile"]
|
|
: rule["selector"];
|
|
property =
|
|
undefined !== rule["property"]["mobile"]
|
|
? rule["property"]["mobile"]
|
|
: rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (undefined == cssArray[media_mobile][selector])
|
|
cssArray[media_mobile][selector] = {};
|
|
var mobile_border_style =
|
|
undefined !== newValue["mobile"]["style"] &&
|
|
"" !== newValue["mobile"]["style"]
|
|
? newValue["mobile"]["style"]
|
|
: "";
|
|
var tablet_border_style =
|
|
undefined !== newValue?.["tablet"]?.["style"] &&
|
|
"" !== newValue?.["tablet"]?.["style"]
|
|
? newValue["tablet"]["style"]
|
|
: "";
|
|
var desktop_border_style =
|
|
undefined !== newValue?.["desktop"]?.["style"] &&
|
|
"" !== newValue?.["desktop"]?.["style"]
|
|
? newValue["desktop"]["style"]
|
|
: "";
|
|
var border_style = "undefined";
|
|
if ("" !== mobile_border_style) {
|
|
border_style = mobile_border_style;
|
|
} else if ("" !== tablet_border_style) {
|
|
border_style = tablet_border_style;
|
|
} else if ("" !== desktop_border_style) {
|
|
border_style = desktop_border_style;
|
|
}
|
|
if ("undefined" !== border_style) {
|
|
var color_type = "";
|
|
var deskWidth = newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0";
|
|
var deskUnit = newValue["desktop"]["unit"]
|
|
? newValue["desktop"]["unit"]
|
|
: "px";
|
|
var width =
|
|
newValue["tablet"] &&
|
|
newValue["tablet"]["width"]
|
|
? newValue["tablet"]["width"]
|
|
: deskWidth;
|
|
var unit =
|
|
newValue["tablet"] && newValue["tablet"]["unit"]
|
|
? newValue["tablet"]["unit"]
|
|
: deskUnit;
|
|
if (
|
|
undefined !== newValue["mobile"]["color"] &&
|
|
"" !== newValue["mobile"]["color"]
|
|
) {
|
|
if (
|
|
newValue["mobile"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["mobile"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["mobile"]["color"];
|
|
}
|
|
} else if (
|
|
undefined !== newValue["tablet"] &&
|
|
undefined !== newValue["tablet"]["color"] &&
|
|
"" !== newValue["tablet"]["color"]
|
|
) {
|
|
if (
|
|
newValue["tablet"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["tablet"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["tablet"]["color"];
|
|
}
|
|
} else if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[media_mobile][selector][property] =
|
|
("" !== newValue["mobile"]["width"]
|
|
? newValue["mobile"]["width"]
|
|
: width) +
|
|
(newValue["mobile"]["unit"]
|
|
? newValue["mobile"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[media_mobile][selector][property] =
|
|
("" !== newValue["mobile"]["width"]
|
|
? newValue["mobile"]["width"]
|
|
: width) +
|
|
(newValue["mobile"]["unit"]
|
|
? newValue["mobile"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
}
|
|
}
|
|
if (undefined !== newValue["style"]) {
|
|
selector = rule["selector"];
|
|
property = rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
|
|
var border_style =
|
|
undefined !== newValue["style"] &&
|
|
"" !== newValue["style"]
|
|
? newValue["style"]
|
|
: "none";
|
|
//if ( 'none' !== border_style ) {
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["color"] &&
|
|
"" !== newValue["color"]
|
|
) {
|
|
if (newValue["color"].includes("palette")) {
|
|
color_type =
|
|
"var(--global-" + newValue["color"] + ")";
|
|
} else {
|
|
color_type = newValue["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(newValue["width"] ? newValue["width"] : "0") +
|
|
newValue["unit"] +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(newValue["width"] ? newValue["width"] : "0") +
|
|
newValue["unit"] +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
//}
|
|
}
|
|
}
|
|
});
|
|
// Loop into the sorted array to build CSS string.
|
|
_.each(cssArray, function (selectors, media) {
|
|
if ("global" !== media) css += media + "{";
|
|
_.each(selectors, function (properties, selector) {
|
|
css += selector + "{";
|
|
_.each(properties, function (value, property) {
|
|
css += property + ":" + value + ";";
|
|
});
|
|
css += "}";
|
|
});
|
|
if ("global" !== media) css += "}";
|
|
});
|
|
|
|
// Add CSS string to <style> tag.
|
|
$style.html(css);
|
|
},
|
|
live_css_boxshadow: function (key, rules, newValue) {
|
|
var styleID = "kadence-customize-preview-css-" + key,
|
|
$style = $("#" + styleID),
|
|
css = "",
|
|
media_tablet = "@media screen and (max-width: 1023px)",
|
|
media_mobile = "@media screen and (max-width: 499px)",
|
|
selector,
|
|
property,
|
|
cssArray = {};
|
|
// Create <style> tag if doesn't exist.
|
|
if (0 === $style.length) {
|
|
$style = $(document.createElement("style"));
|
|
$style.attr("id", styleID);
|
|
$style.attr("type", "text/css");
|
|
|
|
// Append <style> tag to <head>.
|
|
$style.appendTo($("head"));
|
|
}
|
|
_.each(rules, function (rule) {
|
|
if (
|
|
undefined == rule["property"] ||
|
|
undefined == rule["selector"]
|
|
) {
|
|
return;
|
|
}
|
|
rule["media"] = rule["media"] || "global";
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
|
|
if (newValue?.disabled) {
|
|
selector = rule["selector"];
|
|
property = rule["property"];
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
cssArray[rule["media"]][selector][property] = "none";
|
|
} else if ("object" == typeof newValue) {
|
|
if (undefined !== newValue["desktop"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["desktop"]
|
|
? rule["selector"]["desktop"]
|
|
: rule["selector"];
|
|
property =
|
|
undefined !== rule["property"]["desktop"]
|
|
? rule["property"]["desktop"]
|
|
: rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
var border_style =
|
|
undefined !== newValue["desktop"]["style"] &&
|
|
"" !== newValue["desktop"]["style"]
|
|
? newValue["desktop"]["style"]
|
|
: "undefined";
|
|
if ("undefined" !== border_style) {
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0") +
|
|
newValue["desktop"]["unit"] +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0") +
|
|
newValue["desktop"]["unit"] +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
}
|
|
}
|
|
if (undefined !== newValue["tablet"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["tablet"]
|
|
? rule["selector"]["tablet"]
|
|
: rule["selector"];
|
|
property =
|
|
undefined !== rule["property"]["tablet"]
|
|
? rule["property"]["tablet"]
|
|
: rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (undefined == cssArray[media_tablet][selector])
|
|
cssArray[media_tablet][selector] = {};
|
|
var border_style =
|
|
undefined !== newValue["tablet"]["style"] &&
|
|
"" !== newValue["tablet"]["style"]
|
|
? newValue["tablet"]["style"]
|
|
: newValue["desktop"]["style"];
|
|
var border_style_show =
|
|
undefined !== newValue["tablet"]["style"] &&
|
|
"" !== newValue["tablet"]["style"]
|
|
? newValue["tablet"]["style"]
|
|
: "undefined";
|
|
if ("undefined" !== border_style_show) {
|
|
var color_type = "";
|
|
var width = newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0";
|
|
var unit = newValue["desktop"]["unit"]
|
|
? newValue["desktop"]["unit"]
|
|
: "px";
|
|
if (
|
|
undefined !== newValue["tablet"]["color"] &&
|
|
"" !== newValue["tablet"]["color"]
|
|
) {
|
|
if (
|
|
newValue["tablet"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["tablet"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["tablet"]["color"];
|
|
}
|
|
} else if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[media_tablet][selector][property] =
|
|
(newValue["tablet"]["width"]
|
|
? newValue["tablet"]["width"]
|
|
: width) +
|
|
(newValue["tablet"]["unit"]
|
|
? newValue["tablet"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[media_tablet][selector][property] =
|
|
(newValue["tablet"]["width"]
|
|
? newValue["tablet"]["width"]
|
|
: width) +
|
|
(newValue["tablet"]["unit"]
|
|
? newValue["tablet"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
}
|
|
}
|
|
if (undefined !== newValue["mobile"]) {
|
|
selector =
|
|
undefined !== rule["selector"]["mobile"]
|
|
? rule["selector"]["mobile"]
|
|
: rule["selector"];
|
|
property =
|
|
undefined !== rule["property"]["mobile"]
|
|
? rule["property"]["mobile"]
|
|
: rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (undefined == cssArray[media_mobile][selector])
|
|
cssArray[media_mobile][selector] = {};
|
|
var border_style =
|
|
undefined !== newValue["mobile"]["style"] &&
|
|
"" !== newValue["mobile"]["style"]
|
|
? newValue["mobile"]["style"]
|
|
: newValue["desktop"]["style"];
|
|
var border_style_show =
|
|
undefined !== newValue["mobile"]["style"] &&
|
|
"" !== newValue["mobile"]["style"]
|
|
? newValue["mobile"]["style"]
|
|
: "undefined";
|
|
if ("undefined" !== border_style_show) {
|
|
var color_type = "";
|
|
var deskWidth = newValue["desktop"]["width"]
|
|
? newValue["desktop"]["width"]
|
|
: "0";
|
|
var deskUnit = newValue["desktop"]["unit"]
|
|
? newValue["desktop"]["unit"]
|
|
: "px";
|
|
var width =
|
|
newValue["tablet"] &&
|
|
newValue["tablet"]["width"]
|
|
? newValue["tablet"]["width"]
|
|
: deskWidth;
|
|
var unit =
|
|
newValue["tablet"] && newValue["tablet"]["unit"]
|
|
? newValue["tablet"]["unit"]
|
|
: deskUnit;
|
|
if (
|
|
undefined !== newValue["mobile"]["color"] &&
|
|
"" !== newValue["mobile"]["color"]
|
|
) {
|
|
if (
|
|
newValue["mobile"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["mobile"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["mobile"]["color"];
|
|
}
|
|
} else if (
|
|
undefined !== newValue["tablet"] &&
|
|
undefined !== newValue["tablet"]["color"] &&
|
|
"" !== newValue["tablet"]["color"]
|
|
) {
|
|
if (
|
|
newValue["tablet"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["tablet"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["tablet"]["color"];
|
|
}
|
|
} else if (
|
|
undefined !== newValue["desktop"]["color"] &&
|
|
"" !== newValue["desktop"]["color"]
|
|
) {
|
|
if (
|
|
newValue["desktop"]["color"].includes(
|
|
"palette"
|
|
)
|
|
) {
|
|
color_type =
|
|
"var(--global-" +
|
|
newValue["desktop"]["color"] +
|
|
")";
|
|
} else {
|
|
color_type = newValue["desktop"]["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[media_mobile][selector][property] =
|
|
(newValue["mobile"]["width"]
|
|
? newValue["mobile"]["width"]
|
|
: width) +
|
|
(newValue["mobile"]["unit"]
|
|
? newValue["mobile"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[media_mobile][selector][property] =
|
|
(newValue["mobile"]["width"]
|
|
? newValue["mobile"]["width"]
|
|
: width) +
|
|
(newValue["mobile"]["unit"]
|
|
? newValue["mobile"]["unit"]
|
|
: unit) +
|
|
" " +
|
|
border_style +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
}
|
|
}
|
|
if (undefined !== newValue["color"]) {
|
|
selector = rule["selector"];
|
|
property = rule["property"];
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][selector])
|
|
cssArray[rule["media"]][selector] = {};
|
|
|
|
var inset =
|
|
undefined !== newValue["inset"] && newValue["inset"]
|
|
? "inset"
|
|
: "";
|
|
//if ( 'none' !== border_style ) {
|
|
var color_type = "";
|
|
if (
|
|
undefined !== newValue["color"] &&
|
|
"" !== newValue["color"]
|
|
) {
|
|
if (newValue["color"].includes("palette")) {
|
|
color_type =
|
|
"var(--global-" + newValue["color"] + ")";
|
|
} else {
|
|
color_type = newValue["color"];
|
|
}
|
|
}
|
|
if ("" !== color_type) {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(inset ? inset + " " : "") +
|
|
(newValue["hOffset"]
|
|
? newValue["hOffset"]
|
|
: "0") +
|
|
"px " +
|
|
(newValue["vOffset"]
|
|
? newValue["vOffset"]
|
|
: "0") +
|
|
"px " +
|
|
(newValue["blur"] ? newValue["blur"] : "0") +
|
|
"px " +
|
|
(newValue["spread"]
|
|
? newValue["spread"]
|
|
: "0") +
|
|
"px " +
|
|
" " +
|
|
color_type;
|
|
} else {
|
|
cssArray[rule["media"]][selector][property] =
|
|
(inset ? inset + " " : "") +
|
|
(newValue["hOffset"]
|
|
? newValue["hOffset"]
|
|
: "0") +
|
|
"px " +
|
|
(newValue["vOffset"]
|
|
? newValue["vOffset"]
|
|
: "0") +
|
|
"px " +
|
|
(newValue["blur"] ? newValue["blur"] : "0") +
|
|
"px " +
|
|
(newValue["spread"]
|
|
? newValue["spread"]
|
|
: "0") +
|
|
"px " +
|
|
" " +
|
|
"transparent";
|
|
}
|
|
//}
|
|
}
|
|
}
|
|
});
|
|
// Loop into the sorted array to build CSS string.
|
|
_.each(cssArray, function (selectors, media) {
|
|
if ("global" !== media) css += media + "{";
|
|
_.each(selectors, function (properties, selector) {
|
|
css += selector + "{";
|
|
_.each(properties, function (value, property) {
|
|
css += property + ":" + value + ";";
|
|
});
|
|
css += "}";
|
|
});
|
|
if ("global" !== media) css += "}";
|
|
});
|
|
|
|
// Add CSS string to <style> tag.
|
|
$style.html(css);
|
|
},
|
|
live_css: function (key, rules, newValue) {
|
|
if (rules?.[0]?.["id"] === "base_font_family") {
|
|
key = "base_font_family";
|
|
}
|
|
var styleID = "kadence-customize-preview-css-" + key,
|
|
$style = $("#" + styleID),
|
|
css = "",
|
|
media_tablet = "@media screen and (max-width: 1023px)",
|
|
media_mobile = "@media screen and (max-width: 499px)",
|
|
cssArray = {};
|
|
|
|
// Create <style> tag if doesn't exist.
|
|
if (0 === $style.length) {
|
|
$style = $(document.createElement("style"));
|
|
$style.attr("id", styleID);
|
|
$style.attr("type", "text/css");
|
|
|
|
// Append <style> tag to <head>.
|
|
$style.appendTo($("head"));
|
|
}
|
|
_.each(rules, function (rule) {
|
|
var formattedValue;
|
|
if (
|
|
undefined == rule["property"] ||
|
|
undefined == rule["selector"]
|
|
) {
|
|
return;
|
|
}
|
|
rule["media"] = rule["media"] || "global";
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
if ("object" == typeof newValue) {
|
|
if (
|
|
undefined !== rule["key"] &&
|
|
"measure" === rule["key"]
|
|
) {
|
|
if (
|
|
"object" == typeof newValue["size"] &&
|
|
undefined !== newValue["size"]["desktop"]
|
|
) {
|
|
if (undefined !== newValue["size"]["desktop"]) {
|
|
var unit =
|
|
undefined !== newValue?.["unit"] &&
|
|
undefined !==
|
|
newValue?.["unit"]?.["desktop"]
|
|
? newValue["unit"]["desktop"]
|
|
: "px";
|
|
formattedValue =
|
|
("" !== newValue["size"]["desktop"][0]
|
|
? newValue["size"]["desktop"][0]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["desktop"][1]
|
|
? newValue["size"]["desktop"][1]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["desktop"][2]
|
|
? newValue["size"]["desktop"][2]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["desktop"][3]
|
|
? newValue["size"]["desktop"][3]
|
|
: "0") +
|
|
unit;
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[rule["media"]][rule["selector"]]
|
|
)
|
|
cssArray[rule["media"]][rule["selector"]] =
|
|
{};
|
|
cssArray[rule["media"]][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
if (undefined !== newValue["size"]["tablet"]) {
|
|
var unit =
|
|
undefined !== newValue?.["unit"]?.["tablet"]
|
|
? newValue["unit"]["tablet"]
|
|
: "";
|
|
formattedValue =
|
|
("" !== newValue["size"]["tablet"][0]
|
|
? newValue["size"]["tablet"][0]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["tablet"][1]
|
|
? newValue["size"]["tablet"][1]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["tablet"][2]
|
|
? newValue["size"]["tablet"][2]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["tablet"][3]
|
|
? newValue["size"]["tablet"][3]
|
|
: "0") +
|
|
unit;
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[media_tablet][rule["selector"]]
|
|
)
|
|
cssArray[media_tablet][rule["selector"]] =
|
|
{};
|
|
cssArray[media_tablet][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
if (undefined !== newValue["size"]["mobile"]) {
|
|
var unit =
|
|
undefined !== newValue?.["unit"]?.["mobile"]
|
|
? newValue["unit"]["mobile"]
|
|
: "";
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
newValue["size"]["mobile"] + unit
|
|
);
|
|
formattedValue =
|
|
("" !== newValue["size"]["mobile"][0]
|
|
? newValue["size"]["mobile"][0]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["mobile"][1]
|
|
? newValue["size"]["mobile"][1]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["mobile"][2]
|
|
? newValue["size"]["mobile"][2]
|
|
: "0") +
|
|
unit +
|
|
" " +
|
|
("" !== newValue["size"]["mobile"][3]
|
|
? newValue["size"]["mobile"][3]
|
|
: "0") +
|
|
unit;
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[media_mobile][rule["selector"]]
|
|
)
|
|
cssArray[media_mobile][rule["selector"]] =
|
|
{};
|
|
cssArray[media_mobile][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
} else {
|
|
formattedValue =
|
|
(newValue["size"] && "" !== newValue["size"][0]
|
|
? newValue["size"][0]
|
|
: "0") +
|
|
(newValue["unit"] ? newValue["unit"] : "px") +
|
|
" " +
|
|
(newValue["size"] && "" !== newValue["size"][1]
|
|
? newValue["size"][1]
|
|
: "0") +
|
|
(newValue["unit"] ? newValue["unit"] : "px") +
|
|
" " +
|
|
(newValue["size"] && "" !== newValue["size"][2]
|
|
? newValue["size"][2]
|
|
: "0") +
|
|
(newValue["unit"] ? newValue["unit"] : "px") +
|
|
" " +
|
|
(newValue["size"] && "" !== newValue["size"][3]
|
|
? newValue["size"][3]
|
|
: "0") +
|
|
(newValue["unit"] ? newValue["unit"] : "px");
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
formattedValue
|
|
);
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[rule["media"]][rule["selector"]]
|
|
)
|
|
cssArray[rule["media"]][rule["selector"]] = {};
|
|
cssArray[rule["media"]][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
} else if (
|
|
undefined !== rule["key"] &&
|
|
undefined !== newValue[rule["key"]]
|
|
) {
|
|
// Fetch the property newValue using the key from setting value.
|
|
if ("object" == typeof newValue[rule["key"]]) {
|
|
if (
|
|
undefined !== newValue[rule["key"]]["color"] &&
|
|
"" !== newValue[rule["key"]]["color"]
|
|
) {
|
|
var color_type =
|
|
undefined !==
|
|
newValue[rule["key"]]["is_palette"] &&
|
|
"" !== newValue[rule["key"]]["is_palette"]
|
|
? "var(--global-" +
|
|
newValue[rule["key"]]["is_palette"] +
|
|
")"
|
|
: newValue[rule["key"]]["color"];
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
color_type
|
|
);
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[rule["media"]][rule["selector"]]
|
|
)
|
|
cssArray[rule["media"]][rule["selector"]] =
|
|
{};
|
|
cssArray[rule["media"]][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
if (
|
|
undefined !== newValue[rule["key"]]["desktop"]
|
|
) {
|
|
var unit =
|
|
undefined !== newValue["unit"]["desktop"]
|
|
? newValue["unit"]["desktop"]
|
|
: "";
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
newValue[rule["key"]]["desktop"] + unit
|
|
);
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[rule["media"]][rule["selector"]]
|
|
)
|
|
cssArray[rule["media"]][rule["selector"]] =
|
|
{};
|
|
cssArray[rule["media"]][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
if (undefined !== newValue[rule["key"]]["tablet"]) {
|
|
var unit =
|
|
undefined !== newValue["unit"]["tablet"]
|
|
? newValue["unit"]["tablet"]
|
|
: "";
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
newValue[rule["key"]]["tablet"] + unit
|
|
);
|
|
// Define properties.
|
|
if (undefined == cssArray[media_tablet])
|
|
cssArray[media_tablet] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[media_tablet][rule["selector"]]
|
|
)
|
|
cssArray[media_tablet][rule["selector"]] =
|
|
{};
|
|
cssArray[media_tablet][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
if (undefined !== newValue[rule["key"]]["mobile"]) {
|
|
var unit =
|
|
undefined !== newValue["unit"]["mobile"]
|
|
? newValue["unit"]["mobile"]
|
|
: "";
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
newValue[rule["key"]]["mobile"] + unit
|
|
);
|
|
// Define properties.
|
|
if (undefined == cssArray[media_mobile])
|
|
cssArray[media_mobile] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[media_mobile][rule["selector"]]
|
|
)
|
|
cssArray[media_mobile][rule["selector"]] =
|
|
{};
|
|
cssArray[media_mobile][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
} else {
|
|
if (rule["key"] === "size") {
|
|
formattedValue =
|
|
newValue[rule["key"]] +
|
|
(newValue["unit"]
|
|
? newValue["unit"]
|
|
: "px");
|
|
} else if (
|
|
typeof newValue[rule["key"]] === "string" &&
|
|
newValue[rule["key"]].includes("palette")
|
|
) {
|
|
formattedValue =
|
|
"var(--global-" +
|
|
newValue[rule["key"]] +
|
|
")";
|
|
} else {
|
|
formattedValue = newValue[rule["key"]];
|
|
}
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
formattedValue
|
|
);
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (
|
|
undefined ==
|
|
cssArray[rule["media"]][rule["selector"]]
|
|
)
|
|
cssArray[rule["media"]][rule["selector"]] = {};
|
|
cssArray[rule["media"]][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
}
|
|
} else {
|
|
// Define new value based on the specified pattern.
|
|
formattedValue = rule["pattern"].replace("$", newValue);
|
|
// Define properties.
|
|
if (undefined == cssArray[rule["media"]])
|
|
cssArray[rule["media"]] = {};
|
|
if (undefined == cssArray[rule["media"]][rule["selector"]])
|
|
cssArray[rule["media"]][rule["selector"]] = {};
|
|
cssArray[rule["media"]][rule["selector"]][
|
|
rule["property"]
|
|
] = formattedValue;
|
|
}
|
|
});
|
|
// Loop into the sorted array to build CSS string.
|
|
_.each(cssArray, function (selectors, media) {
|
|
if ("global" !== media) css += media + "{";
|
|
_.each(selectors, function (properties, selector) {
|
|
css += selector + "{";
|
|
_.each(properties, function (value, property) {
|
|
css += property + ":" + value + ";";
|
|
});
|
|
css += "}";
|
|
});
|
|
if ("global" !== media) css += "}";
|
|
});
|
|
// Add CSS string to <style> tag.
|
|
$style.html(css);
|
|
},
|
|
live_class: function (key, rules, newValue) {
|
|
_.each(rules, function (rule) {
|
|
var formattedValue;
|
|
if (undefined == rule["selector"]) {
|
|
return;
|
|
}
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
if ("object" == typeof newValue) {
|
|
if (
|
|
undefined !== rule["key"] &&
|
|
undefined !== newValue[rule["key"]]
|
|
) {
|
|
// Fetch the property newValue using the key from setting value.
|
|
if ("object" == typeof newValue[rule["key"]]) {
|
|
if (
|
|
undefined !==
|
|
newValue[rule["key"]]["desktop"] &&
|
|
"" !== newValue[rule["key"]]["desktop"]
|
|
) {
|
|
if (undefined !== rule["pattern"]["desktop"]) {
|
|
var regex = new RegExp(
|
|
rule["pattern"]["desktop"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern =
|
|
rule["pattern"]["desktop"];
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"];
|
|
}
|
|
if (undefined !== rule["selector"]["desktop"]) {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]["desktop"]
|
|
);
|
|
} else {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]
|
|
);
|
|
}
|
|
formattedValue = device_pattern.replace(
|
|
"$",
|
|
newValue[rule["key"]]["desktop"]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
if (
|
|
undefined !== newValue[rule["key"]]["tablet"] &&
|
|
"" !== newValue[rule["key"]]["tablet"]
|
|
) {
|
|
if (undefined !== rule["pattern"]["tablet"]) {
|
|
var regex = new RegExp(
|
|
rule["pattern"]["tablet"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern =
|
|
rule["pattern"]["tablet"];
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"];
|
|
}
|
|
if (undefined !== rule["selector"]["tablet"]) {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]["tablet"]
|
|
);
|
|
} else {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]
|
|
);
|
|
}
|
|
formattedValue = device_pattern.replace(
|
|
"$",
|
|
newValue[rule["key"]]["tablet"]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
if (
|
|
undefined !== newValue[rule["key"]]["mobile"] &&
|
|
"" !== newValue[rule["key"]]["mobile"]
|
|
) {
|
|
if (undefined !== rule["pattern"]["mobile"]) {
|
|
var regex = new RegExp(
|
|
rule["pattern"]["mobile"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern =
|
|
rule["pattern"]["mobile"];
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"];
|
|
}
|
|
if (undefined !== rule["selector"]["mobile"]) {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]["mobile"]
|
|
);
|
|
} else {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]
|
|
);
|
|
}
|
|
formattedValue = device_pattern.replace(
|
|
"$",
|
|
newValue[rule["key"]]["mobile"]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace("$", "[\\w\\-]+"),
|
|
"i"
|
|
),
|
|
items = document.querySelectorAll(
|
|
rule["selector"]
|
|
),
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
newValue[rule["key"]]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
if (
|
|
undefined !== newValue["desktop"] &&
|
|
"" !== newValue["desktop"]
|
|
) {
|
|
if (undefined !== rule["pattern"]["desktop"]) {
|
|
var regex = new RegExp(
|
|
rule["pattern"]["desktop"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"]["desktop"];
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace("$", "[\\w\\-]+"),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"];
|
|
}
|
|
if (undefined !== rule["selector"]["desktop"]) {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]["desktop"]
|
|
);
|
|
} else {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]
|
|
);
|
|
}
|
|
formattedValue = device_pattern.replace(
|
|
"$",
|
|
newValue["desktop"]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
if (
|
|
undefined !== newValue["tablet"] &&
|
|
"" !== newValue["tablet"]
|
|
) {
|
|
if (undefined !== rule["pattern"]["tablet"]) {
|
|
var regex = new RegExp(
|
|
rule["pattern"]["tablet"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"]["tablet"];
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace("$", "[\\w\\-]+"),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"];
|
|
}
|
|
if (undefined !== rule["selector"]["tablet"]) {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]["tablet"]
|
|
);
|
|
} else {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]
|
|
);
|
|
}
|
|
formattedValue = device_pattern.replace(
|
|
"$",
|
|
newValue["tablet"]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
if (
|
|
undefined !== newValue["mobile"] &&
|
|
"" !== newValue["mobile"]
|
|
) {
|
|
if (undefined !== rule["pattern"]["mobile"]) {
|
|
var regex = new RegExp(
|
|
rule["pattern"]["mobile"].replace(
|
|
"$",
|
|
"[\\w\\-]+"
|
|
),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"]["mobile"];
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace("$", "[\\w\\-]+"),
|
|
"i"
|
|
);
|
|
var device_pattern = rule["pattern"];
|
|
}
|
|
if (undefined !== rule["selector"]["mobile"]) {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]["mobile"]
|
|
);
|
|
} else {
|
|
var items = document.querySelectorAll(
|
|
rule["selector"]
|
|
);
|
|
}
|
|
formattedValue = device_pattern.replace(
|
|
"$",
|
|
newValue["mobile"]
|
|
);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
var regex = new RegExp(
|
|
rule["pattern"].replace("$", "[\\w\\-]+"),
|
|
"i"
|
|
),
|
|
items = document.querySelectorAll(rule["selector"]),
|
|
formattedValue = rule["pattern"].replace("$", newValue);
|
|
items.forEach(function (item) {
|
|
if (item.className.match(regex)) {
|
|
item.className = item.className.replace(
|
|
regex,
|
|
formattedValue
|
|
);
|
|
} else {
|
|
item.className += " " + formattedValue;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
live_palette: function (key, rules, newValue) {
|
|
var palette = JSON.parse(newValue);
|
|
var active =
|
|
palette && palette["active"] ? palette["active"] : "palette";
|
|
if (palette && palette[active]) {
|
|
_.each(palette[active], function (color) {
|
|
if (color.slug == "palette10" && color.color == "#FfFfFf") {
|
|
document.documentElement.style.setProperty(
|
|
"--global-" + color.slug,
|
|
"oklch(from var(--global-palette1) calc(l + 0.10 * (1 - l)) calc(c * 1.00) calc(h + 180) / 100%)"
|
|
);
|
|
} else if (color.slug && color.color) {
|
|
document.documentElement.style.setProperty(
|
|
"--global-" + color.slug,
|
|
color.color
|
|
);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
live_global: function (key, rules, newValue) {
|
|
_.each(rules, function (rule) {
|
|
var formattedValue;
|
|
if (
|
|
undefined == rule["property"] ||
|
|
undefined == rule["selector"]
|
|
) {
|
|
return;
|
|
}
|
|
rule["media"] = rule["media"] || "global";
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
if ("object" == typeof newValue) {
|
|
if (
|
|
undefined !== rule["key"] &&
|
|
undefined !== newValue[rule["key"]]
|
|
) {
|
|
// Fetch the property newValue using the key from setting value.
|
|
if (
|
|
typeof newValue[rule["key"]] === "string" &&
|
|
newValue[rule["key"]].includes("palette") &&
|
|
!newValue[rule["key"]].includes("gradient")
|
|
) {
|
|
formattedValue =
|
|
"var(--global-" + newValue[rule["key"]] + ")";
|
|
} else {
|
|
formattedValue = newValue[rule["key"]];
|
|
}
|
|
formattedValue = rule["pattern"].replace(
|
|
"$",
|
|
formattedValue
|
|
);
|
|
// Define properties.
|
|
document.documentElement.style.setProperty(
|
|
rule["selector"],
|
|
formattedValue
|
|
);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
live_html: function (key, rules, newValue) {
|
|
_.each(rules, function (rule) {
|
|
var value = newValue;
|
|
|
|
if (undefined == rule["selector"]) return;
|
|
rule["pattern"] = rule["pattern"] || "$";
|
|
|
|
var elements = document.querySelectorAll(rule["selector"]),
|
|
formattedValue = rule["pattern"].replace("$", value);
|
|
|
|
// Change innerHTML on all targeted elements.
|
|
elements.forEach(function (element) {
|
|
if (undefined !== rule["property"]) {
|
|
element.setAttribute(rule["property"], formattedValue);
|
|
} else {
|
|
element.innerHTML = formattedValue;
|
|
}
|
|
});
|
|
});
|
|
},
|
|
};
|
|
if (
|
|
kadenceCustomizerPreviewData &&
|
|
kadenceCustomizerPreviewData.liveControl
|
|
) {
|
|
_.each(
|
|
kadenceCustomizerPreviewData.liveControl,
|
|
function (liveControl, key) {
|
|
var eachLiveControl = {};
|
|
_.each(liveControl, function (rule) {
|
|
var type = rule["type"];
|
|
|
|
if (undefined == eachLiveControl[type])
|
|
eachLiveControl[type] = [];
|
|
|
|
eachLiveControl[type].push(rule);
|
|
});
|
|
wp.customize(key, function (value) {
|
|
value.bind(function (newValue) {
|
|
_.each(eachLiveControl, function (rule, type) {
|
|
var functionName = "live_".concat(type);
|
|
kadenceCustomizer[functionName](
|
|
key,
|
|
rule,
|
|
newValue
|
|
);
|
|
});
|
|
});
|
|
});
|
|
}
|
|
);
|
|
}
|
|
$(document).on("customize-preview-menu-refreshed", function (e, params) {
|
|
if (params.wpNavMenuArgs.show_toggles) {
|
|
window.kadence.initMobileToggleSub();
|
|
}
|
|
});
|
|
})(jQuery);
|