Update to Kirki 4.0.22

This commit is contained in:
AlxMedia 2022-03-10 15:13:43 +01:00
parent 4ff905c2c6
commit a02e711106
493 changed files with 29670 additions and 39886 deletions

View file

@ -0,0 +1,94 @@
<?php
/**
* Customizer Control: image.
*
* @package kirki-framework/control-image
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
* @license https://opensource.org/licenses/MIT
* @since 1.0
*/
namespace Kirki\Control;
use Kirki\Control\Base;
use Kirki\URL;
/**
* Adds the image control.
*
* @since 1.0
*/
class Image extends Base {
/**
* The control type.
*
* @access public
* @since 1.0
* @var string
*/
public $type = 'kirki-image';
/**
* The version. Used in scripts & styles for cache-busting.
*
* @static
* @access public
* @since 1.0
* @var string
*/
public static $control_ver = '1.0.2';
/**
* Enqueue control related scripts/styles.
*
* @access public
*/
public function enqueue() {
parent::enqueue();
// Enqueue the script.
wp_enqueue_script( 'kirki-control-image', URL::get_from_path( dirname( dirname( __DIR__ ) ) . '/dist/control.js' ), [ 'jquery', 'customize-base', 'kirki-control-base', 'wp-mediaelement', 'media-upload', 'wp-i18n' ], self::$control_ver, false );
wp_set_script_translations( 'kirki-control-image', 'kirki' );
}
/**
* An Underscore (JS) template for this control's content (but not its container).
*
* Class variables for this control class are available in the `data` JS object;
* export custom variables by overriding {@see WP_Customize_Control::to_json()}.
*
* @see WP_Customize_Control::print_template()
*
* @access protected
* @since 1.1
* @return void
*/
protected function content_template() {
?>
<label>
<span class="customize-control-title">{{{ data.label }}}</span>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
</label>
<div class="image-wrapper attachment-media-view image-upload">
<# url = ( _.isObject( data.value ) && ! _.isUndefined( data.value.url ) ) ? data.value.url : data.value; #>
<# if ( data.value.url || '' !== url ) { #>
<div class="thumbnail thumbnail-image">
<img src="{{ url }}"/>
</div>
<# } else { #>
<div class="placeholder"><?php esc_html_e( 'No image selected', 'kirki' ); ?></div>
<# } #>
<div class="actions">
<button class="button image-upload-remove-button<# if ( '' === url ) { #> hidden <# } #>"><?php esc_html_e( 'Remove', 'kirki' ); ?></button>
<# if ( data.default && '' !== data.default ) { #>
<button type="button" class="button image-default-button"<# if ( data.default === data.value || ( ! _.isUndefined( data.value.url ) && data.default === data.value.url ) ) { #> style="display:none;"<# } #>><?php esc_html_e( 'Default', 'kirki' ); ?></button>
<# } #>
<button type="button" class="button image-upload-button"><?php esc_html_e( 'Select image', 'kirki' ); ?></button>
</div>
</div>
<?php
}
}

View file

@ -0,0 +1,54 @@
<?php
/**
* Handles CSS output for image fields.
*
* @package Kirki
* @subpackage Controls
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
* @license https://opensource.org/licenses/MIT
* @since 3.0.10
*/
namespace Kirki\Field\CSS;
use Kirki\Module\CSS\Output;
/**
* Output overrides.
*/
class Image extends Output {
/**
* Processes a single item from the `output` array.
*
* @access protected
* @param array $output The `output` item.
* @param array $value The field's value.
*/
protected function process_output( $output, $value ) {
if ( ! isset( $output['element'] ) || ! isset( $output['property'] ) ) {
return;
}
$output = wp_parse_args(
$output,
[
'media_query' => 'global',
'prefix' => '',
'units' => '',
'suffix' => '',
]
);
if ( is_array( $value ) ) {
if ( isset( $output['choice'] ) && $output['choice'] ) {
$this->styles[ $output['media_query'] ][ $output['element'] ][ $output['property'] ] = $output['prefix'] . $this->process_property_value( $output['property'], $value[ $output['choice'] ] ) . $output['units'] . $output['suffix'];
return;
}
if ( isset( $value['url'] ) ) {
$this->styles[ $output['media_query'] ][ $output['element'] ][ $output['property'] ] = $output['prefix'] . $this->process_property_value( $output['property'], $value['url'] ) . $output['units'] . $output['suffix'];
return;
}
return;
}
$this->styles[ $output['media_query'] ][ $output['element'] ][ $output['property'] ] = $output['prefix'] . $this->process_property_value( $output['property'], $value ) . $output['units'] . $output['suffix'];
}
}

View file

