tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added suggested colors to tooltip on customize colors

This commit is contained in:
Fabiano Alencar 2018-09-12 12:23:56 -03:00
parent ce5f9ddc8d
commit 41a1ce558e
2 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/js/color-scheme-control.js
View File

@ -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 );

49
src/functions/customizer.php
View File

@ -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.