From efc56b7339f062366353d33b7d2c60b08b86e37b Mon Sep 17 00:00:00 2001 From: LebCit Date: Tue, 23 Jul 2019 21:34:01 +0300 Subject: [PATCH] Colors PHP to JS. Replacing all colors options PHP functions by Variables passed to JS. --- assets/js/customize-preview.js | 14 +-- assets/js/full-screen-morphing-search.js | 63 +++++++++- class-full-screen-morphing-search.php | 59 +++++---- functions-full-screen-morphing-search.php | 142 ---------------------- 4 files changed, 92 insertions(+), 186 deletions(-) diff --git a/assets/js/customize-preview.js b/assets/js/customize-preview.js index 45e8ef0..7e33b79 100644 --- a/assets/js/customize-preview.js +++ b/assets/js/customize-preview.js @@ -56,9 +56,7 @@ // FSMS Columns Background Color. wp.customize( 'fsmsp_options[fsmsp_columns_background_color]', function( value ) { value.bind( function( newval ) { - // Repeat the CSS logic in PHP : background ! $( 'div.dummy-media-object' ).css( 'background', newval ); - // Repeat the JS logic in PHP : onmouseout ! $( 'div.dummy-media-object' ).mouseout( function() { $(this).css( 'background', newval ); }); @@ -68,7 +66,6 @@ // FSMS Columns Hover Background Color. wp.customize( 'fsmsp_options[fsmsp_columns_hover_background_color]', function( value ) { value.bind( function( newval ) { - // Repeat the JS logic in PHP : onmouseover ! $( 'div.dummy-media-object' ).mouseover( function() { $(this).css( 'background', newval ); }); @@ -78,11 +75,9 @@ // FSMS Links Color. wp.customize( 'fsmsp_options[fsmsp_links_color]', function( value ) { value.bind( function( newval ) { - // Repeat the CSS logic in PHP : color ! $( '.dummy-media-object h3 a' ).css( 'color', newval ); - // Repeat the JS logic in PHP : onmouseout ! - $( '.dummy-media-object h3 a' ).mouseout( function() { - $(this).css( 'color', newval ); + $( 'div.dummy-media-object' ).mouseout( function() { + $(this).find( 'h3 a' ).css( 'color', newval ); }); } ); } ); @@ -90,9 +85,8 @@ // FSMS Links Hover Color. wp.customize( 'fsmsp_options[fsmsp_links_hover_color]', function( value ) { value.bind( function( newval ) { - // Repeat the JS logic in PHP : onmouseover ! - $( '.dummy-media-object h3 a' ).mouseover( function() { - $(this).css( 'color', newval ); + $( 'div.dummy-media-object' ).mouseover( function() { + $(this).find( 'h3 a' ).css( 'color', newval ); }); } ); } ); diff --git a/assets/js/full-screen-morphing-search.js b/assets/js/full-screen-morphing-search.js index 801dce3..c3e0cd4 100644 --- a/assets/js/full-screen-morphing-search.js +++ b/assets/js/full-screen-morphing-search.js @@ -58,14 +58,71 @@ // Reset Morphing Search Input Value to Search... $('input.search-field').val(''); - console.info( fsmsp_vars.fsmsp_options_does_not_exists ); if ( fsmsp_vars.fsmsp_options_does_not_exists ) { - console.log( 'I do not exist' ); + + // Output fsmsp_main_backgroung_color. $( '#morphsearch, div.morphsearch-content' ).css( 'background-color', '#f1f1f1' ); + // Output fsmsp_close_icon_color. + document.querySelectorAll( 'span.morphsearch-close' )[0].style.setProperty( "--morphsearch-close-background", '#000' ); + + // Output fsmsp_search_text_color. + document.querySelectorAll( 'input.morphsearch-input' )[0].style.setProperty( "--morphsearch-input-placeholder", '#c2c2c2' ); + + // Output fsmsp_input_text_color. + $( '#morphsearch .morphsearch-input' ).css( 'color', '#ec5a62' ); + + // Output fsmsp_magnifier_submit_color. + $( '#Capa_1 path' ).css( 'fill', '#ddd' ); + + // Output fsmsp_headings_color. + $( 'div.dummy-column h2' ).css( 'color', '#c2c2c2' ); + + // Output fsmsp_columns_background_color. + $( 'div.dummy-media-object' ).css( 'background', '#ebebeb' ); + $( 'div.dummy-media-object' ).mouseout( function() { + $(this).css( 'background', '#ebebeb' ); + // Output fsmsp_links_color. + $(this).find( 'h3 a' ).css( 'color', '#b2b2b2' ); + }); + + // Output fsmsp_columns_hover_background_color. + $( 'div.dummy-media-object' ).mouseover( function() { + $(this).css( 'background', '#e4e4e5' ); + // Output fsmsp_links_hover_color. + $(this).find( 'h3 a' ).css( 'color', '#ec5a62' ); + }); + + // Output fsmsp_links_color. + $( '.dummy-media-object h3 a' ).css( 'color', '#b2b2b2' ); + } else { - console.log( 'Here I am' ); + $( '#morphsearch, div.morphsearch-content' ).css( 'background-color', fsmsp_vars.fsmsp_main_backgroung_color ); + + document.querySelectorAll( 'span.morphsearch-close' )[0].style.setProperty( "--morphsearch-close-background", fsmsp_vars.fsmsp_close_icon_color ); + + document.querySelectorAll( 'input.morphsearch-input' )[0].style.setProperty( "--morphsearch-input-placeholder", fsmsp_vars.fsmsp_search_text_color ); + + $( '#morphsearch .morphsearch-input' ).css( 'color', fsmsp_vars.fsmsp_input_text_color ); + + $( '#Capa_1 path' ).css( 'fill', fsmsp_vars.fsmsp_magnifier_submit_color ); + + $( 'div.dummy-column h2' ).css( 'color', fsmsp_vars.fsmsp_headings_color ); + + $( 'div.dummy-media-object' ).css( 'background', fsmsp_vars.fsmsp_columns_background_color ); + $( 'div.dummy-media-object' ).mouseout( function() { + $(this).css( 'background', fsmsp_vars.fsmsp_columns_background_color ); + $(this).find( 'h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_color ); + }); + + $( 'div.dummy-media-object' ).mouseover( function() { + $(this).css( 'background', fsmsp_vars.fsmsp_columns_hover_background_color ); + $(this).find( 'h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_hover_color ); + }); + + $( '.dummy-media-object h3 a' ).css( 'color', fsmsp_vars.fsmsp_links_color ); + } } )( jQuery ); \ No newline at end of file diff --git a/class-full-screen-morphing-search.php b/class-full-screen-morphing-search.php index b581e7e..5ccb069 100644 --- a/class-full-screen-morphing-search.php +++ b/class-full-screen-morphing-search.php @@ -70,15 +70,24 @@ class Full_Screen_Morphing_Search { // Declare PHP Variables to be passed to JS. $fsmsp_options_does_not_exists = ( null === get_option( 'fsmsp_options', null ) ) ? true : false; - $fsmsp_main_backgroung_color = $fsmsp_options['fsmsp_main_backgroung_color']; + // Localize full-screen-morphing-search.js ! wp_localize_script( $this->plugin->name, 'fsmsp_vars', array( - 'fsmsp_is_customize_preview' => is_customize_preview(), - 'fsmsp_options_does_not_exists' => $fsmsp_options_does_not_exists, - 'fsmsp_main_backgroung_color' => $fsmsp_main_backgroung_color, + 'fsmsp_is_customize_preview' => is_customize_preview(), + 'fsmsp_options_does_not_exists' => $fsmsp_options_does_not_exists, + 'fsmsp_main_backgroung_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_main_backgroung_color'] ) ? $fsmsp_options['fsmsp_main_backgroung_color'] : '#f1f1f1' ) ), + 'fsmsp_close_icon_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_close_icon_color'] ) ? $fsmsp_options['fsmsp_close_icon_color'] : '#000' ) ), + 'fsmsp_search_text_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_search_text_color'] ) ? $fsmsp_options['fsmsp_search_text_color'] : '#c2c2c2' ) ), + 'fsmsp_input_text_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_input_text_color'] ) ? $fsmsp_options['fsmsp_input_text_color'] : '#ec5a62' ) ), + 'fsmsp_magnifier_submit_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_magnifier_submit_color'] ) ? $fsmsp_options['fsmsp_magnifier_submit_color'] : '#ddd' ) ), + 'fsmsp_headings_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_headings_color'] ) ? $fsmsp_options['fsmsp_headings_color'] : '#c2c2c2' ) ), + 'fsmsp_columns_background_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_columns_background_color'] ) ? $fsmsp_options['fsmsp_columns_background_color'] : '#ebebeb' ) ), + 'fsmsp_columns_hover_background_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_columns_hover_background_color'] ) ? $fsmsp_options['fsmsp_columns_hover_background_color'] : '#e4e4e5' ) ), + 'fsmsp_links_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_links_color'] ) ? $fsmsp_options['fsmsp_links_color'] : '#b2b2b2' ) ), + 'fsmsp_links_hover_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_links_hover_color'] ) ? $fsmsp_options['fsmsp_links_hover_color'] : '#ec5a62' ) ), ) ); @@ -97,26 +106,24 @@ class Full_Screen_Morphing_Search { ?>
- - +
-