@ -0,0 +1,166 @@
<?php // phpcs:disable PHPCompatibility.FunctionDeclarations.NewClosure
/**
* Override field methods
*
* @package kirki-framework/control-image
* @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
* @license https://opensource.org/licenses/MIT
* @since 1.0
*/
namespace Kirki\Field;
use Kirki\Field;
/**
* Field overrides.
*/
class Image extends Field {
/**
* The field type.
*
* @access public
* @since 1.0
* @var string
*/
public $type = 'kirki-image';
/**
* The control class-name.
*
* @access protected
* @since 0.1
* @var string
*/
protected $control_class = '\Kirki\Control\Image';
/**
* Whether we should register the control class for JS-templating or not.
*
* @access protected
* @since 0.1
* @var bool
*/
protected $control_has_js_template = true;
/**
* Additional logic for this field.
*
* @access protected
* @since 0.1
* @param array $args The field arguments.
* @return void
*/
protected function init( $args ) {
add_filter( 'kirki_output_item_args', [ $this, 'output_item_args' ], 10, 4 );
add_filter( 'kirki_output_control_classnames', [ $this, 'output_control_classnames' ] );
}
/**
* Filter arguments before creating the setting.
*
* @access public
* @since 0.1
* @param array $args The field arguments.
* @param WP_Customize_Manager $wp_customize The customizer instance.
* @return array
*/
public function filter_setting_args( $args, $wp_customize ) {
if ( $args['settings'] === $this->args['settings'] ) {
$args = parent::filter_setting_args( $args, $wp_customize );
// Set the sanitize-callback if none is defined.
if ( ! isset( $args['sanitize_callback'] ) || ! $args['sanitize_callback'] ) {
$args['sanitize_callback'] = function( $value ) {
if ( isset( $this->args['choices']['save_as'] ) && 'array' === $this->args['choices']['save_as'] ) {
return [
'id' => ( isset( $value['id'] ) && '' !== $value['id'] ) ? (int) $value['id'] : '',
'url' => ( isset( $value['url'] ) && '' !== $value['url'] ) ? esc_url_raw( $value['url'] ) : '',
'width' => ( isset( $value['width'] ) && '' !== $value['width'] ) ? (int) $value['width'] : '',
'height' => ( isset( $value['height'] ) && '' !== $value['height'] ) ? (int) $value['height'] : '',
];
}
if ( isset( $this->args['choices']['save_as'] ) && 'id' === $this->args['choices']['save_as'] ) {
return absint( $value );
}
return ( is_string( $value ) ) ? esc_url_raw( $value ) : $value;
};
}
}
return $args;
}
/**
* Filter arguments before creating the control.
*
* @access public
* @since 0.1
* @param array $args The field arguments.
* @param WP_Customize_Manager $wp_customize The customizer instance.
* @return array
*/
public function filter_control_args( $args, $wp_customize ) {
if ( $args['settings'] === $this->args['settings'] ) {
$args = parent::filter_control_args( $args, $wp_customize );
$args['button_labels'] = isset( $args['button_labels'] ) ? $args['button_labels'] : [];
$args['button_labels'] = wp_parse_args(
$args['button_labels'],
[
'select' => esc_html__( 'Select image', 'kirki' ),
'change' => esc_html__( 'Change image', 'kirki' ),
'default' => esc_html__( 'Default', 'kirki' ),
'remove' => esc_html__( 'Remove', 'kirki' ),
'placeholder' => esc_html__( 'No image selected', 'kirki' ),
'frame_title' => esc_html__( 'Select image', 'kirki' ),
'frame_button' => esc_html__( 'Choose image', 'kirki' ),
]
);
$args['choices'] = isset( $args['choices'] ) ? (array) $args['choices'] : [];
$args['choices']['save_as'] = isset( $args['choices']['save_as'] ) ? $args['choices']['save_as'] : 'url';
$args['choices']['labels'] = isset( $args['choices']['labels'] ) ? $args['choices']['labels'] : [];
$args['choices']['labels'] = wp_parse_args( $args['choices']['labels'], $args['button_labels'] );
// Set the control-type.
$args['type'] = 'kirki-image';
}
return $args;
}
/**
* Filter for output argument used by the kirki-framework/module-css module.
*
* @access public
* @since 1.0
* @param array $output A single output item.
* @param mixed $value The value.
* @param array $all_outputs All field output args.
* @param array $field The field arguments.
* @return array
*/
public function output_item_args( $output, $value, $all_outputs, $field ) {
if ( $field['settings'] === $this->args['settings'] ) {
if ( isset( $output['property'] ) && in_array( [ 'background', 'background-image' ], $output['property'], true ) ) {
if ( ! isset( $output['value_pattern'] ) || empty( $output['value_pattern'] ) || '$' === $output['value_pattern'] ) {
$output['value_pattern'] = 'url("$")';
}
}
}
return $output;
}
/**
* Adds a custom output class for typography fields.
*
* @access public
* @since 1.0
* @param array $classnames The array of classnames.
* @return array
*/
public function output_control_classnames( $classnames ) {
$classnames['kirki-image'] = '\Kirki\Field\CSS\Image';
return $classnames;
}
}

