10h30/full-screen-morphing-search
1
0
Fork 0
mirror of https://github.com/10h30/full-screen-morphing-search.git synced 2026-07-11 18:46:04 +09:00
Code Issues Packages Projects Releases Wiki Activity

Colors PHP to JS.

Browse Source 
Replacing all colors options PHP functions by Variables passed to JS.
This commit is contained in:
LebCit
2019-07-23 21:34:01 +03:00
parent 456dd07322
commit efc56b7339
4 changed files with 92 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/customize-preview.js
+4 -10
View File
@@ -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 );
});
} );
} );
assets/js/full-screen-morphing-search.js
+60 -3
View File
@@ -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 );
class-full-screen-morphing-search.php
+28 -31
View File
@@ -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 {
?>
<div id="morphsearch" class="morphsearch">
<span class="morphsearch-close" style="--morphsearch-close-background: <?php fsmsp_close_icon_color(); ?>">
</span><!-- Modifiying the CSS Variable --morphsearch-close-background on the style attribute -->
<span class="morphsearch-close"></span>
<form role="search" class="morphsearch-form" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input required type="search" class="morphsearch-input" name="s"
placeholder="<?php echo esc_attr_x( 'Search...', 'placeholder' ); ?>"
style=
"
--morphsearch-input-placeholder: <?php fsmsp_search_text_color(); ?>
;
color: <?php fsmsp_input_text_color(); ?>
"
value=""/>
<button id="morphsearch-submit" class="morphsearch-submit" type="submit">
<?php fsmsp_svg_color(); // CN: Using "inline" SVG. ?>
<?php
$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 ) ) {
echo wp_kses( $response['body'], 'full_screen_morphing_search_add_svg_tags' ); // use the content.
}
?>
</button>
</form>
<div class="morphsearch-content">
<div class="dummy-column">
<h2 style="color: <?php fsmsp_headings_color(); ?>">Recent Posts</h2>
<h2>Recent Posts</h2>
<?php
$args = array(
'post_type' => 'post',
@@ -127,16 +134,12 @@ class Full_Screen_Morphing_Search {
while ( $msprp->have_posts() ) :
$msprp->the_post();
?>
<div class="dummy-media-object" style="background: <?php fsmsp_columns_background_color(); ?>"
onmouseover="this.style.background = '<?php fsmsp_columns_hover_background_color(); ?>';"
onmouseout="this.style.background = '<?php fsmsp_columns_background_color(); ?>';">
<div class="dummy-media-object">
<a href="<?php echo the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php echo the_post_thumbnail( 'msp-thumb', array( 'class' => 'round' ) ); ?>
</a>
<h3>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" style="color: <?php fsmsp_links_color(); ?>"
onmouseover="this.style.color = '<?php fsmsp_links_hover_color(); ?>';"
onmouseout="this.style.color = '<?php fsmsp_links_color(); ?>';">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h3>
@@ -147,7 +150,7 @@ class Full_Screen_Morphing_Search {
?>
</div>
<div class="dummy-column">
<h2 style="color: <?php fsmsp_headings_color(); ?>">Top Categories</h2>
<h2>Top Categories</h2>
<?php
$cats = get_categories();
if ( empty( $cats ) ) {
@@ -168,14 +171,10 @@ class Full_Screen_Morphing_Search {
$cat = str_replace( ' ', '&nbsp;', esc_html( $cat ) );
if ( $i < 6 ) {
?>
<div class="dummy-media-object" style="background: <?php fsmsp_columns_background_color(); ?>"
onmouseover="this.style.background = '<?php fsmsp_columns_hover_background_color(); ?>';"
onmouseout="this.style.background = '<?php fsmsp_columns_background_color(); ?>';">
<div class="dummy-media-object">
<?php
echo '<img src="' . esc_url( plugins_url( 'assets/img/category.png', __FILE__ ) ) . '" > ';
print '<h3><a href=' . esc_url( $cat_link ) . ' style="color:';
echo esc_attr( fsmsp_links_color() ) . '"
>' . esc_html( $cat . ' (' . $tc_count . ')' ) . '</a></h3>';
print "<h3><a href='" . esc_url( $cat_link ) . "'>" . esc_html( $cat . ' (' . $tc_count . ')' ) . '</a></h3>';
?>
</div>
<?php
@@ -184,7 +183,7 @@ class Full_Screen_Morphing_Search {
?>
</div>
<div class="dummy-column">
<h2 style="color: <?php fsmsp_headings_color(); ?>">Top Tags</h2>
<h2>Top Tags</h2>
<?php
$tags = get_tags();
if ( empty( $tags ) ) {
@@ -205,9 +204,7 @@ class Full_Screen_Morphing_Search {
$tag = str_replace( ' ', '&nbsp;', esc_html( $tag ) );
if ( $i < 6 ) {
?>
<div class="dummy-media-object" style="background: <?php fsmsp_columns_background_color(); ?>"
onmouseover="this.style.background = '<?php fsmsp_columns_hover_background_color(); ?>';"
onmouseout="this.style.background = '<?php fsmsp_columns_background_color(); ?>';">
<div class="dummy-media-object">
<?php
echo '<img src="' . esc_url( plugins_url( 'assets/img/tag.png', __FILE__ ) ) . '" >';
print "<h3><a href='" . esc_url( $tag_link ) . "'>" . esc_html( $tag . ' (' . $tt_count . ')' ) . '</a></h3>';
functions-full-screen-morphing-search.php
-142
View File
@@ -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 <path> in <svg>.
$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 );
}