Initial commit

functions/kirki/modules/tooltips/class-kirki-modules-tooltips.php

@@ -0,0 +1,118 @@
+<?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       3.0.0
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Adds script for tooltips.
+ */
+class Kirki_Modules_Tooltips {
+
+	/**
+	 * The object instance.
+	 *
+	 * @static
+	 * @access private
+	 * @since 3.0.0
+	 * @var object
+	 */
+	private static $instance;
+
+	/**
+	 * An array containing field identifieds and their tooltips.
+	 *
+	 * @access private
+	 * @since 3.0.0
+	 * @var array
+	 */
+	private $tooltips_content = array();
+
+	/**
+	 * The class constructor
+	 *
+	 * @access protected
+	 * @since 3.0.0
+	 */
+	protected function __construct() {
+		add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_controls_print_footer_scripts' ) );
+	}
+
+	/**
+	 * Gets an instance of this object.
+	 * Prevents duplicate instances which avoid artefacts and improves performance.
+	 *
+	 * @static
+	 * @access public
+	 * @since 3.0.0
+	 * @return object
+	 */
+	public static function get_instance() {
+		if ( ! self::$instance ) {
+			self::$instance = new self();
+		}
+		return self::$instance;
+	}
+
+	/**
+	 * Parses fields and if any tooltips are found, they are added to the
+	 * object's $tooltips_content property.
+	 *
+	 * @access private
+	 * @since 3.0.0
+	 */
+	private function parse_fields() {
+		$fields = Kirki::$fields;
+		foreach ( $fields as $field ) {
+			if ( isset( $field['tooltip'] ) && ! empty( $field['tooltip'] ) ) {
+				// Get the control ID and properly format it for the tooltips.
+				$id = str_replace( '[', '-', str_replace( ']', '', $field['settings'] ) );
+				// Add the tooltips content.
+				$this->tooltips_content[ $id ] = array(
+					'id'      => $id,
+					'content' => $field['tooltip'],
+				);
+			}
+		}
+	}
+
+	/**
+	 * Allows us to add a tooltip to any control.
+	 *
+	 * @access public
+	 * @since 4.2.0
+	 * @param string $field_id The field-ID.
+	 * @param string $tooltip  The tooltip content.
+	 */
+	public function add_tooltip( $field_id, $tooltip ) {
+		$this->tooltips_content[ $field_id ] = array(
+			'id'      => sanitize_key( $field_id ),
+			'content' => wp_kses_post( $tooltip ),
+		);
+	}
+
+	/**
+	 * Enqueue scripts.
+	 *
+	 * @access public
+	 * @since 3.0.0
+	 */
+	public function customize_controls_print_footer_scripts() {
+		$this->parse_fields();
+
+		wp_enqueue_script( 'kirki-tooltip', trailingslashit( Kirki::$url ) . 'modules/tooltips/tooltip.js', array( 'jquery' ), KIRKI_VERSION, false );
+		wp_localize_script( 'kirki-tooltip', 'kirkiTooltips', $this->tooltips_content );
+		wp_enqueue_style( 'kirki-tooltip', trailingslashit( Kirki::$url ) . 'modules/tooltips/tooltip.css', array(), KIRKI_VERSION );
+	}
+}

functions/kirki/modules/tooltips/tooltip.css

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+.tooltip-wrapper {
+  float: right;
+  position: relative;
+}
+.tooltip-wrapper .tooltip-trigger {
+  text-decoration: none;
+  cursor: help;
+}
+.tooltip-wrapper .tooltip-content {
+  position: absolute;
+  width: 200px;
+  height: auto;
+  top: -10px;
+  left: -225px;
+  background: #FFC107;
+  color: #000;
+  padding: 10px;
+  z-index: 99999;
+  border-radius: 3px;
+  line-height: 1.4em;
+}
+.tooltip-wrapper .tooltip-content a {
+  color: #000;
+}
+.tooltip-wrapper .tooltip-content:after {
+  content: "";
+  font-family: dashicons;
+  position: absolute;
+  right: -12px;
+  top: 11px;
+  color: #FFC107;
+  font-size: 20px;
+}
+
+/*# sourceMappingURL=tooltip.css.map */

functions/kirki/modules/tooltips/tooltip.js

@@ -0,0 +1,55 @@
+/* global kirkiTooltips */
+jQuery( document ).ready( function() {
+
+	function kirkiTooltipAdd( control ) {
+		_.each( kirkiTooltips, function( tooltip ) {
+			let trigger,
+				controlID,
+				content;
+
+			if ( tooltip.id !== control.id ) {
+				return;
+			}
+
+			if ( control.container.find( '.tooltip-content' ).length ) {
+				return;
+			}
+
+			trigger   = '<span class="tooltip-trigger" data-setting="' + tooltip.id + '"><span class="dashicons dashicons-editor-help"></span></span>';
+			controlID = '#customize-control-' + tooltip.id;
+			content   = '<div class="tooltip-content hidden" data-setting="' + tooltip.id + '">' + tooltip.content + '</div>';
+
+			// Add the trigger & content.
+			jQuery( '<div class="tooltip-wrapper">' + trigger + content + '</div>' ).prependTo( controlID );
+
+			// Handle onclick events.
+			jQuery( '.tooltip-trigger[data-setting="' + tooltip.id + '"]' ).on( 'click', function() {
+				jQuery( '.tooltip-content[data-setting="' + tooltip.id + '"]' ).toggleClass( 'hidden' );
+			} );
+		} );
+
+		// Close tooltips if we click anywhere else.
+		jQuery( document ).mouseup( function( e ) {
+
+			if ( ! jQuery( '.tooltip-content' ).is( e.target ) ) {
+				if ( ! jQuery( '.tooltip-content' ).hasClass( 'hidden' ) ) {
+					jQuery( '.tooltip-content' ).addClass( 'hidden' );
+				}
+			}
+		} );
+	}
+
+	wp.customize.control.each( function( control ) {
+		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 );
+					}
+				} );
+			}
+		} );
+	} );
+} );