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