first
This commit is contained in:
@ -0,0 +1,297 @@
|
||||
( function( api ) {
|
||||
'use strict';
|
||||
|
||||
// Add callback for when the header_textcolor setting exists.
|
||||
api( 'generate_settings[nav_position_setting]', function( setting ) {
|
||||
var isNavFloated, isNavAlignable, setNavDropPointActiveState, setNavAlignmentsActiveState;
|
||||
|
||||
/**
|
||||
* Determine whether the navigation is floating.
|
||||
*
|
||||
* @returns {boolean} Is floating?
|
||||
*/
|
||||
isNavFloated = function() {
|
||||
if ( 'nav-float-right' === setting.get() || 'nav-float-left' === setting.get() ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine whether the navigation is align-able.
|
||||
*
|
||||
* @returns {boolean} Is floating?
|
||||
*/
|
||||
isNavAlignable = function() {
|
||||
if ( 'nav-float-right' === setting.get() || 'nav-float-left' === setting.get() ) {
|
||||
var navAsHeader = api.instance( 'generate_menu_plus_settings[navigation_as_header]' );
|
||||
|
||||
if ( navAsHeader && navAsHeader.get() ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Update a control's active state according to the navigation location setting's value.
|
||||
*
|
||||
* @param {wp.customize.Control} control
|
||||
*/
|
||||
setNavDropPointActiveState = function( control ) {
|
||||
var setActiveState = function() {
|
||||
control.active.set( isNavFloated() );
|
||||
};
|
||||
|
||||
// FYI: With the following we can eliminate all of our PHP active_callback code.
|
||||
control.active.validate = isNavFloated;
|
||||
|
||||
// Set initial active state.
|
||||
setActiveState();
|
||||
|
||||
/*
|
||||
* Update activate state whenever the setting is changed.
|
||||
* Even when the setting does have a refresh transport where the
|
||||
* server-side active callback will manage the active state upon
|
||||
* refresh, having this JS management of the active state will
|
||||
* ensure that controls will have their visibility toggled
|
||||
* immediately instead of waiting for the preview to load.
|
||||
* This is especially important if the setting has a postMessage
|
||||
* transport where changing the setting wouldn't normally cause
|
||||
* the preview to refresh and thus the server-side active_callbacks
|
||||
* would not get invoked.
|
||||
*/
|
||||
setting.bind( setActiveState );
|
||||
};
|
||||
|
||||
/**
|
||||
* Update a control's active state according to the navigation location setting's value.
|
||||
*
|
||||
* @param {wp.customize.Control} control
|
||||
*/
|
||||
setNavAlignmentsActiveState = function( control ) {
|
||||
var setActiveState = function() {
|
||||
control.active.set( isNavAlignable() );
|
||||
};
|
||||
|
||||
// FYI: With the following we can eliminate all of our PHP active_callback code.
|
||||
control.active.validate = isNavAlignable;
|
||||
|
||||
// Set initial active state.
|
||||
setActiveState();
|
||||
|
||||
/*
|
||||
* Update activate state whenever the setting is changed.
|
||||
* Even when the setting does have a refresh transport where the
|
||||
* server-side active callback will manage the active state upon
|
||||
* refresh, having this JS management of the active state will
|
||||
* ensure that controls will have their visibility toggled
|
||||
* immediately instead of waiting for the preview to load.
|
||||
* This is especially important if the setting has a postMessage
|
||||
* transport where changing the setting wouldn't normally cause
|
||||
* the preview to refresh and thus the server-side active_callbacks
|
||||
* would not get invoked.
|
||||
*/
|
||||
setting.bind( setActiveState );
|
||||
};
|
||||
|
||||
api.control( 'generate_settings[nav_drop_point]', setNavDropPointActiveState );
|
||||
api.control( 'generate_settings[nav_layout_setting]', setNavAlignmentsActiveState );
|
||||
api.control( 'generate_settings[nav_inner_width]', setNavAlignmentsActiveState );
|
||||
api.control( 'generate_settings[nav_alignment_setting]', setNavAlignmentsActiveState );
|
||||
} );
|
||||
|
||||
var setOption = function( options ) {
|
||||
if ( options.headerAlignment ) {
|
||||
api.instance( 'generate_settings[header_alignment_setting]' ).set( options.headerAlignment );
|
||||
}
|
||||
|
||||
if ( options.navLocation ) {
|
||||
api.instance( 'generate_settings[nav_position_setting]' ).set( options.navLocation );
|
||||
}
|
||||
|
||||
if ( options.navAlignment ) {
|
||||
api.instance( 'generate_settings[nav_alignment_setting]' ).set( options.navAlignment );
|
||||
}
|
||||
|
||||
if ( options.boxAlignment ) {
|
||||
api.instance( 'generate_settings[container_alignment]' ).set( options.boxAlignment );
|
||||
}
|
||||
|
||||
if ( options.siteTitleFontSize ) {
|
||||
api.instance( 'generate_settings[site_title_font_size]' ).set( options.siteTitleFontSize );
|
||||
}
|
||||
|
||||
if ( 'undefined' !== typeof options.hideSiteTagline ) {
|
||||
api.instance( 'generate_settings[hide_tagline]' ).set( options.hideSiteTagline );
|
||||
}
|
||||
|
||||
if ( options.headerPaddingTop ) {
|
||||
api.instance( 'generate_spacing_settings[header_top]' ).set( options.headerPaddingTop );
|
||||
}
|
||||
|
||||
if ( options.headerPaddingBottom ) {
|
||||
api.instance( 'generate_spacing_settings[header_bottom]' ).set( options.headerPaddingBottom );
|
||||
}
|
||||
};
|
||||
|
||||
api( 'generate_header_helper', function( value ) {
|
||||
var headerAlignment = false,
|
||||
navLocation = false,
|
||||
navAlignment = false,
|
||||
boxAlignment = false,
|
||||
siteTitleFontSize = false,
|
||||
hideSiteTagline = false,
|
||||
headerPaddingTop = false,
|
||||
headerPaddingBottom = false;
|
||||
|
||||
value.bind( function( newval ) {
|
||||
var headerAlignmentSetting = api.instance( 'generate_settings[header_alignment_setting]' );
|
||||
var navLocationSetting = api.instance( 'generate_settings[nav_position_setting]' );
|
||||
var navAlignmentSetting = api.instance( 'generate_settings[nav_alignment_setting]' );
|
||||
var boxAlignmentSetting = api.instance( 'generate_settings[container_alignment]' );
|
||||
var siteTitleFontSizeSetting = api.instance( 'generate_settings[site_title_font_size]' );
|
||||
var hideSiteTaglineSetting = api.instance( 'generate_settings[hide_tagline]' );
|
||||
var headerPaddingTopSetting = api.instance( 'generate_spacing_settings[header_top]' );
|
||||
var headerPaddingBottomSetting = api.instance( 'generate_spacing_settings[header_bottom]' );
|
||||
|
||||
if ( ! headerAlignmentSetting._dirty ) {
|
||||
headerAlignment = headerAlignmentSetting.get();
|
||||
}
|
||||
|
||||
if ( ! navLocationSetting._dirty ) {
|
||||
navLocation = navLocationSetting.get();
|
||||
}
|
||||
|
||||
if ( ! navAlignmentSetting._dirty ) {
|
||||
navAlignment = navAlignmentSetting.get();
|
||||
}
|
||||
|
||||
if ( ! boxAlignmentSetting._dirty ) {
|
||||
boxAlignment = boxAlignmentSetting.get();
|
||||
}
|
||||
|
||||
if ( ! siteTitleFontSizeSetting._dirty ) {
|
||||
siteTitleFontSize = siteTitleFontSizeSetting.get();
|
||||
}
|
||||
|
||||
if ( ! hideSiteTaglineSetting._dirty ) {
|
||||
hideSiteTagline = hideSiteTaglineSetting.get();
|
||||
}
|
||||
|
||||
if ( ! headerPaddingTopSetting._dirty ) {
|
||||
headerPaddingTop = headerPaddingTopSetting.get();
|
||||
}
|
||||
|
||||
if ( ! headerPaddingBottomSetting._dirty ) {
|
||||
headerPaddingBottom = headerPaddingBottomSetting.get();
|
||||
}
|
||||
|
||||
var options = {
|
||||
headerAlignment: generatepress_defaults.header_alignment_setting,
|
||||
navLocation: generatepress_defaults.nav_position_setting,
|
||||
navAlignment: generatepress_defaults.nav_alignment_setting,
|
||||
boxAlignment: generatepress_defaults.container_alignment,
|
||||
siteTitleFontSize: generatepress_typography_defaults.site_title_font_size,
|
||||
hideSiteTagline: generatepress_defaults.hide_tagline,
|
||||
headerPaddingTop: generatepress_spacing_defaults.header_top,
|
||||
headerPaddingBottom: generatepress_spacing_defaults.header_bottom,
|
||||
};
|
||||
|
||||
if ( 'current' === newval ) {
|
||||
options = {
|
||||
headerAlignment: headerAlignment,
|
||||
navLocation: navLocation,
|
||||
navAlignment: navAlignment,
|
||||
boxAlignment: boxAlignment,
|
||||
siteTitleFontSize: siteTitleFontSize,
|
||||
hideSiteTagline: hideSiteTagline,
|
||||
headerPaddingTop: headerPaddingTop,
|
||||
headerPaddingBottom: headerPaddingBottom,
|
||||
};
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'default' === newval ) {
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'classic' === newval ) {
|
||||
var options = {
|
||||
headerAlignment: 'left',
|
||||
navLocation: 'nav-below-header',
|
||||
navAlignment: 'left',
|
||||
boxAlignment: 'boxes',
|
||||
siteTitleFontSize: '45',
|
||||
hideSiteTagline: '',
|
||||
headerPaddingTop: '40',
|
||||
headerPaddingBottom: '40',
|
||||
};
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'nav-before' === newval ) {
|
||||
options['headerAlignment'] = 'left';
|
||||
options['navLocation'] = 'nav-above-header';
|
||||
options['navAlignment'] = 'left';
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'nav-after' === newval ) {
|
||||
options['headerAlignment'] = 'left';
|
||||
options['navLocation'] = 'nav-below-header';
|
||||
options['navAlignment'] = 'left';
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'nav-before-centered' === newval ) {
|
||||
options['headerAlignment'] = 'center';
|
||||
options['navLocation'] = 'nav-above-header';
|
||||
options['navAlignment'] = 'center';
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'nav-after-centered' === newval ) {
|
||||
options['headerAlignment'] = 'center';
|
||||
options['navLocation'] = 'nav-below-header';
|
||||
options['navAlignment'] = 'center';
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
|
||||
if ( 'nav-left' === newval ) {
|
||||
options['headerAlignment'] = 'left';
|
||||
options['navLocation'] = 'nav-float-left';
|
||||
options['navAlignment'] = 'right';
|
||||
|
||||
setOption( options );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
api( 'generate_settings[use_dynamic_typography]', function( value ) {
|
||||
var fontManager = api.control( 'generate_settings[font_manager]' );
|
||||
var typographyManager = api.control( 'generate_settings[typography]' );
|
||||
|
||||
value.bind( function( newval ) {
|
||||
if ( newval ) {
|
||||
if ( fontManager.setting.get().length === 0 ) {
|
||||
fontManager.setting.set( generatepressCustomizeControls.mappedTypographyData.fonts );
|
||||
}
|
||||
|
||||
if ( typographyManager.setting.get().length === 0 ) {
|
||||
typographyManager.setting.set( generatepressCustomizeControls.mappedTypographyData.typography );
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
}( wp.customize ) );
|
@ -0,0 +1,522 @@
|
||||
/**
|
||||
* Theme Customizer enhancements for a better user experience.
|
||||
*
|
||||
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
|
||||
*
|
||||
* @param id
|
||||
* @param selector
|
||||
* @param property
|
||||
* @param default_value
|
||||
* @param get_value
|
||||
*/
|
||||
function generatepress_colors_live_update( id, selector, property, default_value, get_value ) {
|
||||
default_value = typeof default_value !== 'undefined' ? default_value : 'initial';
|
||||
get_value = typeof get_value !== 'undefined' ? get_value : '';
|
||||
|
||||
wp.customize( 'generate_settings[' + id + ']', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
default_value = ( '' !== get_value ) ? wp.customize.value( 'generate_settings[' + get_value + ']' )() : default_value;
|
||||
newval = ( '' !== newval ) ? newval : default_value;
|
||||
|
||||
if ( jQuery( 'style#' + id ).length ) {
|
||||
jQuery( 'style#' + id ).html( selector + '{' + property + ':' + newval + ';}' );
|
||||
} else {
|
||||
jQuery( 'head' ).append( '<style id="' + id + '">' + selector + '{' + property + ':' + newval + '}</style>' );
|
||||
setTimeout( function() {
|
||||
jQuery( 'style#' + id ).not( ':last' ).remove();
|
||||
}, 1000 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
function generatepress_classes_live_update( id, classes, selector, prefix ) {
|
||||
classes = typeof classes !== 'undefined' ? classes : '';
|
||||
prefix = typeof prefix !== 'undefined' ? prefix : '';
|
||||
wp.customize( 'generate_settings[' + id + ']', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
jQuery.each( classes, function( i, v ) {
|
||||
jQuery( selector ).removeClass( prefix + v );
|
||||
} );
|
||||
jQuery( selector ).addClass( prefix + newval );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
function generatepress_typography_live_update( id, selector, property, unit, media, settings ) {
|
||||
settings = typeof settings !== 'undefined' ? settings : 'generate_settings';
|
||||
wp.customize( settings + '[' + id + ']', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
// Get our unit if applicable
|
||||
unit = typeof unit !== 'undefined' ? unit : '';
|
||||
|
||||
var isTablet = ( 'tablet' == id.substring( 0, 6 ) ) ? true : false,
|
||||
isMobile = ( 'mobile' == id.substring( 0, 6 ) ) ? true : false;
|
||||
|
||||
if ( isTablet ) {
|
||||
if ( '' == wp.customize( settings + '[' + id + ']' ).get() ) {
|
||||
var desktopID = id.replace( 'tablet_', '' );
|
||||
newval = wp.customize( settings + '[' + desktopID + ']' ).get();
|
||||
}
|
||||
}
|
||||
|
||||
if ( isMobile ) {
|
||||
if ( '' == wp.customize( settings + '[' + id + ']' ).get() ) {
|
||||
var desktopID = id.replace( 'mobile_', '' );
|
||||
newval = wp.customize( settings + '[' + desktopID + ']' ).get();
|
||||
}
|
||||
}
|
||||
|
||||
if ( 'buttons_font_size' == id && '' == wp.customize( 'generate_settings[buttons_font_size]' ).get() ) {
|
||||
newval = wp.customize( 'generate_settings[body_font_size]' ).get();
|
||||
}
|
||||
|
||||
// We're using a desktop value
|
||||
if ( ! isTablet && ! isMobile ) {
|
||||
var tabletValue = ( typeof wp.customize( settings + '[tablet_' + id + ']' ) !== 'undefined' ) ? wp.customize( settings + '[tablet_' + id + ']' ).get() : '',
|
||||
mobileValue = ( typeof wp.customize( settings + '[mobile_' + id + ']' ) !== 'undefined' ) ? wp.customize( settings + '[mobile_' + id + ']' ).get() : '';
|
||||
|
||||
// The tablet setting exists, mobile doesn't
|
||||
if ( '' !== tabletValue && '' == mobileValue ) {
|
||||
media = generatepress_live_preview.desktop + ', ' + generatepress_live_preview.mobile;
|
||||
}
|
||||
|
||||
// The tablet setting doesn't exist, mobile does
|
||||
if ( '' == tabletValue && '' !== mobileValue ) {
|
||||
media = generatepress_live_preview.desktop + ', ' + generatepress_live_preview.tablet;
|
||||
}
|
||||
|
||||
// The tablet setting doesn't exist, neither does mobile
|
||||
if ( '' == tabletValue && '' == mobileValue ) {
|
||||
media = generatepress_live_preview.desktop + ', ' + generatepress_live_preview.tablet + ', ' + generatepress_live_preview.mobile;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if media query
|
||||
media_query = typeof media !== 'undefined' ? 'media="' + media + '"' : '';
|
||||
|
||||
jQuery( 'head' ).append( '<style id="' + id + '" ' + media_query + '>' + selector + '{' + property + ':' + newval + unit + ';}</style>' );
|
||||
setTimeout( function() {
|
||||
jQuery( 'style#' + id ).not( ':last' ).remove();
|
||||
}, 1000 );
|
||||
|
||||
setTimeout( "jQuery('body').trigger('generate_spacing_updated');", 1000 );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
( function( $ ) {
|
||||
// Update the site title in real time...
|
||||
wp.customize( 'blogname', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
$( '.main-title a' ).html( newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
//Update the site description in real time...
|
||||
wp.customize( 'blogdescription', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
$( '.site-description' ).html( newval );
|
||||
} );
|
||||
} );
|
||||
|
||||
wp.customize( 'generate_settings[logo_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
$( '.site-header .header-image' ).css( 'width', newval + 'px' );
|
||||
|
||||
if ( '' == newval ) {
|
||||
$( '.site-header .header-image' ).css( 'width', '' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Container width
|
||||
*/
|
||||
wp.customize( 'generate_settings[container_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( jQuery( 'style#container_width' ).length ) {
|
||||
jQuery( 'style#container_width' ).html( 'body .grid-container, .wp-block-group__inner-container{max-width:' + newval + 'px;}' );
|
||||
} else {
|
||||
jQuery( 'head' ).append( '<style id="container_width">body .grid-container, .wp-block-group__inner-container{max-width:' + newval + 'px;}</style>' );
|
||||
setTimeout( function() {
|
||||
jQuery( 'style#container_width' ).not( ':last' ).remove();
|
||||
}, 100 );
|
||||
}
|
||||
jQuery( 'body' ).trigger( 'generate_spacing_updated' );
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Live update for typography options.
|
||||
* We only want to run this if GP Premium isn't already doing it.
|
||||
*/
|
||||
if ( 'undefined' === typeof gp_premium_typography_live_update ) {
|
||||
/**
|
||||
* Body font size, weight and transform
|
||||
*/
|
||||
generatepress_typography_live_update( 'body_font_size', 'body, button, input, select, textarea', 'font-size', 'px' );
|
||||
generatepress_typography_live_update( 'body_line_height', 'body', 'line-height', '' );
|
||||
generatepress_typography_live_update( 'paragraph_margin', 'p, .entry-content > [class*="wp-block-"]:not(:last-child)', 'margin-bottom', 'em' );
|
||||
generatepress_typography_live_update( 'body_font_weight', 'body, button, input, select, textarea', 'font-weight' );
|
||||
generatepress_typography_live_update( 'body_font_transform', 'body, button, input, select, textarea', 'text-transform' );
|
||||
|
||||
/**
|
||||
* H1 font size, weight and transform
|
||||
*/
|
||||
generatepress_typography_live_update( 'heading_1_font_size', 'h1', 'font-size', 'px', generatepress_live_preview.desktop );
|
||||
generatepress_typography_live_update( 'mobile_heading_1_font_size', 'h1', 'font-size', 'px', generatepress_live_preview.mobile );
|
||||
generatepress_typography_live_update( 'heading_1_weight', 'h1', 'font-weight' );
|
||||
generatepress_typography_live_update( 'heading_1_transform', 'h1', 'text-transform' );
|
||||
generatepress_typography_live_update( 'heading_1_line_height', 'h1', 'line-height', 'em' );
|
||||
|
||||
/**
|
||||
* H2 font size, weight and transform
|
||||
*/
|
||||
generatepress_typography_live_update( 'heading_2_font_size', 'h2', 'font-size', 'px', generatepress_live_preview.desktop );
|
||||
generatepress_typography_live_update( 'mobile_heading_2_font_size', 'h2', 'font-size', 'px', generatepress_live_preview.mobile );
|
||||
generatepress_typography_live_update( 'heading_2_weight', 'h2', 'font-weight' );
|
||||
generatepress_typography_live_update( 'heading_2_transform', 'h2', 'text-transform' );
|
||||
generatepress_typography_live_update( 'heading_2_line_height', 'h2', 'line-height', 'em' );
|
||||
|
||||
/**
|
||||
* H3 font size, weight and transform
|
||||
*/
|
||||
generatepress_typography_live_update( 'heading_3_font_size', 'h3', 'font-size', 'px' );
|
||||
generatepress_typography_live_update( 'heading_3_weight', 'h3', 'font-weight' );
|
||||
generatepress_typography_live_update( 'heading_3_transform', 'h3', 'text-transform' );
|
||||
generatepress_typography_live_update( 'heading_3_line_height', 'h3', 'line-height', 'em' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Top bar width
|
||||
*/
|
||||
wp.customize( 'generate_settings[top_bar_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'full' == newval ) {
|
||||
$( '.top-bar' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
if ( 'contained' == wp.customize.value( 'generate_settings[top_bar_inner_width]' )() ) {
|
||||
$( '.inside-top-bar' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
}
|
||||
if ( 'contained' == newval ) {
|
||||
$( '.top-bar' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
$( '.inside-top-bar' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Inner top bar width
|
||||
*/
|
||||
wp.customize( 'generate_settings[top_bar_inner_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'full' == newval ) {
|
||||
$( '.inside-top-bar' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
if ( 'contained' == newval ) {
|
||||
$( '.inside-top-bar' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Top bar alignment
|
||||
*/
|
||||
generatepress_classes_live_update( 'top_bar_alignment', [ 'left', 'center', 'right' ], '.top-bar', 'top-bar-align-' );
|
||||
|
||||
/**
|
||||
* Header layout
|
||||
*/
|
||||
wp.customize( 'generate_settings[header_layout_setting]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'fluid-header' == newval ) {
|
||||
$( '.site-header' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
if ( 'contained' == wp.customize.value( 'generate_settings[header_inner_width]' )() ) {
|
||||
$( '.inside-header' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
}
|
||||
if ( 'contained-header' == newval ) {
|
||||
$( '.site-header' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
$( '.inside-header' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Inner Header layout
|
||||
*/
|
||||
wp.customize( 'generate_settings[header_inner_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'full-width' == newval ) {
|
||||
$( '.inside-header' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
if ( 'contained' == newval ) {
|
||||
$( '.inside-header' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Header alignment
|
||||
*/
|
||||
generatepress_classes_live_update( 'header_alignment_setting', [ 'left', 'center', 'right' ], 'body', 'header-aligned-' );
|
||||
|
||||
/**
|
||||
* Navigation width
|
||||
*/
|
||||
wp.customize( 'generate_settings[nav_layout_setting]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var navLocation = wp.customize.value( 'generate_settings[nav_position_setting]' )();
|
||||
|
||||
if ( $( 'body' ).hasClass( 'sticky-enabled' ) ) {
|
||||
wp.customize.preview.send( 'refresh' );
|
||||
} else {
|
||||
var mainNavigation = $( '.main-navigation' );
|
||||
|
||||
if ( 'fluid-nav' == newval ) {
|
||||
mainNavigation.removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
if ( 'full-width' !== wp.customize.value( 'generate_settings[nav_inner_width]' )() ) {
|
||||
$( '.main-navigation .inside-navigation' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
}
|
||||
if ( 'contained-nav' == newval ) {
|
||||
if ( ! mainNavigation.hasClass( 'has-branding' ) && generatepress_live_preview.isFlex && ( 'nav-float-right' === navLocation || 'nav-float-left' === navLocation ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
mainNavigation.addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Inner navigation width
|
||||
*/
|
||||
wp.customize( 'generate_settings[nav_inner_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'full-width' == newval ) {
|
||||
$( '.main-navigation .inside-navigation' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
if ( 'contained' == newval ) {
|
||||
$( '.main-navigation .inside-navigation' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Navigation alignment
|
||||
*/
|
||||
wp.customize( 'generate_settings[nav_alignment_setting]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var classes = [ 'left', 'center', 'right' ];
|
||||
var selector = 'body';
|
||||
var prefix = 'nav-aligned-';
|
||||
|
||||
if ( generatepress_live_preview.isFlex ) {
|
||||
selector = '.main-navigation:not(.slideout-navigation)';
|
||||
prefix = 'nav-align-';
|
||||
}
|
||||
|
||||
jQuery.each( classes, function( i, v ) {
|
||||
jQuery( selector ).removeClass( prefix + v );
|
||||
} );
|
||||
|
||||
if ( generatepress_live_preview.isFlex && generatepress_live_preview.isRTL ) {
|
||||
jQuery( selector ).addClass( prefix + newval );
|
||||
} else if ( 'nav-align-left' !== prefix + newval ) {
|
||||
jQuery( selector ).addClass( prefix + newval );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Footer width
|
||||
*/
|
||||
wp.customize( 'generate_settings[footer_layout_setting]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'fluid-footer' == newval ) {
|
||||
$( '.site-footer' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
if ( 'contained-footer' == newval ) {
|
||||
$( '.site-footer' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Inner footer width
|
||||
*/
|
||||
wp.customize( 'generate_settings[footer_inner_width]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
if ( 'full-width' == newval ) {
|
||||
if ( $( '.footer-widgets-container' ).length ) {
|
||||
$( '.footer-widgets-container' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
} else {
|
||||
$( '.inside-footer-widgets' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
$( '.inside-site-info' ).removeClass( 'grid-container' ).removeClass( 'grid-parent' );
|
||||
}
|
||||
if ( 'contained' == newval ) {
|
||||
if ( $( '.footer-widgets-container' ).length ) {
|
||||
$( '.footer-widgets-container' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
} else {
|
||||
$( '.inside-footer-widgets' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
$( '.inside-site-info' ).addClass( 'grid-container' ).addClass( 'grid-parent' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
/**
|
||||
* Footer bar alignment
|
||||
*/
|
||||
generatepress_classes_live_update( 'footer_bar_alignment', [ 'left', 'center', 'right' ], '.site-footer', 'footer-bar-align-' );
|
||||
|
||||
jQuery( 'body' ).on( 'generate_spacing_updated', function() {
|
||||
var containerAlignment = wp.customize( 'generate_settings[container_alignment]' ).get(),
|
||||
containerWidth = wp.customize( 'generate_settings[container_width]' ).get(),
|
||||
containerLayout = wp.customize( 'generate_settings[content_layout_setting]' ).get(),
|
||||
contentLeft = generatepress_live_preview.contentLeft,
|
||||
contentRight = generatepress_live_preview.contentRight;
|
||||
|
||||
if ( ! generatepress_live_preview.isFlex && 'text' === containerAlignment ) {
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[content_left]' ) !== 'undefined' ) {
|
||||
contentLeft = wp.customize( 'generate_spacing_settings[content_left]' ).get();
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[content_right]' ) !== 'undefined' ) {
|
||||
contentRight = wp.customize( 'generate_spacing_settings[content_right]' ).get();
|
||||
}
|
||||
|
||||
var newContainerWidth = Number( containerWidth ) + Number( contentLeft ) + Number( contentRight );
|
||||
|
||||
if ( jQuery( 'style#wide_container_width' ).length ) {
|
||||
jQuery( 'style#wide_container_width' ).html( 'body:not(.full-width-content) #page{max-width:' + newContainerWidth + 'px;}' );
|
||||
} else {
|
||||
jQuery( 'head' ).append( '<style id="wide_container_width">body:not(.full-width-content) #page{max-width:' + newContainerWidth + 'px;}</style>' );
|
||||
setTimeout( function() {
|
||||
jQuery( 'style#wide_container_width' ).not( ':last' ).remove();
|
||||
}, 100 );
|
||||
}
|
||||
}
|
||||
|
||||
if ( generatepress_live_preview.isFlex && 'boxes' === containerAlignment ) {
|
||||
var topBarPaddingLeft = jQuery( '.inside-top-bar' ).css( 'padding-left' ),
|
||||
topBarPaddingRight = jQuery( '.inside-top-bar' ).css( 'padding-right' ),
|
||||
headerPaddingLeft = jQuery( '.inside-header' ).css( 'padding-left' ),
|
||||
headerPaddingRight = jQuery( '.inside-header' ).css( 'padding-right' ),
|
||||
footerWidgetPaddingLeft = jQuery( '.footer-widgets-container' ).css( 'padding-left' ),
|
||||
footerWidgetPaddingRight = jQuery( '.footer-widgets-container' ).css( 'padding-right' ),
|
||||
footerBarPaddingLeft = jQuery( '.inside-footer-bar' ).css( 'padding-left' ),
|
||||
footerBarPaddingRight = jQuery( '.inside-footer-bar' ).css( 'padding-right' );
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[top_bar_left]' ) !== 'undefined' ) {
|
||||
topBarPaddingLeft = wp.customize( 'generate_spacing_settings[top_bar_left]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[top_bar_right]' ) !== 'undefined' ) {
|
||||
topBarPaddingRight = wp.customize( 'generate_spacing_settings[top_bar_right]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[header_left]' ) !== 'undefined' ) {
|
||||
headerPaddingLeft = wp.customize( 'generate_spacing_settings[header_left]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[header_right]' ) !== 'undefined' ) {
|
||||
headerPaddingRight = wp.customize( 'generate_spacing_settings[header_right]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[footer_widget_container_left]' ) !== 'undefined' ) {
|
||||
footerWidgetPaddingLeft = wp.customize( 'generate_spacing_settings[footer_widget_container_left]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[footer_widget_container_right]' ) !== 'undefined' ) {
|
||||
footerWidgetPaddingRight = wp.customize( 'generate_spacing_settings[footer_widget_container_right]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[footer_left]' ) !== 'undefined' ) {
|
||||
footerBarPaddingLeft = wp.customize( 'generate_spacing_settings[footer_left]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[footer_right]' ) !== 'undefined' ) {
|
||||
footerBarPaddingRight = wp.customize( 'generate_spacing_settings[footer_right]' ).get() + 'px';
|
||||
}
|
||||
|
||||
var newTopBarWidth = parseFloat( containerWidth ) + parseFloat( topBarPaddingLeft ) + parseFloat( topBarPaddingRight ),
|
||||
newHeaderWidth = parseFloat( containerWidth ) + parseFloat( headerPaddingLeft ) + parseFloat( headerPaddingRight ),
|
||||
newFooterWidgetWidth = parseFloat( containerWidth ) + parseFloat( footerWidgetPaddingLeft ) + parseFloat( footerWidgetPaddingRight ),
|
||||
newFooterBarWidth = parseFloat( containerWidth ) + parseFloat( footerBarPaddingLeft ) + parseFloat( footerBarPaddingRight );
|
||||
|
||||
if ( jQuery( 'style#box_sizing_widths' ).length ) {
|
||||
jQuery( 'style#box_sizing_widths' ).html( '.inside-top-bar.grid-container{max-width:' + newTopBarWidth + 'px;}.inside-header.grid-container{max-width:' + newHeaderWidth + 'px;}.footer-widgets-container.grid-container{max-width:' + newFooterWidgetWidth + 'px;}.inside-site-info.grid-container{max-width:' + newFooterBarWidth + 'px;}' );
|
||||
} else {
|
||||
jQuery( 'head' ).append( '<style id="box_sizing_widths">.inside-top-bar.grid-container{max-width:' + newTopBarWidth + 'px;}.inside-header.grid-container{max-width:' + newHeaderWidth + 'px;}.footer-widgets-container.grid-container{max-width:' + newFooterWidgetWidth + 'px;}.inside-site-info.grid-container{max-width:' + newFooterBarWidth + 'px;}</style>' );
|
||||
setTimeout( function() {
|
||||
jQuery( 'style#box_sizing_widths' ).not( ':last' ).remove();
|
||||
}, 100 );
|
||||
}
|
||||
}
|
||||
|
||||
if ( generatepress_live_preview.isFlex && 'text' === containerAlignment ) {
|
||||
var headerPaddingLeft = jQuery( '.inside-header' ).css( 'padding-left' ),
|
||||
headerPaddingRight = jQuery( '.inside-header' ).css( 'padding-right' ),
|
||||
menuItemPadding = jQuery( '.main-navigation .main-nav ul li a' ).css( 'padding-left' ),
|
||||
secondaryMenuItemPadding = jQuery( '.secondary-navigation .main-nav ul li a' ).css( 'padding-left' );
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[header_left]' ) !== 'undefined' ) {
|
||||
headerPaddingLeft = wp.customize( 'generate_spacing_settings[header_left]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[header_right]' ) !== 'undefined' ) {
|
||||
headerPaddingRight = wp.customize( 'generate_spacing_settings[header_right]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[menu_item]' ) !== 'undefined' ) {
|
||||
menuItemPadding = wp.customize( 'generate_spacing_settings[menu_item]' ).get() + 'px';
|
||||
}
|
||||
|
||||
if ( typeof wp.customize( 'generate_spacing_settings[secondary_menu_item]' ) !== 'undefined' ) {
|
||||
secondaryMenuItemPadding = wp.customize( 'generate_spacing_settings[secondary_menu_item]' ).get() + 'px';
|
||||
}
|
||||
|
||||
var newNavPaddingLeft = parseFloat( headerPaddingLeft ) - parseFloat( menuItemPadding ),
|
||||
newNavPaddingRight = parseFloat( headerPaddingRight ) - parseFloat( menuItemPadding ),
|
||||
newSecondaryNavPaddingLeft = parseFloat( headerPaddingLeft ) - parseFloat( secondaryMenuItemPadding ),
|
||||
newSecondaryNavPaddingRight = parseFloat( headerPaddingRight ) - parseFloat( secondaryMenuItemPadding );
|
||||
|
||||
if ( jQuery( 'style#navigation_padding' ).length ) {
|
||||
jQuery( 'style#navigation_padding' ).html( '.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding: 0 ' + newNavPaddingRight + 'px 0 ' + newNavPaddingLeft + 'px;}' );
|
||||
jQuery( 'style#secondary_navigation_padding' ).html( '.secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container, .secondary-nav-above-header .secondary-navigation .inside-navigation.grid-container{padding: 0 ' + newSecondaryNavPaddingRight + 'px 0 ' + newSecondaryNavPaddingLeft + 'px;}' );
|
||||
} else {
|
||||
jQuery( 'head' ).append( '<style id="navigation_padding">.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container{padding: 0 ' + newNavPaddingRight + 'px 0 ' + newNavPaddingLeft + 'px;}</style>' );
|
||||
jQuery( 'head' ).append( '<style id="secondary_navigation_padding">.secondary-nav-below-header .secondary-navigation .inside-navigation.grid-container, .secondary-nav-above-header .secondary-navigation .inside-navigation.grid-container{padding: 0 ' + newSecondaryNavPaddingRight + 'px 0 ' + newSecondaryNavPaddingLeft + 'px;}</style>' );
|
||||
setTimeout( function() {
|
||||
jQuery( 'style#navigation_padding' ).not( ':last' ).remove();
|
||||
jQuery( 'style#secondary_navigation_padding' ).not( ':last' ).remove();
|
||||
}, 100 );
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
wp.customize( 'generate_settings[global_colors]', function( value ) {
|
||||
value.bind( function( newval ) {
|
||||
var globalColors = '';
|
||||
|
||||
newval.forEach( function( item ) {
|
||||
globalColors += '--' + item.slug + ':' + item.color + ';';
|
||||
} );
|
||||
|
||||
if ( $( 'style#global_colors' ).length ) {
|
||||
$( 'style#global_colors' ).html( ':root{' + globalColors + '}' );
|
||||
} else {
|
||||
$( 'head' ).append( '<style id="global_colors">:root{' + globalColors + '}</style>' );
|
||||
|
||||
setTimeout( function() {
|
||||
$( 'style#global_colors' ).not( ':last' ).remove();
|
||||
}, 100 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
}( jQuery ) );
|
@ -0,0 +1,341 @@
|
||||
/* global gpPostMessageFields */
|
||||
/* eslint max-depth: off */
|
||||
var gpPostMessage = {
|
||||
|
||||
/**
|
||||
* The fields.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
fields: {},
|
||||
|
||||
/**
|
||||
* A collection of methods for the <style> tags.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
styleTag: {
|
||||
|
||||
/**
|
||||
* Add a <style> tag in <head> if it doesn't already exist.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {string} id - The field-ID.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
add( id ) {
|
||||
id = id.replace( /[^\w\s]/gi, '-' );
|
||||
if ( null === document.getElementById( 'gp-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'gp-postmessage-' + id ) ) {
|
||||
jQuery( 'head' ).append( '<style id="gp-postmessage-' + id + '"></style>' );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Add a <style> tag in <head> if it doesn't already exist,
|
||||
* by calling the this.add method, and then add styles inside it.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {string} id - The field-ID.
|
||||
* @param {string} styles - The styles to add.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
addData( id, styles ) {
|
||||
id = id.replace( '[', '-' ).replace( ']', '' );
|
||||
gpPostMessage.styleTag.add( id );
|
||||
jQuery( '#gp-postmessage-' + id ).text( styles );
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* Common utilities.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
util: {
|
||||
|
||||
/**
|
||||
* Processes the value and applies any replacements and/or additions.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
* @param {string} controlType - The control-type.
|
||||
*
|
||||
* @return {string|false} - Returns false if value is excluded, otherwise a string.
|
||||
*/
|
||||
processValue( output, value ) {
|
||||
var self = this,
|
||||
settings = window.parent.wp.customize.get(),
|
||||
excluded = false;
|
||||
|
||||
if ( 'object' === typeof value ) {
|
||||
_.each( value, function( subValue, key ) {
|
||||
value[ key ] = self.processValue( output, subValue );
|
||||
} );
|
||||
return value;
|
||||
}
|
||||
output = _.defaults( output, {
|
||||
prefix: '',
|
||||
units: '',
|
||||
suffix: '',
|
||||
value_pattern: '$',
|
||||
pattern_replace: {},
|
||||
exclude: [],
|
||||
} );
|
||||
|
||||
if ( 1 <= output.exclude.length ) {
|
||||
_.each( output.exclude, function( exclusion ) {
|
||||
if ( value == exclusion ) {
|
||||
excluded = true;
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
if ( excluded ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
value = output.value_pattern.replace( new RegExp( '\\$', 'g' ), value );
|
||||
_.each( output.pattern_replace, function( id, placeholder ) {
|
||||
if ( ! _.isUndefined( settings[ id ] ) ) {
|
||||
value = value.replace( placeholder, settings[ id ] );
|
||||
}
|
||||
} );
|
||||
return output.prefix + value + output.units + output.suffix;
|
||||
},
|
||||
|
||||
/**
|
||||
* Make sure urls are properly formatted for background-image properties.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {string} url - The URL.
|
||||
*
|
||||
* @return {string} - Returns the URL.
|
||||
*/
|
||||
backgroundImageValue( url ) {
|
||||
return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* A collection of utilities for CSS generation.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
css: {
|
||||
|
||||
/**
|
||||
* Generates the CSS from the output (js_vars) parameter.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
* @param {string} controlType - The control-type.
|
||||
*
|
||||
* @return {string} - Returns CSS as a string.
|
||||
*/
|
||||
fromOutput( output, value, controlType ) {
|
||||
var styles = '',
|
||||
mediaQuery = false,
|
||||
processedValue;
|
||||
|
||||
try {
|
||||
value = JSON.parse( value );
|
||||
} catch ( e ) {} // eslint-disable-line no-empty
|
||||
|
||||
if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
|
||||
value = window[ output.js_callback[ 0 ] ]( value, output.js_callback[ 1 ] );
|
||||
}
|
||||
|
||||
// Apply the gpPostMessageStylesOutput filter.
|
||||
styles = wp.hooks.applyFilters( 'gpPostMessageStylesOutput', styles, value, output, controlType );
|
||||
|
||||
if ( '' === styles ) {
|
||||
switch ( controlType ) {
|
||||
case 'kirki-multicolor':
|
||||
case 'kirki-sortable':
|
||||
styles += output.element + '{';
|
||||
_.each( value, function( val, key ) {
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
processedValue = gpPostMessage.util.processValue( output, val );
|
||||
|
||||
if ( '' === processedValue ) {
|
||||
if ( 'background-color' === output.property ) {
|
||||
processedValue = 'unset';
|
||||
} else if ( 'background-image' === output.property ) {
|
||||
processedValue = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if ( false !== processedValue ) {
|
||||
styles += output.property ? output.property + '-' + key + ':' + processedValue + ';' : key + ':' + processedValue + ';';
|
||||
}
|
||||
} );
|
||||
styles += '}';
|
||||
break;
|
||||
default:
|
||||
if ( 'kirki-image' === controlType ) {
|
||||
value = ( ! _.isUndefined( value.url ) ) ? gpPostMessage.util.backgroundImageValue( value.url ) : gpPostMessage.util.backgroundImageValue( value );
|
||||
}
|
||||
if ( _.isObject( value ) ) {
|
||||
styles += output.element + '{';
|
||||
_.each( value, function( val, key ) {
|
||||
var property;
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
processedValue = gpPostMessage.util.processValue( output, val );
|
||||
property = output.property ? output.property : key;
|
||||
|
||||
if ( '' === processedValue ) {
|
||||
if ( 'background-color' === property ) {
|
||||
processedValue = 'unset';
|
||||
} else if ( 'background-image' === property ) {
|
||||
processedValue = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if ( false !== processedValue ) {
|
||||
styles += property + ':' + processedValue + ';';
|
||||
}
|
||||
} );
|
||||
styles += '}';
|
||||
} else {
|
||||
processedValue = gpPostMessage.util.processValue( output, value );
|
||||
if ( '' === processedValue ) {
|
||||
if ( 'background-color' === output.property ) {
|
||||
processedValue = 'unset';
|
||||
} else if ( 'background-image' === output.property ) {
|
||||
processedValue = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
if ( false !== processedValue ) {
|
||||
styles += output.element + '{' + output.property + ':' + processedValue + ';}';
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Get the media-query.
|
||||
if ( output.media_query && 'string' === typeof output.media_query && ! _.isEmpty( output.media_query ) ) {
|
||||
mediaQuery = output.media_query;
|
||||
if ( -1 === mediaQuery.indexOf( '@media' ) ) {
|
||||
mediaQuery = '@media ' + mediaQuery;
|
||||
}
|
||||
}
|
||||
|
||||
// If we have a media-query, add it and return.
|
||||
if ( mediaQuery ) {
|
||||
return mediaQuery + '{' + styles + '}';
|
||||
}
|
||||
|
||||
// Return the styles.
|
||||
return styles;
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* A collection of utilities to change the HTML in the document.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
html: {
|
||||
|
||||
/**
|
||||
* Modifies the HTML from the output (js_vars) parameter.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
fromOutput( output, value ) {
|
||||
if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
|
||||
value = window[ output.js_callback[ 0 ] ]( value, output.js_callback[ 1 ] );
|
||||
}
|
||||
|
||||
if ( _.isObject( value ) || _.isArray( value ) ) {
|
||||
if ( ! output.choice ) {
|
||||
return;
|
||||
}
|
||||
_.each( value, function( val, key ) {
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
value = val;
|
||||
} );
|
||||
}
|
||||
value = gpPostMessage.util.processValue( output, value );
|
||||
|
||||
if ( output.attr ) {
|
||||
jQuery( output.element ).attr( output.attr, value );
|
||||
} else {
|
||||
jQuery( output.element ).html( value );
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* A collection of utilities to allow toggling a CSS class.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
toggleClass: {
|
||||
|
||||
/**
|
||||
* Toggles a CSS class from the output (js_vars) parameter.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
fromOutput( output, value ) {
|
||||
if ( 'undefined' === typeof output.class || 'undefined' === typeof output.value ) {
|
||||
return;
|
||||
}
|
||||
if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
|
||||
jQuery( output.element ).addClass( output.class );
|
||||
} else {
|
||||
jQuery( output.element ).removeClass( output.class );
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
jQuery( document ).ready( function() {
|
||||
var styles;
|
||||
_.each( gpPostMessageFields, function( field ) {
|
||||
wp.customize( field.settings, function( value ) {
|
||||
value.bind( function( newVal ) {
|
||||
styles = '';
|
||||
_.each( field.js_vars, function( output ) {
|
||||
output.function = ( ! output.function || 'undefined' === typeof gpPostMessage[ output.function ] ) ? 'css' : output.function;
|
||||
field.type = ( field.choices && field.choices.parent_type ) ? field.choices.parent_type : field.type;
|
||||
|
||||
if ( 'css' === output.function ) {
|
||||
styles += gpPostMessage.css.fromOutput( output, newVal, field.type );
|
||||
} else {
|
||||
gpPostMessage[ output.function ].fromOutput( output, newVal, field.type );
|
||||
}
|
||||
} );
|
||||
gpPostMessage.styleTag.addData( field.settings, styles );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
} );
|
1
wp-content/themes/generatepress/inc/customizer/controls/js/selectWoo.min.js
vendored
Normal file
1
wp-content/themes/generatepress/inc/customizer/controls/js/selectWoo.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,134 @@
|
||||
wp.customize.controlConstructor['generatepress-range-slider'] = wp.customize.Control.extend({
|
||||
|
||||
ready: function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
var control = this,
|
||||
value,
|
||||
thisInput,
|
||||
inputDefault,
|
||||
changeAction,
|
||||
controlClass = '.customize-control-generatepress-range-slider',
|
||||
footerActions = jQuery( '#customize-footer-actions' );
|
||||
|
||||
// Set up the sliders
|
||||
jQuery( '.generatepress-slider' ).each( function() {
|
||||
var _this = jQuery( this );
|
||||
var _input = _this.closest( 'label' ).find( 'input[type="number"]' );
|
||||
var _text = _input.next( '.value' );
|
||||
_this.slider({
|
||||
value: _input.val(),
|
||||
min: _this.data( 'min' ),
|
||||
max: _this.data( 'max' ),
|
||||
step: _this.data( 'step' ),
|
||||
slide: function( event, ui ) {
|
||||
_input.val( ui.value ).change();
|
||||
_text.text( ui.value );
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update the range value based on the input value
|
||||
jQuery( controlClass + ' .gp_range_value input[type=number]' ).on( 'input', function() {
|
||||
value = jQuery( this ).attr( 'value' );
|
||||
if ( '' == value ) {
|
||||
value = -1;
|
||||
}
|
||||
jQuery( this ).closest( 'label' ).find( '.generatepress-slider' ).slider( 'value', parseFloat(value)).change();
|
||||
});
|
||||
|
||||
// Handle the reset button
|
||||
jQuery( controlClass + ' .generatepress-reset' ).on( 'click', function() {
|
||||
var icon = jQuery( this ),
|
||||
visible_area = icon.closest( '.gp-range-title-area' ).next( '.gp-range-slider-areas' ).children( 'label:visible' ),
|
||||
input = visible_area.find( 'input[type=number]' ),
|
||||
slider_value = visible_area.find( '.generatepress-slider' ),
|
||||
visual_value = visible_area.find( '.gp_range_value' ),
|
||||
reset_value = input.attr( 'data-reset_value' );
|
||||
|
||||
input.val( reset_value ).change();
|
||||
visual_value.find( 'input' ).val( reset_value );
|
||||
visual_value.find( '.value' ).text( reset_value );
|
||||
|
||||
if ( '' == reset_value ) {
|
||||
reset_value = -1;
|
||||
}
|
||||
|
||||
slider_value.slider( 'value', parseFloat( reset_value ) );
|
||||
});
|
||||
|
||||
// Figure out which device icon to make active on load
|
||||
jQuery( controlClass + ' .generatepress-range-slider-control' ).each( function() {
|
||||
var _this = jQuery( this );
|
||||
_this.find( '.gp-device-controls' ).children( 'span:first-child' ).addClass( 'selected' );
|
||||
_this.find( '.range-option-area:first-child' ).show();
|
||||
});
|
||||
|
||||
// Do stuff when device icons are clicked
|
||||
jQuery( controlClass + ' .gp-device-controls > span' ).on( 'click', function( event ) {
|
||||
var device = jQuery( this ).data( 'option' );
|
||||
|
||||
jQuery( controlClass + ' .gp-device-controls span' ).each( function() {
|
||||
var _this = jQuery( this );
|
||||
if ( device == _this.attr( 'data-option' ) ) {
|
||||
_this.addClass( 'selected' );
|
||||
_this.siblings().removeClass( 'selected' );
|
||||
}
|
||||
});
|
||||
|
||||
jQuery( controlClass + ' .gp-range-slider-areas label' ).each( function() {
|
||||
var _this = jQuery( this );
|
||||
if ( device == _this.attr( 'data-option' ) ) {
|
||||
_this.show();
|
||||
_this.siblings().hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Set the device we're currently viewing
|
||||
wp.customize.previewedDevice.set( jQuery( event.currentTarget ).data( 'option' ) );
|
||||
} );
|
||||
|
||||
// Set the selected devices in our control when the Customizer devices are clicked
|
||||
footerActions.find( '.devices button' ).on( 'click', function() {
|
||||
var device = jQuery( this ).data( 'device' );
|
||||
jQuery( controlClass + ' .gp-device-controls span' ).each( function() {
|
||||
var _this = jQuery( this );
|
||||
if ( device == _this.attr( 'data-option' ) ) {
|
||||
_this.addClass( 'selected' );
|
||||
_this.siblings().removeClass( 'selected' );
|
||||
}
|
||||
});
|
||||
|
||||
jQuery( controlClass + ' .gp-range-slider-areas label' ).each( function() {
|
||||
var _this = jQuery( this );
|
||||
if ( device == _this.attr( 'data-option' ) ) {
|
||||
_this.show();
|
||||
_this.siblings().hide();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Apply changes when desktop slider is changed
|
||||
control.container.on( 'input change', '.desktop-range',
|
||||
function() {
|
||||
control.settings['desktop'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
// Apply changes when tablet slider is changed
|
||||
control.container.on( 'input change', '.tablet-range',
|
||||
function() {
|
||||
control.settings['tablet'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
// Apply changes when mobile slider is changed
|
||||
control.container.on( 'input change', '.mobile-range',
|
||||
function() {
|
||||
control.settings['mobile'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
});
|
@ -0,0 +1,154 @@
|
||||
( function( api ) {
|
||||
|
||||
api.controlConstructor['gp-customizer-typography'] = api.Control.extend( {
|
||||
ready: function() {
|
||||
var control = this;
|
||||
|
||||
control.container.on( 'change', '.generatepress-font-family select',
|
||||
function() {
|
||||
var _this = jQuery( this ),
|
||||
_value = _this.val(),
|
||||
_categoryID = _this.attr( 'data-category' ),
|
||||
_variantsID = _this.attr( 'data-variants' );
|
||||
|
||||
// Set our font family
|
||||
control.settings['family'].set( _this.val() );
|
||||
|
||||
// Bail if our controls don't exist
|
||||
if ( 'undefined' == typeof control.settings['category'] || 'undefined' == typeof control.settings['variant'] ) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout( function() {
|
||||
// Send our request to the generate_get_all_google_fonts_ajax function
|
||||
var response = jQuery.getJSON({
|
||||
type: 'POST',
|
||||
url: ajaxurl,
|
||||
data: {
|
||||
action: 'generate_get_all_google_fonts_ajax',
|
||||
gp_customize_nonce: gp_customize.nonce
|
||||
},
|
||||
async: false,
|
||||
dataType: 'json',
|
||||
});
|
||||
|
||||
// Get our response
|
||||
var fonts = response.responseJSON;
|
||||
|
||||
// Create an ID from our selected font
|
||||
var id = _value.split(' ').join('_').toLowerCase();
|
||||
|
||||
// Set our values if we have them
|
||||
if ( id in fonts ) {
|
||||
|
||||
// Get existing variants if this font is already selected
|
||||
var got_variants = false;
|
||||
jQuery( '.generatepress-font-family select' ).not( _this ).each( function( key, select ) {
|
||||
var parent = jQuery( this ).closest( '.generatepress-font-family' );
|
||||
|
||||
if ( _value == jQuery( select ).val() && _this.data( 'category' ) !== jQuery( select ).data( 'category' ) ) {
|
||||
if ( ! got_variants ) {
|
||||
updated_variants = jQuery( parent.next( '.generatepress-font-variant' ).find( 'select' ) ).val();
|
||||
got_variants = true;
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
// We're using a Google font, so show the variants field
|
||||
_this.closest( '.generatepress-font-family' ).next( 'div' ).show();
|
||||
|
||||
// Remove existing variants
|
||||
jQuery( 'select[name="' + _variantsID + '"]' ).find( 'option' ).remove();
|
||||
|
||||
// Populate our select input with available variants
|
||||
jQuery.each( fonts[ id ].variants, function( key, value ) {
|
||||
jQuery( 'select[name="' + _variantsID + '"]' ).append( jQuery( '<option></option>' ).attr( 'value', value ).text( value ) );
|
||||
} );
|
||||
|
||||
// Set our variants
|
||||
if ( ! got_variants ) {
|
||||
control.settings[ 'variant' ].set( fonts[ id ].variants );
|
||||
} else {
|
||||
control.settings[ 'variant' ].set( updated_variants );
|
||||
}
|
||||
|
||||
// Set our font category
|
||||
control.settings[ 'category' ].set( fonts[ id ].category );
|
||||
jQuery( 'input[name="' + _categoryID + '"' ).val( fonts[ id ].category );
|
||||
} else {
|
||||
_this.closest( '.generatepress-font-family' ).next( 'div' ).hide();
|
||||
control.settings[ 'category' ].set( '' )
|
||||
control.settings[ 'variant' ].set( '' )
|
||||
jQuery( 'input[name="' + _categoryID + '"' ).val( '' );
|
||||
jQuery( 'select[name="' + _variantsID + '"]' ).find( 'option' ).remove();
|
||||
}
|
||||
}, 25 );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.generatepress-font-variant select',
|
||||
function() {
|
||||
var _this = jQuery( this );
|
||||
var variants = _this.val();
|
||||
|
||||
control.settings['variant'].set( variants );
|
||||
|
||||
jQuery( '.generatepress-font-variant select' ).each( function( key, value ) {
|
||||
var this_control = jQuery( this ).closest( 'li' ).attr( 'id' ).replace( 'customize-control-', '' );
|
||||
var parent = jQuery( this ).closest( '.generatepress-font-variant' );
|
||||
var font_val = api.control( this_control ).settings['family'].get();
|
||||
|
||||
if ( font_val == control.settings['family'].get() && _this.attr( 'name' ) !== jQuery( value ).attr( 'name' ) ) {
|
||||
jQuery( parent.find( 'select' ) ).not( _this ).val( variants ).triggerHandler( 'change' );
|
||||
api.control( this_control ).settings['variant'].set( variants );
|
||||
}
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.generatepress-font-category input',
|
||||
function() {
|
||||
control.settings['category'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.generatepress-font-weight select',
|
||||
function() {
|
||||
control.settings['weight'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
control.container.on( 'change', '.generatepress-font-transform select',
|
||||
function() {
|
||||
control.settings['transform'].set( jQuery( this ).val() );
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
} );
|
||||
|
||||
} )( wp.customize );
|
||||
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
|
||||
$( '.generatepress-font-family select' ).select2();
|
||||
|
||||
$( '.generatepress-font-variant' ).each( function( key, value ) {
|
||||
var _this = $( this );
|
||||
var value = _this.data( 'saved-value' );
|
||||
|
||||
if ( value ) {
|
||||
value = value.toString().split( ',' );
|
||||
}
|
||||
|
||||
_this.find( 'select' ).select2().val( value ).trigger( 'change.select2' );
|
||||
} );
|
||||
|
||||
$( ".generatepress-font-family" ).each( function( key, value ) {
|
||||
var _this = $( this );
|
||||
if ( $.inArray( _this.find( 'select' ).val(), typography_defaults ) !== -1 ) {
|
||||
_this.next( '.generatepress-font-variant' ).hide();
|
||||
}
|
||||
} );
|
||||
|
||||
} );
|
@ -0,0 +1,12 @@
|
||||
( function( $, api ) {
|
||||
api.sectionConstructor['gp-upsell-section'] = api.Section.extend( {
|
||||
|
||||
// No events for this type of section.
|
||||
attachEvents: function () {},
|
||||
|
||||
// Always make the section active.
|
||||
isContextuallyActive: function () {
|
||||
return true;
|
||||
}
|
||||
} );
|
||||
} )( jQuery, wp.customize );
|
Reference in New Issue
Block a user