mirror of
https://ghproxy.net/https://github.com/AlxMedia/curver.git
synced 2025-08-28 11:50:25 +08:00
1.0.1
This commit is contained in:
Alexander Agnarson
parent
b14ccb1b03
commit
7e3774b663
168 changed files with 2453 additions and 2788 deletions
|
|
@ -4,8 +4,8 @@
|
|||
*
|
||||
* @package Kirki
|
||||
* @category Modules
|
||||
* @author Aristeides Stathopoulos
|
||||
* @copyright Copyright (c) 2017, Aristeides Stathopoulos
|
||||
* @author Ari Stathopoulos (@aristath)
|
||||
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 3.0.0
|
||||
*/
|
||||
|
|
@ -30,15 +30,6 @@ class Kirki_Modules_PostMessage {
|
|||
*/
|
||||
private static $instance;
|
||||
|
||||
/**
|
||||
* The script.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @var string
|
||||
*/
|
||||
protected $script = '';
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
|
|
@ -73,443 +64,12 @@ class Kirki_Modules_PostMessage {
|
|||
public function postmessage() {
|
||||
wp_enqueue_script( 'kirki_auto_postmessage', trailingslashit( Kirki::$url ) . 'modules/postmessage/postmessage.js', array( 'jquery', 'customize-preview' ), KIRKI_VERSION, true );
|
||||
$fields = Kirki::$fields;
|
||||
$data = array();
|
||||
foreach ( $fields as $field ) {
|
||||
if ( isset( $field['transport'] ) && 'postMessage' === $field['transport'] && isset( $field['js_vars'] ) && ! empty( $field['js_vars'] ) && is_array( $field['js_vars'] ) && isset( $field['settings'] ) ) {
|
||||
$this->script .= $this->script( $field );
|
||||
$data[] = $field;
|
||||
}
|
||||
}
|
||||
$this->script = apply_filters( 'kirki_postmessage_script', $this->script );
|
||||
wp_add_inline_script( 'kirki_auto_postmessage', $this->script, 'after' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates script for a single field.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments.
|
||||
*/
|
||||
protected function script( $args ) {
|
||||
$script = 'wp.customize(\'' . $args['settings'] . '\',function(value){value.bind(function(newval){';
|
||||
|
||||
$add_css = false;
|
||||
foreach ( $args['js_vars'] as $js_var ) {
|
||||
if ( ! isset( $js_var['function'] ) || 'html' !== $js_var['function'] ) {
|
||||
$add_css = true;
|
||||
}
|
||||
}
|
||||
|
||||
if ( $add_css ) {
|
||||
|
||||
// append unique style tag if not exist
|
||||
// The style ID.
|
||||
$style_id = 'kirki-postmessage-' . str_replace( array( '[', ']' ), '', $args['settings'] );
|
||||
$script .= 'if(null===document.getElementById(\'' . $style_id . '\')||\'undefined\'===typeof document.getElementById(\'' . $style_id . '\')){jQuery(\'head\').append(\'<style id="' . $style_id . '"></style>\');}';
|
||||
}
|
||||
|
||||
// Add anything we need before the main script.
|
||||
$script .= $this->before_script( $args );
|
||||
|
||||
$field = array(
|
||||
'scripts' => array(),
|
||||
);
|
||||
|
||||
// Loop through the js_vars and generate the script.
|
||||
foreach ( $args['js_vars'] as $key => $js_var ) {
|
||||
|
||||
// Skip styles if "exclude" is defined and value is excluded.
|
||||
if ( isset( $js_var['exclude'] ) ) {
|
||||
$js_var['exclude'] = (array) $js_var['exclude'];
|
||||
$script .= 'exclude=false;';
|
||||
foreach ( $js_var['exclude'] as $exclussion ) {
|
||||
$script .= "if(newval=='{$exclussion}'||(''==='{$exclussion}'&&_.isObject(newval)&&_.isEmpty(newval))){exclude=true;}";
|
||||
}
|
||||
}
|
||||
if ( isset( $js_var['element'] ) ) {
|
||||
|
||||
// Array to string.
|
||||
if ( is_array( $js_var['element'] ) ) {
|
||||
$js_var['element'] = implode( ',', $js_var['element'] );
|
||||
}
|
||||
|
||||
// Replace single quotes with double quotes to avoid issues with the compiled JS.
|
||||
$js_var['element'] = str_replace( '\'', '"', $js_var['element'] );
|
||||
}
|
||||
if ( isset( $js_var['function'] ) && 'html' === $js_var['function'] ) {
|
||||
$script .= $this->script_html_var( $js_var );
|
||||
continue;
|
||||
}
|
||||
$js_var['index_key'] = $key;
|
||||
$callback = $this->get_callback( $args );
|
||||
if ( is_callable( $callback ) ) {
|
||||
$field['scripts'][ $key ] = call_user_func_array( $callback, array( $js_var, $args ) );
|
||||
continue;
|
||||
}
|
||||
$field['scripts'][ $key ] = $this->script_var( $js_var );
|
||||
}
|
||||
$combo_extra_script = '';
|
||||
$combo_css_script = '';
|
||||
foreach ( $field['scripts'] as $script_array ) {
|
||||
$combo_extra_script .= $script_array['script'];
|
||||
$combo_css_script .= ( 'css' !== $combo_css_script ) ? $script_array['css'] : '';
|
||||
}
|
||||
$text = ( 'css' === $combo_css_script ) ? 'css' : '\'' . $combo_css_script . '\'';
|
||||
|
||||
$script .= $combo_extra_script . "var cssContent={$text};";
|
||||
if ( isset( $js_var['exclude'] ) ) {
|
||||
$script .= 'if(true===exclude){cssContent="";}';
|
||||
}
|
||||
if ( $add_css ) {
|
||||
$script .= "jQuery('#{$style_id}').text(cssContent);jQuery('#{$style_id}').appendTo('head');";
|
||||
}
|
||||
$script .= '});});';
|
||||
return $script;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates script for a single js_var when using "html" as function.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments for this js_var.
|
||||
*/
|
||||
protected function script_html_var( $args ) {
|
||||
$script = ( isset( $args['choice'] ) ) ? "newval=newval['{$args['choice']}'];" : '';
|
||||
|
||||
// Apply the value_pattern.
|
||||
if ( isset( $args['value_pattern'] ) && '' !== $args['value_pattern'] ) {
|
||||
$script .= $this->value_pattern_replacements( 'newval', $args );
|
||||
}
|
||||
|
||||
if ( isset( $args['attr'] ) ) {
|
||||
$script .= "jQuery('{$args['element']}').attr('{$args['attr']}',newval);";
|
||||
return $script;
|
||||
}
|
||||
$script .= "jQuery('{$args['element']}').html(newval);";
|
||||
return $script;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates script for a single js_var.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments for this js_var.
|
||||
*/
|
||||
protected function script_var( $args ) {
|
||||
$script = '';
|
||||
$property_script = '';
|
||||
|
||||
$value_key = 'newval' . $args['index_key'];
|
||||
$property_script .= $value_key . '=newval;';
|
||||
|
||||
$args = $this->get_args( $args );
|
||||
|
||||
// Apply callback to the value if a callback is defined.
|
||||
if ( ! empty( $args['js_callback'] ) && is_array( $args['js_callback'] ) && isset( $args['js_callback'][0] ) && ! empty( $args['js_callback'][0] ) ) {
|
||||
$script .= $value_key . '=' . $args['js_callback'][0] . '(' . $value_key . ',' . $args['js_callback'][1] . ');';
|
||||
}
|
||||
|
||||
// Apply the value_pattern.
|
||||
if ( '' !== $args['value_pattern'] ) {
|
||||
$script .= $this->value_pattern_replacements( $value_key, $args );
|
||||
}
|
||||
|
||||
// Tweak to add url() for background-images.
|
||||
if ( 'background-image' === $args['property'] && ( ! isset( $args['value_pattern'] ) || false === strpos( $args['value_pattern'], 'gradient' ) ) ) {
|
||||
$script .= 'if(-1===' . $value_key . '.indexOf(\'url(\')){' . $value_key . '=\'url("\'+' . $value_key . '+\'")\';}';
|
||||
}
|
||||
|
||||
// Apply prefix.
|
||||
$value = $value_key;
|
||||
if ( '' !== $args['prefix'] ) {
|
||||
$value = "'" . $args['prefix'] . "'+" . $value_key;
|
||||
}
|
||||
$css = $args['element'] . '{' . $args['property'] . ':\'+' . $value . '+\'' . $args['units'] . $args['suffix'] . ';}';
|
||||
if ( isset( $args['media_query'] ) ) {
|
||||
$css = $args['media_query'] . '{' . $css . '}';
|
||||
}
|
||||
return array(
|
||||
'script' => $property_script . $script,
|
||||
'css' => $css,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes script generation for fields that save an array.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments for this js_var.
|
||||
*/
|
||||
protected function script_var_array( $args ) {
|
||||
$script = ( 0 === $args['index_key'] ) ? 'css=\'\';' : '';
|
||||
$property_script = '';
|
||||
|
||||
// Define choice.
|
||||
$choice = ( isset( $args['choice'] ) && '' !== $args['choice'] ) ? $args['choice'] : '';
|
||||
|
||||
$value_key = 'newval' . $args['index_key'];
|
||||
$property_script .= $value_key . '=newval;';
|
||||
|
||||
$args = $this->get_args( $args );
|
||||
|
||||
// Apply callback to the value if a callback is defined.
|
||||
if ( ! empty( $args['js_callback'] ) && is_array( $args['js_callback'] ) && isset( $args['js_callback'][0] ) && ! empty( $args['js_callback'][0] ) ) {
|
||||
$script .= $value_key . '=' . $args['js_callback'][0] . '(' . $value_key . ',' . $args['js_callback'][1] . ');';
|
||||
}
|
||||
$script .= '_.each(' . $value_key . ', function(subValue,subKey){';
|
||||
|
||||
// Apply the value_pattern.
|
||||
if ( '' !== $args['value_pattern'] ) {
|
||||
$script .= $this->value_pattern_replacements( 'subValue', $args );
|
||||
}
|
||||
|
||||
// Tweak to add url() for background-images.
|
||||
if ( '' === $choice || 'background-image' === $choice ) {
|
||||
$script .= 'if(\'background-image\'===\'' . $args['property'] . '\'||\'background-image\'===subKey){if(-1===subValue.indexOf(\'url(\')){subValue=\'url("\'+subValue+\'")\';}}';
|
||||
}
|
||||
|
||||
// Apply prefix.
|
||||
$value = $value_key;
|
||||
if ( '' !== $args['prefix'] ) {
|
||||
$value = '\'' . $args['prefix'] . '\'+subValue';
|
||||
}
|
||||
|
||||
// Mostly used for padding, margin & position properties.
|
||||
$direction_script = 'if(_.contains([\'top\',\'bottom\',\'left\',\'right\'],subKey)){';
|
||||
$direction_script .= 'css+=\'' . $args['element'] . '{' . $args['property'] . '-\'+subKey+\':\'+subValue+\'' . $args['units'] . $args['suffix'] . ';}\';}';
|
||||
|
||||
// Allows us to apply this just for a specific choice in the array of the values.
|
||||
if ( '' !== $choice ) {
|
||||
$choice_is_direction = ( false !== strpos( $choice, 'top' ) || false !== strpos( $choice, 'bottom' ) || false !== strpos( $choice, 'left' ) || false !== strpos( $choice, 'right' ) );
|
||||
|
||||
// The script.
|
||||
$script .= 'if(\'' . $choice . '\'===subKey){';
|
||||
$script .= ( $choice_is_direction ) ? $direction_script . 'else{' : '';
|
||||
$script .= 'css+=\'' . $args['element'] . '{' . $args['property'] . ':\'+subValue+\';}\';';
|
||||
$script .= ( $choice_is_direction ) ? '}' : '';
|
||||
$script .= '}';
|
||||
} else {
|
||||
|
||||
// This is where most object-based fields will go.
|
||||
$script .= $direction_script . 'else{css+=\'' . $args['element'] . '{\'+subKey+\':\'+subValue+\'' . $args['units'] . $args['suffix'] . ';}\';}';
|
||||
}
|
||||
$script .= '});';
|
||||
|
||||
if ( isset( $args['media_query'] ) ) {
|
||||
$script .= 'css=\'' . $args['media_query'] . '{\'+css+\'}\';';
|
||||
}
|
||||
|
||||
return array(
|
||||
'script' => $property_script . $script,
|
||||
'css' => 'css',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes script generation for typography fields.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments for this js_var.
|
||||
* @param array $field The field arguments.
|
||||
*/
|
||||
protected function script_var_typography( $args, $field ) {
|
||||
$args = $this->get_args( $args );
|
||||
|
||||
$script = '';
|
||||
$css = '';
|
||||
|
||||
// Load the font using WenFontloader.
|
||||
// This is a bit ugly because wp_add_inline_script doesn't allow adding <script> directly.
|
||||
$webfont_loader = 'sc=\'a\';jQuery(\'head\').append(sc.replace(\'a\',\'<\')+\'script>if(!_.isUndefined(WebFont)&&fontFamily){WebFont.load({google:{families:["\'+fontFamily.replace( /\"/g, \'"\' )+\':\'+variant+\':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai"]}});}\'+sc.replace(\'a\',\'<\')+\'/script>\');';
|
||||
|
||||
// Add the css.
|
||||
$css_build_array = array(
|
||||
'font-family' => 'fontFamily',
|
||||
'font-size' => 'fontSize',
|
||||
'line-height' => 'lineHeight',
|
||||
'letter-spacing' => 'letterSpacing',
|
||||
'word-spacing' => 'wordSpacing',
|
||||
'text-align' => 'textAlign',
|
||||
'text-transform' => 'textTransform',
|
||||
'text-decoration' => 'textDecoration',
|
||||
'color' => 'color',
|
||||
'font-weight' => 'fontWeight',
|
||||
'font-style' => 'fontStyle',
|
||||
);
|
||||
$choice_condition = ( isset( $args['choice'] ) && '' !== $args['choice'] && isset( $css_build_array[ $args['choice'] ] ) );
|
||||
$script .= ( ! $choice_condition ) ? $webfont_loader : '';
|
||||
foreach ( $css_build_array as $property => $var ) {
|
||||
if ( $choice_condition && $property !== $args['choice'] ) {
|
||||
continue;
|
||||
}
|
||||
// Fixes https://github.com/aristath/kirki/issues/1436.
|
||||
if ( ! isset( $field['default'] ) || (
|
||||
( 'font-family' === $property && ! isset( $field['default']['font-family'] ) ) ||
|
||||
( 'font-size' === $property && ! isset( $field['default']['font-size'] ) ) ||
|
||||
( 'line-height' === $property && ! isset( $field['default']['line-height'] ) ) ||
|
||||
( 'letter-spacing' === $property && ! isset( $field['default']['letter-spacing'] ) ) ||
|
||||
( 'word-spacing' === $property && ! isset( $field['default']['word-spacing'] ) ) ||
|
||||
( 'text-align' === $property && ! isset( $field['default']['text-align'] ) ) ||
|
||||
( 'text-transform' === $property && ! isset( $field['default']['text-transform'] ) ) ||
|
||||
( 'text-decoration' === $property && ! isset( $field['default']['text-decoration'] ) ) ||
|
||||
( 'color' === $property && ! isset( $field['default']['color'] ) ) ||
|
||||
( 'font-weight' === $property && ! isset( $field['default']['variant'] ) && ! isset( $field['default']['font-weight'] ) ) ||
|
||||
( 'font-style' === $property && ! isset( $field['default']['variant'] ) && ! isset( $field['default']['font-style'] ) )
|
||||
) ) {
|
||||
continue;
|
||||
}
|
||||
$script .= ( $choice_condition && 'font-family' === $args['choice'] ) ? $webfont_loader : '';
|
||||
|
||||
if ( 'font-family' === $property || ( isset( $args['choice'] ) && 'font-family' === $args['choice'] ) ) {
|
||||
$css .= 'fontFamilyCSS=fontFamily;if(0<fontFamily.indexOf(\' \')&&-1===fontFamily.indexOf(\'"\')){fontFamilyCSS=\'"\'+fontFamily+\'"\';}';
|
||||
$var = 'fontFamilyCSS';
|
||||
}
|
||||
$var = ( ( empty( $args['prefix'] ) ) ? '' : '\'' . $args['prefix'] . '\'+' ) . $var . ( ( empty( $args['units'] ) ) ? '' : '+\'' . $args['units'] . '\'' ) . ( ( empty( $args['suffix'] ) ) ? '' : '+\'' . $args['suffix'] . '\'' );
|
||||
$css .= 'css+=(\'\'!==' . $var . ')?\'' . $args['element'] . '\'+\'{' . $property . ':\'+' . $var . '+\';}\':\'\';';
|
||||
}
|
||||
|
||||
$script .= $css;
|
||||
if ( isset( $args['media_query'] ) ) {
|
||||
$script .= 'css=\'' . $args['media_query'] . '{\'+css+\'}\';';
|
||||
}
|
||||
return array(
|
||||
'script' => $script,
|
||||
'css' => 'css',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes script generation for typography fields.
|
||||
*
|
||||
* @access protected
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments for this js_var.
|
||||
*/
|
||||
protected function script_var_image( $args ) {
|
||||
$return = $this->script_var( $args );
|
||||
return array(
|
||||
'script' => 'newval=(!_.isUndefined(newval.url))?newval.url:newval;' . $return['script'],
|
||||
'css' => $return['css'],
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds anything we need before the main script.
|
||||
*
|
||||
* @access private
|
||||
* @since 3.0.0
|
||||
* @param array $args The field args.
|
||||
* @return string
|
||||
*/
|
||||
private function before_script( $args ) {
|
||||
$script = '';
|
||||
if ( isset( $args['type'] ) ) {
|
||||
switch ( $args['type'] ) {
|
||||
case 'kirki-typography':
|
||||
$script .= 'fontFamily=(_.isUndefined(newval[\'font-family\']))?\'\':newval[\'font-family\'];variant=(_.isUndefined(newval.variant))?\'400\':newval.variant;fontSize=(_.isUndefined(newval[\'font-size\']))?\'\':newval[\'font-size\'];lineHeight=(_.isUndefined(newval[\'line-height\']))?\'\':newval[\'line-height\'];letterSpacing=(_.isUndefined(newval[\'letter-spacing\']))?\'\':newval[\'letter-spacing\'];wordSpacing=(_.isUndefined(newval[\'word-spacing\']))?\'\':newval[\'word-spacing\'];textAlign=(_.isUndefined(newval[\'text-align\']))?\'\':newval[\'text-align\'];textTransform=(_.isUndefined(newval[\'text-transform\']))?\'\':newval[\'text-transform\'];textDecoration=(_.isUndefined(newval[\'text-decoration\']))?\'\':newval[\'text-decoration\'];color=(_.isUndefined(newval.color))?\'\':newval.color;fw=(!_.isString(newval.variant))?\'400\':newval.variant.match(/\d/g);fontWeight=(!_.isObject(fw))?400:fw.join(\'\');fontStyle=(variant&&-1!==variant.indexOf(\'italic\'))?\'italic\':\'normal\';css=\'\';';
|
||||
break;
|
||||
}
|
||||
}
|
||||
return $script;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sanitizes the arguments and makes sure they are all there.
|
||||
*
|
||||
* @access private
|
||||
* @since 3.0.0
|
||||
* @param array $args The arguments.
|
||||
* @return array
|
||||
*/
|
||||
private function get_args( $args ) {
|
||||
|
||||
// Make sure everything is defined to avoid "undefined index" errors.
|
||||
$args = wp_parse_args(
|
||||
$args, array(
|
||||
'element' => '',
|
||||
'property' => '',
|
||||
'prefix' => '',
|
||||
'suffix' => '',
|
||||
'units' => '',
|
||||
'js_callback' => array( '', '' ),
|
||||
'value_pattern' => '',
|
||||
)
|
||||
);
|
||||
|
||||
// Element should be a string.
|
||||
if ( is_array( $args['element'] ) ) {
|
||||
$args['element'] = implode( ',', $args['element'] );
|
||||
}
|
||||
|
||||
// Make sure arguments that are passed-on to callbacks are strings.
|
||||
if ( is_array( $args['js_callback'] ) && isset( $args['js_callback'][1] ) && is_array( $args['js_callback'][1] ) ) {
|
||||
$args['js_callback'][1] = wp_json_encode( $args['js_callback'][1] );
|
||||
}
|
||||
|
||||
if ( ! isset( $args['js_callback'][1] ) ) {
|
||||
$args['js_callback'][1] = '';
|
||||
}
|
||||
return $args;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns script for value_pattern & replacements.
|
||||
*
|
||||
* @access private
|
||||
* @since 3.0.0
|
||||
* @param string $value The value placeholder.
|
||||
* @param array $js_vars The js_vars argument.
|
||||
* @return string The script.
|
||||
*/
|
||||
private function value_pattern_replacements( $value, $js_vars ) {
|
||||
$script = '';
|
||||
$alias = $value;
|
||||
if ( ! isset( $js_vars['value_pattern'] ) ) {
|
||||
return $value;
|
||||
}
|
||||
$value = $js_vars['value_pattern'];
|
||||
if ( isset( $js_vars['pattern_replace'] ) ) {
|
||||
$script .= 'settings=window.wp.customize.get();';
|
||||
foreach ( $js_vars['pattern_replace'] as $search => $replace ) {
|
||||
$replace = '\'+settings["' . $replace . '"]+\'';
|
||||
$value = str_replace( $search, $replace, $js_vars['value_pattern'] );
|
||||
$value = trim( $value, '+' );
|
||||
}
|
||||
}
|
||||
$value_compiled = str_replace( '$', '\'+' . $alias . '+\'', $value );
|
||||
$value_compiled = trim( $value_compiled, '+' );
|
||||
|
||||
return $script . $alias . '=\'' . $value_compiled . '\';';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the callback function/method we're going to use for this field.
|
||||
*
|
||||
* @access private
|
||||
* @since 3.0.0
|
||||
* @param array $args The field args.
|
||||
* @return string|array A callable function or method.
|
||||
*/
|
||||
protected function get_callback( $args ) {
|
||||
switch ( $args['type'] ) {
|
||||
case 'kirki-background':
|
||||
case 'kirki-dimensions':
|
||||
case 'kirki-multicolor':
|
||||
case 'kirki-sortable':
|
||||
$callback = array( $this, 'script_var_array' );
|
||||
break;
|
||||
case 'kirki-typography':
|
||||
$callback = array( $this, 'script_var_typography' );
|
||||
break;
|
||||
case 'kirki-image':
|
||||
$callback = array( $this, 'script_var_image' );
|
||||
break;
|
||||
default:
|
||||
$callback = array( $this, 'script_var' );
|
||||
}
|
||||
return $callback;
|
||||
wp_localize_script( 'kirki_auto_postmessage', 'kirkiPostMessageFields', $data );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,344 @@
|
|||
/**
|
||||
* This file is empty on purpose.
|
||||
* Scripts are added dynamically using wp_add_inline_script() on this.
|
||||
*/
|
||||
/* global kirkiPostMessageFields, WebFont */
|
||||
var kirkiPostMessage = {
|
||||
|
||||
/**
|
||||
* The fields.
|
||||
*
|
||||
* @since 3.0.26
|
||||
*/
|
||||
fields: {},
|
||||
|
||||
/**
|
||||
* A collection of methods for the <style> tags.
|
||||
*
|
||||
* @since 3.0.26
|
||||
*/
|
||||
styleTag: {
|
||||
|
||||
/**
|
||||
* Add a <style> tag in <head> if it doesn't already exist.
|
||||
*
|
||||
* @since 3.0.26
|
||||
* @param {string} id - The field-ID.
|
||||
* @returns {void}
|
||||
*/
|
||||
add: function( id ) {
|
||||
if ( null === document.getElementById( 'kirki-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
|
||||
jQuery( 'head' ).append( '<style id="kirki-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 3.0.26
|
||||
* @param {string} id - The field-ID.
|
||||
* @param {string} styles - The styles to add.
|
||||
* @returns {void}
|
||||
*/
|
||||
addData: function( id, styles ) {
|
||||
kirkiPostMessage.styleTag.add( id );
|
||||
jQuery( '#kirki-postmessage-' + id ).text( styles );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Common utilities.
|
||||
*
|
||||
* @since 3.0.26
|
||||
*/
|
||||
util: {
|
||||
|
||||
/**
|
||||
* Processes the value and applies any replacements and/or additions.
|
||||
*
|
||||
* @since 3.0.26
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
* @param {string} controlType - The control-type.
|
||||
* @returns {string|false} - Returns false if value is excluded, otherwise a string.
|
||||
*/
|
||||
processValue: function( 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 3.0.26
|
||||
* @param {string} url - The URL.
|
||||
* @returns {string}
|
||||
*/
|
||||
backgroundImageValue: function( url ) {
|
||||
return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* A collection of utilities for CSS generation.
|
||||
*
|
||||
* @since 3.0.26
|
||||
*/
|
||||
css: {
|
||||
|
||||
/**
|
||||
* Generates the CSS from the output (js_vars) parameter.
|
||||
*
|
||||
* @since 3.0.26
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
* @param {string} controlType - The control-type.
|
||||
* @returns {string}
|
||||
*/
|
||||
fromOutput: function( output, value, controlType ) {
|
||||
var styles = '',
|
||||
kirkiParent = window.parent.kirki,
|
||||
googleFont = '',
|
||||
mediaQuery = false,
|
||||
processedValue;
|
||||
|
||||
if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
|
||||
value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
|
||||
}
|
||||
switch ( controlType ) {
|
||||
case 'kirki-typography':
|
||||
styles += output.element + '{';
|
||||
_.each( value, function( val, key ) {
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
processedValue = kirkiPostMessage.util.processValue( output, val );
|
||||
if ( false !== processedValue ) {
|
||||
styles += key + ':' + processedValue + ';';
|
||||
}
|
||||
} );
|
||||
styles += '}';
|
||||
|
||||
// Check if this is a googlefont so that we may load it.
|
||||
if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
|
||||
|
||||
// Calculate the googlefont params.
|
||||
googleFont = value['font-family'].replace( /\"/g, '"' );
|
||||
if ( value.variant ) {
|
||||
if ( 'regular' === value.variant ) {
|
||||
googleFont += ':400';
|
||||
} else if ( 'italic' === value.variant ) {
|
||||
googleFont += ':400i';
|
||||
} else {
|
||||
googleFont += ':' + value.variant;
|
||||
}
|
||||
}
|
||||
googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
|
||||
WebFont.load( {
|
||||
google: {
|
||||
families: [ googleFont ]
|
||||
}
|
||||
} );
|
||||
}
|
||||
break;
|
||||
case 'kirki-background':
|
||||
case 'kirki-dimensions':
|
||||
case 'kirki-multicolor':
|
||||
case 'kirki-sortable':
|
||||
styles += output.element + '{';
|
||||
_.each( value, function( val, key ) {
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
if ( 'background-image' === key ) {
|
||||
val = kirkiPostMessage.util.backgroundImageValue( val );
|
||||
}
|
||||
|
||||
processedValue = kirkiPostMessage.util.processValue( output, val );
|
||||
|
||||
if ( false !== processedValue ) {
|
||||
|
||||
// Mostly used for padding, margin & position properties.
|
||||
if ( output.property ) {
|
||||
styles += output.property;
|
||||
if ( '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) {
|
||||
styles += '-' + key;
|
||||
}
|
||||
styles += ':' + processedValue + ';';
|
||||
} else {
|
||||
styles += key + ':' + processedValue + ';';
|
||||
}
|
||||
}
|
||||
} );
|
||||
styles += '}';
|
||||
break;
|
||||
default:
|
||||
if ( 'kirki-image' === controlType ) {
|
||||
value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );
|
||||
}
|
||||
if ( _.isObject( value ) ) {
|
||||
styles += output.element + '{';
|
||||
_.each( value, function( val, key ) {
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
processedValue = kirkiPostMessage.util.processValue( output, val );
|
||||
if ( ! output.property ) {
|
||||
output.property = key;
|
||||
}
|
||||
if ( false !== processedValue ) {
|
||||
styles += output.property + ':' + processedValue + ';';
|
||||
}
|
||||
} );
|
||||
styles += '}';
|
||||
} else {
|
||||
processedValue = kirkiPostMessage.util.processValue( output, value );
|
||||
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 3.0.26
|
||||
*/
|
||||
html: {
|
||||
|
||||
/**
|
||||
* Modifies the HTML from the output (js_vars) parameter.
|
||||
*
|
||||
* @since 3.0.26
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
* @returns {string}
|
||||
*/
|
||||
fromOutput: function( 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 = kirkiPostMessage.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 3.0.26
|
||||
*/
|
||||
toggleClass: {
|
||||
|
||||
/**
|
||||
* Toggles a CSS class from the output (js_vars) parameter.
|
||||
*
|
||||
* @since 3.0.21
|
||||
* @param {Object} output - The output (js_vars) argument.
|
||||
* @param {mixed} value - The value.
|
||||
* @returns {string}
|
||||
*/
|
||||
fromOutput: function( 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() {
|
||||
|
||||
_.each( kirkiPostMessageFields, function( field ) {
|
||||
wp.customize( field.settings, function( value ) {
|
||||
value.bind( function( newVal ) {
|
||||
var styles = '';
|
||||
_.each( field.js_vars, function( output ) {
|
||||
if ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
|
||||
output.function = 'css';
|
||||
}
|
||||
if ( 'css' === output.function ) {
|
||||
styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
|
||||
} else {
|
||||
kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
|
||||
}
|
||||
} );
|
||||
kirkiPostMessage.styleTag.addData( field.settings, styles );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
