/**
* Update Customizer settings live.
*
* @since 1.0.0
*/
(function ($) {
'use strict';
// Declare variables
var api = wp.customize,
$style_tag,
$link_tag,
blogsy_visibility_classes = 'blogsy-hide-mobile blogsy-hide-tablet blogsy-hide-mobile-tablet',
blogsy_style_tag_collection = [],
blogsy_link_tag_collection = [];
/**
* Helper function to get style tag with id.
*/
function blogsy_get_style_tag(id) {
if (blogsy_style_tag_collection[id]) {
return blogsy_style_tag_collection[id];
}
$style_tag = $('head').find('#blogsy-dynamic-' + id);
if (!$style_tag.length) {
$('head').append('');
$style_tag = $('head').find('#blogsy-dynamic-' + id);
}
blogsy_style_tag_collection[id] = $style_tag;
return $style_tag;
}
/**
* Helper function to get link tag with id.
*/
function blogsy_get_link_tag(id, url) {
if (blogsy_link_tag_collection[id]) {
return blogsy_link_tag_collection[id];
}
$link_tag = $('head').find('#blogsy-dynamic-link-' + id);
if (!$link_tag.length) {
$('head').append('');
$link_tag = $('head').find('#blogsy-dynamic-link-' + id);
} else {
$link_tag.attr('href', url);
}
blogsy_link_tag_collection[id] = $link_tag;
return $link_tag;
}
/*
* Helper function to convert hex to rgba.
*/
function blogsy_hex2rgba(hex, opacity) {
if ('rgba' === hex.substring(0, 4)) {
return hex;
}
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (opacity) {
if (1 < opacity) {
opacity = 1;
}
opacity = ',' + opacity;
}
if (result) {
return 'rgba(' + parseInt(result[1], 16) + ',' + parseInt(result[2], 16) + ',' + parseInt(result[3], 16) + opacity + ')';
}
return false;
}
/**
* Spacing field CSS.
*/
function blogsy_spacing_field_css(selector, property, setting, responsive) {
if (!Array.isArray(setting) && 'object' !== typeof setting) {
return;
}
// Set up unit.
var unit = 'px',
css = '';
if ('unit' in setting) {
unit = setting.unit;
}
var before = '',
after = '';
Object.keys(setting).forEach(function (index, el) {
if ('unit' === index) {
return;
}
if (responsive) {
if ('tablet' === index) {
before = '@media only screen and (max-width: 1024px) {';
after = '}';
} else if ('mobile' === index) {
before = '@media only screen and (max-width: 600px) {';
after = '}';
} else {
before = '';
after = '';
}
css += before + selector + '{';
Object.keys(setting[index]).forEach(function (position) {
if ('border' === property) {
position += '-width';
}
if (setting[index][position]) {
css += property + '-' + position + ': ' + setting[index][position] + unit + ';';
}
});
css += '}' + after;
} else {
if ('border' === property) {
index += '-width';
}
css += property + '-' + index + ': ' + setting[index] + unit + ';';
}
});
if (!responsive) {
css = selector + '{' + css + '}';
}
return css;
}
/**
* Range field CSS.
*/
function blogsy_range_field_css(selector, property, setting, responsive, unit) {
var css = '',
before = '',
after = '';
if (responsive && (Array.isArray(setting) || 'object' === typeof setting)) {
Object.keys(setting).forEach(function (index, el) {
if (setting[index]) {
if ('tablet' === index) {
before = '@media only screen and (max-width: 1024px) {';
after = '}';
} else if ('mobile' === index) {
before = '@media only screen and (max-width: 600px) {';
after = '}';
} else if ('desktop' === index) {
before = '';
after = '';
} else {
return;
}
css += before + selector + '{' + property + ': ' + setting[index] + unit + '; }' + after;
}
});
}
if (!responsive) {
if (setting.value) {
setting = setting.value;
} else {
setting = 0;
}
css = selector + '{' + property + ': ' + setting + unit + '; }';
}
return css;
}
/**
* Typography field CSS.
*/
function blogsy_typography_field_css(selector, setting) {
var css = '';
css += selector + '{';
if ('font-family' in setting && setting['font-family']) {
if ('default' === setting['font-family']) {
css += 'font-family: ' + blogsy_customizer_preview.default_system_font + ';';
} else if (setting['font-family'] in blogsy_customizer_preview.fonts.standard_fonts.fonts) {
css += 'font-family: ' + blogsy_customizer_preview.fonts.standard_fonts.fonts[setting['font-family']].fallback + ';';
} else if ('inherit' !== setting['font-family']) {
css += 'font-family: "' + setting['font-family'] + '";';
}
}
if ('font-weight' in setting && setting['font-weight']) {
css += 'font-weight:' + setting['font-weight'] + ';';
}
if ('font-style' in setting && setting['font-style']) {
css += 'font-style:' + setting['font-style'] + ';';
}
if ('text-transform' in setting && setting['text-transform']) {
css += 'text-transform:' + setting['text-transform'] + ';';
}
if ('text-decoration' in setting) {
css += 'text-decoration:' + setting['text-decoration'] + ';';
}
if ('color' in setting) {
css += 'color:' + setting['color'] + ';';
}
if ('letter-spacing' in setting) {
css += 'letter-spacing:' + setting['letter-spacing'] + setting['letter-spacing-unit'] + ';';
}
if ('line-height-desktop' in setting) {
css += 'line-height:' + setting['line-height-desktop'] + ';';
}
if ('font-size-desktop' in setting && 'font-size-unit' in setting) {
css += 'font-size:' + setting['font-size-desktop'] + setting['font-size-unit'] + ';';
}
css += '}';
if ('font-size-tablet' in setting && setting['font-size-tablet']) {
css += '@media only screen and (max-width: 1024px) {' + selector + '{' + 'font-size: ' + setting['font-size-tablet'] + setting['font-size-unit'] + ';' + '}' + '}';
}
if ('line-height-tablet' in setting && setting['line-height-tablet']) {
css += '@media only screen and (max-width: 1024px) {' + selector + '{' + 'line-height:' + setting['line-height-tablet'] + ';' + '}' + '}';
}
if ('font-size-mobile' in setting && setting['font-size-mobile']) {
css += '@media only screen and (max-width: 600px) {' + selector + '{' + 'font-size: ' + setting['font-size-mobile'] + setting['font-size-unit'] + ';' + '}' + '}';
}
if ('line-height-mobile' in setting && setting['line-height-mobile']) {
css += '@media only screen and (max-width: 600px) {' + selector + '{' + 'line-height:' + setting['line-height-mobile'] + ';' + '}' + '}';
}
return css;
}
/**
* Load google font.
*/
function blogsy_enqueue_google_font(font) {
if (blogsy_customizer_preview.fonts.google_fonts.fonts[font]) {
var id = 'google-font-' + font.trim().toLowerCase().replace(' ', '-');
var url = blogsy_customizer_preview.google_fonts_url + '/css?family=' + font + ':' + blogsy_customizer_preview.google_font_weights;
var tag = blogsy_get_link_tag(id, url);
}
}
/**
* Design Options field CSS.
*/
function blogsy_design_options_css(selector, setting, type) {
var css = '',
before = '',
after = '';
if ('background' === type) {
var bg_type = setting['background-type'];
css += selector + '{';
if ('color' === bg_type) {
setting['background-color'] = setting['background-color'] ? setting['background-color'] : 'inherit';
css += 'background: ' + setting['background-color'] + ';';
} else if ('gradient' === bg_type) {
css += 'background: ' + setting['gradient-color-1'] + ';';
if ('linear' === setting['gradient-type']) {
css +=
'background: -webkit-linear-gradient(' +
setting['gradient-linear-angle'] +
'deg, ' +
setting['gradient-color-1'] +
' ' +
setting['gradient-color-1-location'] +
'%, ' +
setting['gradient-color-2'] +
' ' +
setting['gradient-color-2-location'] +
'%);' +
'background: -o-linear-gradient(' +
setting['gradient-linear-angle'] +
'deg, ' +
setting['gradient-color-1'] +
' ' +
setting['gradient-color-1-location'] +
'%, ' +
setting['gradient-color-2'] +
' ' +
setting['gradient-color-2-location'] +
'%);' +
'background: linear-gradient(' +
setting['gradient-linear-angle'] +
'deg, ' +
setting['gradient-color-1'] +
' ' +
setting['gradient-color-1-location'] +
'%, ' +
setting['gradient-color-2'] +
' ' +
setting['gradient-color-2-location'] +
'%);';
} else if ('radial' === setting['gradient-type']) {
css +=
'background: -webkit-radial-gradient(' +
setting['gradient-position'] +
', circle, ' +
setting['gradient-color-1'] +
' ' +
setting['gradient-color-1-location'] +
'%, ' +
setting['gradient-color-2'] +
' ' +
setting['gradient-color-2-location'] +
'%);' +
'background: -o-radial-gradient(' +
setting['gradient-position'] +
', circle, ' +
setting['gradient-color-1'] +
' ' +
setting['gradient-color-1-location'] +
'%, ' +
setting['gradient-color-2'] +
' ' +
setting['gradient-color-2-location'] +
'%);' +
'background: radial-gradient(circle at ' +
setting['gradient-position'] +
', ' +
setting['gradient-color-1'] +
' ' +
setting['gradient-color-1-location'] +
'%, ' +
setting['gradient-color-2'] +
' ' +
setting['gradient-color-2-location'] +
'%);';
}
} else if ('image' === bg_type) {
css +=
'position: relative; z-index: 0;' +
'background-image: url(' +
setting['background-image'] +
');' +
'background-size: ' +
setting['background-size'] +
';' +
'background-attachment: ' +
setting['background-attachment'] +
';' +
'background-position: ' +
setting['background-position-x'] +
'% ' +
setting['background-position-y'] +
'%;' +
'background-repeat: ' +
setting['background-repeat'] +
';';
}
css += '}';
// Background image color overlay.
if ('image' === bg_type && setting['background-color-overlay'] && setting['background-image']) {
css += selector + '::before {content: ""; position: absolute; inset: 0; z-index: -1; background-color: ' + setting['background-color-overlay'] + '; }';
}
} else if ('color' === type) {
setting['text-color'] = setting['text-color'] ? setting['text-color'] : 'inherit';
setting['link-color'] = setting['link-color'] ? setting['link-color'] : 'inherit';
setting['link-hover-color'] = setting['link-hover-color'] ? setting['link-hover-color'] : 'inherit';
setting['link-active-color'] = setting['link-active-color'] ? setting['link-active-color'] : 'inherit';
css += selector + ' { color: ' + setting['text-color'] + '; }';
css += selector + ' a { color: ' + setting['link-color'] + '; }';
css += selector + ' a:hover { color: ' + setting['link-hover-color'] + ' !important; }';
css += selector + ' { --link-active-color: ' + setting['link-active-color'] + '; }';
} else if ('border' === type) {
setting['border-color'] = setting['border-color'] ? setting['border-color'] : 'inherit';
setting['border-style'] = setting['border-style'] ? setting['border-style'] : 'solid';
setting['border-left-width'] = setting['border-left-width'] ? setting['border-left-width'] : 0;
setting['border-top-width'] = setting['border-top-width'] ? setting['border-top-width'] : 0;
setting['border-right-width'] = setting['border-right-width'] ? setting['border-right-width'] : 0;
setting['border-bottom-width'] = setting['border-bottom-width'] ? setting['border-bottom-width'] : 0;
css += selector + '{';
css += 'border-color: ' + setting['border-color'] + ';';
css += 'border-style: ' + setting['border-style'] + ';';
css += 'border-left-width: ' + setting['border-left-width'] + 'px;';
css += 'border-top-width: ' + setting['border-top-width'] + 'px;';
css += 'border-right-width: ' + setting['border-right-width'] + 'px;';
css += 'border-bottom-width: ' + setting['border-bottom-width'] + 'px;';
css += '}';
} else if ('box-shadow' === type) {
var x = parseInt(setting['x'] || 0, 10);
var y = parseInt(setting['y'] || 0, 10);
var blur = parseInt(setting['blur'] || 0, 10);
var spread = parseInt(setting['spread'] || 0, 10);
var color = setting['color'] || 'rgba(0,0,0,0.05)';
var shadow_type = setting['type'] || 'outset';
var shadow = x + 'px ' + y + 'px ' + blur + 'px ' + spread + 'px ' + color;
if ('inset' === shadow_type) {
shadow = 'inset ' + shadow;
}
css = selector + '{ box-shadow: ' + shadow + '; }';
}
return css;
}
/**
* Accent color.
*/
api('blogsy_accent_color', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_accent_color');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = ':root { --pt-accent-color: ' + newval + '; --pt-accent-40-color: ' + blogsy_luminance(newval, .40) + '; --pt-accent-80-color: ' + blogsy_luminance(newval, .80) + '; }';
$style_tag.html(style_css);
});
});
/**
* Secondary color.
*/
api('blogsy_second_color', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_second_color');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = ':root { --pt-second-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Body bg color.
*/
api('blogsy_body_bg', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_body_bg');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = ':root { --pt-body-bg-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Body color.
*/
api('blogsy_body_color', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_body_color');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = ':root { --pt-body-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Heading color.
*/
api('blogsy_heading_color', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_heading_color');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = ':root { --pt-headings-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Button BG color.
*/
api('blogsy_button_bg_hover', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_button_bg_hover');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = ':root { --pt-button-bg-hover: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Button shape.
*/
api('blogsy_button_shape_style', function (value) {
value.bind(function (newval) {
const body = document.body;
// Remove all classes that start with 'pt-shape--'
body.className = body.className
.split(/\s+/)
.filter(className => !className.startsWith('pt-shape--'))
.join(' ');
// Then, add the new class
body.classList.add('pt-shape--' + newval);
});
});
/**
* Accent dark color.
*/
api('blogsy_accent_color_dark', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_accent_color_dark');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html[scheme="dark"] { --pt-accent-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Accent second dark color.
*/
api('blogsy_second_color_dark', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_second_color_dark');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html[scheme="dark"] { --pt-second-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Body BG dark color.
*/
api('blogsy_body_bg_dark', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_body_bg_dark');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html[scheme="dark"] { --pt-body-bg-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Body dark color.
*/
api('blogsy_body_color_dark', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_body_color_dark');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html[scheme="dark"] { --pt-body-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Heading dark color.
*/
api('blogsy_heading_color_dark', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_heading_color_dark');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html[scheme="dark"] { --heading-color: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Button BG dark color.
*/
api('blogsy_button_bg_hover_dark', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_button_bg_hover_dark');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html[scheme="dark"] { --pt-button-bg-hover: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Logo max height.
*/
api('blogsy_logo_max_height', function (value) {
value.bind(function (newval) {
var $logo = $('#site-header .pt-logo');
if (!$logo.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_logo_max_height');
var style_css = '';
style_css += blogsy_range_field_css('#site-header .pt-logo img, #site-sticky-header .pt-logo img', 'max-height', newval, true, 'px');
style_css += blogsy_range_field_css('#site-header .pt-logo img.blogsy-svg-logo, #site-sticky-header .pt-logo img.blogsy-svg-logo', 'height', newval, true, 'px');
$style_tag.html(style_css);
});
});
/**
* Site title.
*/
api('blogsy_logo_title_typography', function (value) {
value.bind(function (newval) {
var $logo = $('#site-header .pt-logo .site-title');
if (!$logo.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_logo_title_typography');
var style_css = '';
style_css += blogsy_typography_field_css('#site-header .pt-logo .site-title', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Site tagline.
*/
api('blogsy_logo_tagline_typography', function (value) {
value.bind(function (newval) {
var $logo = $('#site-header .pt-logo .site-description');
if (!$logo.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_logo_tagline_typography');
var style_css = '';
style_css += blogsy_typography_field_css('#site-header .pt-logo .site-description', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Logo margin.
*/
api('blogsy_logo_margin', function (value) {
value.bind(function (newval) {
var $logo = $('#site-header .pt-logo');
if (!$logo.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_logo_margin');
var style_css = blogsy_spacing_field_css('#site-header .pt-logo .logo-inner', 'margin', newval, true);
$style_tag.html(style_css);
});
});
/**
* Tagline.
*/
api('blogdescription', function (value) {
value.bind(function (newval) {
if ($('#site-header .pt-logo').find('.site-description').length) {
$('#site-header .pt-logo').find('.site-description').html(newval);
}
});
});
/**
* Site Title.
*/
api('blogname', function (value) {
value.bind(function (newval) {
if ($('#site-header .pt-logo').find('.site-title').length) {
$('#site-header .pt-logo').find('.site-title').find('a').html(newval);
}
});
});
/**
* Base HTML font size.
*/
api('blogsy_html_base_font_size', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_html_base_font_size');
var style_css = blogsy_range_field_css('html', 'font-size', newval, true, '%');
$style_tag.html(style_css);
});
});
/**
* Body font.
*/
api('blogsy_typo_body', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_body');
var style_css = blogsy_typography_field_css('body', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Heading 1 font.
*/
api('blogsy_typo_h1', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_h1');
var style_css = blogsy_typography_field_css('h1, .h1', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Heading 2 font.
*/
api('blogsy_typo_h2', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_h2');
var style_css = blogsy_typography_field_css('h2, .h2', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Heading 3 font.
*/
api('blogsy_typo_h3', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_h3');
var style_css = blogsy_typography_field_css('h3, .h3', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Heading 4 font.
*/
api('blogsy_typo_h4', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_h4');
var style_css = blogsy_typography_field_css('h4, .h4', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Heading 5 font.
*/
api('blogsy_typo_h5', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_h5');
var style_css = blogsy_typography_field_css('h5, .h5', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Heading 6 font.
*/
api('blogsy_typo_h6', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_h6');
var style_css = blogsy_typography_field_css('h6, .h6', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Typo custom section heading.
*/
api('blogsy_typo_section_title', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_section_title');
var style_css = blogsy_typography_field_css('.blogsy-section-heading .blogsy-divider-heading, .blogsy-section-heading .blogsy-divider-heading .title', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Typo Footer/Sidebar Widgets heading.
*/
api('blogsy_typo_widgets_title', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_widgets_title');
var style_css = blogsy_typography_field_css('.blogsy-sidebar-widget .blogsy-divider-heading, .blogsy-sidebar-widget .blogsy-divider-heading .title', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Single post title font.
*/
api('blogsy_typo_single_post_title', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_single_post_title');
var style_css = blogsy_typography_field_css('.single-hero-title .title', newval);
$style_tag.html(style_css);
});
});
/**
* Single post content font.
*/
api('blogsy_typo_single_post_content', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_single_post_content');
var style_css = blogsy_typography_field_css('.single-content-inner', newval);
$style_tag.html(style_css);
});
});
/**
* Primary menu font.
*/
api('blogsy_typo_menu', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_menu');
var style_css = blogsy_typography_field_css('.blogsy-header-nav > li a', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Terms font.
*/
api('blogsy_typo_terms', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_typo_terms');
var style_css = blogsy_typography_field_css('.term-item, .single-hero-title .category a', newval);
blogsy_enqueue_google_font(newval['font-family']);
$style_tag.html(style_css);
});
});
/**
* Header > Topbar
*
* */
/**
* Top Bar visibility.
*/
api('blogsy_top_bar_visibility', function (value) {
value.bind(function (newval) {
var $topbar = $('.blogsy-topbar');
blogsy_print_visibility_classes($topbar, newval);
});
});
// Topbar background color
api('blogsy_top_bar_background', function (value) {
value.bind(function (newval) {
var $topbar = $('.blogsy-topbar');
if (!$topbar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_top_bar_background');
var style_css = blogsy_design_options_css('.blogsy-topbar', newval, 'background');
$style_tag.html(style_css);
});
});
// Topbar font color
api('blogsy_top_bar_text_color', function (value) {
value.bind(function (newval) {
var $topbar = $('.blogsy-topbar');
if (!$topbar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_top_bar_text_color');
var style_css = '';
newval['text-color'] = newval['text-color'] ? newval['text-color'] : 'inherit';
newval['link-color'] = newval['link-color'] ? newval['link-color'] : 'inherit';
newval['link-hover-color'] = newval['link-hover-color'] ? newval['link-hover-color'] : 'inherit';
// Text color.
style_css += '.blogsy-topbar { color: ' + newval['text-color'] + '; }';
style_css += '.blogsy-location { color: ' + newval['text-color'] + '; }';
style_css += '.blogsy-topbar .header-preferences { color: ' + newval['text-color'] + '; }';
// Link color.
style_css +=
'.blogsy-topbar-widget__text a, ' +
'.blogsy-topbar-widget .blogsy-header-nav > li.menu-item > a, ' +
'.blogsy-topbar-widget__socials .blogsy-social-icons-widget > ul > li > a { color: ' + newval['link-color'] + '; }';
// Link hover color.
style_css +=
'.blogsy-topbar-widget .blogsy-header-nav > li.menu-item > a:hover, ' +
'.blogsy-topbar-widget .blogsy-header-nav > li.menu-item > a:focus, ' +
'.blogsy-topbar-widget .blogsy-header-nav > li.menu-item-has-children:hover > a, ' +
'.blogsy-topbar-widget .blogsy-header-nav > li.current-menu-item > a, ' +
'.blogsy-topbar-widget .blogsy-header-nav > li.current-menu-ancestor > a, ' +
'.blogsy-topbar-widget__text a:focus, ' +
'.blogsy-topbar-widget__text a:hover, ' +
'.blogsy-topbar-widget__socials .blogsy-social-icons-widget > ul > li > a:focus, ' +
'.blogsy-topbar-widget__socials .blogsy-social-icons-widget > ul > li > a:hover { color: ' + newval['link-hover-color'] + '; }';
$style_tag.html(style_css);
});
});
/**
* Topbar border.
*/
api('blogsy_top_bar_border', function (value) {
value.bind(function (newval) {
var $topbar = $('.blogsy-topbar');
if (!$topbar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_top_bar_border');
var style_css = blogsy_design_options_css('.blogsy-topbar', newval, 'border');
$style_tag.html(style_css);
});
});
// Header background color
api('blogsy_header_background', function (value) {
value.bind(function (newval) {
var $header = $('#site-header');
if (!$header.length) {
return;
}
var css_selector = `html:not([scheme="dark"]) .pt-header-layout-1 #site-header .pt-header-inner .pt-header-container::after,
html:not([scheme="dark"]) .pt-header-layout-2 #site-header .pt-header-inner,
html:not([scheme="dark"]) .pt-header-layout-3 #site-header .pt-header-inner > .pt-header-container`;
$style_tag = blogsy_get_style_tag('blogsy_header_background');
var style_css = blogsy_design_options_css(css_selector, newval, 'background');
$style_tag.html(style_css);
});
});
// Header font color
api('blogsy_header_text_color', function (value) {
value.bind(function (newval) {
var $header = $('#site-header');
if (!$header.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_header_text_color');
var style_css = '';
newval['text-color'] = newval['text-color'] ? newval['text-color'] : 'inherit';
newval['link-color'] = newval['link-color'] ? newval['link-color'] : 'inherit';
newval['link-hover-color'] = newval['link-hover-color'] ? newval['link-hover-color'] : 'inherit';
newval['link-active-color'] = newval['link-active-color'] ? newval['link-active-color'] : 'inherit';
// Text color.
style_css += 'html:not([scheme="dark"]) .pt-header { color: ' + newval['text-color'] + '; }';
// Link color.
style_css +=
'html:not([scheme="dark"]) .pt-header .blogsy-header-nav > li > a, html:not([scheme="dark"]) .pt-header .blogsy-header-v-nav > li > a, ' +
'html:not([scheme="dark"]) .pt-header .pt-header-widget .blogsy-social-icons-widget:not(.minimal-fill, .rounded-fill) > ul > li > a { color: ' + newval['link-color'] + '; }';
// Link hover color.
style_css +=
'html .pt-header .blogsy-header-nav > li > a:hover, ' +
'html .pt-header .blogsy-header-nav > li.hovered > a, ' +
'html .pt-header .blogsy-header-nav > li.current_page_item > a, ' +
'html .pt-header .blogsy-header-nav > li.current-menu-item > a, ' +
'html .pt-header .blogsy-header-nav > li.current-menu-ancestor > a' +
'html .pt-header .blogsy-header-v-nav > li a:focus, ' +
'html .pt-header .blogsy-header-v-nav > li a:hover, ' +
'html .pt-header .pt-header-widget .blogsy-social-icons-widget:not(.minimal-fill, .rounded-fill) > ul > li > a:focus, ' +
'html .pt-header .pt-header-widget .blogsy-social-icons-widget:not(.minimal-fill, .rounded-fill) > ul > li > a:hover { color: ' + newval['link-hover-color'] + '; }';
// Link active color.
style_css +=
'html .pt-header .blogsy-header-nav > li.menu-item > a { --menu-shape-color: ' + newval['link-active-color'] + '; }';
$style_tag.html(style_css);
});
});
/**
* Header border.
*/
api('blogsy_header_border', function (value) {
value.bind(function (newval) {
var $header = $('#site-header');
if (!$header.length) {
return;
}
var css_selector = `.pt-header-layout-1 #site-header .pt-header-inner .pt-header-container::after,
.pt-header-layout-2 #site-header .pt-header-inner,
.pt-header-layout-3 #site-header .pt-header-inner > .pt-header-container`;
$style_tag = blogsy_get_style_tag('blogsy_header_border');
var style_css = blogsy_design_options_css(css_selector, newval, 'border');
$style_tag.html(style_css);
});
});
/**
* Footer Custom
*/
//Background
api('blogsy_footer_widget_background', function (value) {
value.bind(function (newval) {
var $footer = $('.site-default-footer');
if (!$footer.length) {
return;
}
var copyright_separator_color;
// Copyright separator color.
if (newval['background-type'] === 'color') {
var light_or_dark = newval['background-color'] === '#ffffff' ? -0.1 : 0.2;
copyright_separator_color = blogsy_luminance(newval['background-color'], light_or_dark);
}
$style_tag = blogsy_get_style_tag('blogsy_footer_widget_background');
var style_css = blogsy_design_options_css('.site-default-footer', newval, 'background');
style_css += '.site-default-footer .default-footer-copyright { border-top-color: ' + copyright_separator_color + '; }';
$style_tag.html(style_css);
});
});
// Font color
api('blogsy_footer_widget_text_color', function (value) {
value.bind(function (newval) {
var $footer = $('.site-default-footer');
if (!$footer.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_footer_widget_text_color');
var style_css = '';
newval['text-color'] = newval['text-color'] ? newval['text-color'] : 'inherit';
newval['link-color'] = newval['link-color'] ? newval['link-color'] : 'inherit';
newval['link-hover-color'] = newval['link-hover-color'] ? newval['link-hover-color'] : 'inherit';
// Text color.
style_css += '.site-default-footer, .site-default-footer .blogsy-divider-heading .title, .site-default-footer .wp-block-heading { color: ' + newval['text-color'] + '; }';
// Link color.
style_css += '.site-default-footer a' + '{ color: ' + newval['link-color'] + '; }';
// Link hover color.
style_css +=
'.site-default-footer a:hover, ' +
'.site-default-footer a:focus { color: ' + newval['link-hover-color'] + '; }';
$style_tag.html(style_css);
});
});
/**
* Footer border.
*/
api('blogsy_footer_widget_area_border', function (value) {
value.bind(function (newval) {
var $footer = $('.site-default-footer');
if (!$footer.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_footer_widget_area_border');
var style_css = blogsy_design_options_css('.site-default-footer', newval, 'border');
$style_tag.html(style_css);
});
});
/**
* Footer offcanvas menu
*/
//Background
api('blogsy_footer_canvas_menu_bg', function (value) {
value.bind(function (newval) {
var $footer_canvas = $('.footer-canvas-menu-bg');
if (!$footer_canvas.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_footer_canvas_menu_bg');
var style_css = blogsy_design_options_css('.footer-canvas-menu-bg', newval, 'background');
$style_tag.html(style_css);
});
});
// Font color
api('blogsy_footer_canvas_menu_color', function (value) {
value.bind(function (newval) {
var $footer_canvas = $('.footer-canvas-menu-bg');
if (!$footer_canvas.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_footer_canvas_menu_color');
var style_css = '';
newval['text-color'] = newval['text-color'] ? newval['text-color'] : 'inherit';
newval['link-color'] = newval['link-color'] ? newval['link-color'] : 'inherit';
newval['link-hover-color'] = newval['link-hover-color'] ? newval['link-hover-color'] : 'inherit';
// Text color.
style_css += '.footer-canvas-menu, .footer-canvas-menu .blogsy-divider-heading .title, .footer-canvas-menu .wp-block-heading { color: ' + newval['text-color'] + '; }';
// Link color.
style_css += '.footer-canvas-menu .blogsy-header-v-nav li a , .footer-canvas-menu-btn' + '{ color: ' + newval['link-color'] + '; }';
// Link hover color.
style_css +=
'.footer-canvas-menu .blogsy-header-v-nav li a:hover,' +
'.footer-canvas-menu .blogsy-header-v-nav li a:focus,' +
'.footer-canvas-menu .blogsy-header-v-nav li.current_page_item a,' +
'.footer-canvas-menu .blogsy-header-v-nav li.current-menu-item a { color: ' + newval['link-hover-color'] + '; }';
$style_tag.html(style_css);
});
});
/**
* Blog post title font size.
*/
api('blogsy_blog_title_font_size', function (value) {
value.bind(function (newval) {
var $blog_default = $('.default-archive-container');
if (!$blog_default.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_blog_title_font_size');
var style_css = '';
style_css += blogsy_range_field_css('.default-archive-container .post-wrapper .title', 'font-size', newval, true, newval.unit);
$style_tag.html(style_css);
});
});
/**
* Ticker title.
*/
api('blogsy_ticker_title', function (value) {
value.bind(function (newval) {
$('#blogsy-ticker .blogsy-news-ticker-title-text').text(newval);
});
});
/**
* Ticker visibility.
*/
api('blogsy_ticker_visibility', function (value) {
value.bind(function (newval) {
blogsy_print_visibility_classes($('#blogsy-ticker'), newval);
});
});
/**
* Hero height.
*/
api('blogsy_hero_slider_height', function (value) {
value.bind(function (newval) {
var $hero = $('#blogsy-hero');
if (!$hero.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_hero_slider_height');
var style_css = '';
style_css += blogsy_range_field_css('#blogsy-hero .pt-hero-slider .post-wrapper', 'height', newval, true, 'px');
$style_tag.html(style_css);
});
});
/**
* Hero post title font size.
*/
api('blogsy_hero_slider_title_font_size', function (value) {
value.bind(function (newval) {
var $hero = $('#blogsy-hero');
if (!$hero.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_hero_slider_title_font_size');
var style_css = '';
style_css += blogsy_range_field_css('#blogsy-hero .pt-hero-slider .post-wrapper .title', 'font-size', newval, true, newval.unit);
$style_tag.html(style_css);
});
});
/**
* Hero visibility.
*/
api('blogsy_hero_visibility', function (value) {
value.bind(function (newval) {
blogsy_print_visibility_classes($('#blogsy-hero'), newval);
});
});
/**
* Featured Category title.
*/
api('blogsy_featured_category_title', function (value) {
value.bind(function (newval) {
$('#blogsy-featured-category .blogsy-divider-heading .title').text(newval);
});
});
/**
* Hero post title font size.
*/
api('blogsy_ticker_speed', function (value) {
value.bind(function (newval) {
var $hero = $('#blogsy-ticker');
if (!$hero.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_ticker_speed');
var style_css = '';
style_css += blogsy_range_field_css('#blogsy-ticker .blogsy-ticker .blogsy-news-ticker-content-wrapper.animation-marquee .blogsy-news-ticker-items', '--marquee-time', newval, true, 's');
$style_tag.html(style_css);
});
});
/**
* Featured Category visibility.
*/
api('blogsy_featured_category_visibility', function (value) {
value.bind(function (newval) {
blogsy_print_visibility_classes($('#blogsy-featured-category'), newval);
});
});
/**
* Featured Links title.
*/
api('blogsy_featured_links_title', function (value) {
value.bind(function (newval) {
$('#blogsy-featured-links .blogsy-divider-heading .title').text(newval);
});
});
/**
* Featured Links visibility.
*/
api('blogsy_featured_links_visibility', function (value) {
value.bind(function (newval) {
blogsy_print_visibility_classes($('#blogsy-featured-links'), newval);
});
});
/**
* Stories title.
*/
api('blogsy_stories_title', function (value) {
value.bind(function (newval) {
$('#blogsy-stories .blogsy-divider-heading .title').text(newval);
});
});
/**
* Stories View All.
*/
api('blogsy_stories_view_all', function (value) {
value.bind(function (newval) {
$('#blogsy-stories .blogsy-section-heading .pt-button-text .text').text(newval);
});
});
/**
* Stories visibility.
*/
api('blogsy_stories_visibility', function (value) {
value.bind(function (newval) {
blogsy_print_visibility_classes($('#blogsy-stories'), newval);
});
});
/**
* PYML title.
*/
api('blogsy_pyml_title', function (value) {
value.bind(function (newval) {
$('#blogsy-pyml .blogsy-divider-heading .title').text(newval);
});
});
/**
* PYML visibility.
*/
api('blogsy_pyml_visibility', function (value) {
value.bind(function (newval) {
blogsy_print_visibility_classes($('#blogsy-pyml'), newval);
});
});
/**
* Card Box Shadow.
*/
api('blogsy_card_widget_box_shadow', function (value) {
value.bind(function (newval) {
var $sidebar = $('html:not([scheme="dark"]) .card-layout, html:not([scheme="dark"]) .card-layout-w');
if (!$sidebar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_card_widget_box_shadow');
var style_css = blogsy_design_options_css('html:not([scheme="dark"]) .card-layout, html:not([scheme="dark"]) .card-layout-w', newval, 'box-shadow');
$style_tag.html(style_css);
});
});
/**
* Card Border.
*/
api('blogsy_card_widget_border', function (value) {
value.bind(function (newval) {
var $sidebar = $('html:not([scheme="dark"]) .card-layout, html:not([scheme="dark"]) .card-layout-w');
if (!$sidebar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_card_widget_border');
var style_css = blogsy_design_options_css('html:not([scheme="dark"]) .card-layout, html:not([scheme="dark"]) .card-layout-w', newval, 'border');
$style_tag.html(style_css);
});
});
/**
* Card Background Color.
*/
api('blogsy_card_widget_bg_color', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_card_widget_bg_color');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html:not([scheme="dark"]) .card-layout, html:not([scheme="dark"]) .card-layout-w { background: ' + newval + '; }';
$style_tag.html(style_css);
});
});
/**
* Sidebar Widget Box Shadow.
*/
api('blogsy_sidebar_widget_box_shadow', function (value) {
value.bind(function (newval) {
var $sidebar = $('.sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget');
if (!$sidebar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_sidebar_widget_box_shadow');
var style_css = blogsy_design_options_css('html:not([scheme="dark"]) .sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget', newval, 'box-shadow');
$style_tag.html(style_css);
});
});
/**
* Sidebar Widget Border.
*/
api('blogsy_sidebar_widget_border', function (value) {
value.bind(function (newval) {
var $sidebar = $('.sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget');
if (!$sidebar.length) {
return;
}
$style_tag = blogsy_get_style_tag('blogsy_sidebar_widget_border');
var style_css = blogsy_design_options_css('html:not([scheme="dark"]) .sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget', newval, 'border');
$style_tag.html(style_css);
});
});
/**
* Sidebar Widget Background Color.
*/
api('blogsy_sidebar_widget_bg_color', function (value) {
value.bind(function (newval) {
$style_tag = blogsy_get_style_tag('blogsy_sidebar_widget_bg_color');
if (!newval) {
$style_tag.html('');
return;
}
var style_css = 'html:not([scheme="dark"]) .sidebar-container .sidebar-container-inner > .blogsy-sidebar-widget { background: ' + newval + '; }';
$style_tag.html(style_css);
});
});
// Selective refresh.
if (api.selectiveRefresh) {
// Bind partial content rendered event.
api.selectiveRefresh.bind('partial-content-rendered', function (placement) {
// Hero Slider.
if ('blogsy_hero_slider_post_number' === placement.partial.id || 'blogsy_hero_slider_elements' === placement.partial.id) {
document.querySelectorAll(placement.partial.params.selector).forEach((item) => {
window.blogsy.blogsyHeroSlider($(item));
});
}
// PYML Slider.
if ('blogsy_pyml_post_number' === placement.partial.id || 'blogsy_pyml_elements' === placement.partial.id) {
document.querySelectorAll(placement.partial.params.selector).forEach((item) => {
window.blogsy.blogsyPymlSlider($(item));
});
}
});
}
/*
* Helper function to print visibility classes.
*/
function blogsy_print_visibility_classes($element, newval) {
if (!$element.length) {
return;
}
$element.removeClass(blogsy_visibility_classes);
if ('all' !== newval) {
$element.addClass('blogsy-' + newval);
}
}
/*
* Helper function to convert hex to rgba.
*/
function blogsy_hex2rgba(hex, opacity) {
if ('rgba' === hex.substring(0, 4)) {
return hex;
}
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (opacity) {
if (1 < opacity) {
opacity = 1;
}
opacity = ',' + opacity;
}
if (result) {
return 'rgba(' + parseInt(result[1], 16) + ',' + parseInt(result[2], 16) + ',' + parseInt(result[3], 16) + opacity + ')';
}
return false;
}
/**
* Helper function to lighten or darken the provided hex color.
*/
function blogsy_luminance(hex, percent) {
// Convert RGB color to HEX.
if (hex.includes('rgb')) {
hex = blogsy_rgba2hex(hex);
}
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
var isColor = /^#[0-9A-F]{6}$/i.test(hex);
if (!isColor) {
return hex;
}
var from, to;
for (var i = 1; 3 >= i; i++) {
result[i] = parseInt(result[i], 16);
from = 0 > percent ? 0 : result[i];
to = 0 > percent ? result[i] : 255;
result[i] = result[i] + Math.ceil((to - from) * percent);
}
result = '#' + blogsy_dec2hex(result[1]) + blogsy_dec2hex(result[2]) + blogsy_dec2hex(result[3]);
return result;
}
/**
* Convert dec to hex.
*/
function blogsy_dec2hex(c) {
var hex = c.toString(16);
return 1 == hex.length ? '0' + hex : hex;
}
/**
* Convert rgb to hex.
*/
function blogsy_rgba2hex(c) {
var a, x;
a = c.split('(')[1].split(')')[0].trim();
a = a.split(',');
var result = '';
for (var i = 0; 3 > i; i++) {
x = parseInt(a[i]).toString(16);
result += 1 === x.length ? '0' + x : x;
}
if (result) {
return '#' + result;
}
return false;
}
/**
* Check if is light color.
*/
function blogsy_is_light_color(color = '') {
var r, g, b, brightness;
if (color.match(/^rgb/)) {
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
r = color[1];
g = color[2];
b = color[3];
} else {
color = +('0x' + color.slice(1).replace(5 > color.length && /./g, '$&$&'));
r = color >> 16;
g = (color >> 8) & 255;
b = color & 255;
}
brightness = (r * 299 + g * 587 + b * 114) / 1000;
return 137 < brightness;
}
/**
* Detect if we should use a light or dark color on a background color.
*/
function blogsy_light_or_dark(color, dark = '#000000', light = '#FFFFFF') {
return blogsy_is_light_color(color) ? dark : light;
}
// Custom Customizer Preview class (attached to the Customize API)
api.blogsyCustomizerPreview = {
// Init
init: function () {
var self = this; // Store a reference to "this"
var previewBody = self.preview.body;
previewBody.on('click', '.blogsy-set-widget', function (e) {
e.preventDefault();
self.preview.send('set-footer-widget', $(this).data('sidebar-id'));
});
}
};
/**
* Capture the instance of the Preview since it is private (this has changed in WordPress 4.0)
*
* @see https://github.com/WordPress/WordPress/blob/5cab03ab29e6172a8473eb601203c9d3d8802f17/wp-admin/js/customize-controls.js#L1013
*/
var blogsyOldPreview = api.Preview;
api.Preview = blogsyOldPreview.extend({
initialize: function (params, options) {
// Store a reference to the Preview
api.blogsyCustomizerPreview.preview = this;
// Call the old Preview's initialize function
blogsyOldPreview.prototype.initialize.call(this, params, options);
}
});
// Document ready
$(function () {
// Initialize our Preview
api.blogsyCustomizerPreview.init();
});
}(jQuery));