first commit
This commit is contained in:
CHIEFSOFT\ameye
+2
@@ -0,0 +1,2 @@
|
||||
.kirki-tooltip-wrapper{position:relative;z-index:5}.kirki-tooltip-wrapper .tooltip-trigger{left:3px;position:relative;text-decoration:none;top:0}.kirki-tooltip-wrapper .tooltip-trigger:hover+.tooltip-content{bottom:32px;opacity:1;visibility:visible;z-index:99999}.kirki-tooltip-wrapper .tooltip-trigger .dashicons{font-size:18px;height:18px;width:18px}.kirki-tooltip-wrapper .tooltip-content{background:#000;border-radius:3px;bottom:29px;color:#fff;font-size:13px;height:fit-content;left:0;line-height:1.4em;min-width:275px;opacity:0;padding:7px;position:absolute;transition:all .2s linear;visibility:hidden;width:100%;z-index:-1}.kirki-tooltip-wrapper .tooltip-content a{color:#00a0d2}
|
||||
/*# sourceMappingURL=control.css.map */
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"mappings":"AAAA,uBACC,iBAAA,CACA,SCCD,CDCC,wCAGC,QAAA,CAFA,iBAAA,CAGA,oBAAA,CAFA,KCGF,CDEG,+DACC,WAAA,CACA,SAAA,CACA,kBAAA,CACA,aCAJ,CDIE,mDACC,cAAA,CAEA,WAAA,CADA,UCDH,CDMC,wCAWC,eAAA,CACA,iBAAA,CAVA,WAAA,CAOA,UAAA,CADA,cAAA,CADA,kBAAA,CAJA,MAAA,CAOA,iBAAA,CALA,eAAA,CAQA,SAAA,CATA,WAAA,CAHA,iBAAA,CAeA,yBAAA,CAFA,iBAAA,CARA,UAAA,CASA,UCHF,CDmBE,0CACC,aCjBH","sources":["packages/kirki-framework/module-tooltips/src/control.scss","%3Cinput%20css%20gZwkcc%3E"],"sourcesContent":[".kirki-tooltip-wrapper {\n\tposition: relative;\n\tz-index: 5; // 2 is enough, but.. just to be safe.\n\n\t.tooltip-trigger {\n\t\tposition: relative;\n\t\ttop: 0;\n\t\tleft: 3px;\n\t\ttext-decoration: none;\n\n\t\t&:hover {\n\t\t\t+ .tooltip-content {\n\t\t\t\tbottom: 32px;\n\t\t\t\topacity: 1;\n\t\t\t\tvisibility: visible;\n\t\t\t\tz-index: 99999;\n\t\t\t}\n\t\t}\n\n\t\t.dashicons {\n\t\t\tfont-size: 18px;\n\t\t\twidth: 18px;\n\t\t\theight: 18px;\n\t\t}\n\t}\n\n\t.tooltip-content {\n\t\tposition: absolute;\n\t\tbottom: 29px;\n\t\tleft: 0;\n\t\tpadding: 7px;\n\t\tmin-width: 275px;\n\t\twidth: 100%;\n\t\theight: fit-content;\n\t\tfont-size: 13px;\n\t\tcolor: #fff;\n\t\tline-height: 1.4em;\n\t\tbackground: #000;\n\t\tborder-radius: 3px;\n\t\topacity: 0;\n\t\tvisibility: hidden;\n\t\tz-index: -1;\n\t\ttransition: all 0.2s linear;\n\n\t\t/// We might want to bring it back in the future.\n\t\t// &::before {\n\t\t// \tcontent: '';\n\t\t// \tposition: absolute;\n\t\t// \tbottom: -6px;\n\t\t// \tdisplay: block;\n\t\t// \twidth: 0;\n\t\t// \theight: 0;\n\t\t// \tborder-left: 10px solid transparent;\n\t\t// \tborder-right: 10px solid transparent;\n\t\t// \tborder-top: 10px solid #000;\n\t\t// }\n\n\t\ta {\n\t\t\tcolor: #00a0d2;\n\t\t}\n\t}\n}\n\n/*# sourceMappingURL=tooltip.css.map */\n",".kirki-tooltip-wrapper {\n position: relative;\n z-index: 5;\n}\n.kirki-tooltip-wrapper .tooltip-trigger {\n position: relative;\n top: 0;\n left: 3px;\n text-decoration: none;\n}\n.kirki-tooltip-wrapper .tooltip-trigger:hover + .tooltip-content {\n bottom: 32px;\n opacity: 1;\n visibility: visible;\n z-index: 99999;\n}\n.kirki-tooltip-wrapper .tooltip-trigger .dashicons {\n font-size: 18px;\n width: 18px;\n height: 18px;\n}\n.kirki-tooltip-wrapper .tooltip-content {\n position: absolute;\n bottom: 29px;\n left: 0;\n padding: 7px;\n min-width: 275px;\n width: 100%;\n height: fit-content;\n font-size: 13px;\n color: #fff;\n line-height: 1.4em;\n background: #000;\n border-radius: 3px;\n opacity: 0;\n visibility: hidden;\n z-index: -1;\n transition: all 0.2s linear;\n}\n.kirki-tooltip-wrapper .tooltip-content a {\n color: #00a0d2;\n}\n\n/*# sourceMappingURL=tooltip.css.map */\n/*# sourceMappingURL=control.css.map */\n"],"names":[],"version":3,"file":"control.css.map"}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
!function(){function t(t){_.each(kirkiTooltips,(function(n){if(n.id===t.id&&!t.container.find(".tooltip-content").length){var i=document.querySelector("#customize-control-"+n.id+" .customize-control-title");if(i){i.classList.add("kirki-tooltip-wrapper");var o='<span class="tooltip-content">'+n.content+"</span>",e=jQuery(i);jQuery('<span class="tooltip-trigger"><span class="dashicons dashicons-editor-help"></span></span>').appendTo(e),jQuery(o).appendTo(e)}}}))}jQuery(document).ready((function(){var n=[];wp.customize.control.each((function(i){n.includes(i.section())||n.push(i.section()),wp.customize.section(i.section(),(function(n){n.expanded()||wp.customize.settings.autofocus.control===i.id?t(i):n.expanded.bind((function(n){n&&t(i)}))}))})),jQuery("head").append(jQuery('<style class="kirki-tooltip-inline-styles"></style>'));var i=jQuery(".kirki-tooltip-inline-styles"),o=jQuery(".wp-full-overlay-sidebar-content");n.forEach((function(t){wp.customize.section(t,(function(t){t.expanded.bind((function(n){n&&(t.contentContainer[0].scrollHeight>o.height()?i.html(".kirki-tooltip-wrapper span.tooltip-content {min-width: 258px;}"):i.empty())}))}))}))}))}();
|
||||
//# sourceMappingURL=control.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"mappings":"YAE0B,SACjBA,EAAiBC,GACzBC,EAAEC,KAAMC,eAAe,SAAWC,GACjC,GAAKA,EAAQC,KAAOL,EAAQK,KAIvBL,EAAQM,UAAUC,KAAM,oBAAqBC,OAAlD,CAEA,IAAMC,EAASC,SAASC,cACvB,sBAAwBP,EAAQC,GAAK,6BAGtC,GAAOI,EAAP,CACAA,EAAOG,UAAUC,IAAK,yBAGtB,IAIMC,EACL,iCAAmCV,EAAQU,QAAU,UAEhDC,EAAUC,OAAQP,GAGxBO,OATC,8FASiBC,SAAUF,GAC5BC,OAAQF,GAAUG,SAAUF,QAI9BC,OAAQN,UAAWQ,OAAO,WACzB,IAAIC,EAAe,GAEnBC,GAAGC,UAAUrB,QAAQE,MAAM,SAAWF,GAC9BmB,EAAaG,SAAUtB,EAAQuB,YACrCJ,EAAaK,KAAMxB,EAAQuB,WAG5BH,GAAGC,UAAUE,QAASvB,EAAQuB,WAAW,SAAWA,GAElDA,EAAQE,YACRL,GAAGC,UAAUK,SAASC,UAAU3B,UAAYA,EAAQK,GAEpDN,EAAiBC,GAEjBuB,EAAQE,SAASG,MAAM,SAAWH,GAC5BA,GACJ1B,EAAiBC,YAOtBgB,OAAQ,QAASa,OAChBb,OAAQ,wDAGT,IAAMc,EAAkBd,OAAQ,gCAC1Be,EAAkBf,OAAQ,oCAEhCG,EAAaa,SAAS,SAAWC,GAChCb,GAAGC,UAAUE,QAASU,GAAa,SAAWV,GAC7CA,EAAQE,SAASG,MAAM,SAAWH,GAC5BA,IAEHF,EAAQW,iBAAiB,GAAGC,aAC5BJ,EAAgBK,SAEhBN,EAAgBO,KACf,mEAGDP,EAAgBQ","sources":["packages/kirki-framework/module-tooltips/src/control.js"],"sourcesContent":["import './control.scss';\n\n/* global kirkiTooltips */\nfunction kirkiTooltipAdd( control ) {\n\t_.each( kirkiTooltips, function ( tooltip ) {\n\t\tif ( tooltip.id !== control.id ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( control.container.find( '.tooltip-content' ).length ) return;\n\n\t\tconst target = document.querySelector(\n\t\t\t'#customize-control-' + tooltip.id + ' .customize-control-title'\n\t\t);\n\n\t\tif ( ! target ) return;\n\t\ttarget.classList.add( 'kirki-tooltip-wrapper' );\n\n\t\t// Build the tooltip trigger.\n\t\tconst trigger =\n\t\t\t'<span class=\"tooltip-trigger\"><span class=\"dashicons dashicons-editor-help\"></span></span>';\n\n\t\t// Build the tooltip content.\n\t\tconst content =\n\t\t\t'<span class=\"tooltip-content\">' + tooltip.content + '</span>';\n\n\t\tconst $target = jQuery( target );\n\n\t\t// Append the trigger & content next to the control's title.\n\t\tjQuery( trigger ).appendTo( $target );\n\t\tjQuery( content ).appendTo( $target );\n\t} );\n}\n\njQuery( document ).ready( function () {\n\tlet sectionNames = [];\n\n\twp.customize.control.each( function ( control ) {\n\t\tif ( ! sectionNames.includes( control.section() ) ) {\n\t\t\tsectionNames.push( control.section() );\n\t\t}\n\n\t\twp.customize.section( control.section(), function ( section ) {\n\t\t\tif (\n\t\t\t\tsection.expanded() ||\n\t\t\t\twp.customize.settings.autofocus.control === control.id\n\t\t\t) {\n\t\t\t\tkirkiTooltipAdd( control );\n\t\t\t} else {\n\t\t\t\tsection.expanded.bind( function ( expanded ) {\n\t\t\t\t\tif ( expanded ) {\n\t\t\t\t\t\tkirkiTooltipAdd( control );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t}\n\t\t} );\n\t} );\n\n\tjQuery( 'head' ).append(\n\t\tjQuery( '<style class=\"kirki-tooltip-inline-styles\"></style>' )\n\t);\n\n\tconst $tooltipStyleEl = jQuery( '.kirki-tooltip-inline-styles' );\n\tconst $sidebarOverlay = jQuery( '.wp-full-overlay-sidebar-content' );\n\n\tsectionNames.forEach( function ( sectionName ) {\n\t\twp.customize.section( sectionName, function ( section ) {\n\t\t\tsection.expanded.bind( function ( expanded ) {\n\t\t\t\tif ( expanded ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tsection.contentContainer[0].scrollHeight >\n\t\t\t\t\t\t$sidebarOverlay.height()\n\t\t\t\t\t) {\n\t\t\t\t\t\t$tooltipStyleEl.html(\n\t\t\t\t\t\t\t'.kirki-tooltip-wrapper span.tooltip-content {min-width: 258px;}'\n\t\t\t\t\t\t);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t$tooltipStyleEl.empty();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t} );\n\t} );\n} );\n"],"names":["$1a3e97217cc9f59a$var$kirkiTooltipAdd","control","_","each","kirkiTooltips","tooltip","id","container","find","length","target","document","querySelector","classList","add","content","$target","jQuery","appendTo","ready","sectionNames","wp","customize","includes","section","push","expanded","settings","autofocus","bind","append","$tooltipStyleEl","$sidebarOverlay","forEach","sectionName","contentContainer","scrollHeight","height","html","empty"],"version":3,"file":"control.js.map"}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
Reference in New Issue
Block a user