Added suggested colors to tooltip on customize colors
This commit is contained in:
Fabiano Alencar
parent
ce5f9ddc8d
commit
41a1ce558e
|
|
@ -8,11 +8,13 @@
|
|||
var cssTemplate = wp.template( 'tainacan-color-scheme' ),
|
||||
colorSchemeKeys = [
|
||||
'link_color',
|
||||
'tooltip_color',
|
||||
/* 'main_text_color',
|
||||
'secondary_text_color' */
|
||||
],
|
||||
colorSettings = [
|
||||
'link_color',
|
||||
'tooltip_color',
|
||||
/* 'main_text_color',
|
||||
'secondary_text_color' */
|
||||
];
|
||||
|
|
@ -31,6 +33,12 @@
|
|||
.data( 'data-default-color', color )
|
||||
.wpColorPicker( 'defaultColor', color );
|
||||
|
||||
color = colors[3];
|
||||
api( 'tooltip_color' ).set( color );
|
||||
api.control( 'tooltip_color' ).container.find( '.color-picker-hex' )
|
||||
.data( 'data-default-color', color )
|
||||
.wpColorPicker( 'defaultColor', color );
|
||||
|
||||
/* // Update Main Text Color.
|
||||
color = colors[3];
|
||||
api( 'main_text_color' ).set( color );
|
||||
|
|
|
|||
|
|
@ -188,6 +188,17 @@ function tainacan_customize_register( $wp_customize ) {
|
|||
'section' => 'colors',
|
||||
) ) );
|
||||
|
||||
$wp_customize->add_setting( 'tooltip_color', array(
|
||||
'default' => $color_scheme[3],
|
||||
'sanitize_callback' => 'sanitize_hex_color',
|
||||
'transport' => 'postMessage',
|
||||
) );
|
||||
|
||||
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'tooltip_color', array(
|
||||
'label' => __( 'Tooltip Color', 'tainacan-theme' ),
|
||||
'section' => 'colors',
|
||||
) ) );
|
||||
|
||||
/* // Add main text color setting and control.
|
||||
$wp_customize->add_setting( 'main_text_color', array(
|
||||
'default' => $color_scheme[3],
|
||||
|
|
@ -267,6 +278,7 @@ function tainacan_get_color_schemes() {
|
|||
'#1a1a1a', //background
|
||||
'#ffffff', //background page
|
||||
'#298596', //link
|
||||
'#e6f6f8', //tooltip
|
||||
),
|
||||
),
|
||||
'carmine' => array(
|
||||
|
|
@ -275,6 +287,7 @@ function tainacan_get_color_schemes() {
|
|||
'#262626', //background
|
||||
'#ffffff', //background page
|
||||
'#a55032', //link
|
||||
'#e6d3cd', //tooltip
|
||||
),
|
||||
),
|
||||
'cherry' => array(
|
||||
|
|
@ -283,6 +296,7 @@ function tainacan_get_color_schemes() {
|
|||
'#616a73', //background
|
||||
'#ffffff', //background page
|
||||
'#af2e48', //link
|
||||
'#e9cbd1', //tooltip
|
||||
),
|
||||
),
|
||||
'mustard' => array(
|
||||
|
|
@ -291,6 +305,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#c58738', //link
|
||||
'#f0e1cf', //tooltip
|
||||
),
|
||||
),
|
||||
'mintgreen' => array(
|
||||
|
|
@ -299,6 +314,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#4ebfa7', //link
|
||||
'#d4efe9', //tooltip
|
||||
),
|
||||
),
|
||||
'darkturquoise' => array(
|
||||
|
|
@ -307,6 +323,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#288698', //link
|
||||
'#cbe0e5', //tooltip
|
||||
),
|
||||
),
|
||||
'turquoise' => array(
|
||||
|
|
@ -315,6 +332,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#2db4c1', //link
|
||||
'#cdecef', //tooltip
|
||||
),
|
||||
),
|
||||
'lightblue' => array(
|
||||
|
|
@ -323,6 +341,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#499dd6', //link
|
||||
'#d3e6f2', //tooltip
|
||||
),
|
||||
),
|
||||
'purple' => array(
|
||||
|
|
@ -331,6 +350,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#4751a3', //link
|
||||
'#d1d4e7', //tooltip
|
||||
),
|
||||
),
|
||||
'violet' => array(
|
||||
|
|
@ -339,6 +359,7 @@ function tainacan_get_color_schemes() {
|
|||
'#ffffff', //background
|
||||
'#ffffff', //background page
|
||||
'#955ba5', //link
|
||||
'#e4d7e8', //tooltip
|
||||
),
|
||||
),
|
||||
) );
|
||||
|
|
@ -357,6 +378,7 @@ if ( ! function_exists( 'tainacan_get_color_scheme' ) ) :
|
|||
function tainacan_get_color_scheme() {
|
||||
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
|
||||
$link_color = get_theme_mod( 'link_color', 'default' );
|
||||
$tooltip_color = get_theme_mod( 'tooltip_color', 'default' );
|
||||
$color_schemes = tainacan_get_color_schemes();
|
||||
|
||||
if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
|
||||
|
|
@ -365,7 +387,7 @@ function tainacan_get_color_scheme() {
|
|||
|
||||
$return = $color_schemes['default']['colors'];
|
||||
$return[2] = $link_color; // override link color with the one from color picker
|
||||
|
||||
$return[3] = $tooltip_color;
|
||||
return $return;
|
||||
|
||||
}
|
||||
|
|
@ -448,6 +470,7 @@ function tainacan_color_scheme_css() {
|
|||
'background_color' => $color_scheme[0],
|
||||
'page_background_color' => $color_scheme[1],
|
||||
'link_color' => $color_scheme[2],
|
||||
'tooltip_color' => $color_scheme[3],
|
||||
'backtransparent' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.5)', $color_textcolor_rgb )
|
||||
);
|
||||
|
||||
|
|
@ -493,6 +516,7 @@ function tainacan_get_color_scheme_css( $colors ) {
|
|||
'background_color' => '',
|
||||
'page_background_color' => '',
|
||||
'link_color' => '',
|
||||
'tooltip_color' => '',
|
||||
'backtransparent' => '',
|
||||
) );
|
||||
|
||||
|
|
@ -584,10 +608,10 @@ function tainacan_get_color_scheme_css( $colors ) {
|
|||
|
||||
/* Tooltip */
|
||||
.tooltip .tooltip-inner {
|
||||
background-color: {$colors['backtransparent']} !important;
|
||||
background-color: {$colors['tooltip_color']} !important;
|
||||
}
|
||||
.tooltip .tooltip-arrow {
|
||||
border-color: {$colors['backtransparent']} !important;
|
||||
border-color: {$colors['tooltip_color']} !important;
|
||||
}
|
||||
|
||||
/* Colored text */
|
||||
|
|
@ -666,6 +690,7 @@ function tainacan_color_scheme_css_template() {
|
|||
'background_color' => '{{ data.background_color }}',
|
||||
'page_background_color' => '{{ data.page_background_color }}',
|
||||
'link_color' => '{{ data.link_color }}',
|
||||
'tooltip_color' => '{{ data.tooltip_color }}',
|
||||
'backtransparent' => '{{ data.backtransparent }}',/*
|
||||
'main_text_color' => '{{ data.main_text_color }}',
|
||||
'secondary_text_color' => '{{ data.secondary_text_color }}',
|
||||
|
|
@ -718,26 +743,26 @@ add_action( 'wp_enqueue_scripts', 'tainacan_link_color_css', 11 );
|
|||
*
|
||||
* @see wp_add_inline_style()
|
||||
*/
|
||||
function tainacan_main_text_color_css() {
|
||||
function tainacan_tooltip_color_css() {
|
||||
$color_scheme = tainacan_get_color_scheme();
|
||||
$default_color = $color_scheme[2];
|
||||
$main_text_color = get_theme_mod( 'main_text_color', $default_color );
|
||||
$default_color = $color_scheme[3];
|
||||
$tooltip_color = get_theme_mod( 'tooltip_color', $default_color );
|
||||
|
||||
// Don't do anything if the current color is the default.
|
||||
if ( $main_text_color === $default_color ) {
|
||||
if ( $tooltip_color === $default_color ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert main text hex color to rgba.
|
||||
$main_text_color_rgb = tainacan_hex2rgb( $main_text_color );
|
||||
$tooltip_color_rgb = tainacan_hex2rgb( $tooltip_color );
|
||||
|
||||
// If the rgba values are empty return early.
|
||||
if ( empty( $main_text_color_rgb ) ) {
|
||||
if ( empty( $tooltip_color_rgb ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we get this far, we have a custom color scheme.
|
||||
$border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb );
|
||||
$border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $tooltip_color_rgb );
|
||||
|
||||
$css = '
|
||||
/* Custom Main Text Color */
|
||||
|
|
@ -746,9 +771,9 @@ function tainacan_main_text_color_css() {
|
|||
}
|
||||
';
|
||||
|
||||
wp_add_inline_style( 'tainacan-style', sprintf( $css, $main_text_color, $border_color ) );
|
||||
wp_add_inline_style( 'tainacan-style', sprintf( $css, $tooltip_color, $border_color ) );
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'tainacan_main_text_color_css', 11 );
|
||||
add_action( 'wp_enqueue_scripts', 'tainacan_tooltip_color_css', 11 );
|
||||
|
||||
/**
|
||||
* Enqueues front-end CSS for the secondary text color.
|
||||
|
|
|
|||
Loading…
Reference in New Issue