📁 File Manager Pro
v10.0.3 | PHP: 8.1.34
Server: LiteSpeed
2026-07-02 02:11:05
📂
/ (Root)
/
home
/
apkbfjox
/
pakrummygame.com.pk
/
wp-content
/
themes
/
kadence
/
inc
/
customizer
/
js
📍 /home/apkbfjox/pakrummygame.com.pk/wp-content/themes/kadence/inc/customizer/js
🔄 Refresh
✏️
Editing: kadence-customizer-preview.js
Writable
(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);
💾 Save Changes
❌ Cancel