| Current Path : /home/xbodynamge/www/wp-content/themes/hestia/assets/js/admin/ |
| Current File : /home/xbodynamge/www/wp-content/themes/hestia/assets/js/admin/customizer.js |
/**
* Main customize js file
*
* @package Hestia
*/
/* global initializeAllElements */
/* global AOS */
/* exported hestiaGetCss */
( function( $ ) {
/**
* This handles the customizer live actions
*/
$.hestiaCustomizeLive = {
'init':function () {
this.liveShowHideSection();
this.liveTextReplace();
this.liveBackgroundReplace();
this.livePricingSection();
this.sliderHeightFix();
},
/**
* Fix the slider height.
*/
'sliderHeightFix': function() {
var windowWidth = $( window ).width();
var windowHeight = $( window ).height();
if ( windowWidth > 768 ) {
$( '.carousel .page-header' ).css( 'min-height', (windowHeight * 0.9) ); // 90% of window height
} else {
$( '.carousel .page-header' ).css( 'min-height', (windowHeight) ); // 90% of window height
}
},
/**
* This function handle the action when a user clicks on show/hide customizer control.
* It toggles the section and then refresh animations.
*/
'liveShowHideSection':function () {
var showHideControls = {
'hestia_features_hide' : '.hestia-features',
'hestia_about_hide' : '.hestia-about',
'hestia_shop_hide' : '.hestia-shop',
'hestia_portfolio_hide' : '.hestia-work',
'hestia_team_hide' : '.hestia-team',
'hestia_pricing_hide' : '.hestia-pricing',
'hestia_ribbon_hide' : '.hestia-ribbon',
'hestia_testimonials_hide' : '.hestia-testimonials',
'hestia_subscribe_hide' : '.hestia-subscribe',
'hestia_clients_bar_hide' : '.hestia-clients-bar',
'hestia_blog_hide' : '.hestia-blogs',
'hestia_contact_hide' : '.hestia-contact'
};
Object.keys(showHideControls).forEach(function (key) {
wp.customize(
key, function (value) {
value.bind(
function(newval){
$(showHideControls[key]).toggle();
if( newval === true ){
if ( typeof AOS !== 'undefined' ) {
AOS.refresh();
}
}
}
);
}
);
});
},
/**
* This function handle the action when a user change a simple html input.
* It target the class and then replace the inside of it with the new value.
*/
'liveTextReplace': function () {
var textToReplace = [
{ controlName:'hestia_features_title', selector:'.hestia-features .hestia-title' },
{ controlName:'hestia_features_subtitle', selector:'.hestia-features .description' },
{ controlName:'hestia_shop_title', selector:'.hestia-shop .hestia-title' },
{ controlName:'hestia_shop_subtitle', selector:'.hestia-shop .description' },
{ controlName:'hestia_portfolio_title', selector:'.hestia-work .hestia-title' },
{ controlName:'hestia_portfolio_subtitle', selector:'.hestia-work .description' },
{ controlName:'hestia_team_title', selector:'.hestia-team .hestia-title' },
{ controlName:'hestia_team_subtitle', selector:'.hestia-team .description' },
{ controlName:'hestia_pricing_title', selector:'.hestia-pricing .hestia-title' },
{ controlName:'hestia_pricing_subtitle', selector:'.hestia-pricing p.text-gray' },
{ controlName:'hestia_pricing_table_one_title', selector:'.hestia-pricing .hestia-table-one .category' },
{ controlName:'hestia_pricing_table_one_price', selector:'.hestia-pricing .hestia-table-one .card-title', isHtml:true },
{ controlName:'hestia_pricing_table_one_text', selector:'.hestia-pricing .hestia-table-one .btn' },
{ controlName:'hestia_pricing_table_two_title', selector:'.hestia-pricing .hestia-table-two .category' },
{ controlName:'hestia_pricing_table_two_price', selector:'.hestia-pricing .hestia-table-two .card-title', isHtml:true },
{ controlName:'hestia_pricing_table_two_text', selector:'.hestia-pricing .hestia-table-two .btn' },
{ controlName:'hestia_ribbon_text', selector:'.hestia-ribbon .hestia-title', isHtml:true },
{ controlName:'hestia_ribbon_button_text', selector:'.hestia-ribbon .hestia-ribbon-content-right a' },
{ controlName:'hestia_testimonials_title', selector:'.hestia-testimonials .hestia-title' },
{ controlName:'hestia_testimonials_subtitle', selector:'.hestia-testimonials .description' },
{ controlName:'hestia_subscribe_title', selector:'.hestia-subscribe .title' },
{ controlName:'hestia_subscribe_subtitle', selector:'.hestia-subscribe .subscribe-description' },
{ controlName:'hestia_blog_title', selector:'.hestia-blogs .hestia-title' },
{ controlName:'hestia_blog_subtitle', selector:'.hestia-blogs .description' },
{ controlName:'hestia_contact_title', selector:'.hestia-contact .hestia-contact-title-area .hestia-title' },
{ controlName:'hestia_contact_subtitle', selector:'.hestia-contact h5.description' },
{ controlName:'hestia_contact_area_title', selector:'.hestia-contact .card-contact .card-title' },
{ controlName:'hestia_blog_subscribe_title', selector:'#subscribe-on-blog h3.hestia-title' },
{ controlName:'hestia_blog_subscribe_subtitle', selector:'#subscribe-on-blog p.description' }
];
textToReplace.forEach(function (item) {
wp.customize(
item.controlName, function( value ) {
value.bind(
function( newval ) {
if(typeof item.isHtml !== 'undefined' ){
$( item.selector ).html( newval );
} else {
$( item.selector ).text( newval );
}
}
);
}
);
});
},
/**
* This function handle the action when a user change the background of a section.
* It target the class and then replace the background. If the input is empty,
* it will toggle the class section-image (or you can specify what class to toggle),
* class that adds overlay and make the text white.
*/
'liveBackgroundReplace': function () {
var backgroundImages = [
{controlName: 'hestia_feature_thumbnail', selector:'.hestia-about'},
{controlName: 'hestia_ribbon_background', selector:'.hestia-ribbon'},
{controlName: 'hestia_subscribe_background', selector:'.hestia-subscribe', toggleClass:'subscribe-line-image'},
{controlName: 'hestia_contact_background', selector:'.hestia-contact'}
];
backgroundImages.forEach(function (item) {
wp.customize(
item.controlName, function( value ) {
value.bind(
function( newval ) {
$( item.selector ).css( 'background-image', 'url('+newval+')' );
var toggleClass = 'section-image';
if( typeof item.toggleClass !== 'undefined' ){
toggleClass = item.toggleClass;
}
if ( newval === '' ) {
$( item.selector ).removeClass( toggleClass );
} else {
$( item.selector ).addClass( toggleClass );
}
}
);
}
);
});
},
'updatePricingTableIcon': function( newval, tableNumber ){
var accent_color = wp.customize._value.accent_color();
var packageSelector = '.home .hestia-pricing .hestia-table-' + tableNumber + ' .hestia-pricing-icon-wrapper';
if ( newval ) {
$( packageSelector + ' i' ).removeClass().addClass( 'fa' ).addClass( newval );
$( packageSelector ).addClass( 'pricing-has-icon' ).css( {'display' : 'block', 'color' : accent_color } );
} else {
$( packageSelector + '.pricing-has-icon .card-title' ).css( { 'font-size' : '60px', 'margin-top' : '30px' } );
$( packageSelector + '.pricing-has-icon .card-title small' ).css( { 'color' : '#777', 'top' : '-17px', 'font-size' : '26px', 'font-weight' : 'normal', 'line-height' : '1' } );
$( packageSelector + '.pricing-has-icon' ).removeClass( 'pricing-has-icon' ).css( 'display', 'none' );
}
},
/**
* This function handle the action when a user change the content of pricing tables.
*/
'livePricingSection':function(){
var self = this;
wp.customize(
'hestia_pricing_table_one_features', function( value ) {
value.bind(
function( newval ) {
var result = self.parsePricingFeatures(newval);
$( '.hestia-pricing .hestia-table-one ul' ).html( result );
}
);
}
);
wp.customize(
'hestia_pricing_table_two_features', function( value ) {
value.bind(
function( newval ) {
var result = self.parsePricingFeatures(newval);
$( '.hestia-pricing .hestia-table-two ul' ).html( result );
}
);
}
);
/* Live refresh for pricing icon, table one */
wp.customize(
'hestia_pricing_table_one_icon', function( value ) {
value.bind(
function( newval ) {
$.hestiaCustomizeLive.updatePricingTableIcon( newval, 'one' );
}
);
}
);
/* Live refresh for pricing icon, table two */
wp.customize(
'hestia_pricing_table_two_icon', function( value ) {
value.bind(
function( newval ) {
$.hestiaCustomizeLive.updatePricingTableIcon( newval, 'two' );
}
);
}
);
},
/**
* This function parse the content of pricing table and create html for it.
*/
'parsePricingFeatures': function (newval) {
var val = newval.replace('\\r', '');
var features = val.split('\\n');
var result = '';
features.forEach(function (feature) {
result += '<li>'+feature+'</li>';
});
return result;
},
};
$.hestiaCustomizeLive.init();
/**
* This extends jQuery functionality and adds a function to check if a jQuery element contain
* any of classes in an array.
*/
$.fn.extend({
hasClasses: function (selectors) {
var self = this;
for (var i in selectors) {
if ($(self).hasClass(selectors[i])) {
return true;
}
}
return false;
}
});
/**
* This handles the customizer shortcuts.
* Send events on click etc.
*/
$.hestiaCustomize = {
'init': function () {
this.focusForCustomShortcut();
this.focusTab();
this.handleShowHideShortcut();
this.addShortcutForMenu();
this.handleTextEditor();
this.handleTopBarWidgetFocus();
},
/**
* This function does the focus on controls when the user clicks on a custom shortcut.
* If controls are in a tab, it does focus on tab too.
*/
'focusForCustomShortcut': function () {
/**
* All controls that have custom shortcuts
*/
var fakeShortcutClasses = [
'hestia_features_hide',
'hestia_features_title',
'hestia_about_hide',
'hestia_shop_hide',
'hestia_shop_title',
'hestia_portfolio_hide',
'hestia_portfolio_title',
'hestia_team_hide',
'hestia_team_title',
'hestia_pricing_hide',
'hestia_pricing_title',
'hestia_pricing_table_one_title',
'hestia_pricing_table_two_title',
'hestia_ribbon_hide',
'hestia_ribbon_text',
'hestia_testimonials_hide',
'hestia_testimonials_title',
'hestia_clients_bar_hide',
'hestia_subscribe_hide',
'hestia_subscribe_title',
'hestia_blog_hide',
'hestia_blog_title',
'hestia_contact_hide',
'hestia_contact_title'
];
/**
* Controls that have custom shortcuts and are in a tab in customizer.
* We need to focus on tab too if clicked on one of those controls.
*/
var controlsInTabs = [
'hestia_pricing_title',
'hestia_pricing_table_one_title',
'hestia_pricing_table_two_title',
'hestia_subscribe_hide',
'hestia_subscribe_title',
'hestia_contact_hide',
'hestia_contact_title'
];
fakeShortcutClasses.forEach(function (element) {
$('.customize-partial-edit-shortcut-'+element).on('click',function () {
if( controlsInTabs.indexOf(element) > -1) {
var tabToActivate = $('.hestia-customizer-tab>.' + element);
wp.customize.preview.send('focus-control', element);
wp.customize.preview.send('tab-previewer-edit', tabToActivate);
} else {
wp.customize.preview.send( 'hestia-customize-focus-control', element );
}
});
});
},
'focusTab': function () {
$( '.customize-partial-edit-shortcut' ).live(
'DOMNodeInserted', function () {
$( this ).on(
'click', function() {
var controlId = $( this ).attr( 'class' );
var tabToActivate = '';
var controlFinalId = controlId.split( ' ' ).pop().split( '-' ).pop();
if ( controlId.indexOf( 'widget' ) !== -1 ) {
tabToActivate = $( '.hestia-customizer-tab>.widgets' );
} else {
tabToActivate = $( '.hestia-customizer-tab>.' + controlFinalId );
}
wp.customize.preview.send( 'tab-previewer-edit', tabToActivate );
wp.customize.preview.send( 'focus-control', controlFinalId );
}
);
}
);
},
/**
* This function triggers click on show/hide control when user clicks on one of their custom shortcut.
*/
'handleShowHideShortcut': function () {
var classesToLook = [
'hestia_features_hide',
'hestia_about_hide',
'hestia_shop_hide',
'hestia_portfolio_hide',
'hestia_team_hide',
'hestia_pricing_hide',
'hestia_ribbon_hide',
'hestia_testimonials_hide',
'hestia_clients_bar_hide',
'hestia_subscribe_hide',
'hestia_blog_hide',
'hestia_contact_hide'];
classesToLook.forEach(function(element){
$( '.customize-partial-edit-shortcut-'+element ).on( 'click', function() {
wp.customize.preview.send('hestia-customize-disable-section', element);
});
});
},
/**
* Add shortcut button for primary menu.
*/
'addShortcutForMenu' : function () {
var primaryMenu = $('.navbar-nav');
var menuShortcutHtml = '<span class="menu-shortcut customize-partial-edit-shortcut customize-partial-edit-shortcut-primary-menu"><button class="customize-partial-edit-shortcut-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13.89 3.39l2.71 2.72c.46.46.42 1.24.03 1.64l-8.01 8.02-5.56 1.16 1.16-5.58s7.6-7.63 7.99-8.03c.39-.39 1.22-.39 1.68.07zm-2.73 2.79l-5.59 5.61 1.11 1.11 5.54-5.65zm-2.97 8.23l5.58-5.6-1.07-1.08-5.59 5.6z"></path></svg></button></span>';
primaryMenu.before(menuShortcutHtml);
this.handleMenuShortcutClick();
},
/**
* Handle the click of shortcut of the menu
*/
'handleMenuShortcutClick': function () {
$( '.menu-shortcut' ).on( 'click', function() {
wp.customize.preview.send('trigger-focus-menu');
});
},
/**
* Handle the opening of text editor
*/
'handleTextEditor': function(){
$(document).on('DOMNodeInserted','.customize-partial-edit-shortcut', function() {
$( this ).on(
'click', function(){
var controls = ['hestia_page_editor', 'hestia_contact_content_new'];
var clickedControl = $( this ).attr('class');
var openControl = '';
$.each(controls, function(index, value){
if (clickedControl.indexOf( value ) !== -1){
openControl = value;
return false;
}
});
if( openControl !== ''){
wp.customize.preview.send( 'trigger-open-editor', openControl );
} else {
wp.customize.preview.send( 'trigger-close-editor');
}
}
);
});
},
'handleTopBarWidgetFocus': function(){
$('.customize-partial-edit-shortcut-hestia-top-bar-widget').on('click', function(){
wp.customize.preview.send('focus-section', 'sidebar-widgets-sidebar-top-bar');
});
}
};
$.hestiaCustomize.init();
/**
* Live refresh for container width
*/
wp.customize(
'hestia_container_width', function( value ) {
'use strict';
value.bind(
function( to ) {
if ( to ) {
var values = JSON.parse( to );
if ( values ) {
if ( values.mobile ) {
var settings = {
selectors: 'div.container',
cssProperty: 'width',
propertyUnit: 'px',
styleClass: 'hestia-container-width-css'
}, val;
val = JSON.parse( to );
hestiaSetCss( settings, val );
}
}
}
}
);
}
);
// Site Identity > Site Title
wp.customize(
'blogname', function( value ) {
value.bind(
function( newval ) {
$( '.navbar .navbar-brand p' ).text( newval );
}
);
}
);
// Site Identity > Site Description
wp.customize(
'blogdescription', function( value ) {
value.bind(
function( newval ) {
$( '.blog .page-header .title' ).text( newval );
}
);
}
);
// Appearance Settings > General Settings > Boxed Layout
wp.customize(
'hestia_general_layout', function( value ) {
value.bind(
function() {
var navbar_height = $( '.navbar-fixed-top' ).outerHeight();
if ( $( '.main' ).hasClass( 'main-raised' ) ) {
$( '.main' ).removeClass( 'main-raised' );
$( '.main.classic-blog' ).css( 'margin-top', navbar_height );
} else {
$( '.main' ).addClass( 'main-raised' );
$('.main.classic-blog').css('margin-top', navbar_height);
}
}
);
}
);
// Appearance Settings > General Settings > Footer Credits
wp.customize(
'hestia_general_credits', function( value ) {
value.bind(
function( newval ) {
$( '.footer-black .copyright' ).html( newval );
}
);
}
);
// Footer Options > Alternative Footer Style
wp.customize(
'hestia_alternative_footer_style', function( value ) {
value.bind(
function() {
var footer = $( '.footer.footer-big' );
if ( footer.hasClass( 'footer-black' ) ) {
footer.removeClass( 'footer-black' );
} else {
footer.addClass( 'footer-black' );
}
}
);
}
);
// Appearance Settings > Appearance Settings > General Settings > Sidebar Width
wp.customize(
'hestia_sidebar_width', function( value ) {
value.bind(
function( newval ) {
if ( $( 'body > .wrapper' ).width() > 991 ) {
var layout = wp.customize._value.hestia_page_sidebar_layout(), hestia_content_width, content_width;
if (layout !== 'full-width' && layout !== '') {
hestia_content_width = 100 - newval;
if (newval <= 3 || newval >= 80) {
hestia_content_width = 100;
newval = 100;
}
content_width = hestia_content_width - 8.33333333;
$( '.content-sidebar-left, .content-sidebar-right, .page-content-wrap' ).css( 'width', hestia_content_width + '%' );
$( '.blog-sidebar-wrapper:not(.no-variable-width), .shop-sidebar.col-md-3' ).css( 'width', newval + '%' );
}
layout = wp.customize._value.hestia_blog_sidebar_layout();
if (layout !== 'full-width' && layout !== '') {
hestia_content_width = 100 - newval;
if (newval <= 3 || newval >= 80) {
hestia_content_width = 100;
newval = 100;
if (layout === 'sidebar-left') {
$( '.blog-posts-wrap, .archive-post-wrap' ).removeClass( 'col-md-offset-1' );
} else {
$( 'body:not(.page) .blog-sidebar-wrapper:not(.no-variable-width)' ).removeClass( 'col-md-offset-1' );
}
} else {
if (layout === 'sidebar-left') {
$( '.blog-posts-wrap, .archive-post-wrap' ).addClass( 'col-md-offset-1' );
} else {
$( 'body:not(.page) .blog-sidebar-wrapper:not(.no-variable-width)' ).addClass( 'col-md-offset-1' );
}
}
content_width = hestia_content_width - 8.33333333;
$( '.blog-posts-wrap, .archive-post-wrap, .single-post-wrap' ).css( 'width', content_width + '%' );
$( '.blog-sidebar-wrapper:not(.no-variable-width), .shop-sidebar-wrapper' ).css( 'width', newval + '%' );
}
}
}
);
}
);
// Frontpage Sections > Portfolio > Title
wp.customize(
'hestia_portfolio_title', function( value ) {
value.bind(
function( newval ) {
$( '.hestia-work .title' ).text( newval );
}
);
}
);
// Frontpage Sections > Portfolio > Subtitle
wp.customize(
'hestia_portfolio_subtitle', function( value ) {
value.bind(
function( newval ) {
$( '.hestia-work .description' ).text( newval );
}
);
}
);
// Frontpage Sections > Contact > Background
wp.customize(
'hestia_contact_background', function( value ) {
value.bind(
function( newval ) {
$( '.contactus' ).css( 'background-image', 'url(' + newval + ')' );
}
);
}
);
// Blog Settiungs > Authors Section > Background
wp.customize(
'hestia_authors_on_blog_background', function( value ) {
value.bind(
function( newval ) {
$( '#authors-on-blog.authors-on-blog' ).css( 'background-image', 'url(' + newval + ')' );
}
);
}
);
// Colors > Accent Color
wp.customize(
'accent_color', function( value ) {
value.bind(
function( newval ) {
$( '.main section:not(.hestia-blogs) a:not(.btn):not(.blog-item-title-link):not(.shop-item-title-link):not(.moretag):not(.button), .card-product .category a, .navbar.navbar-color-on-scroll:not(.navbar-transparent) li.active a' ).css( 'color', newval );
$( '.btn.btn-primary:not(.no-js-color), .card .header-primary, input#searchsubmit, .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce ul.products li.product .onsale, .woocommerce span.onsale, article .section-text a, .woocommerce .button:not(.btn-just-icon), .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a, .hestia-work .portfolio-item:nth-child(6n+1) .label, .pagination span.current' ).css( 'background-color', newval );
var accentColorVariation2 = convertHex( newval, 20 );
var accentColorVariation3 = convertHex( newval, 42 );
// Pricing icon
$( '.home .hestia-pricing .card-pricing .content .hestia-pricing-icon-wrapper' ).css( 'color', newval) ;
// LINKS HOVER STYLE
var style = '<style class="hover-styles">', el;
style += '.card-blog a.moretag:hover, aside .widget a:hover' +
'{ color: ' + newval + '!important; }';
style += '.card-blog a.moretag:hover, aside .widget a:hover' +
'{ color: ' + newval + '!important; }';
style += '.dropdown-menu li > a:hover' +
'{ background-color:' + newval + '!important; }';
// BUTTONS BOX SHADOW
style += 'input#searchsubmit:hover, .pagination span.current, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active, .btn.btn-primary:active:focus, .btn.btn-primary:active:hover, .woocommerce nav.woocommerce-pagination ul li span.current, .added_to_cart.wc-forward:hover, .woocommerce .single-product div.product form.cart .button:hover, .woocommerce #respond input#submit:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, #add_payment_method .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce input.button:disabled:hover, .woocommerce input.button:disabled[disabled]:hover, .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a:hover, .woocommerce-message a.button:hover, .woocommerce a.button.wc-backward:hover, .hestia-sidebar-open.btn.btn-rose:hover, .hestia-sidebar-close.btn.btn-rose:hover' +
'{ ' +
'-webkit-box-shadow: 0 14px 26px -12px' + accentColorVariation3 + ',0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px ' + accentColorVariation2 + '!important;' +
'box-shadow: 0 14px 26px -12px ' + accentColorVariation3 + ',0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px ' + accentColorVariation2 + '!important;' +
'} ';
style += '.form-group.is-focused .form-control, div.wpforms-container .wpforms-form .form-group.is-focused .form-control, .nf-form-cont input:not([type=button]):focus, .nf-form-cont select:focus, .nf-form-cont textarea:focus, .woocommerce-cart .shop_table .actions .coupon .input-text:focus, .woocommerce-checkout #customer_details .input-text:focus, .woocommerce-checkout #customer_details select:focus, .woocommerce-checkout #order_review .input-text:focus, .woocommerce-checkout #order_review select:focus, .woocommerce-checkout .woocommerce-form .input-text:focus, .woocommerce-checkout .woocommerce-form select:focus, .woocommerce div.product form.cart .variations select:focus, .woocommerce .woocommerce-ordering select:focus {' +
'background-image: -webkit-gradient(linear,left top, left bottom,from(' + newval + '),to(' + newval + ')),-webkit-gradient(linear,left top, left bottom,from(#d2d2d2),to(#d2d2d2));' +
'background-image: -webkit-linear-gradient(' + newval + '),to(' + newval + '),-webkit-linear-gradient(#d2d2d2,#d2d2d2);' +
'background-image: linear-gradient(' + newval + '),to(' + newval + '),linear-gradient(#d2d2d2,#d2d2d2);' +
'}';
style += '</style>';
el = $( '.hover-styles' ); // look for a matching style element that might already be there
if ( el.length ) {
el.replaceWith( style ); // style element already exists, so replace it
} else {
$( 'head' ).append( style ); // style element doesn't exist so add it
}
}
);
}
);
// Colors > Gradient Color
wp.customize(
'hestia_header_gradient_color', function( value ) {
value.bind(
function( newval ) {
var gradientColor1 = convertHex( newval, 100 );
var gradientColor2 = generateGradientSecondColor( newval, 100 );
var style = '<style class="gradient-styles">';
style += '.header-filter-gradient { background: linear-gradient(45deg, ' + gradientColor1 + ' 0%, ' + gradientColor2 + ' 100%); }';
style += '</style>';
$( 'head' ).append( style );
}
);
}
);
// Colors > Secondary Color
wp.customize(
'secondary_color', function( value ) {
value.bind(
function( newval ) {
$( '.main .title, .main .title a, .card-title,.card-title a, .info-title, .info-title a, .footer-brand, .footer-brand a, .media .media-heading, .media .media-heading a, .hestia-info .info-title, .card-blog a.moretag, .card .author a, aside .widget h5, aside .widget a, .hestia-about:not(.section-image) h1, .hestia-about:not(.section-image) h2, .hestia-about:not(.section-image) h3, .hestia-about:not(.section-image) h4, .hestia-about:not(.section-image) h5' ).css( 'color', newval );
$( '.section-image .title, .section-image .card-plain .card-title, .card [class*="header-"] .card-title, .contactus .hestia-info .info-title, .hestia-work h4.card-title' ).css( 'color', '#fff' );
}
);
}
);
// Colors > Body Color
wp.customize(
'body_color', function( value ) {
value.bind(
function( newval ) {
$( '.description, .card-description, .footer-big, .hestia-features .hestia-info p, .text-gray, .card-description p, .hestia-about:not(.section-image) p, .hestia-about:not(.section-image) h6' ).css( 'color', newval );
$( '.contactus .description' ).css( 'color', '#fff' );
}
);
}
);
// Colors > Header/Slider Text Color
wp.customize(
'header_text_color', function( value ) {
value.bind(
function( newval ) {
$( '.page-header, .page-header .hestia-title, .page-header .sub-title' ).css( 'color', newval );
}
);
}
);
// Header options > Top Bar > Background color
wp.customize(
'hestia_top_bar_background_color', function( value ) {
value.bind(
function( newval ) {
$( '.hestia-top-bar' ).css( 'background-color', newval );
}
);
}
);
// Header options > Top Bar > Text color
wp.customize(
'hestia_top_bar_text_color', function( value ) {
value.bind(
function( newval ) {
$( '.hestia-top-bar' ).css( 'color', newval );
}
);
}
);
// Header options > Top Bar > Link color
wp.customize(
'hestia_top_bar_link_color', function( value ) {
value.bind(
function( newval ) {
$( '.hestia-top-bar a' ).css( 'color', newval );
}
);
}
);
// Header options > Top Bar > Link color on hover
wp.customize(
'hestia_top_bar_link_color_hover', function( value ) {
value.bind(
function( newval ) {
$( '.hestia-top-bar a' ).hover(
function(){
$( this ).css( 'color', newval );
}, function(){
var initial = wp.customize._value.hestia_top_bar_link_color();
$( this ).css( 'color', initial );
}
);
}
);
}
);
if ( 'undefined' !== typeof wp && 'undefined' !== typeof wp.customize && 'undefined' !== typeof wp.customize.selectiveRefresh ) {
wp.customize.selectiveRefresh.bind(
'partial-content-rendered', function( placement ) {
initializeAllElements( $( placement.container ) );
}
);
}
wp.customize(
'header_video', function( value ) {
value.bind(
function( newval ) {
var linkedControl = wp.customize._value.external_header_video();
trigger_slider_selective( newval, linkedControl );
}
);
}
);
wp.customize(
'external_header_video', function( value ) {
value.bind(
function( newval ) {
var linkedControl = wp.customize._value.header_video();
trigger_slider_selective( newval, linkedControl );
}
);
}
);
/**
* Documentation: http://vitaliykiyko.com/en/4077/fire-custom-js-code-wp-customizer-selective-refresh-made/
*/
var reEnableParallaxFor = ['hestia_slider_content','hestia_slider_alignment'];
reEnableParallaxFor.forEach(function (controlName) {
wp.customize(
controlName, function(value) {
value.bind(
function() {
wp.customize.selectiveRefresh.bind('partial-content-rendered', function ( placement ) {
if( typeof wp.customize._value.hestia_slider_type === 'function' ) {
var sliderType = wp.customize._value.hestia_slider_type();
if (placement.partial.id === controlName && sliderType) {
$.hestiaCustomizeLive.sliderHeightFix();
if (sliderType === 'parallax') {
$.hestiaParallax.parallaxMove();
} else if ( typeof wp.customHeader !== 'undefined' ) {
wp.customHeader.initialize();
}
}
}
});
}
);
}
);
});
function trigger_slider_selective( newval, linkedControl ){
if ( newval || linkedControl ) {
return;
}
var partial = wp.customize.selectiveRefresh.partial( 'hestia_slider_content' );
var refreshPromise = wp.customize.selectiveRefresh.requestPartial( partial );
if ( ! partial._pendingRefreshPromise ) {
_.each(
partial.placements(), function( placement ) {
partial.preparePlacement( placement );
}
);
refreshPromise.done(
function( placements ) {
_.each(
placements, function( placement ) {
partial.renderContent( placement );
}
);
}
);
refreshPromise.fail(
function( data, placements ) {
partial.fallback( data, placements );
}
);
// Allow new request when this one finishes.
partial._pendingRefreshPromise = refreshPromise;
refreshPromise.always(
function() {
partial._pendingRefreshPromise = null;
}
);
}
}
function convertHex(hex,opacity){
hex = hex.replace( '#','' );
var r = parseInt( hex.substring( 0,2 ), 16 );
var g = parseInt( hex.substring( 2,4 ), 16 );
var b = parseInt( hex.substring( 4,6 ), 16 );
var result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
return result;
}
function generateGradientSecondColor(hex, opacity){
hex = hex.replace( '#','' );
var r = parseInt( hex.substring( 0,2 ), 16 );
var g = parseInt( hex.substring( 2,4 ), 16 );
var b = parseInt( hex.substring( 4,6 ), 16 );
var x = r + 66;
var y = g + 28;
var z = b - 21;
if ( x >= 255 ) {
x = 255; }
if ( y >= 255 ) {
y = 255; }
if ( z <= 0 ) {
z = 0; }
var result = 'rgba(' + x + ',' + y + ',' + z + ',' + opacity / 100 + ')';
return result;
}
} )( jQuery );
/**
* This function builds two arrays of settings for each value from arraySizes. Those two arrays are parameters for
* hestiaSetCss function. Those parameters are:
* data: an object with desktop, tablet and mobile value
* settings: an object with class of the style tag and the selectors on witch the style will be applied
*
*
* @param arraySizes
* An object with multiple sizes. Foreach size you have to specify:
* selectors on which to apply sizes
* list of values on mobile, tablet and desktop
*
* @param settings
* An object with the following components:
* cssProperty: what css property is changed (ex: font-size, width etc. )
* propertyUnit: unit (ex: px, em etc.)
* styleClass: the class of the temporary style tag that is added while changing the control.
*
* @param to
* Current value of the control
*/
function hestiaGetCss( arraySizes, settings, to ) {
'use strict';
var data, desktopVal, tabletVal, mobileVal,
className = settings.styleClass, i = 1;
var val = JSON.parse( to );
if ( typeof( val ) === 'object' && val !== null ) {
if ('desktop' in val) {
desktopVal = val.desktop;
}
if ('tablet' in val) {
tabletVal = val.tablet;
}
if ('mobile' in val) {
mobileVal = val.mobile;
}
}
for ( var key in arraySizes ) {
// skip loop if the property is from prototype
if ( ! arraySizes.hasOwnProperty( key )) {
continue;
}
var obj = arraySizes[key];
var limit = 0;
var correlation = [1,1,1];
if ( typeof( val ) === 'object' && val !== null ) {
if( typeof obj.limit !== 'undefined'){
limit = obj.limit;
}
if( typeof obj.correlation !== 'undefined'){
correlation = obj.correlation;
}
data = {
desktop: ( parseInt(parseFloat( desktopVal ) / correlation[0]) + obj.values[0]) > limit ? ( parseInt(parseFloat( desktopVal ) / correlation[0]) + obj.values[0] ) : limit,
tablet: ( parseInt(parseFloat( tabletVal ) / correlation[1]) + obj.values[1] ) > limit ? ( parseInt(parseFloat( tabletVal ) / correlation[1]) + obj.values[1] ) : limit,
mobile: ( parseInt(parseFloat( mobileVal ) / correlation[2]) + obj.values[2] ) > limit ? ( parseInt(parseFloat( mobileVal ) / correlation[2]) + obj.values[2] ) : limit
};
} else {
if( typeof obj.limit !== 'undefined'){
limit = obj.limit;
}
if( typeof obj.correlation !== 'undefined'){
correlation = obj.correlation;
}
data =( parseInt( parseFloat( to ) / correlation[0] ) ) + obj.values[0] > limit ? ( parseInt( parseFloat( to ) / correlation[0] ) ) + obj.values[0] : limit;
}
settings.styleClass = className + '-' + i;
settings.selectors = obj.selectors;
hestiaSetCss( settings, data );
i++;
}
}
/**
* Add media query on settings from setStyle function.
*
* @param settings
* An object with the following components:
* styleClass class that will be on style tag
* selectors specified selectors
*
* @param to
* Current value of the control
*/
function hestiaSetCss( settings, to ){
'use strict';
var result = '';
var styleClass = jQuery( '.' + settings.styleClass );
if ( to !== null && typeof to === 'object' ) {
jQuery.each(
to, function ( key, value ) {
var style_to_add;
if ( settings.selectors === '.container' ) {
style_to_add = settings.selectors + '{ ' + settings.cssProperty + ':' + value + settings.propertyUnit + '; max-width: 100%; }';
} else {
style_to_add = settings.selectors + '{ ' + settings.cssProperty + ':' + value + settings.propertyUnit + '}';
}
switch ( key ) {
case 'desktop':
result += style_to_add;
break;
case 'tablet':
result += '@media (max-width: 767px){' + style_to_add + '}';
break;
case 'mobile':
result += '@media (max-width: 480px){' + style_to_add + '}';
break;
}
}
);
if ( styleClass.length > 0 ) {
styleClass.text( result );
} else {
jQuery( 'head' ).append( '<style type="text/css" class="' + settings.styleClass + '">' + result + '</style>' );
}
} else {
jQuery( settings.selectors ).css( settings.cssProperty, to + 'px' );
}
}