Recent Posts

+

Recent Posts

'post', @@ -127,16 +134,12 @@ class Full_Screen_Morphing_Search { while ( $msprp->have_posts() ) : $msprp->the_post(); ?> -
+
'round' ) ); ?>

- +

@@ -147,7 +150,7 @@ class Full_Screen_Morphing_Search { ?>
-

Top Categories

+

Top Categories

-
+
'; - print '

' . esc_html( $cat . ' (' . $tc_count . ')' ) . '

'; + print "

" . esc_html( $cat . ' (' . $tc_count . ')' ) . '

'; ?>
-

Top Tags

+

Top Tags

-
+
'; print "

" . esc_html( $tag . ' (' . $tt_count . ')' ) . '

'; diff --git a/functions-full-screen-morphing-search.php b/functions-full-screen-morphing-search.php index a623323..cc8ee93 100644 --- a/functions-full-screen-morphing-search.php +++ b/functions-full-screen-morphing-search.php @@ -384,145 +384,3 @@ function full_screen_morphing_search_customize_register( $wp_customize ) { } add_action( 'customize_register', 'full_screen_morphing_search_customize_register' ); - -/** - * Output fsmsp_main_backgroung_color. - */ -/*function fsmsp_main_backgroung_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_main_backgroung_color'] ) ) { - $fsmsp_main_backgroung_color = $fsmsp_options['fsmsp_main_backgroung_color']; - } else { - $fsmsp_main_backgroung_color = '#f1f1f1'; - } - echo esc_attr( $fsmsp_main_backgroung_color ); -}*/ - -/** - * Output fsmsp_close_icon_color. - */ -function fsmsp_close_icon_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_close_icon_color'] ) ) { - $fsmsp_close_icon_color = $fsmsp_options['fsmsp_close_icon_color']; - } else { - $fsmsp_close_icon_color = '#000'; - } - echo esc_attr( $fsmsp_close_icon_color ); -} - -/** - * Output fsmsp_search_text_color. - */ -function fsmsp_search_text_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_search_text_color'] ) ) { - $fsmsp_search_text_color = $fsmsp_options['fsmsp_search_text_color']; - } else { - $fsmsp_search_text_color = '#c2c2c2'; - } - echo esc_attr( $fsmsp_search_text_color ); -} - -/** - * Output fsmsp_input_text_color. - */ -function fsmsp_input_text_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_input_text_color'] ) ) { - $fsmsp_input_text_color = $fsmsp_options['fsmsp_input_text_color']; - } else { - $fsmsp_input_text_color = '#ec5a62'; - } - echo esc_attr( $fsmsp_input_text_color ); -} - -/** - * Output FSMS Magnifier Submit Color. - */ -function fsmsp_svg_color() { - // CN: Modify 'fill' attribute of in . - $response = wp_remote_get( 'https://plugins.svn.wordpress.org/full-screen-morphing-search/trunk/assets/img/magnifier.svg' ); - if ( is_array( $response ) && ! is_wp_error( $response ) ) { - $svg = wp_remote_retrieve_body( $response ); - $dom = new DOMDocument(); - libxml_use_internal_errors( true ); - $dom->loadHTML( $svg ); - libxml_use_internal_errors( false ); - $nodes = $dom->getElementsByTagName( 'path' ); - foreach ( $nodes as $node ) { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_magnifier_submit_color'] ) ) { - $fill = $node->setAttribute( 'fill', $fsmsp_options['fsmsp_magnifier_submit_color'] ); - } else { - $fill = $node->setAttribute( 'fill', '#ddd' ); - } - } - echo wp_kses( $dom->saveHTML(), 'full_screen_morphing_search_add_svg_tags' ); - } -} - -/** - * Output fsmsp_headings_color. - */ -function fsmsp_headings_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_headings_color'] ) ) { - $fsmsp_headings_color = $fsmsp_options['fsmsp_headings_color']; - } else { - $fsmsp_headings_color = '#c2c2c2'; - } - echo esc_attr( $fsmsp_headings_color ); -} - -/** - * Output fsmsp_columns_background_color. - */ -function fsmsp_columns_background_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_columns_background_color'] ) ) { - $fsmsp_columns_background_color = $fsmsp_options['fsmsp_columns_background_color']; - } else { - $fsmsp_columns_background_color = '#ebebeb'; - } - echo esc_attr( $fsmsp_columns_background_color ); -} - -/** - * Output fsmsp_columns_hover_background_color. - */ -function fsmsp_columns_hover_background_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_columns_hover_background_color'] ) ) { - $fsmsp_columns_hover_background_color = $fsmsp_options['fsmsp_columns_hover_background_color']; - } else { - $fsmsp_columns_hover_background_color = '#e4e4e5'; - } - echo esc_attr( $fsmsp_columns_hover_background_color ); -} - -/** - * Output fsmsp_links_color. - */ -function fsmsp_links_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_links_color'] ) ) { - $fsmsp_links_color = $fsmsp_options['fsmsp_links_color']; - } else { - $fsmsp_links_color = '#b2b2b2'; - } - echo esc_attr( $fsmsp_links_color ); -} - -/** - * Output fsmsp_links_hover_color. - */ -function fsmsp_links_hover_color() { - $fsmsp_options = get_option( 'fsmsp_options' ); - if ( ! empty( $fsmsp_options['fsmsp_links_hover_color'] ) ) { - $fsmsp_links_hover_color = $fsmsp_options['fsmsp_links_hover_color']; - } else { - $fsmsp_links_hover_color = '#ec5a62'; - } - echo esc_attr( $fsmsp_links_hover_color ); -}