mirror of
https://ghproxy.net/https://github.com/AlxMedia/curver.git
synced 2025-08-28 15:08:39 +08:00
Update to Kirki 4.0.22
This commit is contained in:
AlxMedia
parent
4ff905c2c6
commit
a02e711106
493 changed files with 29670 additions and 39886 deletions
|
|
@ -0,0 +1,125 @@
|
|||
<?php
|
||||
/**
|
||||
* Automatic postMessage scripts calculation for Kirki controls.
|
||||
*
|
||||
* @package kirki-framework/module-postmessage
|
||||
* @author Ari Stathopoulos (@aristath)
|
||||
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
|
||||
* @license https://opensource.org/licenses/MIT
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
namespace Kirki\Module;
|
||||
|
||||
use Kirki\URL;
|
||||
|
||||
/**
|
||||
* Adds styles to the customizer.
|
||||
*/
|
||||
class Postmessage {
|
||||
|
||||
/**
|
||||
* An array of fields to be processed.
|
||||
*
|
||||
* @access protected
|
||||
* @since 1.0.0
|
||||
* @var array
|
||||
*/
|
||||
protected $fields = [];
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function __construct() {
|
||||
add_action( 'customize_preview_init', [ $this, 'postmessage' ] );
|
||||
add_action( 'kirki_field_add_setting_args', [ $this, 'field_add_setting_args' ] );
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter setting args before adding the setting to the customizer.
|
||||
*
|
||||
* @access public
|
||||
* @since 1.0.0
|
||||
* @param array $args The field arguments.
|
||||
* @return array
|
||||
*/
|
||||
public function field_add_setting_args( $args ) {
|
||||
|
||||
if ( ! isset( $args['transport'] ) ) {
|
||||
return $args;
|
||||
}
|
||||
|
||||
$args['transport'] = 'auto' === $args['transport'] ? 'postMessage' : $args['transport'];
|
||||
|
||||
if ( 'postMessage' === $args['transport'] ) {
|
||||
$args['js_vars'] = isset( $args['js_vars'] ) ? (array) $args['js_vars'] : [];
|
||||
$args['output'] = isset( $args['output'] ) ? (array) $args['output'] : [];
|
||||
$js_vars = $args['js_vars'];
|
||||
|
||||
// Try to auto-generate js_vars.
|
||||
// First we need to check if js_vars are empty, and that output is not empty.
|
||||
if ( empty( $args['js_vars'] ) && ! empty( $args['output'] ) ) {
|
||||
|
||||
// Convert to array of arrays if needed.
|
||||
if ( isset( $args['output']['element'] ) ) {
|
||||
/* translators: The field ID where the error occurs. */
|
||||
_doing_it_wrong( __METHOD__, sprintf( esc_html__( '"output" invalid format in field %s. The "output" argument should be defined as an array of arrays.', 'kirki' ), esc_html( $args['settings'] ) ), '3.0.10' );
|
||||
|
||||
$args['output'] = array( $args['output'] );
|
||||
}
|
||||
|
||||
foreach ( $args['output'] as $output ) {
|
||||
$output['element'] = isset( $output['element'] ) ? $output['element'] : ':root';
|
||||
$output['element'] = is_array( $output['element'] ) ? implode( ',', $output['element'] ) : $output['element'];
|
||||
$output['function'] = isset( $output['function'] ) ? $output['function'] : 'style';
|
||||
$js_vars[] = $output;
|
||||
}
|
||||
}
|
||||
|
||||
$args['js_vars'] = $js_vars;
|
||||
}
|
||||
|
||||
$this->fields[] = $args;
|
||||
|
||||
return $args;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueues the postMessage script
|
||||
* and adds variables to it using the wp_localize_script function.
|
||||
* The rest is handled via JS.
|
||||
*/
|
||||
public function postmessage() {
|
||||
|
||||
wp_enqueue_script( 'kirki_auto_postmessage', URL::get_from_path( __DIR__ . '/postMessage.js' ), [ 'jquery', 'customize-preview', 'wp-hooks' ], '1.0.6', true );
|
||||
|
||||
$fields = $this->fields;
|
||||
|
||||
// Compatibility with v3 API.
|
||||
if ( class_exists( '\Kirki\Compatibility\Kirki' ) ) {
|
||||
$fields = array_merge( \Kirki\Compatibility\Kirki::$fields, $fields );
|
||||
}
|
||||
|
||||
$data = [];
|
||||
|
||||
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'] ) ) {
|
||||
$data[] = $field;
|
||||
}
|
||||
}
|
||||
|
||||
wp_localize_script( 'kirki_auto_postmessage', 'kirkiPostMessageFields', $data );
|
||||
|
||||
$extras = apply_filters( 'kirki_postmessage_script', false );
|
||||
|
||||
if ( $extras ) {
|
||||
wp_add_inline_script( 'kirki_auto_postmessage', $extras, 'after' );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,367 @@
|
|||
/* global kirkiPostMessageFields */
|
||||
/* eslint max-depth: off */
|
||||
var kirkiPostMessage = {
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
add: function( id ) {
|
||||
id = id.replace( /[^\w\s]/gi, '-' );
|
||||
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 1.0.0
|
||||
*
|
||||
* @param {string} id - The field-ID.
|
||||
* @param {string} styles - The styles to add.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
addData: function( id, styles ) {
|
||||
id = id.replace( '[', '-' ).replace( ']', '' );
|
||||
kirkiPostMessage.styleTag.add( id );
|
||||
jQuery( '#kirki-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.
|
||||
*
|
||||
* @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 1.0.0
|
||||
*
|
||||
* @param {string} url - The URL.
|
||||
*
|
||||
* @returns {string} - Returns the URL.
|
||||
*/
|
||||
backgroundImageValue: function( 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.
|
||||
*
|
||||
* @returns {string} - Returns CSS as a string.
|
||||
*/
|
||||
fromOutput: function( 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 kirkiPostMessageStylesOutput filter.
|
||||
styles = wp.hooks.applyFilters( 'kirkiPostMessageStylesOutput', 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 = kirkiPostMessage.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 ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );
|
||||
}
|
||||
if ( _.isObject( value ) ) {
|
||||
styles += output.element + '{';
|
||||
_.each( value, function( val, key ) {
|
||||
var property;
|
||||
if ( output.choice && key !== output.choice ) {
|
||||
return;
|
||||
}
|
||||
processedValue = kirkiPostMessage.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 = kirkiPostMessage.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.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
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 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.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
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() {
|
||||
var styles;
|
||||
|
||||
_.each( kirkiPostMessageFields, function( field ) {
|
||||
|
||||
// Take care of styles on initial load and page-refreshes.
|
||||
// ! Commented codes below were causing bug when using toggleClass method when using js_vars.
|
||||
/*styles = '';
|
||||
_.each( field.js_vars, function( output ) {
|
||||
output.function = ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) ? 'css' : output.function;
|
||||
field.type = ( field.choices && field.choices.parent_type ) ? field.choices.parent_type : field.type;
|
||||
|
||||
if ( 'css' === output.function ) {
|
||||
styles += kirkiPostMessage.css.fromOutput( output, wp.customize( field.settings ).get(), field.type );
|
||||
} else {
|
||||
kirkiPostMessage[ output.function ].fromOutput( output, wp.customize( field.settings ).get(), field.type );
|
||||
}
|
||||
} );
|
||||
kirkiPostMessage.styleTag.addData( field.settings, styles );*/
|
||||
|
||||
var fieldSetting = field.settings;
|
||||
|
||||
if ("option" === field.option_type && field.option_name && 0 !== fieldSetting.indexOf(field.option_name + '[')) {
|
||||
fieldSetting = field.option_name + "[" + fieldSetting + "]";
|
||||
}
|
||||
|
||||
wp.customize( fieldSetting, function( value ) {
|
||||
value.bind( function( newVal ) {
|
||||
styles = '';
|
||||
_.each( field.js_vars, function( output ) {
|
||||
output.function = ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) ? 'css' : output.function;
|
||||
field.type = ( field.choices && field.choices.parent_type ) ? field.choices.parent_type : field.type;
|
||||
|
||||
if ( 'css' === output.function ) {
|
||||
styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
|
||||
} else {
|
||||
kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
|
||||
}
|
||||
} );
|
||||
|
||||
kirkiPostMessage.styleTag.addData(fieldSetting, styles);
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
Loading…
Add table
Add a link
Reference in a new issue
