Simplifed

Remove Customizer JS, Remove autocomplete JS, Remove Dummy Content
This commit is contained in:
2021-02-21 19:49:07 +07:00
parent cb72115898
commit 38abd22dc2
5 changed files with 3 additions and 1160 deletions
-1
View File
File diff suppressed because one or more lines are too long
-205
View File
@@ -1,205 +0,0 @@
/**
* File customize-preview.js.
*
* Theme Customizer enhancements for a better user experience.
*
* Contains handlers to make Theme Customizer preview reload changes asynchronously.
*/
( function( $ ) {
// FSMS Main Background Color.
wp.customize( 'fsmsp_options[fsmsp_main_background_color]', function( value ) {
value.bind( function( newval ) {
$( '#morphsearch, div.morphsearch-content' ).css( 'background-color', newval );
} );
} );
// FSMS Close Color.
wp.customize( 'fsmsp_options[fsmsp_close_icon_color]', function( value ) {
value.bind( function( newval ) {
document.querySelectorAll( 'span.morphsearch-close' )[0].style.setProperty( "--morphsearch-close-background", newval );
/**
* @see https://stackoverflow.com/a/49618941/6837428
*/
} );
} );
// FSMS Search... Color.
wp.customize( 'fsmsp_options[fsmsp_search_text_color]', function( value ) {
value.bind( function( newval ) {
document.querySelectorAll( 'input.morphsearch-input' )[0].style.setProperty( "--morphsearch-input-placeholder", newval );
} );
} );
// FSMS Input Text Color.
wp.customize( 'fsmsp_options[fsmsp_input_text_color]', function( value ) {
value.bind( function( newval ) {
$( '#morphsearch .morphsearch-input' ).css( 'color', newval );
} );
} );
// FSMS Magnifier Submit Color.
wp.customize( 'fsmsp_options[fsmsp_magnifier_submit_color]', function( value ) {
value.bind( function( newval ) {
$( '#Capa_1 path' ).css( 'fill', newval );
} );
} );
// FSMS Headings Color.
wp.customize( 'fsmsp_options[fsmsp_headings_color]', function( value ) {
value.bind( function( newval ) {
$( 'div.dummy-column h2' ).css( 'color', newval );
} );
} );
// FSMS Columns Background Color.
wp.customize( 'fsmsp_options[fsmsp_columns_background_color]', function( value ) {
value.bind( function( newval ) {
$( 'div.dummy-media-object' ).css( 'background', newval );
$( 'div.dummy-media-object' ).mouseout( function() {
$(this).css( 'background', newval );
} );
} );
} );
// FSMS Columns Hover Background Color.
wp.customize( 'fsmsp_options[fsmsp_columns_hover_background_color]', function( value ) {
value.bind( function( newval ) {
$( 'div.dummy-media-object' ).mouseover( function() {
$(this).css( 'background', newval );
} );
} );
} );
// FSMS Links Color.
wp.customize( 'fsmsp_options[fsmsp_links_color]', function( value ) {
value.bind( function( newval ) {
$( '.dummy-media-object h3 a' ).css( 'color', newval );
$( 'div.dummy-media-object' ).mouseout( function() {
$(this).find( 'h3 a' ).css( 'color', newval );
} );
} );
} );
// FSMS Links Hover Color.
wp.customize( 'fsmsp_options[fsmsp_links_hover_color]', function( value ) {
value.bind( function( newval ) {
$( 'div.dummy-media-object' ).mouseover( function() {
$(this).find( 'h3 a' ).css( 'color', newval );
} );
} );
} );
// FSMS Search Form Text.
wp.customize( 'fsmsp_options[fsmsp_search_form_text]', function( value ) {
value.bind( function( newval ) {
$( 'input.morphsearch-input' ).attr( 'placeholder', newval );
} );
} );
/**
* MutationObserver to display the default placeholder text (search...),
* when the user erases all characters of his text in the FSMS Search Form Text option.
*/
let targetNodePhTxt = $( "input.morphsearch-input" )[0]; // Get the Node element.
let observerPhTxt = new MutationObserver( callbackPhTxt );
let obsConfigPhTxt = { attributes: true };
observerPhTxt.observe( targetNodePhTxt, obsConfigPhTxt );
function callbackPhTxt(mutations) {
mutations.forEach( function( mutation ) {
if ( mutation.target.placeholder.length == 0 ) {
$( '.morphsearch-form .morphsearch-input' ).attr( 'placeholder', fsmsp_cp.fsmsp_placeholder_text );
}
} );
}
/**
* MutationObserver to prevent weird behaviour in Chrome and Edge, when input of text control option is clicked/focused.
* Not needed but added to reflect same behaviour as on the live site (not Customizer preview).
* When the overlay comes out, focus() on .morphsearch-input, then close it if we press on the Esc button.
*/
let targetNode = $( '#morphsearch' )[0]; // Get the Node element.
let observerNode = new MutationObserver( mutationNodeCallback );
let obsNodeConfig = { attributes: true };
observerNode.observe( targetNode, obsNodeConfig );
function mutationNodeCallback( mutations ) {
mutations.forEach( function( mutation ) {
if ( 'attributes' === mutation.type ) {
// This focus() will affect every input in a form[role=search] !
$( '.morphsearch-input' ).focus();
$( '.morphsearch' ).on( 'keydown', function( event ) {
if (event.keyCode === 27) {
// Remove the focus() first with blur() on every form[role=search] input !
$( 'form[role=search] input' ).blur();
// Close the overlay : $( '.morphsearch-close' ).click();
$( '.morphsearch' ).removeClass( 'open' );
}
} );
}
} );
}
/**
* Following MutationObserver are to display the default icon for each column when no Icon/Image is provided.
* This will take effect when the Remove button is clicked while in the Customizer preview.
*/
// 1- MutationObserver for article icon.
let targetObjArt = $( '.fsmsp-article-link' ); // Get the Object element NOT the Node.
let observerObjArt = new MutationObserver( callbackArt );
let obsConfigArt = { childList: true };
targetObjArt.each( function() {
/**
* Using .each( function() { } ); since we have more than one object element matching our request.
*/
observerObjArt.observe( this, obsConfigArt );
} );
function callbackArt( mutationList ) {
mutationList.forEach( function( mutation ) {
if ( mutation.type == 'childList' ) {
/**
* When <span class="customize-partial-edit-shortcut customize-partial-edit-shortcut-fsmsp_article_icon">
* is the only child left (this is when we click on the remove button after adding a chosen image/icon),
* we append the default article icon (fsmsp_cp.fsmsp_article_icon) to the targetObjArt.
*/
if ( mutation.target.childNodes.length == 1 ) {
targetObjArt.append( fsmsp_cp.fsmsp_article_icon );
}
}
} );
}
// 2- MutationObserver for category icon.
var targetObjCat = $( '.fsmsp-category-image' ); // Get the Object element NOT the Node.
var observerCat = new MutationObserver(callbackCategory);
var obsConfigCat = { childList: true };
targetObjCat.each( function() {
observerCat.observe(this, obsConfigCat);
} );
function callbackCategory( mutationList ) {
mutationList.forEach( function( mutation ) {
if ( mutation.type == 'childList' ) {
if ( mutation.target.childNodes.length == 1 ) {
targetObjCat.append( fsmsp_cp.fsmsp_category_icon );
}
}
} );
}
// 3- MutationObserver for tag icon.
var targetObjTag = $( '.fsmsp-tag-image' ); // Get the Object element NOT the Node.
var observerTag = new MutationObserver(callbackTag);
var obsConfigTag = { childList: true };
targetObjTag.each( function() {
observerTag.observe(this, obsConfigTag);
} );
function callbackTag( mutationList ) {
mutationList.forEach( function( mutation ) {
if ( mutation.type == 'childList' ) {
if ( mutation.target.childNodes.length == 1 ) {
targetObjTag.append( fsmsp_cp.fsmsp_tag_icon );
}
}
} );
}
} )( jQuery );
-92
View File
@@ -50,95 +50,3 @@ let fsmspBackgrounds = document.querySelectorAll('#morphsearch, div.morphsearch-
fsmspLinks = document.querySelectorAll('div.dummy-media-object h3 a');
// Output default options' values !
if (fsmsp_vars.fsmsp_options_does_not_exists) {
// Output fsmsp_main_background_color.
for (let fsmspBackground of fsmspBackgrounds) {
fsmspBackground.style.backgroundColor = '#f1f1f1';
}
// Output fsmsp_close_icon_color.
document.querySelector('span.morphsearch-close').style.setProperty("--morphsearch-close-background", '#000');
// Output fsmsp_search_text_color.
morphSearchInputField.style.setProperty("--morphsearch-input-placeholder", '#c2c2c2');
// Output fsmsp_input_text_color.
morphSearchInputField.style.color = '#ec5a62';
// Output fsmsp_magnifier_submit_color.
document.querySelector('#Capa_1 path').setAttribute('fill', '#ddd');
// Output fsmsp_headings_color.
for (let fsmspHeading of fsmspHeadings) {
fsmspHeading.style.color = '#c2c2c2';
}
for (let fsmspColumn of fsmspColumns) {
// Output fsmsp_columns_background_color.
fsmspColumn.style.background = '#ebebeb';
fsmspColumn.addEventListener("mouseover", function () {
// Output fsmsp_columns_hover_background_color.
this.style.background = '#e4e4e5';
// Output fsmsp_links_hover_color.
this.lastElementChild.firstElementChild.style.color = '#ec5a62';
});
fsmspColumn.addEventListener("mouseout", function () {
this.style.background = '#ebebeb';
// Output fsmsp_links_color.
this.lastElementChild.firstElementChild.style.color = '#b2b2b2';
});
}
// Output fsmsp_links_color.
for (let fsmspLink of fsmspLinks) {
fsmspLink.style.color = '#b2b2b2';
}
// Output fsmsp_search_form_text.
morphSearchInputField.placeholder = 'Search...';
} else {
for (let fsmspBackground of fsmspBackgrounds) {
fsmspBackground.style.backgroundColor = fsmsp_vars.fsmsp_main_background_color;
}
document.querySelector('span.morphsearch-close').style.setProperty("--morphsearch-close-background", fsmsp_vars.fsmsp_close_icon_color);
morphSearchInputField.style.setProperty("--morphsearch-input-placeholder", fsmsp_vars.fsmsp_search_text_color);
morphSearchInputField.style.color = fsmsp_vars.fsmsp_input_text_color;
document.querySelector('#Capa_1 path').setAttribute('fill', fsmsp_vars.fsmsp_magnifier_submit_color);
for (let fsmspHeading of fsmspHeadings) {
fsmspHeading.style.color = fsmsp_vars.fsmsp_headings_color;
}
for (let fsmspColumn of fsmspColumns) {
fsmspColumn.style.background = fsmsp_vars.fsmsp_columns_background_color;
fsmspColumn.addEventListener("mouseover", function () {
this.style.background = fsmsp_vars.fsmsp_columns_hover_background_color;
this.lastElementChild.firstElementChild.style.color = fsmsp_vars.fsmsp_links_hover_color;
});
fsmspColumn.addEventListener("mouseout", function () {
this.style.background = fsmsp_vars.fsmsp_columns_background_color;
this.lastElementChild.firstElementChild.style.color = fsmsp_vars.fsmsp_links_color
});
}
for (let fsmspLink of fsmspLinks) {
fsmspLink.style.color = fsmsp_vars.fsmsp_links_color;
}
morphSearchInputField.placeholder = fsmsp_vars.fsmsp_search_form_text;
}
+3 -189
View File
@@ -58,33 +58,6 @@ class Full_Screen_Morphing_Search {
// Load Javascript.
wp_enqueue_script( $this->plugin->name, $this->plugin->url . 'assets/js/full-screen-morphing-search.js', array( 'jquery' ), '1.0', true );
// Associative Array 'fsmsp_options'.
$fsmsp_options = get_option( 'fsmsp_options' );
// Declare PHP Variables to be passed to JS.
$fsmsp_options_does_not_exists = ( null === get_option( 'fsmsp_options', null ) ) ? true : false;
// 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_background_color' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_main_background_color'] ) ? $fsmsp_options['fsmsp_main_background_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' ) ),
'fsmsp_search_form_text' => esc_attr( ( ! empty( $fsmsp_options['fsmsp_search_form_text'] ) ? $fsmsp_options['fsmsp_search_form_text'] : 'Search&hellip;' ) ),
)
);
}
/**
@@ -96,15 +69,14 @@ class Full_Screen_Morphing_Search {
*/
public function full_screen_morphing_search_output_morphing_search() {
$fsmsp_options = get_option( 'fsmsp_options' ); // Associative Array 'fsmsp_options'.
?>
<div id="morphsearch" class="morphsearch">
<span class="morphsearch-close"></span>
<form role="search" class="morphsearch-form" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input required id="morphsearch-input" type="search" class="morphsearch-input" name="s" placeholder="" value=""/>
<input required id="morphsearch-input" type="search" class="morphsearch-input" name="s" placeholder="Tìm sản phẩm..." value=""/>
<button id="morphsearch-submit" class="morphsearch-submit" type="submit">
<?php
<?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.
@@ -113,168 +85,10 @@ class Full_Screen_Morphing_Search {
</button>
</form>
<div class="morphsearch-content">
<div class="dummy-column">
<h2 class="fsmsp-rp">Recent Posts</h2>
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => '5',
'ignore_sticky_posts' => 1,
);
$fsmsprp = new WP_Query( $args );
while ( $fsmsprp->have_posts() ) :
$fsmsprp->the_post();
?>
<div class="dummy-media-object">
<?php
if ( has_post_thumbnail() ) {
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php
} else {
?>
<a href="<?php the_permalink(); ?>" class="fsmsp-article-link" title="<?php the_title_attribute(); ?>">
<?php
}
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'full-screen-morphing-search-plugin-thumb', array( 'class' => 'round' ) );
} else {
if ( empty( $fsmsp_options['fsmsp_article_icon'] ) ) {
echo '<img src="' . esc_url( plugins_url( 'assets/img/article.png', __FILE__ ) ) . '" >';
} else {
full_screen_morphing_search_article_icon();
}
}
?>
</a>
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<div class="dummy-column">
<h2 class="fsmsp-tc">Top Categories</h2>
<?php
$fsmspcats = get_categories();
if ( empty( $fsmspcats ) ) {
return;
}
$fsmsptc_counts = array();
$fsmspcat_links = array();
foreach ( (array) $fsmspcats as $fsmspcat ) {
$fsmsptc_counts[ $fsmspcat->name ] = $fsmspcat->count;
$fsmspcat_links[ $fsmspcat->name ] = get_category_link( $fsmspcat->term_id );
}
asort( $fsmsptc_counts );
$fsmsptc_counts = array_reverse( $fsmsptc_counts, true );
$i = 0;
foreach ( $fsmsptc_counts as $fsmspcat => $fsmsptc_count ) {
$i++;
$fsmspcat_link = esc_url( $fsmspcat_links[ $fsmspcat ] );
$fsmspcat = str_replace( ' ', '&nbsp;', esc_html( $fsmspcat ) );
if ( $i < 6 ) {
?>
<div class="dummy-media-object fsmsp-tc-child">
<span class="fsmsp-category-image">
<?php
if ( empty( $fsmsp_options['fsmsp_category_icon'] ) ) {
echo '<img src="' . esc_url( plugins_url( 'assets/img/category.png', __FILE__ ) ) . '" >';
} else {
full_screen_morphing_search_category_icon();
}
?>
</span>
<?php
print "<h3><a href='" . esc_url( $fsmspcat_link ) . "'>" . esc_html( $fsmspcat . ' (' . $fsmsptc_count . ')' ) . '</a></h3>';
?>
</div>
<?php
}
}
?>
</div>
<div class="dummy-column">
<h2 class="fsmsp-tt">Top Tags</h2>
<?php
$fsmsptags = get_tags();
if ( empty( $fsmsptags ) ) {
return;
}
$fsmsptt_counts = array();
$fsmsptag_links = array();
foreach ( (array) $fsmsptags as $fsmsptag ) {
$fsmsptt_counts[ $fsmsptag->name ] = $fsmsptag->count;
$fsmsptag_links[ $fsmsptag->name ] = get_tag_link( $fsmsptag->term_id );
}
asort( $fsmsptt_counts );
$fsmsptt_counts = array_reverse( $fsmsptt_counts, true );
$i = 0;
foreach ( $fsmsptt_counts as $fsmsptag => $fsmsptt_count ) {
$i++;
$tag_link = esc_url( $fsmsptag_links[ $fsmsptag ] );
$fsmsptag = str_replace( ' ', '&nbsp;', esc_html( $fsmsptag ) );
if ( $i < 6 ) {
?>
<div class="dummy-media-object fsmsp-tt-child">
<span class="fsmsp-tag-image">
<?php
if ( empty( $fsmsp_options['fsmsp_tag_icon'] ) ) {
echo '<img src="' . esc_url( plugins_url( 'assets/img/tag.png', __FILE__ ) ) . '" >';
} else {
full_screen_morphing_search_tag_icon();
}
?>
</span>
<?php
print "<h3><a href='" . esc_url( $tag_link ) . "'>" . esc_html( $fsmsptag . ' (' . $fsmsptt_count . ')' ) . '</a></h3>';
?>
</div>
<?php
}
}
?>
</div>
</div><!-- .morphsearch-content -->
</div><!-- #morphsearch.morphsearch -->
<?php
$fsmsp_ac = array( // Autocomplete.
'post_type' => array( 'post', 'page' ),
'post_status' => 'publish',
'posts_per_page' => -1, // all posts and pages.
);
$posts = get_posts( $fsmsp_ac );
if ( $posts ) :
foreach ( $posts as $k => $post ) {
$source[ $k ]['ID'] = $post->ID;
$source[ $k ]['label'] = $post->post_title; // The name of the post.
$source[ $k ]['permalink'] = get_permalink( $post->ID );
}
?>
<script type="text/javascript">
let posts = <?php echo wp_json_encode( array_values( $source ) ); ?>;
new autoComplete({
data: {
src: posts,
key: ["label"],
cache: false
},
selector: "#morphsearch-input",
onSelection: feedback => {
let permalink = feedback.selection.value.permalink; // Get permalink from the datasource.
window.location.replace(permalink);
}
});
</script>
<?php
endif;
}
-673
View File
@@ -5,51 +5,6 @@
* @package WordPress
*/
/**
* Register a new image size for the plugin.
*/
function full_screen_morphing_search_thumb() {
add_image_size( 'full-screen-morphing-search-plugin-thumb', 50, 50, true );
}
add_action( 'init', 'full_screen_morphing_search_thumb' );
/**
* Load autoComplete scripts in header.
*
* @since 3.3
*/
function fsmsp_load_autocomplete() {
wp_enqueue_script( 'autocomplete', plugins_url( 'assets/js/autoComplete.min.js', __FILE__ ), array(), '8.2.1', false );
}
add_action( 'wp_enqueue_scripts', 'fsmsp_load_autocomplete' );
/**
* This outputs the javascript needed to automate the live settings preview.
* Also keep in mind that this function isn't necessary unless your settings
* are using 'transport'=>'postMessage' instead of the default 'transport'
* => 'refresh'.
*
* Used by hook: 'customize_preview_init'
*/
function fsmsp_customize_preview_js() {
$handle = 'fsmsp-customize-preview';
$src = plugins_url( 'assets/js/customize-preview.js', __FILE__ );
$deps = array( 'jquery', 'customize-preview' );
$ver = '0.1';
$in_footer = true;
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
wp_localize_script(
'fsmsp-customize-preview',
'fsmsp_cp',
array(
'fsmsp_article_icon' => '<img src="' . esc_url( plugins_url( 'assets/img/article.png', __FILE__ ) ) . '">',
'fsmsp_category_icon' => '<img src="' . esc_url( plugins_url( 'assets/img/category.png', __FILE__ ) ) . '">',
'fsmsp_tag_icon' => '<img src="' . esc_url( plugins_url( 'assets/img/tag.png', __FILE__ ) ) . '">',
'fsmsp_placeholder_text' => esc_attr( 'Search&hellip;' ),
)
);
}
add_action( 'customize_preview_init', 'fsmsp_customize_preview_js' );
if ( ! function_exists( 'full_screen_morphing_search_add_svg_tags' ) ) {
/**
@@ -84,631 +39,3 @@ if ( ! function_exists( 'full_screen_morphing_search_add_svg_tags' ) ) {
}
add_filter( 'wp_kses_allowed_html', 'full_screen_morphing_search_add_svg_tags' );
}
/**
* Add our Customizer content.
*
* @param WP_Customize_Manager $wp_customize Manager instance.
*/
function full_screen_morphing_search_customize_register( $wp_customize ) {
// Add FSMS Plugin Panel.
$wp_customize->add_panel(
'fsmsp_panel',
array(
'title' => __( 'FSMS Plugin', 'full-screen-morphing-search' ),
'priority' => 160,
)
);
// Add Color Section.
$wp_customize->add_section(
'fsmsp_color',
array(
'title' => __( 'FSMS Colors', 'full-screen-morphing-search' ),
'priority' => 5,
'panel' => 'fsmsp_panel',
)
);
// =====================================
// = FSMS Main Background Color Picker =
// =====================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_main_background_color]',
array(
'default' => '#f1f1f1',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_main_background_color]',
array(
'label' => __( 'FSMS Main Background Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the main background color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_main_background_color]',
)
)
);
// =====================
// = FSMS Close Color. =
// =====================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_close_icon_color]',
array(
'default' => '#000',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_close_icon_color]',
array(
'label' => __( 'FSMS Close Icon Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the close icon color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_close_icon_color]',
)
)
);
// =========================
// = FSMS Search... Color. =
// =========================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_search_text_color]',
array(
'default' => '#c2c2c2',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_search_text_color]',
array(
'label' => __( 'FSMS Search&hellip; text Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the search&hellip; text color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_search_text_color]',
)
)
);
// ==========================
// = FSMS Input Text Color. =
// ==========================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_input_text_color]',
array(
'default' => '#ec5a62',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_input_text_color]',
array(
'label' => __( 'FSMS Input Text Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the input text color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_input_text_color]',
)
)
);
// ================================
// = FSMS Magnifier Submit Color. =
// ================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_magnifier_submit_color]',
array(
'default' => '#ddd',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_magnifier_submit_color]',
array(
'label' => __( 'FSMS Magnifier Submit Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the magnifier submit color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_magnifier_submit_color]',
)
)
);
// ========================
// = FSMS Headings Color. =
// ========================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_headings_color]',
array(
'default' => '#c2c2c2',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_headings_color]',
array(
'label' => __( 'FSMS Headings Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the headings color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_headings_color]',
)
)
);
// ==================================
// = FSMS Columns Background Color. =
// ==================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_columns_background_color]',
array(
'default' => '#ebebeb',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_columns_background_color]',
array(
'label' => __( 'FSMS Columns Background Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the columns background color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_columns_background_color]',
'input_attrs' => array( // Optional.
'class' => 'color-picker',
'data-alpha' => true,
),
)
)
);
// ========================================
// = FSMS Columns Hover Background Color. =
// ========================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_columns_hover_background_color]',
array(
'default' => '#e4e4e5',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_columns_hover_background_color]',
array(
'label' => __( 'FSMS Columns Hover Background Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the columns hover background color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_columns_hover_background_color]',
)
)
);
// =====================
// = FSMS Links Color. =
// =====================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_links_color]',
array(
'default' => '#b2b2b2',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_links_color]',
array(
'label' => __( 'FSMS Links Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the links color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_links_color]',
)
)
);
// ===========================
// = FSMS Links Hover Color. =
// ===========================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_links_hover_color]',
array(
'default' => '#ec5a62',
'sanitize_callback' => 'sanitize_hex_color',
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'fsmsp_options[fsmsp_links_hover_color]',
array(
'label' => __( 'FSMS Links Hover Color', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the links hover color', 'full-screen-morphing-search' ),
'section' => 'fsmsp_color',
'settings' => 'fsmsp_options[fsmsp_links_hover_color]',
)
)
);
// Add Search Form Section.
$wp_customize->add_section(
'fsmsp_search_form',
array(
'title' => __( 'FSMS Search Form', 'full-screen-morphing-search' ),
'priority' => 10,
'panel' => 'fsmsp_panel',
)
);
// ==========================
// = FSMS Search Form Text. =
// ==========================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_search_form_text]',
array(
'default' => '',
'sanitize_callback' => 'wp_filter_nohtml_kses', // Strips all HTML from a text string.
'capability' => 'edit_theme_options',
'type' => 'option',
'transport' => 'postMessage',
)
);
$wp_customize->add_control(
'fsmsp_options[fsmsp_search_form_text]',
array(
'label' => __( 'FSMS Search Form Text', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the search form text. If leaved blank, it will return to original value !', 'full-screen-morphing-search' ),
'section' => 'fsmsp_search_form',
'settings' => 'fsmsp_options[fsmsp_search_form_text]',
'type' => 'text',
'input_attrs' => array(
'placeholder' => __( 'Search&hellip;', 'full-screen-morphing-search' ),
),
)
);
// Add Icons Section.
$wp_customize->add_section(
'fsmsp_icons',
array(
'title' => __( 'FSMS Icons', 'full-screen-morphing-search' ),
'priority' => 15,
'panel' => 'fsmsp_panel',
)
);
// ======================
// = FSMS Article Icon. =
// ======================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_article_icon]',
array(
'default' => '',
'type' => 'option',
'transport' => 'postMessage',
'sanitize_callback' => 'esc_url_raw',
)
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'fsmsp_options[fsmsp_article_icon]',
array(
'label' => __( 'FSMS Article Icon', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the article icon.', 'full-screen-morphing-search' ),
'section' => 'fsmsp_icons',
'settings' => 'fsmsp_options[fsmsp_article_icon]',
'button_labels' => array(
'select' => __( 'Select Article Icon' ),
'change' => __( 'Change Article Icon' ),
'remove' => __( 'Remove' ),
'frame_title' => __( 'Select Article Icon' ),
'frame_button' => __( 'Choose Article Icon' ),
),
)
)
);
$wp_customize->selective_refresh->add_partial(
'fsmsp_options[fsmsp_article_icon]',
array(
'selector' => 'div.dummy-media-object a.fsmsp-article-link',
'settings' => array( 'fsmsp_options[fsmsp_article_icon]' ),
'render_callback' => 'full_screen_morphing_search_article_icon',
)
);
// ====================================
// = FSMS Article Icon/Image Classes. =
// ====================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_article_i_classes]',
array(
'default' => true,
'type' => 'option',
'transport' => 'postMessage',
'sanitize_callback' => 'wp_validate_boolean',
)
);
$wp_customize->add_control(
'fsmsp_options[fsmsp_article_i_classes]',
array(
'label' => __( 'Article Icon/Image Round or Not ?!', 'full-screen-morphing-search' ),
'section' => 'fsmsp_icons',
'settings' => 'fsmsp_options[fsmsp_article_i_classes]',
'type' => 'checkbox',
)
);
$wp_customize->selective_refresh->add_partial(
'fsmsp_options[fsmsp_article_i_classes]',
array(
'selector' => 'div.dummy-media-object a.fsmsp-article-link',
'settings' => array( 'fsmsp_options[fsmsp_article_i_classes]' ),
'render_callback' => 'full_screen_morphing_search_article_icon',
)
);
// =======================
// = FSMS Category Icon. =
// =======================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_category_icon]',
array(
'default' => '',
'type' => 'option',
'transport' => 'postMessage',
'sanitize_callback' => 'esc_url_raw',
)
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'fsmsp_options[fsmsp_category_icon]',
array(
'label' => __( 'FSMS Category Icon', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the category icon.', 'full-screen-morphing-search' ),
'section' => 'fsmsp_icons',
'settings' => 'fsmsp_options[fsmsp_category_icon]',
'button_labels' => array(
'select' => __( 'Select Category Icon' ),
'change' => __( 'Change Category Icon' ),
'remove' => __( 'Remove' ),
'frame_title' => __( 'Select Category Icon' ),
'frame_button' => __( 'Choose Category Icon' ),
),
)
)
);
$wp_customize->selective_refresh->add_partial(
'fsmsp_options[fsmsp_category_icon]',
array(
'selector' => 'span.fsmsp-category-image',
'settings' => array( 'fsmsp_options[fsmsp_category_icon]' ),
'render_callback' => 'full_screen_morphing_search_category_icon',
)
);
// =====================================
// = FSMS Category Icon/Image Classes. =
// =====================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_category_i_classes]',
array(
'default' => true,
'type' => 'option',
'transport' => 'postMessage',
'sanitize_callback' => 'wp_validate_boolean',
)
);
$wp_customize->add_control(
'fsmsp_options[fsmsp_category_i_classes]',
array(
'label' => __( 'Category Icon/Image Round or Not ?!', 'full-screen-morphing-search' ),
'section' => 'fsmsp_icons',
'settings' => 'fsmsp_options[fsmsp_category_i_classes]',
'type' => 'checkbox',
)
);
$wp_customize->selective_refresh->add_partial(
'fsmsp_options[fsmsp_category_i_classes]',
array(
'selector' => 'span.fsmsp-category-image',
'settings' => array( 'fsmsp_options[fsmsp_category_i_classes]' ),
'render_callback' => 'full_screen_morphing_search_category_icon',
)
);
// ==================
// = FSMS Tag Icon. =
// ==================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_tag_icon]',
array(
'default' => '',
'type' => 'option',
'transport' => 'postMessage',
'sanitize_callback' => 'esc_url_raw',
)
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'fsmsp_options[fsmsp_tag_icon]',
array(
'label' => __( 'FSMS Tag Icon', 'full-screen-morphing-search' ),
'description' => esc_attr__( 'Change the tag icon.', 'full-screen-morphing-search' ),
'section' => 'fsmsp_icons',
'settings' => 'fsmsp_options[fsmsp_tag_icon]',
'button_labels' => array(
'select' => __( 'Select Tag Icon' ),
'change' => __( 'Change Tag Icon' ),
'remove' => __( 'Remove' ),
'frame_title' => __( 'Select Tag Icon' ),
'frame_button' => __( 'Choose Tag Icon' ),
),
)
)
);
$wp_customize->selective_refresh->add_partial(
'fsmsp_options[fsmsp_tag_icon]',
array(
'selector' => 'span.fsmsp-tag-image',
'settings' => array( 'fsmsp_options[fsmsp_tag_icon]' ),
'render_callback' => 'full_screen_morphing_search_tag_icon',
)
);
// ================================
// = FSMS Tag Icon/Image Classes. =
// ================================
$wp_customize->add_setting(
'fsmsp_options[fsmsp_tag_i_classes]',
array(
'default' => true,
'type' => 'option',
'transport' => 'postMessage',
'sanitize_callback' => 'wp_validate_boolean',
)
);
$wp_customize->add_control(
'fsmsp_options[fsmsp_tag_i_classes]',
array(
'label' => __( 'Tag Icon/Image Round or Not ?!', 'full-screen-morphing-search' ),
'section' => 'fsmsp_icons',
'settings' => 'fsmsp_options[fsmsp_tag_i_classes]',
'type' => 'checkbox',
)
);
$wp_customize->selective_refresh->add_partial(
'fsmsp_options[fsmsp_tag_i_classes]',
array(
'selector' => 'span.fsmsp-tag-image',
'settings' => array( 'fsmsp_options[fsmsp_tag_i_classes]' ),
'render_callback' => 'full_screen_morphing_search_tag_icon',
)
);
}
add_action( 'customize_register', 'full_screen_morphing_search_customize_register' );
/**
* Render article icon for the selective refresh partial.
*/
function full_screen_morphing_search_article_icon() {
$image_url = get_option( 'fsmsp_options' )['fsmsp_article_icon'];
$attachment_id = attachment_url_to_postid( $image_url ); // Tries to convert an attachment URL into a post ID.
$article_i_classes = get_option( 'fsmsp_options' )['fsmsp_article_i_classes'];
$classes = '';
if ( ! empty( $article_i_classes ) ) {
$classes = 'round fsmsp-article-icon';
} else {
$classes = 'fsmsp-article-icon';
}
echo wp_get_attachment_image( $attachment_id, 'thumbnail', '', array( 'class' => $classes ) ); // Get an HTML img element representing an image attachment.
}
/**
* Render category icon for the selective refresh partial.
*/
function full_screen_morphing_search_category_icon() {
$imagecat_url = get_option( 'fsmsp_options' )['fsmsp_category_icon'];
$attachmentcat_id = attachment_url_to_postid( $imagecat_url );
$category_i_classes = get_option( 'fsmsp_options' )['fsmsp_category_i_classes'];
$classes = '';
if ( ! empty( $category_i_classes ) ) {
$classes = 'round fsmsp-category-icon';
} else {
$classes = 'fsmsp-category-icon';
}
echo wp_get_attachment_image( $attachmentcat_id, 'thumbnail', '', array( 'class' => $classes ) );
}
/**
* Render tag icon for the selective refresh partial.
*/
function full_screen_morphing_search_tag_icon() {
$imagetag_url = get_option( 'fsmsp_options' )['fsmsp_tag_icon'];
$attachmenttag_id = attachment_url_to_postid( $imagetag_url );
$tag_i_classes = get_option( 'fsmsp_options' )['fsmsp_tag_i_classes'];
$classes = '';
if ( ! empty( $tag_i_classes ) ) {
$classes = 'round fsmsp-tag-icon';
} else {
$classes = 'fsmsp-tag-icon';
}
echo wp_get_attachment_image( $attachmenttag_id, 'thumbnail', '', array( 'class' => $classes ) );
}