Update to Kirki 4.0.22

functions/kirki/packages/kirki-framework/module-tooltips/src/Tooltips.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Injects tooltips to controls when the 'tooltip' argument is used.
+ *
+ * @package   Kirki
+ * @category  Modules
+ * @author    Ari Stathopoulos (@aristath)
+ * @copyright Copyright (c) 2019, Ari Stathopoulos (@aristath)
+ * @license   https://opensource.org/licenses/MIT
+ * @since     1.0
+ */
+
+namespace Kirki\Module;
+
+use Kirki\URL;
+
+/**
+ * Adds the tooltips.
+ *
+ * @since 1.0
+ */
+class Tooltips {
+
+	/**
+	 * An array containing field identifieds and their tooltips.
+	 *
+	 * @access private
+	 * @since 1.0
+	 * @var array
+	 */
+	private $tooltips_content = [];
+
+	/**
+	 * The class constructor
+	 *
+	 * @access public
+	 * @since 1.0
+	 */
+	public function __construct() {
+
+		add_action( 'customize_controls_print_footer_scripts', [ $this, 'customize_controls_print_footer_scripts' ] );
+		add_filter( 'kirki_field_add_control_args', [ $this, 'filter_control_args' ], 10, 2 );
+
+	}
+
+	/**
+	 * Enqueue scripts.
+	 *
+	 * @access public
+	 * @since 1.0
+	 */
+	public function customize_controls_print_footer_scripts() {
+
+		wp_enqueue_style( 'kirki-tooltip', URL::get_from_path( dirname( __DIR__ ) . '/dist/control.css' ), [], '1.0.10' );
+
+		wp_enqueue_script( 'kirki-tooltip', URL::get_from_path( dirname( __DIR__ ) . '/dist/control.js' ), [ 'jquery' ], '1.0.10', false );
+		wp_localize_script( 'kirki-tooltip', 'kirkiTooltips', $this->tooltips_content );
+
+	}
+
+	/**
+	 * Filter control args.
+	 *
+	 * @access public
+	 * @since 1.0
+	 * @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 ( isset( $args['tooltip'] ) && $args['tooltip'] ) {
+			$this->tooltips_content[ $args['settings'] ] = [
+				'id'      => sanitize_key( $args['settings'] ),
+				'content' => wp_kses_post( $args['tooltip'] ),
+			];
+		}
+		return $args;
+	}
+}

functions/kirki/packages/kirki-framework/module-tooltips/src/control.js

@@ -0,0 +1,84 @@
+import './control.scss';
+
+/* global kirkiTooltips */
+function kirkiTooltipAdd( control ) {
+	_.each( kirkiTooltips, function ( tooltip ) {
+		if ( tooltip.id !== control.id ) {
+			return;
+		}
+
+		if ( control.container.find( '.tooltip-content' ).length ) return;
+
+		const target = document.querySelector(
+			'#customize-control-' + tooltip.id + ' .customize-control-title'
+		);
+
+		if ( ! target ) return;
+		target.classList.add( 'kirki-tooltip-wrapper' );
+
+		// Build the tooltip trigger.
+		const trigger =
+			'<span class="tooltip-trigger"><span class="dashicons dashicons-editor-help"></span></span>';
+
+		// Build the tooltip content.
+		const content =
+			'<span class="tooltip-content">' + tooltip.content + '</span>';
+
+		const $target = jQuery( target );
+
+		// Append the trigger & content next to the control's title.
+		jQuery( trigger ).appendTo( $target );
+		jQuery( content ).appendTo( $target );
+	} );
+}
+
+jQuery( document ).ready( function () {
+	let sectionNames = [];
+
+	wp.customize.control.each( function ( control ) {
+		if ( ! sectionNames.includes( control.section() ) ) {
+			sectionNames.push( control.section() );
+		}
+
+		wp.customize.section( control.section(), function ( section ) {
+			if (
+				section.expanded() ||
+				wp.customize.settings.autofocus.control === control.id
+			) {
+				kirkiTooltipAdd( control );
+			} else {
+				section.expanded.bind( function ( expanded ) {
+					if ( expanded ) {
+						kirkiTooltipAdd( control );
+					}
+				} );
+			}
+		} );
+	} );
+
+	jQuery( 'head' ).append(
+		jQuery( '<style class="kirki-tooltip-inline-styles"></style>' )
+	);
+
+	const $tooltipStyleEl = jQuery( '.kirki-tooltip-inline-styles' );
+	const $sidebarOverlay = jQuery( '.wp-full-overlay-sidebar-content' );
+
+	sectionNames.forEach( function ( sectionName ) {
+		wp.customize.section( sectionName, function ( section ) {
+			section.expanded.bind( function ( expanded ) {
+				if ( expanded ) {
+					if (
+						section.contentContainer[0].scrollHeight >
+						$sidebarOverlay.height()
+					) {
+						$tooltipStyleEl.html(
+							'.kirki-tooltip-wrapper span.tooltip-content {min-width: 258px;}'
+						);
+					} else {
+						$tooltipStyleEl.empty();
+					}
+				}
+			} );
+		} );
+	} );
+} );