View file

@ -0,0 +1,128 @@
wp.customize.controlConstructor['kirki-image'] = wp.customize.kirkiDynamicControl.extend( {
initKirkiControl: function( control ) {
var value, saveAs, preview, previewImage, removeButton, defaultButton;
control = control || this;
value = control.setting._value;
saveAs = ( ! _.isUndefined( control.params.choices ) && ! _.isUndefined( control.params.choices.save_as ) ) ? control.params.choices.save_as : 'url';
preview = control.container.find( '.placeholder, .thumbnail' );
previewImage = ( 'array' === saveAs ) ? value.url : value;
removeButton = control.container.find( '.image-upload-remove-button' );
defaultButton = control.container.find( '.image-default-button' );
// Make sure value is properly formatted.
value = ( 'array' === saveAs && _.isString( value ) ) ? { url: value } : value;
// Tweaks for save_as = id.
if ( ( 'id' === saveAs || 'ID' === saveAs ) && '' !== value ) {
wp.media.attachment( value ).fetch().then( function() {
setTimeout( function() {
var url = wp.media.attachment( value ).get( 'url' );
preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + url + '" alt="" />' );
}, 700 );
} );
}
// If value is not empty, hide the "default" button.
if ( ( 'url' === saveAs && '' !== value ) || ( 'array' === saveAs && ! _.isUndefined( value.url ) && '' !== value.url ) ) {
control.container.find( 'image-default-button' ).hide();
}
// If value is empty, hide the "remove" button.
if ( ( 'url' === saveAs && '' === value ) || ( 'array' === saveAs && ( _.isUndefined( value.url ) || '' === value.url ) ) ) {
removeButton.hide();
}
// If value is default, hide the default button.
if ( value === control.params.default ) {
control.container.find( 'image-default-button' ).hide();
}
if ( '' !== previewImage ) {
preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
}
control.container.on( 'click', '.image-upload-button', function( e ) {
var image = wp.media( { multiple: false } ).open().on( 'select', function() {
// This will return the selected image from the Media Uploader, the result is an object.
var uploadedImage = image.state().get( 'selection' ).first(),
jsonImg = uploadedImage.toJSON();
previewImage = jsonImg.url;
if ( ! _.isUndefined( jsonImg.sizes ) ) {
previewImage = jsonImg.sizes.full.url;
if ( ! _.isUndefined( jsonImg.sizes.medium ) ) {
previewImage = jsonImg.sizes.medium.url;
} else if ( ! _.isUndefined( jsonImg.sizes.thumbnail ) ) {
previewImage = jsonImg.sizes.thumbnail.url;
}
}
if ( 'array' === saveAs ) {
control.setting.set( {
id: jsonImg.id,
url: !_.isUndefined(jsonImg.sizes)
? jsonImg.sizes.full.url
: jsonImg.url,
width: jsonImg.width,
height: jsonImg.height,
} );
} else if ( 'id' === saveAs ) {
control.setting.set( jsonImg.id );
} else {
control.setting.set( ( ! _.isUndefined( jsonImg.sizes ) ) ? jsonImg.sizes.full.url : jsonImg.url );
}
if ( preview.length ) {
preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
}
if ( removeButton.length ) {
removeButton.show();
defaultButton.hide();
}
} );
e.preventDefault();
} );
control.container.on( 'click', '.image-upload-remove-button', function( e ) {
e.preventDefault();
control.setting.set( '' );
preview = control.container.find( '.placeholder, .thumbnail' );
removeButton = control.container.find( '.image-upload-remove-button' );
defaultButton = control.container.find( '.image-default-button' );
if ( preview.length ) {
preview.removeClass().addClass( 'placeholder' ).html( wp.i18n.__( 'No image selected', 'kirki' ) );
}
if ( removeButton.length ) {
removeButton.hide();
if ( jQuery( defaultButton ).hasClass( 'button' ) ) {
defaultButton.show();
}
}
} );
control.container.on( 'click', '.image-default-button', function( e ) {
e.preventDefault();
control.setting.set( control.params.default );
preview = control.container.find( '.placeholder, .thumbnail' );
removeButton = control.container.find( '.image-upload-remove-button' );
defaultButton = control.container.find( '.image-default-button' );
if ( preview.length ) {
preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + control.params.default + '" alt="" />' );
}
if ( removeButton.length ) {
removeButton.show();
defaultButton.hide();
}
} );
}
} );